day HTML CSS 03

JTHยท2023๋…„ 2์›” 21์ผ
html
0

gb_jth

๋ชฉ๋ก ๋ณด๊ธฐ
46/56

๐Ÿ“Œ ๋ฒ„ํŠผ ํด๋ฆญ ใ„ดใ„ด ์ž‘์„ฑ์ค‘์— ๋ˆŒ๋ €๋‹ค๊ฐ€ ๋‹ค๋‚ ๋ผ๊ฐ ใ…Žใ…Žใ…‹ใ…‹

  • ๋ฒ„ํŠผ
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost/form.jsp">
        <input type="submit" value="์ „์†ก"/>
        <input type="button" value="๋ฒ„ํŠผ" onclick="alert('helloWorld!!')">
    </form>
</body>
</html>
Document
  • ๋ฒ„ํŠผ2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <from>
        <input type="text"/>
        <input type="submit"/>
        <input type="button" value="๋ฒ„ํŠผ" />
        <input type="reset" />
    </from>
</body>
</html>
Document 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <h1> ์‚ฌ์ด์ฆˆ ์„ ํƒ( ๋‹ค์ค‘ ์„ ํƒ ๊ฐ€๋Šฅ ) </h1>
        95 : <input type="checkbox" name="size" value="95"/>
        100 : <input type="checkbox" name="size" value="100"/>
        105 : <input type="checkbox" name="size" value="105"/>
    </p>
    
</body>
</html>
Document

์‚ฌ์ด์ฆˆ ์„ ํƒ( ๋‹ค์ค‘ ์„ ํƒ ๊ฐ€๋Šฅ )

95 : 100 : 105 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        - <selcet> ํƒœ๊ทธ๋กœ ๋“œ๋กญ๋‹ค์šด์˜ ๋ฐ•์ˆ˜๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  
        - <option> ํƒœ๊ทธ๋กœ ์„ ํƒ ํ•ญ๋ชฉ์„ ๊ตฌ์„ฑํ•œ๋‹ค.
    -->
    <form>
        <fieldset>
            <legend> ์ด๋™ ํ†ต์‹ ์‚ฌ ์„ ํƒํ•˜๊ธฐ </legend>
            <div>
                <label for="telecom"> ์ด๋™ ํ†ต์‹ ์‚ฌ ์„ ํƒํ•˜๊ธฐ </label>
                <select name="telecom" id="telecom">
                    <option> --์„ ํƒํ•˜์„ธ์š”-- </option>
                    <option value="SKT"> SKT </option>
                    <option value="LG"> LG </option>
                    <option value="KT"> KT </option>
                </select>
            </div>
        </fieldset>
    </form>

</body>
</html>
Document ์ด๋™ ํ†ต์‹ ์‚ฌ ์„ ํƒํ•˜๊ธฐ
์ด๋™ ํ†ต์‹ ์‚ฌ ์„ ํƒํ•˜๊ธฐ --์„ ํƒํ•˜์„ธ์š”-- SKT LG KT 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost/color.jsp">
        <fieldset>
            <legend>์ƒ‰์ƒ ์„ ํƒํ•˜๊ธฐ</legend>
            <h1> ์ƒ‰์ƒ </h1>
            <select name="color" id="color">
                <option  value="red" > ๋ถ‰์€์ƒ‰ </option>    
                <option  value="black" > ๊ฒ€์€์ƒ‰ </option>
                <option  value="blue" > ํŒŒ๋ž€์ƒ‰ </option>
            </select>
            <input type="submit" >
        </fieldset>        

    </form>
    
</body>
</html>
Document ์ƒ‰์ƒ ์„ ํƒํ•˜๊ธฐ

์ƒ‰์ƒ

๋ถ‰์€์ƒ‰ ๊ฒ€์€์ƒ‰ ํŒŒ๋ž€์ƒ‰ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        - ์˜์—ญ์„ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•œ <div> ํƒœ๊ทธ
        - ์ƒ๋‹จ, ๋ฉ”๋‰ด, ๋ณธ๋ฌธ, ํ•˜๋‹จ ๋“ฑ๊ณผ ๊ฐ™์ด ์›น ํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ์— ๋Œ€ํ•œ ์˜์—ญ์„ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋œ๋‹ค.
        - ์„œ๋กœ ์ค‘์ฒฉ๋˜์–ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋‹ค๋ฅธ ํƒœ๊ทธ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ๋‹ค.    
        - id ์†์„ฑ
            -> ์˜์—ญ์„ ๋‚˜๋ˆ„๋Š” div์— ์‚ฌ์šฉ๋  ๊ฒฝ์šฐ, ํ•ด๋‹น ํƒœ๊ทธ๊ฐ€ ์–ด๋–ค ์˜์—ญ์œผ๋กœ ์‚ฌ์šฉ๋˜์—ˆ๋Š”์ง€๋ฅผ ํŒŒ์•…ํ•˜๊ธฐ ์œ„ํ•ด ์ง€์ •ํ•œ๋‹ค.
            -> ๋‹ค๋ฅธ ์š”์†Œ์™€ ์ค‘๋ณต๋œ ๊ฐ’์„ ๊ฐ–์ง€ ๋ชปํ•œ๋‹ค.
    -->
    <!-- ์‚ฌ์ดํŠธ ์ „์ฒด ์˜์—ญ -->
    <div id="container">
        <!-- ์‚ฌ์ดํŠธ ์ƒ๋‹จ ์˜์—ญ(๋กœ๊ณ , ๋ฉ”์ธ๋ฉ”๋‰ด ๋“ฑ) -->
        <div id="header">
            <h1>์šฐ๋ฆฌ์‚ฌ์ดํŠธ</h1>

            

        </div>
        <hr/>
        <!-- ์‚ฌ์ดํŠธ์˜ ๋‚ด์šฉ ์˜์—ญ(์‚ฌ์ด๋“œ๋ฐ”, ๋‚ด์šฉ ๋“ฑ) -->
        <div id="content">
            <!-- ์™ผ์ชฝ ์‚ฌ์ด๋“œ๋ฐ” ์˜์—ญ-->
            <div id="sidebar">
                <h2>๋ฉ”๋‰ด ์„ ํƒํ•˜๊ธฐ</h2>
                <ul>
                    <li>๋ฉ”๋‰ด1</li>
                    <li>๋ฉ”๋‰ด2</li>
                    <li>๋ฉ”๋‰ด3</li>
                </ul>

            </div>
            <hr/>
            <!-- ์˜ค๋ฅธ์ชฝ ๋ณธ๋ฌธ ์˜์—ญ -->
            <div>
                <!-- ์ œ๋ชฉ -->
                <h1>์›น ์ ‘๊ทผ์„ฑ์ด๋ž€?</h1>
                <!-- ์†Œ์ œ๋ชฉ -->
                <h2>
                    ์žฅ์• ์— ๊ตฌ์•  ์—†์ด ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์ด ์ •๋ณด๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„ ๋งŒ๋“ค๊ธฐ
                </h2>
                <p>
                    ์›”๋“œ ์™€์ด๋“œ ์›น ์ปจ์†Œ์‹œ์—„...
                </p>

            </div>
        </div>
        <hr/>
        <!-- ์‚ฌ์ดํŠธ ํ•˜๋‹จ ์˜์—ญ(์นดํ”ผ๋ผ์ดํŠธ, ์ฃผ์†Œ ๋“ฑ) -->
        <div id="footer">
            <address>
                copyright&copy;codingbox.com
            </address>
            


        </div>

    </div>
</body>
</html>
Document

์›น ์ ‘๊ทผ์„ฑ์ด๋ž€?

์žฅ์• ์— ๊ตฌ์•  ์—†์ด ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์ด ์ •๋ณด๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„ ๋งŒ๋“ค๊ธฐ

์›”๋“œ ์™€์ด๋“œ ์›น ์ปจ์†Œ์‹œ์—„... 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        - type="file" ์š”์†Œ๋Š” ์›น ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ํŒŒ์ผ์„ ์ „์†กํ•  ์ˆ˜ ์žˆ๋„๋ก ์ฐพ์•„๋ณด๊ธฐ ๋ฒ„ํŠผ์„ ํ‘œ์‹œํ•˜๋ฉฐ,
        ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ ํŒŒ์ผ๋งŒ ์ฒจ๋ถ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
        - ๋‹จ ์ด ์š”์†Œ๊ฐ€ ์‚ฌ์šฉ๋  ๊ฒฝ์šฐ์—๋Š” ๋ฐ˜๋“œ์‹œ
        <form> ํƒœ๊ทธ์— enctype="multipart/form-data" ์†์„ฑ์ด ๋ช…์‹œ๋˜์–ด์•ผ ํ•œ๋‹ค.
    -->
    <form action=" " method="post" enctype="multipart/form-data">  <!-- ์„œ๋ฒ„๋กœ ํŒŒ์ผ์„ ์ „์†กํ• ๋•Œ ์•ฝ์†๋œ ๊ฐ’๋“ค -->
        <input type="file" name="profile">
        <input type="submit">
    </form>
    
</body>
</html>
Document 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <font size="8" color="powderblue">hello</font>
    <font size="8" color="powderblue">hello</font>
    <font size="8" color="powderblue">hello</font>
    <font size="8" color="powderblue">hello</font>
    <font size="8" color="powderblue">hello</font>
</body>
</html>
Document hello hello hello hello hello 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost/method.jsp" method="post">
        <input type="text" name="id">
        <input type="password" name="pw">
        <input type="submit">
    </form>
    
</body>
</html>
Document 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> ํผ </h1>
        <form>
            <p>
                ์•„์ด๋”” : <input type="text" maxlength="20" name="id" id="id" placeholder="์•„์ด๋””๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”." required>
                <br/>
                <br/>
                ๋น„๋ฐ€๋ฒˆํ˜ธ : <input type="password" maxlength="20" name="password" id="password" placeholder="๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”." required>
            </p>
            <fieldset>
                <legend> ์„ฑ๋ณ„ </legend>
                <label for="gender"> ๋‚จ์ž </label>
                <input type="radio" name="gender" id="gender" checked>
                <label for="gender"> ์—ฌ์ž </label>
                <input type="radio" name="gender" id="gender">
            </fieldset>
            <fieldset>
                <legend>์ข‹์•„ํ•˜๋Š” ๊ณผ๋ชฉ</legend>
                <label>
                    JAVA <input type="checkbox" name="subject" id="subject" checked>  
                </label>
                <label>
                    JSP <input type="checkbox" name="subject" id="subject" checked>  
                </label>
                <label>
                    HTML <input type="checkbox" name="subject" id="subject" checked>  
                </label>
                <label>
                    CSS <input type="checkbox" name="subject" id="subject">  
                </label>
            </fieldset>
            <p>์ง์—…
                <select name="job" id="job">
                    <option> --์„ ํƒํ•˜์„ธ์š”--</option>
                    <option value="ํ•™์ƒ">ํ•™์ƒ</option>
                    <option value="์ง์žฅ์ธ">์ง์žฅ์ธ</option>
                    <option value="์ž์˜์—…">์ž์˜์—…</option>
                </select>
            </p>
                <form action="" method="post" enctype="multipart/form-data">
                    <input type="file" name="profile">
                </form>
                <p>์ž๊ธฐ์†Œ๊ฐœ</p>
                <p>
                <textarea cols="40" rows="5"></textarea>
                </p>
                ์šฐํŽธ๋ฒˆํ˜ธ :  <input type="text" value="์„œ์šธ์‹œ ๊ฐ•๋‚จ๊ตฌ" readonly> <button type="button">์šฐํŽธ๋ฒˆํ˜ธ</button>
                <br>
                <br>
                ์ฃผ์†Œ :  <input type="text"  placeholder="์ฃผ์†Œ ์ž…๋ ฅ">
                <br>
                <br>
                ์ƒ์„ธ์ฃผ์†Œ :  <input type="text"  placeholder="์ƒ์„ธ์ฃผ์†Œ ์ž…๋ ฅ">
                <br>
                <br>
                ์ฐธ๊ณ  ์‚ฌํ•ญ :  <input type="text" disabled>
                <br>
                <br>
            <p>
                <input type="reset" value="๋‹ค์‹œ ์“ฐ๊ธฐ">
                <input type="button" value="ํ™•์ธ">
            </p>
        </form>
</body>
</html>
Document

ํผ

์•„์ด๋”” :

๋น„๋ฐ€๋ฒˆํ˜ธ :

์„ฑ๋ณ„ ๋‚จ์ž ์—ฌ์ž ์ข‹์•„ํ•˜๋Š” ๊ณผ๋ชฉ JAVA JSP HTML CSS

์ง์—… --์„ ํƒํ•˜์„ธ์š”-- ํ•™์ƒ ์ง์žฅ์ธ ์ž์˜์—…

์ž๊ธฐ์†Œ๊ฐœ

์šฐํŽธ๋ฒˆํ˜ธ : ์šฐํŽธ๋ฒˆํ˜ธ

์ฃผ์†Œ :

์ƒ์„ธ์ฃผ์†Œ :

์ฐธ๊ณ  ์‚ฌํ•ญ : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!--
    <input name="" id="" type="" value="" maxlengh="" />
     - ์ž…๋ ฅ ์–‘์‹์„ ํ‘œ์‹œํ•˜๋Š” ํƒœ๊ทธ
     - name ์†์€ ์›น ํ”„๋กœ๊ทธ๋žจ๊ณผ ์—ฐ๊ณ„๋˜๋Š” ์†์„ฑ์œผ๋กœ ํ•œ ํŽ˜์ด์ง€ ์•ˆ์—์„œ ๊ณ ์œ ํ•œ ๊ฐ’์„ ๋ช…์‹œํ•ด์•ผํ•œ๋‹ค.
     - id ์†์„ฑ์€ ํ•ด๋‹น ํŽ˜์ด์ง€์—์„œ ๊ทธ ์š”์†Œ๋ฅผ ์‹๋ณ„ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ’์œผ๋กœ ๊ณ ์œ ํ•œ ๊ฐ’์„ ๋ช…์‹œํ•ด์•ผ ํ•œ๋‹ค.
     - id ๊ฐ’๊ณผ name ๊ฐ’์€ ์„œ๋กœ ๋™์ผํ•˜๊ฒŒ ์ง€์ •ํ•ด๋„ ๋ฌด๊ด€ํ•˜๋‹ค.
     - type ์†์„ฑ์— ๋”ฐ๋ผ ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ์š”์†Œ์˜ ์ข…๋ฅ˜๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค. (text, password, hidden, ... ๋“ฑ๋“ฑ)
     - value ์†์„ฑ์€ ํ•ด๋‹น ์š”์†Œ์— ๊ธฐ๋ณธ์ ์œผ๋กœ ์ž‘์„ฑ๋˜์–ด ์žˆ์„ ๊ฐ’์„ ๊ธฐ์ˆ ํ•œ๋‹ค.
     - ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅ๋ฐ›๋Š” ์š”์†Œ์˜ ๊ฒฝ์šฐ maxlength ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ตœ๋Œ€ ์ž…๋ ฅ ๊ฐ€๋Šฅํ•œ ๊ธ€์ž ์ˆ˜๋ฅผ ์ œํ•œํ•  ์ˆ˜ ์žˆ๋‹ค.
-->
<form action="http://localhost/hidden.jsp">
    ์•„์ด๋”” : 
    <input type="text" name="idvalue" id="idvalue"/> 
    <br>
    ํŒจ์Šค์›Œ๋“œ : 
    <input type="password" name="pwvalue" id="idvalue"/> 
    <br>
    <input type="hidden" name="hide" id="hide"
        value="gogo"/>
    <input type="submit"/>
</form>
</body>
</html>
Document ์•„์ด๋”” :
ํŒจ์Šค์›Œ๋“œ : 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form>
        <!--์ž…๋ ฅ ๋‚ด์šฉ์— ๋Œ€ํ•œ ๊ทธ๋ฃน์„ ๋ช…์‹œํ•˜๋Š” ๋ถ€๋ถ„-->
        <fieldset>
            <!--๊ทธ๋ฃน์˜ ์ œ๋ชฉ-->
            <legend> ๋‚ด์šฉ ์ž…๋ ฅํ•˜๊ธฐ </legend>
            <!-- ์ž…๋ ฅ ์š”์†Œ ๋ฐฐ์น˜ -->
            <div>
                <label for="user_id"> ์•„์ด๋”” </label>
                <input type="text" name="user_id" id="user_id"
                    maxlength="10"  placeholder="์•„์ด๋””๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”."/> 
            </div>
            <div>
                <label for="user_name"> ํšŒ์› ์ด๋ฆ„ </label>
                <input type="text" name="user_name" id="user_name"
                    maxlength="10"  placeholder="์ด๋ฆ„์„ ์ž…๋ ฅํ•˜์„ธ์š”."/> 
            </div>
            <div>
                <label for="user_pw"> ๋น„๋ฐ€ ๋ฒˆํ˜ธ </label>
                <input type="password" name="user_pw" id="user_pw"
                    maxlength="20"  placeholder="ํŒจ์Šค์›Œ๋“œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”."/> 
            </div>
            <div>
                <label for="memo"> ์ž๊ธฐ์†Œ๊ฐœ </label>
                <!-- ์žฅ๋ฌธ์„ ์ž…๋ ฅํ•˜๊ธฐ ์œ„ํ•œ ์š”์†Œ -->
                <textarea name="memo" id="memo" maxlength="100"  placeholder="์ž๊ธฐ์†Œ๊ฐœ ์ž…๋ ฅ." > </textarea>
                <div>
                    <label for="data"> ์ˆจ๊ฒจ์ง„ ํ•ญ๋ชฉ </label>
                    <input type="hidden" name="data" id="data" value="data"/> 
                </div>
            </div>
        </fieldset>
    </form>
</body>
</html>
Document ๋‚ด์šฉ ์ž…๋ ฅํ•˜๊ธฐ
์•„์ด๋””
ํšŒ์› ์ด๋ฆ„
๋น„๋ฐ€ ๋ฒˆํ˜ธ
์ž๊ธฐ์†Œ๊ฐœ
์ˆจ๊ฒจ์ง„ ํ•ญ๋ชฉ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost/login.jsp">
        ์•„์ด๋”” : 
        <input type="text" name="id" id="idvalue"/> 
        <br>
        ํŒจ์Šค์›Œ๋“œ : 
        <input type="password" name="pwd" id="idvalue"/> 
        <br>
        ์ฃผ์†Œ : 
        <input type="text" name="adress" id="adress"/>
        <br>
        <input type="submit"/>
    </form>
</body>
</html>
Document ์•„์ด๋”” :
ํŒจ์Šค์›Œ๋“œ :
์ฃผ์†Œ : 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost/order.jsp">    
        <p>
            <h1>์ƒ‰์ƒ (๋‹จ์ผ ์„ ํƒ)</h1>
            ๋ถ‰์€์ƒ‰ : <input type="radio" name="color3" value="red"/>
            ๊ฒ€์€์ƒ‰ : <input type="radio" name="color3" value="black" checked/>  <!-- checked ๊ฒ€์€์ƒ‰์ด ์„ ํƒ๋˜์–ด์žˆ๋Š” ์ƒํƒœ๋กœ ์ผœ์ง-->
            ํŒŒ๋ž€์ƒ‰ : <input type="radio" name="color3" value="blue"/>
        </p>
        <p>
            <h1> ์‚ฌ์ด์ฆˆ ์„ ํƒ( ๋‹ค์ค‘ ์„ ํƒ ๊ฐ€๋Šฅ ) </h1>
            95 : <input type="checkbox" name="size" value="95"/>
            100 : <input type="checkbox" name="size" value="100"/>
            105 : <input type="checkbox" name="size" value="105"/>
        </p>
        <input type="submit">
    </form>
</body>
</html>
Document

์ƒ‰์ƒ (๋‹จ์ผ ์„ ํƒ)

๋ถ‰์€์ƒ‰ : ๊ฒ€์€์ƒ‰ : ํŒŒ๋ž€์ƒ‰ :

์‚ฌ์ด์ฆˆ ์„ ํƒ( ๋‹ค์ค‘ ์„ ํƒ ๊ฐ€๋Šฅ )

95 : 100 : 105 : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <fieldset>
            <legend> ์ทจ๋ฏธ ์„ ํƒํ•˜๊ธฐ </legend>
            <div>
                    <label for="hobby1"> ์ถ•๊ตฌ </label>
                    <input type="checkbox" name="sport" value="์ถ•๊ตฌ" id="hobby1" checked/>
                    <label for="hobby2"> ๋†๊ตฌ </label>
                    <input type="checkbox" name="sport" value="๋†๊ตฌ"  id="hobby2"/>
                    <label for="hobby3"> ์•ผ๊ตฌ </label>
                    <input type="checkbox" name="sport" value="์•ผ๊ตฌ"  id="hobby3"/>
        </fieldset>
        <br/>        
        <fieldset>   
            <legend> ์„ฑ๋ณ„ ์„ ํƒํ•˜๊ธฐ </legend>     
                    <label for="man"> ๋‚จ์ž </label>
                    <input type="radio" name="gender" id="man" value="๋‚จ์ž"/>
                    <label for="woman"> ์—ฌ์ž </label>
                    <input type="radio" name="gender" id="woman" value="์—ฌ์ž"/>
            </div>
        </fieldset>     
    </form>
</body>
</html>
Document ์ทจ๋ฏธ ์„ ํƒํ•˜๊ธฐ
์ถ•๊ตฌ ๋†๊ตฌ ์•ผ๊ตฌ

์„ฑ๋ณ„ ์„ ํƒํ•˜๊ธฐ ๋‚จ์ž ์—ฌ์ž 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        - ๋ผ๋””์˜ค : ์—ฌ๋Ÿฌ ํ•ญ๋ชฉ ์ค‘ ํ•œ ๊ฐ€์ง€๋งŒ ์„ ํƒ๊ฐ€๋Šฅํ•จ.
        - checkbox : ์—ฌ๋Ÿฌ ํ•ญ๋ชฉ ์ค‘ ๋ณต์ˆ˜๋กœ ์„ ํƒ ๊ฐ€๋Šฅํ•จ.
        - radio ๋‚˜ chechbox ๋Š” ๋‘ ๊ฐœ ์ด์ƒ์˜ ์š”์†Œ๊ฐ€ ํ•˜๋‚˜์˜ ๊ทธ๋ฃน์œผ๋กœ ๋ฌถ์—ฌ ์žˆ์–ด์•ผ ํ•˜๋Š”๋ฐ, ์ด๋ฅผ ์œ„ํ•ด์„œ
          name ์†์„ฑ์˜ ๊ฐ’์„ ๋™์ผํ•˜๊ฒŒ ๋ช…์‹œํ•ด์•ผ ํ•œ๋‹ค.
    -->
    <p>
        <input type="radio" name="color"/>
        <input type="radio" name="color"/>
        <input type="radio" name="color"/>
        <input type="radio" name="color"/> 
    </p>
    <p>
        <input type="radio" name="color2"/>
        <input type="radio" name="color2"/>
        <input type="radio" name="color2"/>
        <input type="radio" name="color2"/> 
    </p>
    <hr/> <!--์˜ค๋žœ๋งŒ์— ๋ณธ๊ฒƒ๊ฐ™์ง€๋งŒ ๋ผ์ธ ์ญˆ์šฑ ๊ทธ์–ด์คŒ-->
    <p>
        <h1>์ƒ‰์ƒ (๋‹จ์ผ ์„ ํƒ)</h1>
        ๋ถ‰์€์ƒ‰ : <input type="radio" name="color3" value="red"/>
        ๊ฒ€์€์ƒ‰ : <input type="radio" name="color3" value="black" checked/>  <!-- checked ๊ฒ€์€์ƒ‰์ด ์„ ํƒ๋˜์–ด์žˆ๋Š” ์ƒํƒœ๋กœ ์ผœ์ง-->
        ํŒŒ๋ž€์ƒ‰ : <input type="radio" name="color3" value="blue"/>
    </p>



</body>
</html>
Document

์ƒ‰์ƒ (๋‹จ์ผ ์„ ํƒ)

๋ถ‰์€์ƒ‰ : ๊ฒ€์€์ƒ‰ : ํŒŒ๋ž€์ƒ‰ : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        - semantic tag : ์˜๋ฏธ๋ก ์  tag
        - ๋ฌธ์„œ์˜ ์ •๋ณด๋ฅผ ๋ณด๋‹ค ์ž˜ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์˜๋ฏธ์— ๋งž๋Š” ํƒœ๊ทธ๋ฅผ ์ž˜ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
        - ๋‹จ์ˆœํžˆ div tag๋กœ๋งŒ ๋ชจ๋“  ๊ตฌ์กฐ๋ฅผ ์งœ๋Š” ๊ฒƒ๋ณด๋‹ค ๋” ํ•œ๋ˆˆ์— ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—,
        - ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ฝ”๋“œ๋ฅผ ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ ๋” ํŽธํ•ด์ง„๋‹ค.
        - ํƒœ๊ทธ ์„ค๋ช…
            article : ๋ณธ๋ฌธ
            aside : ๊ด‘๊ณ ์™€ ๊ฐ™์ด ํŽ˜์ด์ง€์˜ ๋‚ด์šฉ๊ณผ๋Š” ๊ด€๊ณ„๊ฐ€ ์ ์€ ๋ถ€๋ถ„
            details : ๊ธฐ๋ณธ์ ์œผ๋กœ ํ‘œ์‹œ๋˜์ง€ ์•Š๋Š” ์ •๋ณด๋“ค ์ •์˜
            footer : ํ™”๋ฉด์˜ ํ•˜๋‹จ์— ์œ„์น˜ํ•˜๋Š” ์‚ฌ์ดํŠธ๋‚˜ ๋ฌธ์„œ์˜ ์ „์ฒด์ ์ธ ์ •๋ณด๋ฅผ ์ •์˜
            header : ํ™”๋ฉด์˜ ์ƒ๋‹จ์— ์œ„์น˜ํ•˜๋Š” ์‚ฌ์ดํŠธ๋‚˜ ๋ฌธ์„œ์˜ ์ „์ฒด์ ์ธ ์ •๋ณด๋ฅผ ์ •์˜
            main : ๋ฌธ์„œ์—์„œ ๊ฐ€์žฅ ์ค‘์‹ฌ์ด ๋˜๋Š” ์ปจํ…์ธ ๋ฅผ ์ •์˜
            nav : ๋ฌธ์„œ์˜ ๋„ค๋น„๊ฒŒ์ด์…˜ ํ•ญ๋ชฉ์„ ์ •์˜
            section : ๋ฌธ์„œ์˜ ๊ตฌํš๋“ค์„ ์ •์˜
    -->
    <!-- ํŽ˜์ด์ง€์˜ ์ „์ฒด ํญ์„ ๊ฒฐ์ •ํ•™ ์œ„ํ•œ ์˜์—ญ -->
    <div>
        <!-- ์ƒ๋‹จ ํ—ค๋” -->
        <header>
            <hgroup>
                <h1>์„œ๋ฐ”์ด๋ฒŒ ๊ฒŒ์ž„ํŒ€</h1>
            </hgroup>
            <nav>
                <ul>
                    <li><a herf="">ํŒ€์†Œ๊ฐœ</a></li>
                    <li><a herf="">๋ฉค๋ฒ„์ „์šฉ</a></li>
                    <li><a herf="">์ปค๋ฎค๋‹ˆํ‹ฐ</a></li>
                    <li><a herf="">๊ฐ€์ด๋“œ</a></li>
                </ul>
            </nav>
        </header>

        <!-- ์ค‘์•™ ์˜์—ญ -->
        <section>
            <!-- ๋ณธ๋ฌธ -->
            <article>
                <div>
                    <h2>์„œ๋ฐ”์ด๋ฒŒ ๊ฒŒ์ž„์ด๋ž€?</h2>
                    <p>
                        ์„œ๋ฐ”์ด๋ฒŒ ๊ฒŒ์ž„ ๋˜๋Š” ์„œ๋ฐ”์ด๋ฒŒ์€ ์ด์œผ๋กœ ํ•˜๋Š” ๊ฒŒ์ž„์˜ ์ผ์ข…์ด๋‹ค.
                    </p>
                </div>

                <div>
                    <h2>์„œ๋ฐ”์ด๋ฒŒ ๊ฒŒ์ž„์˜ ๋ชฉ์ </h2>
                    <p>
                        * ๋ฌดํ•œ ๊ฒฝ์Ÿ์‹œ๋Œ€์— ์ ์‘ํ•˜๋ ค๊ณ  ํ•˜๋Š” ์ž์„ธ
                        * ์กฐ์ง ๊ตฌ์„ฑ์›์œผ๋กœ ํ•˜์—ฌ๊ธˆ ์ฐฝ์˜์ ์ด๋ฉฐ ์œ ๊ธฐ์ ์ธ ์กฐ์งํ™œ๋™
                        * ๊ธฐ์กด์˜ ์‚ฌ๊ณ ์™€ ํ–‰๋™์—์„œ ํƒˆํ”ผ
                    </p>
                </div>
            </article>
        </section>

        <!-- ํ•˜๋‹จ ์˜์—ญ -->
        <footer>
            <address>
                copyright 2023. coding box
            </address>
        </footer>
    </div>
</body>
</html>
Document

์„œ๋ฐ”์ด๋ฒŒ ๊ฒŒ์ž„ํŒ€

์„œ๋ฐ”์ด๋ฒŒ ๊ฒŒ์ž„์ด๋ž€?

์„œ๋ฐ”์ด๋ฒŒ ๊ฒŒ์ž„ ๋˜๋Š” ์„œ๋ฐ”์ด๋ฒŒ์€ ์ด์œผ๋กœ ํ•˜๋Š” ๊ฒŒ์ž„์˜ ์ผ์ข…์ด๋‹ค.

์„œ๋ฐ”์ด๋ฒŒ ๊ฒŒ์ž„์˜ ๋ชฉ์ 

* ๋ฌดํ•œ ๊ฒฝ์Ÿ์‹œ๋Œ€์— ์ ์‘ํ•˜๋ ค๊ณ  ํ•˜๋Š” ์ž์„ธ * ์กฐ์ง ๊ตฌ์„ฑ์›์œผ๋กœ ํ•˜์—ฌ๊ธˆ ์ฐฝ์˜์ ์ด๋ฉฐ ์œ ๊ธฐ์ ์ธ ์กฐ์งํ™œ๋™ * ๊ธฐ์กด์˜ ์‚ฌ๊ณ ์™€ ํ–‰๋™์—์„œ ํƒˆํ”ผ

copyright 2023. coding box
profile
JTH
//
์ด์ „ ํฌ์ŠคํŠธ

day HTML CSS 02

๋‹ค์Œ ํฌ์ŠคํŠธ

day HTML CSS 04

0๊ฐœ์˜ ๋Œ“๊ธ€