HTML 태그의 구성
HTML 태그는 두 가지 요소로 구성되어 있습니다. 태그 이름과 속성(attribute)입니다.
1. 태그 이름
태그 이름은 계속 봐왔던 p, li, img 이런 것들입니다. 태그를 상징하는 <> 기호 안에 태그 이름을 가장 먼저 넣어주게 됩니다. <p>, <li>, <img> 처럼 말이죠.
2. 속성
모든 HTML 태그는 속성이라는 추가 정보를 가질 수 있습니다. 태그 이름이 아닌 것은 모두 속성이라고 생각하면 됩니다.
속성은 일반적으로 속성 이름과 속성 값을 하나의 쌍으로 갖게 됩니다. (예: name="value") 만약 HTML 태그가 <p>, </p> 태그처럼 둘로 나누어져 있다면, 시작 태그에 속성을 적어줍니다.
예시를 살펴봅시다.
<li id="favorite">우유</li>
위 <li> 태그에는 id라는 속성이 있고, 그 값은 "favorite"입니다.
한 태그가 여러 속성을 가질 수도 있습니다.
<img alt="logo" class="logo-img" src="/images/music/logo.png"/>
위 <img> 태그에는 총 세 개의 속성이 있네요. alt라는 속성은 "logo"라는 값을, class라는 속성은 "logo-img"라는 값을, src라는 속성은 "/images/music/logo.png"라는 값을 각각 갖고 있습니다.
HTML 태그의 구조
하나의 HTML 태그에 대해 이해했다면, 태그 사이의 관계에 대해서도 이해해야 합니다.
한 페이지의 HTML 태그는 서로 연결되어 있습니다. 이 구조가 마치 가계도나 나무(트리)와 유사해서, 부모 관계라고 부르거나 트리 구조라도고 부릅니다.
<ul>
<li>커피</li>
<li>녹차</li>
<li>우유</li>
</ul>
여기선 <ul> 태그가 <li> 태그를 포함하고 있으니 <ul> 태그가 부모, <li> 태그가 자녀인 셈이죠.
데이터를 모으는 데 있어서 중요한 것은 태그의 구조입니다. <ul> 태그와 <li> 태그의 기능보다 더 중요한 것은, "<ul> 태그 아래에 세 개의 <li> 태그가 있고, 그 안에 데이터가 있다는 사실"입니다.
<ul> 태그 아래의 첫 번째 <li> 태그는 '커피'라는 텍스트를 담고 있고, 두 번째 <li> 태그는 '녹차'를, 세 번째 <li> 태그는 '우유'를 담고 있습니다. <ul>태그와 <li> 태그의 기능을 몰라도 데이터의 구조를 파악할 수 있는거죠.
사실 실제 HTML 코드는 좀 더 복잡하게 이루어져 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Sample Website</title>
</head>
<body>
<h2>HTML 연습!</h2>
<p>이것은 첫 번째 문단입니다.</p>
<p>이것은 두 번째 문단입니다!</p>
<ul>
<li>커피</li>
<li>녹차</li>
<li>우유</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/A_small_cup_of_coffee.JPG/550px-A_small_cup_of_coffee.JPG">
</body>
</html>
하지만 이 코드에서도 구조를 파악해 낼 수 있습니다.
<html> 태그에 <head> 태그와 <body>태그가 있고, <body> 태그 안에는 <h2> 태그, <p>태그, <ul> 태그, <img> 태그가 있고, <ul> 태그 안에는 세 개의 <li> 태그가 있다고 할 수 있겠네요.
'IT > HTML' 카테고리의 다른 글
| 크롬 개발자 도구로 CSS 선택자 알아내기 (0) | 2022.11.10 |
|---|---|
| CSS 선택자 정리 (0) | 2022.11.10 |
| CSS로 HTML 꾸미기(기초) (0) | 2022.11.09 |
| HTML 기본 태그 (0) | 2022.11.09 |