ยซ   2025/02   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Archives
Recent Posts
02-01 21:40

Today
Total

Recent Comments
๊ด€๋ฆฌ ๋ฉ”๋‰ด

์—ฐ์˜ ๊ธฐ๋ก ๐Ÿช

HTML ๊ธฐ์ดˆ ๋‚ด์šฉ ์ •๋ฆฌ - 4 ๋ณธ๋ฌธ

WEB/HTML+CSS+JS

HTML ๊ธฐ์ดˆ ๋‚ด์šฉ ์ •๋ฆฌ - 4

kite707 2020. 12. 6. 15:03

๋งˆ์ง€๋ง‰! ์ด์ œ HTML์˜ ํ‘œ, form ๋ถ€๋ถ„์„ ์ •๋ฆฌํ•  ๊ฒƒ์ด๋‹ค.

 


HTML - ํ‘œ

https://opentutorials.org/course/2039/10949

 

ํ‘œ - table - ์ƒํ™œ์ฝ”๋”ฉ

ํ‘œ - table 2015-12-06 10:34:20 ์˜ˆ์ œ ์ด๋ฆ„ ์„ฑ๋ณ„ ์ฃผ์†Œ ์ตœ์ง„ํ˜ ๋‚จ ์ฒญ์ฃผ ์ตœ์œ ๋นˆ ์—ฌ ์ฒญ์ฃผ ์˜ˆ์ œ ์ด๋ฆ„ ์„ฑ๋ณ„ ์ฃผ์†Œ ํšŒ๋น„ ์ตœ์ง„ํ˜ ๋‚จ ์ฒญ์ฃผ 1000 ์ตœ์œ ๋นˆ ์—ฌ ์ฒญ์ฃผ 500 ํ•ฉ๊ณ„ 1500 ์˜ˆ์ œ ์ด๋ฆ„ ์„ฑ๋ณ„ ์ฃผ์†Œ ํšŒ๋น„ ์ตœ์ง„ํ˜ ๋‚จ ์ฒญ์ฃผ

opentutorials.org

์šฐ์„  ์˜ˆ์ œ 1์„ ๋ถ„์„ํ•ด๋ณด์ž.

์™„์„ฑ๋œ ๋ชจ์Šต!

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <tr>
        <td>์ด๋ฆ„</td>     <td>์„ฑ๋ณ„</td>   <td>์ฃผ์†Œ</td>
    </tr>
    <tr>
        <td>์ตœ์ง„ํ˜</td>  <td>๋‚จ</td>      <td >์ฒญ์ฃผ</td>
    </tr>
    <tr>
        <td>์ตœ์œ ๋นˆ</td>  <td>์—ฌ</td>      <td>์ฒญ์ฃผ</td>
    </tr>
</table>
</body>
</html>

ํ‘œ๋ฅผ ๋งŒ๋“œ๋ ค๋ฉด ์šฐ์„  ์ „์ฒด๋ฅผ <table></table>ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ ์ฃผ์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฐ™์€ ํ–‰์˜ ๋ฐ์ดํ„ฐ๋“ค์€ <tr></tr>ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ฃผ์–ด์•ผ ํ•œ๋‹ค.(์—ฌ๊ธฐ์„œ r์€ row๋ฅผ ์˜๋ฏธํ•œ๋‹ค.) ๊ทธ๋ฆฌ๊ณ  ๊ฐ ๋ฐ์ดํ„ฐ๋“ค์€ <td></td>๋กœ ๊ฐ์‹ธ์ค€๋‹ค. 

border์€ ํ‘œ์˜ ํ…Œ๋‘๋ฆฌ๋ฅผ ์˜๋ฏธํ•˜๋Š”๋ฐ ์ˆซ์ž๊ฐ€ ํด์ˆ˜๋ก ๊ตต๊ธฐ๊ฐ€ ๊ตต์–ด์ง„๋‹ค.

border = 10์œผ๋กœ ํ•œ ๋ชจ์Šต

์—ฌ๊ธฐ์„œ ์ด๋ฆ„ ์„ฑ๋ณ„ ์ฃผ์†Œ ์™€ ๋ฐ‘ ๋‚ด์šฉ์€ ์„ฑ๊ฒฉ์ด ๋‹ค๋ฅด๋‹ค. ์ด๊ฒƒ์„ ํƒœ๊ทธ๋กœ ํ‘œํ˜„ํ•ด์ฃผ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋Š”๋ฐ thead, tbodyํƒœ๊ทธ์ด๋‹ค. ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ฐ™์€ ๋‚ด์šฉ๋ผ๋ฆฌ ๋ฌถ์–ด์ฃผ๋ฉด ๋œ๋‹ค!

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>์ด๋ฆ„</th>     <th>์„ฑ๋ณ„</th>   <th>์ฃผ์†Œ</th> <th>ํšŒ๋น„</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>์ตœ์ง„ํ˜</td>  <td>๋‚จ</td>      <td >์ฒญ์ฃผ</td> <td>1000</td>
        </tr>
        <tr>
            <td>์ตœ์œ ๋นˆ</td>  <td>์—ฌ</td>      <td>์ฒญ์ฃผ</td> <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>ํ•ฉ๊ณ„</td>  <td></td>      <td></td> <td>1500</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

head์™€ foot๋“ฑ์€ ์ˆœ์„œ๋ฅผ ๋ฐ”๊ฟ”๋„ ํ‘œ์˜ ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€Œ์ง€ ์•Š๋Š”๋‹ค. ์œ„ ๋‚ด์šฉ์„ ์ ์šฉํ•œ ์›นํŽ˜์ด์ง€์˜ ๋ชจ์Šต์€ ์•„๋ž˜์™€ ๊ฐ™์•„์ง„๋‹ค.

 

 

์•„๋ž˜๋Š” ์„ธ๋ฒˆ์งธ ์˜ˆ์ œ์˜ ์ฝ”๋“œ์ธ๋ฐ ์ง๊ด€์ ์œผ๋กœ ํ–‰๊ณผ ํ–‰์„ ํ•ฉ์นœ๋‹ค. ์—ด๊ณผ ์—ด์„ ํ•ฉ์นœ๋‹ค๋Š” ๊ฐœ๋…์œผ๋กœ ์ดํ•ดํ•˜๋ฉด ๋œ๋‹ค.

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>์ด๋ฆ„</th>     <th>์„ฑ๋ณ„</th>   <th>์ฃผ์†Œ</th> <th>ํšŒ๋น„</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>์ตœ์ง„ํ˜</td>  <td>๋‚จ</td>      <td rowspan="2">์ฒญ์ฃผ</td> <td>1000</td>
        </tr>
        <tr>
            <td>์ตœ์œ ๋นˆ</td>  <td>์—ฌ</td>      <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">ํ•ฉ๊ณ„</td>      <td>1500</td>
        </tr>
    </tfoot>
 
</table>
</body>
</html>

์ฆ‰

์•„๋ž˜์™€ ๊ฐ™์ด ๋˜๋‹ˆ๊นŒ ํ–‰๊ณผ ํ–‰์„ ํ•ฉ์น˜๋ฉด ์„ธ๋กœ๋ณ‘ํ•ฉ, ์—ด๊ณผ ์—ด์„ ํ•ฉ์น˜๋ฉด ๊ฐ€๋กœ ๋ณ‘ํ•ฉ์ด ๋˜๋Š” ๊ฒƒ์ด๋‹ค.


HTML - form

opentutorials.org/course/2039/10944

 

์ž…๋ ฅ์–‘์‹ - form - ์ƒํ™œ์ฝ”๋”ฉ

์ž…๋ ฅ์–‘์‹ - form 2015-12-06 10:16:50 ์˜ˆ์ œ ์•„์ด๋”” : ๋น„๋ฐ€๋ฒˆํ˜ธ : ์ฃผ์†Œ : ๋“ฑ์žฅ์‹œ๊ธฐ html2

opentutorials.org

์™„์„ฑ๋œ ์›นํŽ˜์ด์ง€์˜ ๋ชจ์Šต์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
    <p>์•„์ด๋”” : <input type="text" name="id"></p>
    <p>๋น„๋ฐ€๋ฒˆํ˜ธ : <input type="password" name="pwd"></p>
    <p>์ฃผ์†Œ : <input type="text" name="address"></p>
    <input type="submit">
</form>
</body>
</html>

์˜ˆ์ œ์˜ ์ฝ”๋“œ๋Š” ์œ„์™€ ๊ฐ™๋‹ค. ์—ฌ๊ธฐ์„œ input type๋ฅผ text๋กœ ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ž…๋ ฅํ•œ ๊ฐ’์ด ๋ณด์ด๊ณ , password๋กœ ํ•˜๋ฉด ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ถ€๋ถ„๊ณผ ๊ฐ™์ด ์ž…๋ ฅํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์—†๊ฒŒ ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ œ์ถœ๋ฒ„ํŠผ์€ <input type="submit">์ด๋ ‡๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. 

์ด๋ ‡๊ฒŒ ์ž…๋ ฅํ•˜๊ณ  ์ œ์ถœ์„ ๋ˆ„๋ฅด๋ฉด?

์ด๋ ‡๊ฒŒ ๋งํฌ์— ๋‚ด๊ฐ€ ์ž…๋ ฅํ•œ ๊ฒƒ์ด ์ž˜ ์ „๋‹ฌ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.