요기보드3   필수기초 선택과목 요기보드 그누보드 로그인

HTML 과 CSS


리스트 태그 - ul, ol, li

웹문서에서 테이블만큼 많이 사용되는 태그가 바로 <li> 태그야.
간단한 리스트와 목차, 메뉴는 대부분 리스트 태그를 이용해. 이것 역시 따라 하면서 이해하고 CSS에서 모양을 꾸며 보자구.

1. lesson.html 파일에서 <div id="contents"> 부분을 아래 내용으로 수정해.



<div id="contents">
    <p>여기는 <strong>본문</strong> 입니다. <br>
    보통 본문에는 웹페이지의 주된 내용들이 들어가는 곳이므로
    내용을 좀 길게 쓰세요. 그래야 공부할 때 이해하기 편하거든요.
    </p>
    <p>좋은 책은 마음을 풍요롭게 합니다.</p>
    <li>누구를 위하여 종은 울리나: 헤밍웨이</li>
    <li>사랑할때와 죽을때: 레마르크</li>
    <li>천국에서 온 편지: 최인호</li>
</div>

<li> 태그는 인라인(In-line) 태그는 아니고 블록(Block) 태그야.
태그가 끝나면 자동으로 줄 바꿈을 해 버리기 때문이지.
저장 후 브라우저에서 확인해 보면 앞줄이 가지런히 정렬된 것을 볼 수 있을 거야.
이번에는 <ul>이라는 태그를 사용해서 전체 <li> 태그를 감싸 볼까?.

2. <li> 태그 전체를 아래와 같이 <ul> 태그로 감싸.



<ul>
    <li>누구를 위하여 종은 울리나: 헤밍웨이</li>
    <li>사랑할때와 죽을때: 레마르크</li>
    <li>천국에서 온 편지: 최인호</li>
</ul>

저장하고 브라우저에서 확인하면 이전보다 약간 안쪽으로 들여쓰기가 된 것을 볼 수 있어.
그런데 기본으로 보이는 맨 앞의 블릿 기호를 다른 것으로 바꿀 수 없을까? 당연히 이러한 디자인 요소는 CSS에서 처리해.

3. style.css 파일의 맨 아래에 다음과 같은 내용을 추가해.



ul {
    list-style: square;
} 

list-style: 속성에 square(네모)라는 속성값을 이용하여 변화를 주었어.
이 속성값으로는 disc, circle, square를 선택할 수 있고 사용자가 만든 그림을 기호로 사용할 수도 있어.

li태그
리스트 앞에 번호를 매기기 위해서는 <ul> 대신 <ol> 태그를 사용해.
(ul=Unordered list, ol=Ordered list의 의미야.)
<ol> 태그에서는 스타일로 앞의 숫자를 로마자, 영문 abc 순서로 표시할 수 있어.

ol태그
이 <ul>, <li> 태그는 여기서는 아주 간단하게 기본적인 기능만 설명하지만 CSS를 통하여 아주 강력하게 사용돼.
특히, 메뉴를 CSS로 꾸밀 때 전문가들은 이 <li> 태그를 멋지게 사용해.


목차제 목조회
0장 142
1장 106
87
65
2장 84
60
66
3장 68
72
4장 62
5장 59
65
6장 78
73
7장. 69
8장. 66
68
61
9장 61
74