๐Ÿ’œ HTML,CSS

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

Genie_. 2024. 3. 23. 22:28
728x90
๋ฐ˜์‘ํ˜•
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>์•ˆ๋…•ํ•˜์„ธ์š”</title>
    </head>
    <body>
        ์ฃผ์„ํƒœ๊ทธ : ๋‚จ๊ฒจ๋†“๋Š” ๊ธ€์”จ. ์˜ํ–ฅ์ด ์—†์Œ. ๊ฐœ๋ฐœ์ž์˜ ํŽธ์˜๋ฅผ ์œ„ํ•ด ์‚ฌ์šฉ
        <!-- LIVE RELOAD : ์‹ค์‹œ๊ฐ„ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฑธ ๋ณด์—ฌ์คŒ ์˜ค๋ฅธ์ชฝ ์ƒ๋‹จ์— ํ•ด๋‹นํ•˜๋Š” ์›น ์—ด๋ฉด๋จ -->
        <!-- SOFT WRAP : ๋„˜์–ด๊ฐ€๋Š” ์ค„์— ๋Œ€ํ•ด์„œ๋Š” ์ž๋™ ์ค„๋ฐ”๊ฟˆํ•ด์คŒ(ํ•ด๋‹น ๋ฌธ๋‹จ ๋ฒˆํ˜ธ ์šฐํด๋ฆญํ•˜๋ฉด ๋‚˜์˜ด) -->
        <!-- (ctrl + /) : ์ฃผ์„ ์„ค์ • -->

        <!--  br : ๋‹ค์Œ ์ค„๋กœ ๋ณด๋‚ด๋Š” ํƒœ๊ทธ. ๋‹ซ๋Š”ํƒœ๊ทธ ์—†์Œ(๋์— / ๋„ฃ์–ด์ฃผ๋ฉด ์ข‹์Œ) -->
        <!-- HTML์—์„œ ๊ณต๋ฐฑ์€ ๋ฌด์กฐ๊ฑด 1 SPACE -->
        KOREA IT ํ•™์› <br/>
        ์•ˆ๋…•? <br/>
        ===================== <br>
        <h1>์ œ๋ชฉ1</h1>
        <h2>์ œ๋ชฉ2</h2>
        <h3>์ œ๋ชฉ3</h3>
        <h4>์ œ๋ชฉ4</h4>
        <h5>์ œ๋ชฉ5</h5>
        <h6>์ œ๋ชฉ6</h6> <!-- ์•ž๋’ค ์ˆซ์ž ์ค‘ ํ•˜๋‚˜๋งŒ ์ˆ˜์ •ํ•˜๋ฉด ์ž๋™์œผ๋กœ ๋ณ€๊ฒฝ๋จ !-->
        ===================== <br>
        Pํƒœ๊ทธ ์‹œ์ž‘
        <p>
            ๋‚ด๊ฐ€ ์ ๋Š”๊ฑด ๋‹จ๋ฝ์œผ๋กœ ํ‘œ์‹œ
            P ํƒœ๊ทธ ๋‚ด์šฉ์€ ๋‹ค์Œ์ค„์— ํ‘œ์‹œ๋œ๋‹ค
        </p> <!-- p๋ˆ„๋ฅด๊ณ  TAP๋ˆ„๋ฅด๋ฉด ์ž๋™์œผ๋กœ ๋จ -->
        Pํƒœ๊ทธ ๋~
        <br> ===================== <br>
        ABC <blockquote>
            ๋“ค์—ฌ์“ฐ๊ธฐ ์ž…๋‹ˆ๋‹ค
            -ใ…- ์ž˜ ์•ˆ์“ฐ์ž„
        </blockquote>
        DEF
        ===================== <br>
        <!-- ์ง„ํ•˜๊ฒŒ ํ‘œ์‹œํ•˜๊ธฐ -->
        <!-- strong : ์‹œ๋ฉ˜ํ‹ฑ. ์˜๋ฏธ๊ฐ€ ์žˆ์Œ. ๊ฐ•์กฐ์˜ ์˜๋ฏธ -->
        <!-- b : ๋‹จ์ˆœ ์ง„ํ•˜๊ฒŒ -->
        <strong>STRONGํƒœ๊ทธ</strong> <!-- ๊ฐ•์กฐ์šฉ -->
        <b>Bํƒœ๊ทธ</b>
        <br> ===================== <br>
        <!-- ํ…์ŠคํŠธ ๊ธฐ์šธ์ž„ -->
        <!-- em : ์‹œ๋ฉ˜ํ‹ฑ. ์˜๋ฏธ ์žˆ์Œ -->
        <!-- i : italic. ์˜๋ฏธ ์—†์Œ -->
        <em>emํƒœ๊ทธ</em> <!-- ์ดํ…”๋ฆญ์ฒด๋กœ ๊ฐ•์กฐํ•  ํ…์ŠคํŠธ -->
        <i>iํƒœ๊ทธ</i> <!-- ์ดํ…”๋ฆญ์ฒด๋กœ ๊ทธ๋ƒฅ ํ‘œ์‹œํ•  ํ…์ŠคํŠธ -->
        <br> ===================== <br>
        <abbr title="์ค„์ž„๋ง์ด๋ผ๋Š” ๊ฒƒ์€ ๋ง์„ ์ค„์ด๋Š” ๊ฒƒ์œผ๋กœ ~ ...">์ค„์ž„๋ง ํ‘œ์‹œํ•˜๊ธฐ(์„ค๋ช…)</abbr>
        <br> ===================== <br>
        ๋ณดํ†ต<small>์ž‘๊ฒŒ</small>๋ณดํ†ต
        <br> ===================== <br>
        E=mc<sup>2</sup> / log<sup>e</sup>2
        <br> ===================== <br>
        <s>์ง€์šฐ๊ธฐ</s>๊ทธ๋Œ€๋กœ <- ์ทจ์†Œ์„ 
        <br> ===================== <br>
        <u>์ค‘์š”ํ•จ!</u> <- ๋ฐ‘์ค„(underline)
        <br> ===================== <br>
        <!-- ๋งํฌ๋ฅผ ๊ฑธ์–ด๋ณด์ž! aํƒœ๊ทธ! -->
        <!-- href : ์ด๋™ํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ๋กœ๋ฅผ ์ž…๋ ฅํ•œ๋‹ค. ์•„๋ฌด๊ฒƒ๋„ ์—†์œผ๋ฉด ๋‚ด ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค -->
        <!-- # : ์ด๋™ํ•  ๊ณณ์ด ์—†์Œ, ๋‚ด ํŽ˜์ด์ง€๋กœ ๊ฐˆ ๊ฒƒ์ž„, ๊ทผ๋ฐ aํƒœ๊ทธ๋‹ˆ๊นŒ ๊ทธ๋ƒฅ ๋„ฃ์–ด์คŒ -->
        <!-- target : _blank(์ƒˆ ํƒญ ์—ด๊ณ  ์ด๋™) -->
        <!-- target : _self(ํ˜„์žฌ ํŽ˜์ด์ง€์—์„œ ์ด๋™. ๊ธฐ๋ณธ๊ฐ’) -->
        <a href="#">๋‚ด ํŽ˜์ด์ง€๋กœ ์ด๋™</a>
        <a href="https://www.naver.com" target="_blank">๋„ค์ด๋ฒ„๋กœ ์ด๋™</a>
        <a href="https://google.com" target="_self">๊ตฌ๊ธ€๋กœ ์ด๋™</a>
        <br> ===================== <br>
        <!-- ์‚ฌ์ง„/์ด๋ฏธ์ง€ ๋„ฃ๊ธฐ : img ํƒœ๊ทธ. ๋‹ซ๋Š” ํƒœ๊ทธ ์—†์Œ -->
        <!-- src :  ์ด๋ฏธ์ง€์˜ ๊ฒฝ๋กœ๋ฅผ ๋„ฃ๊ธฐ. ์ ˆ๋Œ€๊ฒฝ๋กœ/์ƒ๋Œ€๊ฒฝ๋กœ/url/blob ์ „๋ถ€ ๊ฐ€๋Šฅ! -->
        <!--
            ์ƒ๋Œ€๊ฒฝ๋กœ : ํ˜„์žฌ ํŒŒ์ผ์—์„œ์˜ ์ƒ๋Œ€์ ์ธ ๊ฒฝ๋กœ๋กœ, ํ˜„์žฌ ํŒŒ์ผ์—์„œ์˜ ๋ชฉ์ ์ง€๊นŒ์ง€์˜ ๊ฒฝ๋กœ
                       .. : ์ƒ์œ„ ํด๋”
                       .  : ํ˜„์žฌ ๊ฒฝ๋กœ(ํด๋”)
                       /  : ์–ด๋–ค ํ”„๋กœ์ ํŠธ์˜ ๊ธฐ์ค€์ด ๋˜๋Š” ๊ฒฝ๋กœ
            ์ ˆ๋Œ€๊ฒฝ๋กœ(๋น„์ถ”) : ์ปดํ“จํ„ฐ์˜ ์ตœ์ƒ์œ„ ํด๋”์—์„œ์˜ ๊ฒฝ๋กœ๋กœ, ํ•ด๋‹น ํด๋”์—์„œ ๋ชฉ์ ์ง€๊นŒ์ง€์˜ ๊ฒฝ๋กœ
            URL : ์›นํŽ˜์ด์ง€,FTP ๋“ฑ์˜ ๊ฒฝ๋กœ
        -->
        <img src="cat.jpg" alt="๊ณ ์–‘์ด ์ด๋ฏธ์ง€" width="400">
        <!-- width๋งŒ ์กฐ์ •ํ•˜๋ฉด ๋น„์œจ์— ๋งž์ถฐ์„œ ์ค„์–ด๋“ค๊ณ , ๊ฐ€๋กœ์„ธ๋กœ ๋‘˜๋‹ค ์กฐ์ ˆํ•˜๋ฉด ๋น„์œจ์กฐ์ • ์•ˆ๋จ-->
        <!-- ์ž๋™์™„์„ฑ ctrl + space -->
        <!-- alt : ์ด๋ฏธ์ง€๊ฐ€ ๋œจ์ง€ ์•Š์„ ์‹œ ์„ค๋ช…ํ•ด์ฃผ๋Š” ๋ฌธ๊ตฌ -->
        <br> ===================== <br>
        <!-- ๋ฒ„ํŠผ ๋งŒ๋“ค๊ธฐ-->
        <button>๋ˆŒ๋Ÿฌ๋ณด์„ธ์š”!</button>
        <br> ===================== <br>

        <a href="https://www.naver.com">
            <img src="https://i.namu.wiki/i/p_1IEyQ8rYenO9YgAFp_LHIAW46kn6DXT0VKmZ_jKNijvYth9DieYZuJX_E_H_4GkCER_sVKhMqSyQYoW94JKA.svg" alt="" width="100">
            <div>๋„ค์ด๋ฒ„๋กœ ์ด๋™</div>
        </a>
        <mark>์•ˆ๋‡ฝํ•˜์„ธ์šค</mark> <!-- ํ˜•๊ด‘ํŽœ ํšจ๊ณผ -->




    </body>
</html>

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