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

2024. 3. 23. 22:28ยท๐Ÿ’œ HTML,CSS
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
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐Ÿ’œ HTML,CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

HTML, CSS ์†์„ฑ ์ •๋ฆฌ  (0) 2025.04.27
HTML&CSS ์‹ค์Šต11 (์ •๋ฆฌx)  (0) 2024.03.23
HTML&CSS ์‹ค์Šต10 (์ •๋ฆฌx)  (0) 2024.03.23
HTML&CSS ์‹ค์Šต9 (์ •๋ฆฌx)  (0) 2024.03.23
HTML&CSS ์‹ค์Šต8 (์ •๋ฆฌx)  (0) 2024.03.23
'๐Ÿ’œ HTML,CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • HTML, CSS ์†์„ฑ ์ •๋ฆฌ
  • HTML&CSS ์‹ค์Šต11 (์ •๋ฆฌx)
  • HTML&CSS ์‹ค์Šต10 (์ •๋ฆฌx)
  • HTML&CSS ์‹ค์Šต9 (์ •๋ฆฌx)
Genie_.
Genie_.
๋‚ด๊ฐ€ ๊ณต๋ถ€ํ•˜๋Š” ์ง€์‹์„ ๋ณต์Šตํ•˜๊ณ  ๊ธฐ๋กํ•˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค ๐Ÿ’ฌ
  • Genie_.
    Geine Dev
    Genie_.
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • ์ „์ฒด (153)
      • ๐Ÿ•น๏ธ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ (37)
        • ์ฝ”๋“œํŠธ๋ฆฌ (13)
        • ๋ฐฑ์ค€ (17)
        • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค (7)
      • ๐Ÿงก JavaScript (9)
      • ๐Ÿ’™ React (0)
      • ๐Ÿ’œ HTML,CSS (38)
      • ๐Ÿ’š Spring (6)
      • โค๏ธ JAVA (13)
        • Basic (13)
      • ๐ŸŒŸ CS (1)
      • โ„๏ธ ๋‚ด์ผ๋ฐฐ์›€์บ ํ”„ 7๊ธฐ (41)
      • ๐Ÿ… ์ž๊ฒฉ์ฆ (6)
        • ์ •๋ณด์ฒ˜๋ฆฌ๊ธฐ์‚ฌ (0)
        • SQLD (3)
        • ์ปดํ“จํ„ฐํ™œ์šฉ๋Šฅ๋ ฅ2๊ธ‰ (3)
      • ๐Ÿ—จ GIT (1)
      • ๐ŸŒฐ ์Šคํ„ฐ๋”” (1)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ๊ธ€์“ฐ๊ธฐ
  • ๊ณต์ง€์‚ฌํ•ญ

    • ๋ฉ”๋ชจ
  • ๋ฐ˜์‘ํ˜•
  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.0
Genie_.
HTML&CSS 1์ผ์ฐจ (์ •๋ฆฌx)

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ
์ƒ๋‹จ์œผ๋กœ

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

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.