목록을 표편하는 방법

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