Whiteship's Note

Chapter 1. Lists

View/HTML/CSS : 2008.03.18 19:40


목록을 표편하는 방법

<br/> 사용

Apples<br />

Spaghetti<br />

Green Beans<br />

Milk<br />
  • CSS를 적용할 수가 없다.
  • 글자가 길면 다음 줄로 넘어가 버리는데, 이 때 알아보기가 쉽지 않다.
  • 비추.

<ol>, <li> 사용

<ul>

<li>Apples</li>

<li>Spaghetti</li>

<li>Green Beans</li>

<li>Milk</li>

</ul>
  • 아이템 앞에 bullet을 붙인다.
  • <ul> 이나 <ol>의 하위 엘리먼트로 사용한다.
  • 앞에 bullet이 붙어있기 때문에 다음 줄로 넘어가도 헷갈리지 않는다.
  • block-level 엘리먼트다.

Block-level VS Inline

  • block-level 엘리먼트: 자신만의 줄을 가지고 있으며, 줄바꿈을 한다. 다른 block-level 엘리먼트나 inline 엘리먼트를 포함할 수 있다.
  • inline 엘리먼트: 다른 inline 엘리먼트와 같은 줄에 보여진다. 오직 inline 엘리먼트만 포함할 수 있다.

Bullet 때어내기

  • bullet을 보고 싶지 않을 때는 CSS를 사용해서 때어낼 수 있다.
ul {

list-style: none;

}
  • 들여쓰기도 보고 싶지 않을 때는 CSS에 padding을 0으로 설정한다.
ul {

list-style: none;

padding-left: 0;

}
  • Bullet 대신에 이미지를 사용할 수 있다.
ul {

list-style-image: url(fancybullet.gif);

}
  • 하지만 위의 방법은 특정 브라우저에서는 이상하게 보일 수 있다.
ul {

list-style: none;

}



li {

background-image: url(fancybullet.gif) no-repeat 0 50%;

padding-left: 17px;

}
  • 기본 bullet을 없애고, li의 배경에 그림을 넣는다.

'View > HTML/CSS' 카테고리의 다른 글

Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
Chapter 6. Strong, EM and Other Phrase Elements  (0) 2008.03.23
Chapter 5. Forms  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.23
Chapter 4. Quatations  (0) 2008.03.20
Chapter 3. Tables are Evil?  (0) 2008.03.18
Chapter 2. Headings  (0) 2008.03.18
Chapter 1. Lists  (0) 2008.03.18
top




: 1 : ··· : 14 : 15 : 16 : 17 : 18 :