CSS 설계 기법
1. OOSCC(Object Oriented CSS)
ref : https://www.slideshare.net/stubbornella/object-oriented-css
1) 개념
레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론이다.
2) 방법
a) 구조와 스킨의 분리
같은 형태의 ui에 스킨만 다르다면 구조와 스킨을 분리하여 조합한다.
구조 : width, height, padding, margin 등 레이아웃에 영향을 미치는 속성
스킨 : font, color, background, border 등 레이아웃에 영향을 미치지는 않지만 시각적인 영향을 주는 속성
/* 구조와 스킨의 분리 */
/* 구조 */
.btn {
width: 200px;
height: 80px;
font-size: 30px;
}
/* 스킨 */
.btn-close {
background-color: black;
font-size: 30px;
color: #fff;
border: 3px dotted #fff;
} b) 컨테이너와 콘텐츠의 분리
콘텐츠의 스타일이 컨테이너에 종속되지 않도록 한다. 즉, 콘텐츠의 스타일 선택자에 컨테이너 클래스를 쓰지 않는다.
#main.btn {
width: 300px;
padding: 20px;
margin: 10px;
font-size: 18px;
line-height: 1.5;
}
#main .general {
background-color: blueviolet;
color: cornsilk;
}
#main .warning {
background-color: chartreuse;
color: black;
}위와 같이 쓰면 컨테이너와 콘텐츠를 분리하지 않았기 때문에, 스타일링은 main에 종속된다. #main을 배제하고 써야, oocss 방법. 모듈화에는 좋으나 안정성이 다소 떨어지는 방법이다.
2. SMACSS(Scalable and Modular Architecture for CSS)
ref : http://smacss.com
1) 개념
css 코드를 역할에 따라 분리한다.
/*베이스*/
/*레이아웃*/
/*모듈*/
/*스테이트*/
/*테마*/
2) 방법
a) 베이스
프로젝트의 표준 스타일을 정의한다. 전체적으로 사용되는 폰트 패밀리, reset style, <img>공통 스타일 등이 여기에 포함된다.
b) 레이아웃
헤더, 메인영역, 푸터, 사이드 바와 같은 웹사이트에서 큰 틀을 구성하는 모듈에 관한 규칙이다. 대부분 페이지에 몇 개 존재하지 않기 때문에 ID 선택자를 사용하기도 한다.
c) 모듈
레이아웃 안에 배치되는 모든 요소를 의미한다. 반복되는 요소들이기 때문에, ID 선택자를 사용하지 않으며, 요소 선택자의 사용을 최소화 한다. (자식요소에만 적용). 비슷한 모듈 안에서도 모양이 조금씩 다를 경우 서브 클래스를 만든다. (btn-small, btn-long 등)
.btn {
display: inline-block;
width: 200px;
padding: 20px 10px;
margin: 10px 20px;
background-color: blue;
color: wheat;
text-decoration: none;
text-align: center;
font-size: 18px;
}
.btn.btn-small{
width: 80px;
padding: 10px 0;
font-size: 13px;
}
.btn.btn-long {
width: 160px위와 같이 btn이라는 클래스를 만들고, 비슷한 모듈 안에서 모양이 조금 다른 경우 btn-small, btn-long과 같은 서브 클래스를 만들어 적용해준다.
d) 스테이트
기존 스타일을 덮어쓰거나 확장하는 데 사용하는 스타일이다. 서브 클래스와 다른 점은 레이아웃이나 모듈에 둘 다 적용가능하며, 서브클래스가 한 번 적용되면 바뀌지 않는 속성임에 비해, 스테이트는 자바스크립트로 필요할 때 넣었다 뺐다 할 수 있는 점이다. 클래스 이름은 앞에 is라는 접두사를 사용한다. (is-hidden, id-active 등)
.is-active {
background-color: cadetblue;
}
.is-active a {
/* 클릭할 수 없다는 스타일을 표시하는 것 */
pointer-events: none;
color: crimson;
}자바스크립트에 종속적이다. 자바스크립트로 스타일을 바꿀 때에, 위와 같은 class를 넣었다 뺐다 하면서 스타일링을 한다.
e) 테마
사용자에게 사이트의 느낌을 전달하는 이미지(background-image), 색상(background-color, color) 등을 의미한다.
.mod {
border:1px solid;
}
.mod {
border-color: blue;
}이런 식으로 구분해서 적는 것을 뜻한다.
3. BEM(Block, Element, Modifier)
ref : http://getbem.com/
1). 개념
얀덱스(Yandex)사가 만든 설계방법. 기본적으로는 OOCSS 와 같은 모듈 기반의 방법을 뿌리로 한다.
2). 방법
- ID 선택자와 요소 선택자를 권장하지 않는다. ( 클래스 선택자만 사용하는 이유는 가중치 계산을 원활히 하기 위해서 이다.)
a) Block
b) Element
c) Modifier
그 외 알게된 것
.class {
border: 1px solid;
}이렇게만 적으면 색은 자동으로 black이 된다. 실무에서는 이렇게 쓰면 안되겠지만, 수업 따라가기 바쁠 때는 이 방법 쓰는 것도 좋을 거 같다.
- 가상요소의 background-image로 이미지를 넣을 때, width, height만 주었을 때, 이미지가 잘려서 보이거나 이상하게 보이는 경우가 있는데, 이건 box 크기와 이미지의 크기가 달라서 이다. 이미지의 크기를 background-size로 조절해줘야한다.
- 특정 요소가 화면이 커짐에 따라 커질 때, 특정 크기 이상으로 커지는 걸 원하지 않을 땐 max-width를 쓰면 된다. 반대의 경우 min-width
- chrome tool 'PerfectPixel'을 이용해서, css를 점검한다. 피그마 디자인을 레이어로 올려서 위치와 크기를 상세히 조정하면 된다.
📢 오늘의 회고
드디어 2주차가 끝났다! 많이 지치고 힘들었던 주였는데, 이번 주말에는 복습도 열심히 하고, 휴식도 충분히 취해서 다음주는 더 씩씩하게 공부해야겠다! 물론 주말에도 TIL은 계속된다😊
