위 사진과 같이 네비게이션 바의 메뉴에서 항목과 항목 사이를 분리하는 것을 HORIZONTAL LIST SEPARATOR(한국말이 적당한게 없네요.)라고 하는데 이를 삽입하는 CSS는 다음과 같습니다.
<style type="text/css">
li {
display:inline; 세로형태의 목록을 가로로 만듭니다.
list-style-type:none; 목록의 앞에 둥근 점을 없앱니다.
padding-left:1em; em은 글자의 크기에 따라서 패딩도 비례적으로 변하게 합니다.
margin-left:1em;
border-left:1px solid #ccc; 왼쪽 테두리만 부여해서 항목분리표시를 만듭니다.
}
li:first-child {
border-left:none; 리스트 항목의 첫번째는 좌측에 항목분리표시가 안나오게 합니다.
}
</style>
</head>
<body>
<ul>
<li>서울</li>
<li>인천</li>
<li>부산</li>
</ul>
</body>
여기서 first-child 선택자는 li항목의 첫번째 항목을 선택하는 방법입니다. 마지막을 선택하는 것은 last-child입니다. 이와같이 첫번째와 마지막을 선택할 수 있는데 중간의 몇번째에 해당하는 것을 선택하려면 nth-child(3) 를 사용합니다. 세번째 항목을 선택하는 것이죠.
더보기
'부트스트랩.CSS.JS/CSS2.1' 카테고리 관련글
