Chapter 1. Lists

목록을 표편하는 방법

<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의 배경에 그림을 넣는다.