'css'에 해당되는 글 1건
[CSS] 자식선택자를 사용하여 특정 요소에만 효과 적용하기[CSS] 자식선택자를 사용하여 특정 요소에만 효과 적용하기
Posted at 2018. 4. 9. 13:58 | Posted in CSS■ nth-child()를 사용하여 특정 요소에만 효과 적용하기.
디자인 작업을 하다보면 특정 요소에만 속성 값을 해제하거나, 변경해야 하는 경우가 생긴다.
위 이미지와 같은 경우가 바로 그런 상황인데.
이경우 ntn-child를 활용하면 손쉽게 해결이 가능하다.
# 소스코드
<html> <head> <title>:: CSS 자식선택자 ::</title> <style type="text/css"> .frame { width:940px; border:1px #383838 solid; margin-left:auto; margin-right:auto; overflow:hidden; padding-top:30px; padding-left:30px; padding-right:30px; padding-bottom:30px; } .blue_box { float:left; background-color:#4F81BD; width:220px; height:260px; margin-bottom:20px; margin-right:20px; } .blue_box:nth-child(4n) { float:left; background-color:#F7464E; margin-right:0px; } </style> </head> <body> <div class="frame"> <div class="blue_box"></div> <div class="blue_box"></div> <div class="blue_box"></div> <div class="blue_box"></div> <div class="blue_box"></div> <div class="blue_box"></div> <div class="blue_box"></div> <div class="blue_box"></div> </div> </body> </html> |
# 출력결과 - ntn-child를 적용한 경우
# 출력결과 - ntn-child를 적용을 해제한 경우
위와 같이 특정 공간안에 내용을 꽉 채우기위해 주로 사용하고 있다.
'CSS' 카테고리의 다른 글
| [CSS] 반응형 웹 - 변화하는 메뉴, 카테고리 만들기 (4) | 2018.04.04 |
|---|
