<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 에 스킨만 다르다면 구조와 스킨을 분리하여 조합합니다.

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

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

1.2.2 컨테이너와 콘텐츠의 분리

콘텐츠의 스타일이 컨테이너에 종속되지 않도록합니다. 즉 컨텐츠의 스타일 선택자에 컨테이너의 클래스를 배제합니다