1. 그룹 짓기
HTML 코드를 작성하다 보면 관련 있는 요소를 그룹으로 묶어야 하는 경우가 많다.
예를 들어, 네이버 메인 페이지는 검색 영역, 로그인 영역, 본문 배너 영역, 사이드 배너 영역, 신문 기사 영역 등
관련 있는 요소끼리 그룹 지어져 있다.
웹 페이지를 만들 때 이렇게 관련 있는 요소끼리 그룹으로 묶으면,
레이아웃을 구성하기기가 쉬워지고 HTML 페이지의 구조를 더 깔끔하게 작성할 수 있다.
HTML에서는 이런 그룹 짓기 작업을 div 태그와 span 태그로 수행한다.
관련 있는 요소끼리 그룹 짓는 작업을 다른 영역과 분리한다는 의미로 공간 분할이라고 한다.
그래서 그룹 짓기 작업을 수행하는 div와 span 태그를 공간 분할 태그라고도 한다.
1 - 1. div 태그
div 태그는 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용한다.
<div></div>
예를 들어, 다음과 같이 영화와 TV 프로그램을 소개하는 웹 페이지를 만든다고 해 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>DIV</title>
</head>
<body>
<p>영화 소개</p>
<p>영화를 소개하는 페이지입니다.</p>
<p>TV 프로그램 소개</p>
<p>TV 프로그램을 소개하는 페이지입니다.</p>
</body>
</html>
코드처럼 body 태그 안에 영역 구분 없이 표시하려는 텍스트만 작성하면
코드가 복잡해질수록 텍스트를 구분하기 어려워진다.
이 코드를 div 태그를 사용해 영역별로 그룹을 지으면 다음과 같다.
<div class="movie">
<p>영화 소개</p>
<p>영화를 소개하는 페이지입니다.</p>
</div>
<div class="tv">
<p>TV 프로그램 소개</p>
<p>TV 프로그램을 소개하는 페이지입니다.</p>
</div>
단순하게 관련 있는 요소를 그룹으로 묶기만 해도 HTML 문서의 구조가 훨씬 깔끔해진다.
여기 나온 class 속성은 이후 포스트에서 설명한다.
1 - 2. span 태그
span 태그는 인라인 요소를 그룹으로 묶을 때 사용한다.
<span></span>
여기서 다음 코드를 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>span</title>
</head>
<body>
<p>영화 소개</p>
<p>이번 영화의 하이라이트 장면은 바로 여기입니다.</p>
</body>
</html>
코드의 p 태그에서 '하이라이트' 텍스트 부분만 디자인을 다르게 적용하고 싶다면 어떻게 해야 할까?
하나의 태그 안에 작성된 텍스트 일부만 디자인을 다르게 적용하려면 태그 안에서 공간을 분할하여야 한다.
이럴 때 span 태그를 사용한다.
텍스트도 인라인 요소이기 때문에 다음 코드처럼 내부 콘텐츠를 span 태그로 그룹 지을 수 있다.
<p>영화 소개</p>
<p>이번 영화의 <span>하이라이트</span> 장면은 바로 여기입니다.</p>
이렇게 그룹으로 묶어 요소의 공간을 분할하면 분할된 요소에 CSS로 스타일을 적용할 수 있다.
참고로 현재는 스타일을 사용하기 전이므로 이대로 실행하면 '하이라이트' 텍스트 부분에 변화가 없다.
2. 목록 만들기
목록(list)은 목차와 메뉴를 구성할 때 주로 사용하지만, 그 외에도 웹 페이지의 다양한 곳에서 사용할 수 있다.
목록을 생성할 때 사용할 수 있는 태그로는 ul, ol, dl 태그가 있다.
2 - 1. ul 태그 (unordered list)
ul 태그는 순서가 없는 비순서형 목록을 생성할 때 사용한다.
이때 목록 내용은 li 태그로 구성한다. (list item)
<ul>
<li>목록 내용 1</li>
<li>목록 내용 2</li>
(중략)
<li>목록 내용 n</li>
</ul>
ul 태그를 사용하면 목록 내용마다 글머리 기호가 붙는다.
다음 코드의 실행결과를 보자.
<h1>판매 중인 과일</h1>
<ul>
<li>바나나</li>
<li>사과</li>
<li>수박</li>
</ul>
2 - 2. ol 태그 (ordered list)
ol 태그는 순서형 목록을 생성할 때 사용한다.
ul 태그와 마찬가지로 li 태그로 목록 내용을 구성한다.
<ol>
<li>목록 내용 1</li>
<li>목록 내용 2</li>
(중략)
<li>목록 내용 n</li>
</ol>
ol 태그를 사용하면 다음 코드의 실행결과처럼 목록 내용에 번호가 붙는다.
<h1>오늘 할 일</h1>
<ul>
<li>아침 먹기</li>
<li>점심 먹기</li>
<li>저녁 먹기</li>
</ul>
2 - 3. dl 태그 (description list)
dl 태그는 정의형 목록을 만들 때 사용한다.
정의형 목록은 용어와 용어 설명을 나열한 형태의 목록이라고 보면 된다.
dl 태그로 목록을 생성할 때는 li 태그 대신에 dt 태그로 용어를, dd 태그로 용어 설명을 작성한다. (description term, description details)
<dl>
<dt>용어 1</dt>
<dd>용어 설명 1</dd>
(중략)
<dt>용어 n</dt>
<dd>용어 설명 n</dd>
</dl>
정의형 목록은 다음 코드처럼 작성한다.
<dl>
<dt>HTML</dt>
<dd>HTML은 Hyper Text Markup Language의 약자로 웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어입니다.</dd>
<dt>CSS</dt>
<dd>CSS는 Cascading Style Sheets의 약자로 웹 문서를 꾸미기 위한 목적으로 개발된 언어입니다.</dd>
</dl>
'SecurityFirst > Web' 카테고리의 다른 글
| HTML 기초 공부 - 6. 멀티미디어 설정하기 (0) | 2023.10.17 |
|---|---|
| HTML 기초 공부 - 5. 표 만들기 (0) | 2023.10.16 |
| HTML 기초 공부 - 4. 실무에서 자주 사용하는 HTML 필수 태그 다루기 3 (0) | 2023.10.16 |
| HTML 기초 공부 - 2. 실무에서 자주 사용하는 HTML 필수 태그 다루기 1 (0) | 2023.10.09 |
| HTML 기초 공부 - 1. HTML 문서 작성을 위한 기본 구성 요소 살펴보기 (0) | 2023.09.10 |
