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 선택자의 활용을 마무리 합니다. 세상엔 나만 모르고 사는 지식이 너무 많은 듯...ㅠㅠ







저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

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

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


티스토리 툴바