[홈페이지제작] 아이템을 한 라인에 표시하는 방법 <li 태그>
<li> 태그의 li는 list item의 약자이다.
각각의 아이템을 <li> 태그를 이용하여 표시하면 기본적으로 각 아이템들은 라인별로 나타난다.
예를 들어 <li> 태그의 디폴트 결과는 다음과 같다.
- 리스트 아이템 1
- 리스트 아이템 2
- 리스트 아이템 3
위 결과에 대한 소스 코드는 다음과 같다.
|
<ul>
<li>리스트 아이템 1</li>
<li>리스트 아이템 2</li>
<li>리스트 아이템 3</li>
</ul> |
수직으로 펼쳐진 이 리스트 아이템을 수평으로 펼치려면 CSS에서의 display 속성을 inline으로 주면 된다.
- 리스트 아이템 1
- 리스트 아이템 2
- 리스트 아이템 3
|
|
<style>
li.inline {
display: inline;
}
</style>
<ul>
<li class="inline">리스트 아이템 1</li>
<li class="inline">리스트 아이템 2</li>
<li class="inline">리스트 아이템 3</li>
</ul> |
결과를 보면 알겠지만 display 속성을 inline으로 주면 불렛(bullet) 모양의 list-style-type이 없어진다. 그래서 조금은 허전한 듯 하다. 이런 이유로 수평으로 펼칠 경우 각각의 아이템 사이에 적당한 구분선을 삽입해 주는데 이 부분을 CSS를 이용하여 구현해 보자.
- 리스트 아이템 1
- 리스트 아이템 2
- 리스트 아이템 3
|
|
<style>
li.inline2 {
display: inline;
padding-left: 9px;
padding-right: 7px;
border-right: 1px dotted #D36;
}
li.last {
display: inline;
padding-left: 9px;
padding-right: 7px;
border-right: 0px;
}
</style>
<ul>
<li class="inline2">리스트 아이템 1</li>
<li class="inline2">리스트 아이템 2</li>
<li class="last">리스트 아이템 3</li>
</ul> |
여기서 눈여겨 볼 것은 마지막 리스트 아이템의 스타일 클래스를 별도로 지정해준 부분이다. 이렇게 하는 이유는 마지막 리스트 아이템 오른 쪽 옆에는 구분선이 나오면 안돼기 때문이다.
물론 구분선을 다음과 같이 조금 더 굵게 줄 수 도 있을 것이다.
- 리스트 아이템 1
- 리스트 아이템 2
- 리스트 아이템 3
|
|
<style>
li.inline3 {
display: inline;
padding-left: 9px;
padding-right: 7px;
border-right: 2px solid #D36;
}
li.last {
display: inline;
padding-left: 9px;
padding-right: 7px;
border-right: 0px;
}
</style>
<ul>
<li class="inline3">리스트 아이템 1</li>
<li class="inline3">리스트 아이템 2</li>
<li class="last">리스트 아이템 3</li>
</ul> |
아니면 다음과 같이 각각의 리스트 아이템에 경계선을 표시하여 박스 형태로 나타나게 할 수도 있을 것이다.
- 리스트 아이템 1
- 리스트 아이템 2
- 리스트 아이템 3
위 결과에 대한 소스 코드는 다음과 같다.
|
<style>
li.inline4 {
display: inline;
padding: 9px;
border: 1px solid #D36;
margin: 1px;
}
</style>
<ul>
<li class="inline4">리스트 아이템 1</li>
<li class="inline4">리스트 아이템 2</li>
<li class="inline4">리스트 아이템 3</li>
</ul> |
쇼핑몰창업 홈페이지제작 홍보마케팅 창업정보
국내1위 인터넷쇼핑몰 창업교육 나우앤 http://nowand.com/