[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
//

[CSS] 반응형 웹 - 변화하는 메뉴, 카테고리 만들기[CSS] 반응형 웹 - 변화하는 메뉴, 카테고리 만들기

Posted at 2018. 4. 4. 11:12 | Posted in CSS
반응형




참고 : 모던 웹사이트 다지인의 정석



■ 내비게이션 메뉴를 토글 형태로




반응형 웹 제작중 컴퓨터에서 보여지는 메뉴를 모바일에 맞춘다는것은 쉬운일이 아니다.

이경우 완전히 UI 디자인을 다시 짜는경우가 많기에 화면 사이즈를 감지하고

화면 크기에 맞는 메뉴, 카테고리로 알맞게 화면에 띄워보자.




# 소스코드

<html>
<head>
<title>:: 화면크기에따른 메뉴 UI 변경 ::</title>
<style type="text/css">
.menuNav li a:hover {
    border-radius:5px;
    background-color:#FF0000;
    color:#FFFFFF;
}

.menuNav ul {
    margin:0;
    padding:0;
    list-style:none;
}

.menuNav ul:after {
    content:"";
    display:block;
    clear:both;
}

.menuNav li a {
    display:block;
    padding-top:10px;
    padding-left:15px;
    padding-right:15px;
    padding-bottom:10px;
    color:#000000;
    font-size:14px;
    text-decoration:none;
}

/* ############ 767px 이하 ############ */
@media(max-width:767px) {
   
    /* 토글 버튼 */
    .menuBtn {
        padding-top:6px;
        padding-left:10px;
        padding-right:10px;
        padding-bottom:2px;
        border:1px solid #AAAAAA;
        border-radius:5px;
        background-color:#FFFFFF;
        cursor:pointer;
    }

    /* 클릭시 배경색 변경 */
    .menuBtn:hover {
        background-color:#DDDDDD;
    }
   
    /* 파란색 테두리 제거 */
    .menuBtn:focus {
        outline:none;
    }
   
    .menuBtn i {
        color:#888888;
    }
   
    /* 토글버튼 글자 숨기기 */
    .menuBtn span {
        display:inline-block;
        text-indent:-999px;
    }

    .menuNav {
        display:none;
    }
}

/* ############ 768px 이상 ############ */
@media(min-width:768px) {

    /* 토글 버튼 */
    .menuBtn {
        display:none;
    }

    /* 내비게이션 */
    .menuNav {

        /* !important는 지정한 스타일의 속성이 중요하기 때문에 변경을 막기위 해지 지정한다. */
        display:block !important;
    }

    .menuNav li {
        float:left;
        width:auto;
    }
}
</style>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".menuBtn").click(function() {

        // slideToggle은 요소의 hight 값을 조작해서 움직임을 만들어 낸다.
        // 보이면 안보이게, 안보이면 보이게 처리한다.
        jQuery(".menuNav").slideToggle();
    });
});
</script>
</head>
<body>
    <!-- 모바일 화면에서 보여질 토글 메뉴 -->
    <button type="button" class="menuBtn">
        <i><img src="icon-menu.svg" style="width:20px;height:20px;"/></i><span>MENU</span>
    </button>
   

    <!-- 내비게이션 메뉴, 창크기에 맞게 변화한다.  -->

    <nav class="menuNav" id="menuNav">
        <ul>
            <li><a href="#">안지현</a></li>
            <li><a href="#">이한글</a></li>
            <li><a href="#">박기량</a></li>
            <li><a href="#">김맑음</a></li>
            <li><a href="#">조연주</a></li>
            <li><a href="#">이나경</a></li>
            <li><a href="#">서현숙</a></li>
        </ul>
    </nav>
</body>
</html>




# 출력결과 - Mobile Web




# 출력결과 - Computer Web






반응형
//