css 기본 디자인 패턴

.btn-general {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  background-color: #e25c00;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

.btn-warning {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  background-color: #f1de00;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  color: #222;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

 

btn-general과 btn-warning의 차이는 background-color와 color이다.

 

스킨은 다음의 속성이 있다.

- color

- font

- background

- box-shadow

- text-shadow

 

스트럭처에 해당하는 속성에는 다음이 있다.

- width

- height

- padding

- margin

 

btn-general와 btn-warning을 스킨과 스트럭처로 분리하면 다음으로 분리가 가능하다.

 

.btn {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

.general {
  background-color: #e25c00;
  color: #fff;
}

.warning {
  background-color: #f1de00;
  color: #222;
}

 

 

btn에는 background와 color 속성을 제외한 속성이 있고, general과 warning에는 각각의 배경색과 글자 색상을 가지고 있다.

 

새로운 버튼을 구성하는 경우에는 background와 color로만 사용하면 된다.

 

 

---

 

 

 

SMACSS

css코드를 다음 역할 에 따라 분류한것으로 각 분류에 따라 규칙을 설정한다.

- base

- layout

- module

- state

- theme

 

 

각 분류별 규칙 정리

 

 

base

 

프로젝트의 표준 스타일 정의

주요 요소형 셀렉터를 사용하여 정의

기본 규칙이 너무 많으면 영향 범위가 넓어지므로 이를 주의한다.

프로젝트에서 요소들의 동작 규칙을 정의하는 것으로 특정 요소에 영향을 주는 규칙을 사용할 수 없다.

ID 셀렉터나 class 셀렉터 역시 사용할 수 없다.

body {
	background: white;
}

a > img {
	transition: .2s;
}​

SMACSS에서는 리셋 CSS도 베이스 규칙으로 포함하며, body의 배경색을 설정할 것을 권장하고 있다.

 

 

layout

 

레이아웃은 주로 헤더나 메인 영역, 사이트 바, 푸터 등 사이트에서 큰 틀을 구성하는 큰 모듈에 관한 규칙으로, 대부분의 경우 페이지에서 한 차례만 사용되는 경우가 많아, ID 셀렉터 사용을 허용한다.

만약 반복적으로 사용이 되는 모듈의 경우 class 셀렉터를 이용한다.

#header {
	width: 1080px;
    margin: 0 auto;
    background-color: #fff;
}

.section {
	padding: 80px 0;
}

 

만약 특정 페이지에서 레이아웃의 디자인이 변경되는 경우라면, body에 class를 추가하여, 각 레이아웃을 손자 셀렉터로 선택하여 디자인을 덮어씌울 수 있다.

.l-narrow #header {
	width: 960px;
}

레이아웃을 class에는 l- 접두사를 붙일 것을 권장한다.