CSS li 구분선 꾸미기 - ui li의 display:inline 스타일과 li:first-child
페이지 정보
조회 1,226회 작성일 22-04-10 17:36
본문
li 구분선 꾸미기
ui li의 display:inline 스타일
웹서핑을 하다보면 목록을 예쁘게 늘어 놓은 곳을 자주 볼 수 있다. 예를 들면 아래와 같은 것이다.
HOME | Notice | FAQ | Q&A
이것은 CSS 스타일을 이용해서 li의 구분선을 꾸미는 것이다. 아래에서는 그 예제와 사용방법을 설명한다.
li 구분선 꾸미기 - ui li의 display:inline 스타일과 li:first-child
li 태그 구분선 넣기 코드
이것을 구현하기 위해서는 두 가지가 필요하다.
html이나 php 등에서 요소를 만드는 것이고, css에서 스타일을 주는 것이다.
html의 예
[code]
<ul>
<li>HOME</li>
<li>FAQ</li>
<li>Q&A</li>
</ul>
[/code]
이렇게 저장한 후 아래의 css 코드를 작성하면, 위의 li 태그에 스타일을 적용해 준다.
css의 예
[code]
<style>
ul li {
display:inline;
border-left: 선의 모양;
}
ul li:first-child {
border-left: 원하는 모양;
}
</style>
[/code]
여기서 li부분은 줄을 만들라는 것인데, li:first-child라는 것이 중요하다.
만약 li:first-child 없이 그냥 놔두면 아래처럼 된다.
| HOME | Notice | FAQ | Q&A
왼쪽 끝에 쓸데 없는 li 구분선이 하나 더 생겼기 때문에 보기 좋지 않다.
즉, li:first-child란 왼쪽 끝에 있는 구분선에만 다른 명령을 내리는 스타일코드인 것이다.
ui li의 display:inline 스타일 예제
그렇다면 실질적인 내용을 입력해 본다.
위의 내용과 달라지는 곳을 비교하면 원하는 모양을 만들려면 어떻게 활용하면 되는지 알 수 있을 것이다.
[code]
<style>
.kisslist ul li { : kisslist라는 곳에서 사용된 ul 태그의 li 목록 태그에 해당한다는 뜻.
display:inline; : 하나의 선으로 나타내라는 뜻.
border-left:1px solid #808080; : 선 모양을 가는 선으로 하고 회색으로 표현하라는 뜻.
}
.kisslist ul li:first-child { : li 목록 요소 중에서 왼쪽 첫 번째에만 해당한다는 뜻.
border-left:none; : 왼쪽 부분을 아예 안 보이게 하라는 뜻.
}
</style>
[/code]
여기서 .kisslist는 임의로 만든 이름이니, 다른 이름으로 바꿔 써도 된다.
추가로, li를 사용하지 않고 아래처럼 표현할 수도 있다.
<bar>HOME</bar><bar>FAQ</bar>를 준 뒤, css파일에서 아래처럼 스타일을 적용하는 방법도 편리하다.
이것은 <bar> 태그를 사용한 방법이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
예제
[code]
<style>
bar { position:relative; margin-right:15px;}
bar::after { content:''; position:absolute; margin:0px 7.5px; width:1px; height:12px; background:#dcdcdc; top:5px; }
</style>
[/code]
여기에서 content:''라는 부분이 중요하니 확인하도록 한다.