๐Ÿ’œ HTML,CSS

HTML&CSS 4์ผ์ฐจ (์ •๋ฆฌx)

Genie_. 2024. 3. 23. 21:48
728x90
๋ฐ˜์‘ํ˜•
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>INPUT</title>
</head>
<!-- ๊ฐ€์žฅ์ค‘์š”ํ•จ !! -->
<body>
    <!-- input์€ ๋‹ซ๋Š” ํƒœ๊ทธ๊ฐ€ ์—†๋‹ค / ์ ์–ด์ฃผ๋Š”๊ฒŒ ์ข‹์Œ-->
    <label>
        <span> ์•„์ด๋”” : <input type="text" placeholder="์•„์ด๋””์ ์œผ์„ธ์š”" /> <br> </span>
                        <!-- ๊ฐ„๋‹จํ•œ ํ…์ŠคํŠธ ์ž‘์„ฑ -->
    </label>
    <!-- readonly, disabled ์ˆ˜์ •์ด ๋˜์ง€ ์•Š๊ฒŒ ๋งŒ๋“ฌ -->
    <input type="password"  value="๋ฏธ๋ฆฌ์ ์–ด๋‘ " /> <br>  <!-- ํŒจ์Šค์›Œ๋“œ ์ž‘์„ฑ, ๋ˆˆ์— ์•ˆ๋ณด์ž„ -->
    <input type="tel" /> <br>       <!-- ์ „ํ™”๋ฒˆํ˜ธ -->
    <input type="email" value="abc@naver.com" readonly/> <br>     <!-- ์ด๋ฉ”์ผ -->
    <input type="number" min="5" max="10" disabled /> <br>    <!-- ์ˆซ์ž๋งŒ ๊ฐ€๋Šฅ -->

    <input type="button" value="๊ธ€์ž"> <br> <!-- ๋‹จ์ˆœํ•œ ๋ฒ„ํŠผ ๋ชจ์–‘, buttonํƒœ๊ทธํ•˜๊ณ  ๋˜‘๊ฐ™์ด ์ƒ๊น€ -->
    <button>๊ธ€์ž</button> <br>

    <div>๋ญ˜ ๋ฐฐ์šธ๋ž˜์š”? (๋ณต์ˆ˜์„ ํƒ๊ฐ€๋Šฅ) </div>
    <label>
        C<input type="checkbox">  <!-- ์ฒดํฌ๋ฐ•์Šค, ์—ฌ๋Ÿฌ๊ฐœ ์„ ํƒ๊ฐ€๋Šฅ -->
    </label>

    <!-- label์•ˆ์— input์„ ๋„ฃ์–ด๋„ ๋‘ ์š”์†Œ๊ฐ€ ๋ฌถ์ด๊ณ , => label์•ˆ์— input์ด ๋ฌด์กฐ๊ฑด ์กด์žฌํ•ด์•ผํ•œ๋‹ค๋Š” ์ œ์•ฝ์‚ฌํ•ญ
    label์˜ for์™€ input์˜ id ์†์„ฑ์„ ๊ฐ™๊ฒŒ ๋งž์ถฐ๋„ ๋‘ ์š”์†Œ๊ฐ€ ๋ฌถ์ธ๋‹ค => label๊ณผ input์ด ๋–จ์–ด์ ธ์žˆ์–ด๋„ ok
    !! id๋Š” ํ•˜๋‚˜๋งŒ ์กด์žฌํ•œ๋‹ค !! lable์„ ์—ฌ๋Ÿฌ๊ฐœ ํ•˜๋Š”๊ฑด ์ƒ๊ด€x(๊ทผ๋ฐ ํ• ์ผ์ด ๊ฑฐ์˜์—†์Œ) -->
    <label for="py">Python</label>
    <input id="py" type="checkbox">  <!-- ์ฒดํฌ๋ฐ•์Šค, ์—ฌ๋Ÿฌ๊ฐœ ์„ ํƒ๊ฐ€๋Šฅ -->

    Java<input type="checkbox"> <br> <!-- ์ฒดํฌ๋ฐ•์Šค, ์—ฌ๋Ÿฌ๊ฐœ ์„ ํƒ๊ฐ€๋Šฅ -->

    <div>๋‹น์‹ ์˜ ์„ฑ๋ณ„์€?</div>
    <!-- radio ๋ฒ„ํŠผ์€ name์†์„ฑ์— ๊ฐ™์€ ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉด ํ•˜๋‚˜์˜ ๊ทธ๋ฃน์ด ๋œ๋‹ค -->
    ๋‚จ<input name="gender" type="radio" checked>
    ์—ฌ<input name="gender" type="radio"> <br>

    <input type="date"> <!-- ๋…„/์›”/์ผ -->
    <input type="datetime-local"> <!-- ๋…„/์›”/์ผ , ์‹œ/๋ถ„/์ดˆ(์ง€์—ญ์‹œ==ํ•œ๊ตญ์‹œ๊ฐ„) -->
    <input type="time"> <!-- ์‹œ/๋ถ„/์ดˆ -->
    <input type="week"> <!-- ์ฃผ์ค‘ -->
    <br>

    <input type="file"> <!-- ํŒŒ์ผ ํ•˜๋‚˜๋งŒ ์„ ํƒ -->
    <input type="file" multiple> <!-- ํŒŒ์ผ ๋‹ค์ค‘ ์„ ํƒ -->

    <!-- ๋ˆˆ์—๋งŒ ์•ˆ๋ณด์ด์ง€ ์›น ์ƒ์—๋Š” ์กด์žฌํ•œ๋‹ค -->
    <!-- hidden type์ด ์•„๋‹Œ ์†์„ฑ์œผ๋กœ ๋„ฃ์–ด์–ด๋„๋จ -->
    <input type="hidden" value="๋ˆˆ์— ๋ณด์ด์ง€ ์•Š๋Š” ํ…์ŠคํŠธ ํ•„๋“œ!">
    <input type="text" hidden>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด</title>
</head>
<body>
    <!-- ๋™์˜์ƒ์€ muted ์†์„ฑ์„ ๊ฑธ์–ด์•ผ autoplay๊ฐ€ ๊ฐ€๋Šฅํ•จ -->
    <!-- ์™œ? ์›น ์ •์ฑ… ๋•Œ๋ฌธ์— -->
    <video src="๋„์‹œ.mp4" width="500" poster="cat.jpg" controls muted autoplay loop></video>
    <!-- pster : ์ธ๋„ค์ผ / controls : ์žฌ์ƒ๋ฐ” / autoplay : ์˜์ƒ์žฌ์ƒ / loop : ์˜์ƒ๋ฌดํ•œ์žฌ์ƒ / muted : ์†Œ๋ฆฌ๋ฎคํŠธ -->
    <object data="8.%20๋ฐฐ์—ด.pdf" type=""></object>
</body>
</html>

728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€