준비중..
02 list 만들기
# 리스트 만들기
리스트를 사용하여 웹 페이지를 더욱 간결하게!
<a name="list-intro"></a>
---
### 리스트 개요
HTML은 목록 작성을 위해 리스트태그(`<li>`)를 제공합니다. 리스트태그는 두 개의 상위 태그를 가지는데, 바로 `<ol>`과 `<ul>` 입니다. `<ol>`태그는 정렬된 목록(ordered list)을 뜻합니다. `<ul>`태그는 정렬하지않은 목록(unordered list)를 의미합니다.
<a name="ordered-list"></a>
---
### 정렬 리스트
순서가 있는 목록을 위해 `<ol>`태그를 사용합니다. 사용 형식은 다음과 같습니다. 먼저 목록내용들을 `<li> ... </li>`에 적고, 그 밖을 `<ol> ... </ol>`로 감싸줍니다.
```
<ol>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ol>
```
아래는 예제코드의 전체 HTML 문서 내용과 결과화면 입니다.
```
<!DOCTYPE html>
<html>
<head>
<!-- 한글이 깨지지 않기위해 글자 인코딩방식 추가 -->
<meta charset="utf-8">
<title>Orderd List</title>
</head>
<body>
<h1>좋아하는 음식 순위</h1>
<ol>
<li>김치찌개</li>
<li>삼겹살</li>
<li>쭈꾸미</li>
</ol>
</body>
</html>
```
<a name="unordered-list"></a>
---
### 비정렬 리스트
순서가 없는 목록은 `<ol>`태그를 사용합니다. 사용 형식은 정렬 리스트와 같습니다. 다른점은 단 하나, 목록 내용(`<li> ... </li>`)을 `<ul> ... </ul>`로 감싸준다는 것입니다.
```
<ul>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
```
실제 HTML 코드로 확인해봅시다.
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unorderd List</title>
</head>
<body>
<h1>취미활동</h1>
<ul>
<li>음악감상</li>
<li>자전거 타기</li>
<li>관상어 키우기</li>
</ul>
</body>
</html>
```
<a name="list-practice"></a>
---
### 자기소개하기
오늘까지 배운 내용들을 토대로 간단한 자기소개 페이지를 작성해 보겠습니다. 먼저 HTML 페이지 골격과 간단한 내용들을 적어봅시다.
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자기소개</title>
</head>
<body>
<h1>나를 소개합니다</h1>
<img src="https://goo.gl/BFX4PW" />
</body>
</html>
```
조금 더 작성해볼까요?
```
...
<body>
<h1>나를 소개합니다</h1>
<img src="https://goo.gl/BFX4PW" />
<h2>프로필</h2>
<p>이름: 닌자</p>
<p>성별: 남</p>
<p>나이: 31</p>
<h2>좋아하는 음식</h2>
<p>치 킨</p>
<p>보 쌈</p>
<p>샐러드</p>
<p>쌀국수</p>
<h2>취미 활동</h2>
<p>물고기 키우기</p>
<p>자전거 타기</p>
<p>음악 듣기</p>
</body>
</html>
```
음.. 어떻습니까?? 아직 리스트를 활용하지 않았다구요?? 맞습니다!! 프로필 먼저 리스트로 변경해봅시다.
```
...
<body>
<h1>나를 소개합니다</h1>
<img src="https://goo.gl/BFX4PW" />
<h2>프로필</h2>
<ul>
<li>이름: 닌자</li>
<li>성별: 남성</li>
<li>나이: 31</li>
</ul>
<h2>좋아하는 음식</h2>
<p>치 킨</p>
<p>보 쌈</p>
<p>샐러드</p>
<p>쌀국수</p>
<h2>취미 활동</h2>
<p>물고기 키우기</p>
<p>자전거 타기</p>
<p>음악 듣기</p>
</body>
</html>
```
나머지 `<p>`태그의 내용들도 리스트를 이용해 변경해보겠습니다.
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자기소개</title>
</head>
<body>
<h1>나를 소개합니다</h1>
<img src="https://goo.gl/BFX4PW" />
<h2>프로필</h2>
<ul>
<li>이름: 닌자</li>
<li>성별: 남성</li>
<li>나이: 31</li>
</ul>
<h2>좋아하는 음식</h2>
<ol>
<li>치 킨</li>
<li>보 쌈</li>
<li>샐러드</li>
<li>쌀국수</li>
</ol>
<h2>취미 활동</h2>
<ul>
<li>물고기 키우기</li>
<li>자전거 타기</li>
<li>음악 듣기</li>
</ul>
</body>
</html>
```
.
.
.
---
### 핵심 키워드
+ [리스트 개요](#list-intro)
+ [정렬된 리스트](#ordered-list)
+ [비정렬 리스트](#unordered-list)
+ [자기소개하기](#list-practice)
---
### Next..
다음시간에는 표만들기, 영역나누기, 텍스트 꾸미기에 대해 배워보겠습니다.