HTML์„ ๊ณต๋ถ€ํ•˜๊ณ  ์ฒ˜์Œ์œผ๋กœ ํ™œ์šฉํ•ด๋ณด๊ธฐ ์œ„ํ•ด ๊ฐ„๋‹จํ•œ ์‹ค์Šต์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜ ๋งํฌ์—์„œ ์ตœํ•˜๋‹จ์˜ Quiz๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.
์‹ค์Šต ์˜ˆ์ œ ๋ชจ์Œ | HTML ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ์ดˆ

Quiz-1) ํ…Œ์ด๋ธ” ๋ณ‘ํ•ฉ

์ฝ”๋“œ

<!doctype html>
<html>
    <head>
        <title>Quiz-1) ํ…Œ์ด๋ธ” ๋ณ‘ํ•ฉ</title>
    </head>
    <body>
        <table width="300px" height="300px" border="1">
            <tr>
                <td>1</td>
                <td>2</td>
                <td rowspan="2">3</td>
                <td>4</td>
            </tr>
            <tr>
                <td colspan="2">5</td>
                <td rowspan="2">6</td>
            </tr>
            <tr>
                <td>7</td>
                <td colspan="2">8</td>
            </tr>
        </table>
    </body>
</html>

๊ฒฐ๊ณผ

Quiz-2) ๊ฐ€์ž… ์‹ ์ฒญ์„œ ๋งŒ๋“ค๊ธฐ

์ฝ”๋“œ - ์ˆ˜์ • ์ „

<!doctype html>
<html>
    <head>
        <title>Quiz-2) ๊ฐ€์ž… ์‹ ์ฒญ์„œ ๋งŒ๋“ค๊ธฐ</title>
    </head>
    <body>
        <form action=""> 
        First name: <br> <input type="text"> <br>
        Last name: <br> <input type="text"> <br>
        Email: <br> <input type="text"> <br>
        Gender: 
        <input type="radio" name="Gender" value="Male"> Male, 
        <input type="radio" name="Gender" value="Female"> Female <br>
        Favorite: 
        <input type="checkbox" name="Favorite" value="HTML"> HTML, 
        <input type="checkbox" name="Favorite" value="Java"> Java, 
        <input type="checkbox" name="Favorite" value="PHP"> PHP <br>
        University: <select name ="University">
            <option value="Gachon University">Gachon University</option>
        </select> <br>
        Color: <input type="color" value="000000"> <br>
        Date: <input type ="text" placeholder="์—ฐ๋„-์›”-์ผ">
        </form>
        <br> <br>
        <input type="submit" value="Registration">
    </body>
</html>

์ฝ”๋“œ - ์ˆ˜์ • ํ›„

์Šคํ„ฐ๋””์›๋“ค๊ณผ ์ฝ”๋“œ๋ฅผ ๋น„๊ตํ•ด๋ณธ ํ›„, <input>์˜ type ์†์„ฑ๊ฐ’์œผ๋กœ date๋ฅผ ์ด์šฉํ•˜๋ฉด ๋‚ ์งœ๋ฅผ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋œ ํ›„ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์ˆ˜์ •ํ•œ ๋ถ€๋ถ„์„ ์ฃผ์„์œผ๋กœ ํ‘œ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค.

<!doctype html>
<html>
    <head>
        <title>Quiz-2) ๊ฐ€์ž… ์‹ ์ฒญ์„œ ๋งŒ๋“ค๊ธฐ</title>
    </head>
    <body>
        <form action=""> 
        First name: <br> <input type="text" value="First name"> <br>
        Last name: <br> <input type="text" value="Last name"> <br>
        Email: <br> <input type="text"> <br>
        Gender: 
        <input type="radio" name="Gender" value="Male"> Male, 
        <input type="radio" name="Gender" value="Female"> Female <br>
        Favorite: 
        <input type="checkbox" name="Favorite" value="HTML"> HTML, 
        <input type="checkbox" name="Favorite" value="HTML"> Java, 
        <input type="checkbox" name="Favorite" value="HTML"> PHP <br>
        University: <select name ="University">
            <option value="Gachon University">Gachon University</option>
        </select> <br>
        Color: <input type="color" value="000000"> <br>
        Date: <input type ="date"> <!-- ์ˆ˜์ • ๋ถ€๋ถ„ -->
        </form>
        <br> <br>
        <input type="submit" value="Registration">
    </body>
</html>

๊ฒฐ๊ณผ

 

์ˆ˜์ • ์ „ ์ฝ”๋“œ์˜ ๊ฒฝ์šฐ, ๋‚ ์งœ๋ฅผ ํ…์ŠคํŠธ๋กœ ์ž…๋ ฅํ•˜๋Š” ๋ชจ์Šต์ž…๋‹ˆ๋‹ค.
์ˆ˜์ • ํ›„์—๋Š” ๋‚ ์งœ๋ฅผ ์ง์ ‘ ์„ ํƒํ•˜์—ฌ ์ž…๋ ฅํ•˜๋Š” ๋ชจ์Šต์ž…๋‹ˆ๋‹ค.

 

์ˆ˜์ • ์ „ ์ˆ˜์ • ํ›„

'๐Ÿƒโ€โ™€๏ธ Activities > Web Front-End Basic Study' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[7์ฃผ์ฐจ] Javascript ์˜ˆ์ œ ์‹ค์Šต  (0) 2024.07.18
[4-6์ฃผ์ฐจ] ์Œ์› ์ŠคํŠธ๋ฆฌ๋ฐ ์„œ๋น„์Šค FLO ์›น ์‚ฌ์ดํŠธ ํด๋ก  ์ฝ”๋”ฉ  (0) 2024.07.18
[2์ฃผ์ฐจ] CSS ์˜ˆ์ œ ์‹ค์Šต  (0) 2024.07.18
[2์ฃผ์ฐจ] CSS ํ€ด์ฆˆ ํ’€์ด  (0) 2024.07.18
[1์ฃผ์ฐจ] HTML ํ€ด์ฆˆ ํ’€์ด  (0) 2024.07.18

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”