1. HTML 문서의 기본 구조
HTML(HyperText Markup Language)은 웹 페이지의 뼈대를 만드는 언어다. HTML의 기본 구조는 <!DOCTYPE html> 선언문으로 시작하며, HTML5 문서임을 나타낸다. 그 다음, <html>, <head>, <body> 태그가 차례로 등장한다.
- <html lang="en">: HTML 문서의 최상위 태그로, 문서의 언어를 설정하는 lang 속성을 포함한다.
- <head>: 메타데이터와 제목을 포함하며, <title> 태그에 페이지 제목을 적으면 브라우저 탭에 표시된다.
- <body>: 페이지의 모든 콘텐츠가 들어가는 곳으로, 제목, 문단, 이미지, 링크 등 모든 요소가 <body> 태그 안에 포함된다.
2. 텍스트와 목록 작성하기
텍스트 요소를 작성할 때는 제목은 <h1>, <h2> 등의 태그를 사용하고, 일반 문단은 <p> 태그를 사용한다. 목록을 만들 때는 순서가 없는 목록과 순서가 있는 목록을 구분해 작성할 수 있다.
- <h1> ~ <h6>: 제목을 표시하는 태그로, 숫자가 작을수록 더 큰 제목으로 표시된다.
- <p>: 문단을 표시하는 태그다.
- <ul>: 순서가 없는 목록을 만들 때 사용하며, 목록 항목은 <li> 태그로 작성한다.
- <ol>: 순서가 있는 목록을 만들 때 사용하며, 목록 항목은 <li> 태그로 작성한다.
- <b>: 텍스트를 굵게 강조할 때 사용한다.
예시
<ul>
<li><b>총 21,074개</b>의 EV 충전기</li>
<li><b>400,000달러</b> 연구개발비</li>
<li><b>12</b>개의 국제 특허</li>
</ul>이와 같은 방식으로 목록을 만들고, 중요한 숫자나 텍스트에 <b> 태그를 적용하면 굵게 강조할 수 있다.
3. CSS로 스타일 추가하기
CSS(Cascading Style Sheets)는 HTML에 스타일을 입혀 웹 페이지를 더욱 아름답고 일관성 있게 만들어준다. HTML 문서의 <head> 안에 <style> 태그를 넣고, 그 안에 CSS 코드를 작성하면 된다.
- body: 전체 웹 페이지의 배경색이나 기본 폰트 등을 설정할 수 있다.
- h1, h2: 제목의 색상, 크기, 마진 등을 지정하여 시각적인 우선순위를 조정할 수 있다.
- ul, li: 목록의 스타일을 변경하며, 점이나 번호 스타일을 제거하거나 간격을 조정할 수 있다.
- a: 링크의 색상을 설정하고, hover 속성을 이용해 마우스를 올렸을 때 색상을 변경할 수 있다.
예시
<style>
body {
background-color: #f4f4f9;
font-family: Arial, sans-serif;
}
h1 {
color: #2a6496;
font-size: 2em;
}
ul {
list-style-type: none; /* 목록 점을 제거한다 */
}
li {
color: #333;
font-size: 1.1em;
}
b {
color: #d9534f; /* 강조된 텍스트 색상 */
}
a {
color: #337ab7;
text-decoration: none;
}
a:hover {
color: #23527c;
text-decoration: underline;
}
</style>이렇게 하면 웹 페이지의 텍스트 색상, 배경색, 링크 스타일 등이 변경된다. 각 요소를 이해하며 CSS 속성을 지정하면, HTML로 만든 페이지가 더 읽기 좋고 깔끔해진다.
4. DOM 트리와 형제/자식 관계
HTML 문서의 구조는 DOM(Document Object Model) 트리 형태로 표현된다. DOM 트리는 HTML 요소들을 계층적으로 나타내며, 각 요소는 부모, 자식, 형제 관계로 구성된다. 예를 들어, <ul> 태그는 <li> 태그를 자식 요소로 가지고, 각 <li>는 서로 형제 요소로 관계를 가진다.
html을 작성하다보면 이 부분이 헷갈린다. 다시 한번 짚어보자.
HTML에서의 형제 관계란?
HTML에서 형제 관계란 같은 부모를 가진 요소들 간의 관계를 말한다. 예를 들어, 한 div 태그 안에 여러 개의 p 태그가 있다면, 이 p 태그들은 서로 형제 관계에 있다고 할 수 있다.
형제 관계 예시
아래 예시에서 <li> 태그들은 모두 <ul>의 자식 요소이며, 서로 형제 관계에 있다.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>위 코드에서:
- <ul>이 부모 요소이고, 그 안에 포함된 <li>들은 모두 <ul>의 자식 요소이다.
- 각 <li>는 같은 부모를 공유하고 있으므로 형제 관계에 있다.
형제 관계의 시각적 이해
형제 관계를 쉽게 이해하려면, HTML 문서를 나무(트리)로 상상할 수 있다. 부모 노드에서 같은 레벨로 뻗어 나가는 가지가 형제 노드들이다. 예를 들어:
<ul>
├── <li>Item 1</li>
├── <li>Item 2</li>
└── <li>Item 3</li>
</ul>위 트리 구조에서 <li>Item 1</li>, <li>Item 2</li>, <li>Item 3</li>는 서로 형제 노드다.
왜 li 안에 ul을 넣지 않아야 할까?
HTML 구조상 의미와 사용 목적을 지키기 위해서다. 예를 들어 li 태그는 하나의 목록 항목을 나타내기 위한 태그이므로, 그 안에 또 다른 ul을 넣는 것은 구조적으로 혼란을 줄 수 있다. HTML 태그는 각자의 역할이 있으므로, 특정 역할을 가진 태그 안에 다른 의미의 태그를 넣는 것은 좋지 않다.
- 목록의 논리적인 의미: <ul>과 <ol> 태그는 목록을 나타내고, 그 안의 <li>는 목록 항목을 정의한다. 따라서 li 안에 또 다른 ul이 들어가면 브라우저가 이를 잘못 해석하거나, 문서 구조가 복잡해질 수 있다.
잘못된 예시
<ul>
<li>
Item 1
<ul>
<li>Nested Item</li> <!-- 이런 식으로 중첩하면 혼란을 줄 수 있음 -->
</ul>
</li>
</ul>위와 같은 중첩 구조는 특별히 목록 안에 하위 목록이 필요한 경우가 아니라면 지양하는 것이 좋다. HTML 문서는 읽기 쉽고 논리적으로 구성되어야 하기 때문에, 형제 관계가 어긋나지 않도록 간단하고 직관적인 구조를 유지하는 것이 중요하다.
'개발하는 디자이너 > 01. 디자이너가 알아두면 좋을 개발 상식' 카테고리의 다른 글
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 07. CSS 실습 (3) | 2024.11.18 |
|---|---|
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기 (0) | 2024.11.12 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍) (1) | 2024.11.11 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소 (0) | 2024.11.07 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념 (3) | 2024.11.07 |