HTML 기초 및 Tag

LeeByoungWookΒ·2022λ…„ 12μ›” 19일
MegabyteSchoolhtmlκ°œλ°œμžμ·¨μ—…λΆ€νŠΈμΊ ν”„κ΅­λΉ„μ§€μ›κ΅μœ‘λ‚΄μΌλ°°μ›€μΉ΄λ“œλ©”κ°€λ°”μ΄νŠΈμŠ€μΏ¨νŒ¨μŠ€νŠΈμΊ νΌμŠ€
0
post-thumbnail

πŸ’‘ HTMLμ΄λž€..

  • Hyper Text Markup Language
  • μ›Ή λ¬Έμ„œλ₯Ό λ§Œλ“€κΈ° μœ„ν•˜μ—¬ μ‚¬μš©ν•˜λŠ” 기본적인 μ›Ή μ–Έμ–΄μ˜ ν•œ μ’…λ₯˜μ΄κ³ , ν•˜μ΄νΌν…μŠ€νŠΈλ₯Ό μž‘μ„±ν•˜κΈ° μœ„ν•΄ 개발됨

🧾 HTML의 ꡬ쑰

  • EX)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>였늘의 날씨</h1>
  <p>많이 μΆ”μ›Œμ§€λ‹ˆ λ”°λ“―ν•˜κ²Œ μž…μœΌμ„Έμš”!</p>
  <br>
</body>
</html>

!DOCTYPE

  • λ¬Έμ„œ ν˜•μ‹μ„ μ •μ˜
  • HTML5λŠ” ν˜„μž¬ HTML의 μ΅œμ‹  규격
  • !DOCTYPE HTML은 HTML5λ₯Ό ν‘œν˜„

lang

  • μ›Ήλ¬Έμ„œμ˜ 전체 λ˜λŠ” 일뢀에 κ΄€λ ¨ μ–Έμ–΄λ₯Ό μ§€μ •ν•˜λŠ” 속성

기본 ꡬ쑰

  • <html> TagλŠ” <head>와 <body>둜 ꡬ성
  • <head>
    • HTML의 속성이 ν¬ν•¨λ˜μ–΄μžˆλŠ” Tag, 제λͺ©μ΄λ‚˜ 정보등이 λ“€μ–΄μžˆμŒ
  • <body>
    • HTML의 ꡬ쑰λ₯Ό λ‹΄κ³ μžˆλŠ” Tag
    • ν‘œν˜„ν•  μ›Ή νŽ˜μ΄μ§€μ˜ λ ˆμ΄μ•„μ›ƒμ΄ ν¬ν•¨λ˜μ–΄ 있음

head κ΄€λ ¨ Tag

<meta>

  • μ›Ή νŽ˜μ΄μ§€μ˜ λΆ€κ°€ 정보듀을 ν‘œκΈ°ν•˜λŠ” Tag

<title>

  • μ›Ή νŽ˜μ΄μ§€μ˜ 제λͺ©μ„ μ„€μ •ν•˜λŠ” Tag
  • λ‹€λ₯Έ νŒŒμΌλ“€κ³Ό 연결을 ν•˜λŠ” Tag
  • λŒ€ν‘œμ μœΌλ‘œ CSS, νŒŒλΉ„μ½˜ 등이 있음

ν…μŠ€νŠΈ κ΄€λ ¨ Tag

<h[1~6]>

  • 제λͺ© κ΄€λ ¨ Tag
  • 보톡 <h1> λΆ€ν„° <h6> 순으둜 μ€‘μš”λ„λ₯Ό ν‘œν˜„
<h1>제λͺ©1<h1>
<h2>제λͺ©2<h2>
<h3>제λͺ©3<h3>
<h4>제λͺ©4<h4>
<h5>제λͺ©5<h5>
<h6>제λͺ©6<h6>

<p>

  • 문단을 ν‘œν˜„ν•˜λŠ” Tag
  • <p> Tag μ•ˆμ—μ„œλŠ” μ€„λ°”κΏˆμ„ ν•˜μ—¬λ„ ν•˜λ‚˜μ˜ λ¬Έλ‹¨μœΌλ‘œ 인식
<p>P νƒœκ·Έ μ•ˆμ—μ„œλŠ”
μ€„λ°”κΏˆμ„ ν•˜μ—¬λ„ ν•˜λ‚˜μ˜ λ¬Έλ‹¨μœΌλ‘œ
μΈμ‹ν•œλ‹€.</p>

<b>

  • ꡡ은 글씨 효과λ₯Ό μ£ΌλŠ” Tag

<ins>

  • 밑쀄 효과λ₯Ό μ£ΌλŠ” Tag

<del>

  • μ·¨μ†Œμ„  효과λ₯Ό μ£ΌλŠ” Tag

<br>

  • 문단 λ‚΄μ˜ μ€„λ°”κΏˆ Tag

λͺ©λ‘ κ΄€λ ¨ Tag

<ul>

  • Unordered list, μˆœμ„œκ°€ μ—†λŠ” λͺ©λ‘
<ul>
 <li>1번</li>
 <li>2번</li>
</ul>
<<좜λ ₯>>
- 1번
- 2번

<ol>

  • Ordered list, μˆœμ„œκ°€ μžˆλŠ” λͺ©λ‘
<ol>
 <li>1번</li>
 <li>2번</li>
</ol>
  1. 1번
  2. 2번

<li>

  • list item, ν•­λͺ© Tag

링크 κ΄€λ ¨ Tag

<a>

  • Anchor, ν•˜μ΄νΌλ§ν¬ Tag
    <a href="https://www.google.co.kr">ꡬ글</a> ꡬ글

<img>

  • image Tag
    <img src="https://www.google.com/favicon.ico" alt=ꡬ글 둜고">
    ꡬ글 둜고

<svg>

  • SVG ν˜•μ‹μ˜ κ·Έλž˜ν”½ Tag
  • λ³„λ„μ˜ 파일 없이 HTML μ•ˆμ—μ„œ μ½”λ”©μœΌλ‘œ 넣을 μˆ˜λ„ 있음

ν…Œμ΄λΈ” κ΄€λ ¨ Tag

<table>

  • ν…Œμ΄λΈ”μ„ λ§Œλ“œλŠ” Tag

<tr>

  • Table row, ν…Œμ΄λΈ”μ˜ 행을 λœ»ν•˜λŠ” Tag

<td>

  • Table data, ν…Œμ΄λΈ”μ˜ λ‚΄μš©, 즉 셀을 ν‘œν˜„
    <table>
γ€€γ€€<tr>
γ€€γ€€γ€€γ€€<td>A</td>
γ€€γ€€γ€€γ€€<td>B</td>
γ€€γ€€γ€€γ€€<td>C</td>
γ€€γ€€</tr>
γ€€γ€€<tr>
γ€€γ€€γ€€γ€€<td>D</td>
γ€€γ€€γ€€γ€€<td>E</td>
γ€€γ€€γ€€γ€€<td>F</td>
γ€€γ€€</tr>
</table>
    γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€ γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€
    ABC
    DEF

<th>

  • Table heading, ν…Œμ΄λΈ”μ˜ ν–‰
  • Default둜 κ°€μš΄λ° 정렬이고 ꡡ은 κΈ€μ”¨λ‘œ ν‘œμ‹œλ¨
    <table>
γ€€γ€€<tr>
γ€€γ€€γ€€γ€€<th>A</th>
γ€€γ€€γ€€γ€€<th>B</th>
γ€€γ€€γ€€γ€€<th>C</th>
γ€€γ€€</tr>
γ€€γ€€<tr>
γ€€γ€€γ€€γ€€<td>a</td>
γ€€γ€€γ€€γ€€<td>b</td>
γ€€γ€€γ€€γ€€<td>c</td>
γ€€γ€€</tr>
</table>
    γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€ γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€γ€€γ€€ γ€€γ€€
    ABC
    abc
profile
LeeByoungWook
λ‹€μŒ 포슀트

HTML Semantic Tags

0개의 λŒ“κΈ€