[CSS] 자식선택자를 사용하여 특정 요소에만 효과 적용하기[CSS] 자식선택자를 사용하여 특정 요소에만 효과 적용하기

Posted at 2018.04.09 13:58 | Posted in CSS




■ ntn-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를 적용을 해제한 경우



위와 같이 특정 공간안에 내용을 꽉 채우기위해 주로 사용하고 있다.







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기