<aside> 💡 꼭 한 번씩 실습을 해보시길 권해드립니다!

</aside>

1. OOCSS (Object Oriented CSS)

ref : ****https://www.slideshare.net/stubbornella/object-oriented-css

1.1 개념

레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론입니다.

1.2 방법

1.2.1 구조(structure)와 스킨의 분리

같은 형태의 ui 에 스킨만 다르다면 구조와 스킨을 분리하여 조합합니다.

© NAVER Z Corp. All rights reserved.

구조에는 : width, height, padding, margin 등 레이아웃에 영향을 미치는 속성들이 포함됩니다.

스킨에는 : font 관련 속성, color, background, border 등 레이아웃에 영향을 미치지는 않지만 시각적인 영향을 주는 속성들이 포함됩니다.

<button type="button" class="btn"></button>
<button type="button" class="btn btn-close"></button>

.btn {
    width: 200px;
    height: 80px;
    font-size: 30px;
}

.btn-close {
    background: black;
    color: #fff;
    border: 3px dotted #fff;
}