2014.10.17 11:04

CSS before, after 선택자 활용하기

jQuery 를 사용하면서 "#", "." 을 활용한 셀렉터라는 기능에 대해 참 고마움을 느끼고 있었는데... CSS 역시 동일한 기능이 가능하다니... 뭐 이래 저래 귀찮은 일로 CSS 를 손보기는 하지만, 역시나 내 전공은 아니야 하고 살짝 외면하고 있었던 CSS...


사이트 최 상단에 간단한 기능을 제공하는 링크를 이용할 때 줄바꿈 없는 간단한 리스트를 이용하는데

<ul style="list-style: none;">

  <li style="display:inline;"><a href="#">메뉴1</a></li>

  <li style="display:inline;"><a href="#">메뉴2</a></li>

  <li style="display:inline;"><a href="#">메뉴3</a></li>

</ul>

문제는 이렇게 하면 "메뉴1메뉴2메뉴3" 으로 붙어 나온다는 점이다.

li 에 display:inline-block; 을 주고 width 를 주는 방법도 있겠지만, 글자 내용에 따라 얼마나 길어질지 모른다는 점에서는 결코 좋은 방법은 아닌 것 같다. 좌우 padding 을 주는 방법도 있지만,  "|" 와 같은 구분선을 넣고 싶을 때 어떻게 li 에 border 라도 줄까... 이런 방법은 아닌것 같다. 


이때 필요한게 before , after 선택자 이다. 즉 li 뒤에 뭔가를 넣고 싶을 땐

ul li:after{

content:" | "

}

와 같이 스타일 정의를 해주면 된다. ^^


이 선택자를 잘 몰랐을 땐 display:inline-block을 사용하고 padding 과 border 를 이용했었는데...마지막이 항상 문제였다. 마지막 li 의 오른쪽에 border 를 지울 방법이 없어서...ㅠㅠ 하지만 선택자가 있으니...기존 방식을 버리고 선택자를 활용하는 방식으로 고쳐 본다.

.topMiniMenu{

}


.topMiniMenu ul{

list-style: none;

}


.topMiniMenu ul li{

display:inline;

}


.topMiniMenu ul li:after{

content:" | "

}


.topMiniMenu ul li:last-child:after{

content:"";

}


----------------


<div class="topMiniMenu">

<ul>

<li><a href="#">메뉴1</a></li>

<li><a href="#">메뉴2</a></li>

<li><a href="#">메뉴3</a></li>

</ul>

</div>

li:last-child:after 선택자를 이용하면 간단히 해결된다.


padding, border 를 이용하는 방법에서도 


.topMiniMenu ul li{

display:inline;

padding-left: 10px;

padding-right: 10px;

border-right: solid 2px #333;

}


.topMiniMenu ul li:last-child{

border-right: solid 0px #333;

}


 last-child 라는 선택자는 역시나 필요한 걸로...^^ border 를 이용하는 경우는 padding 과 글자 크기를 잘 감안하여 구분선이 너무 도드라져 보이지 않도록하는 센스도 필요할 듯...


이상 이제사 알게된 CSS 선택자의 활용을 마무리 합니다. 세상엔 나만 모르고 사는 지식이 너무 많은 듯...ㅠㅠ







저작자 표시
신고

'뭐하는데 > 웨 ~ㅂ' 카테고리의 다른 글

CSS before, after 선택자 활용하기  (0) 2014.10.17
Framework 4 Training Kit  (0) 2010.02.12
구글 Wave 초대장  (4) 2009.12.04
새로운 OS X Snow Leopard  (1) 2009.08.26
구글의 OS, 인텔의 OS 그리고 windows 7  (0) 2009.07.31
Windows 7 RC 발표  (0) 2009.05.06
Trackback 0 Comment 0