CSS : 코드작성법 Bottom up방식

CSS bottom up 방식

자식요소와 부모요소의 css 적용에 있어서

자식요소를 먼저 적용 하는 것.

ex) 자식요소의 사이즈를 먼저 지정함으로써 부모요소의 크기를 별도로 지정할 필요 없게 된다.

 

    <div class="parents">
        <div class="childs"></div>
    </div>
    
    <style>
        .childs {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

 

child의 width와 height를 100px로 지정해두었다.

parents의 크기는 따로 지정해 주지 않았음에도 height 값이 100px로 지정되었다.

width값은 div임으로 100% 고정.

 

padding으로 너비관리를 해주면 좋다. 이후에 수정할 사항들이 생겼을 때 부모 요소들이 고정값으로 되어 있다면 전체를 다 손봐야 하기 때문이다. 자유롭게 늘어나고 줄어들게 하기 위해서 큰 테두리의 부모 영역들은 padding으로 관리를 하면 좋다.

부모값에 특정한 고정 너비를 주지않고 패딩만 준다면 자식요소들의 크기 변경에 맞춰 유동적으로 변할 수 있는 것이다.