css 기초

#1 기초

 

"어떤 항목"을 제어해줄지 결정하는 것을 "속성"

"어떻게" 제어할지 결정 하는 것을 "값"이라고 한다.

 

#2 css 선택자

 

* - 전체 선택자

. - 클래스 선택자

# - id 선택자

 

보통

* {}

.container {}

#userId {}

이런식으로 쓰인다.

 

#3 컨셉

 

css가 적용되는 html은 모두 "박스 형태"로 이루어져 있다.

이를 다루기 위해서는 몇가지 개념을 알아야한다.

 

margin - 박스의 바깥 여백

border - 박스의 기준이 되는 바깥 테두리

padding - 박스의 안쪽 여백

contents - 박스의 내용

 

디자이너와 협업시

1) border-box

border가 고정된다.

액자 틀 느낌으로 생각하면된다.

액자 틀의 크기는 예를들어 40x50으로 고정 되어있는데, 무언가 크기 변화를 주려고 하면

액자 크기는 한정되어있어서, 안의 컨텐츠 크기가 줄어드는 것이다.

 

2) content-box

content가 고정된다.

content는 그대로 있고, 사이즈 조절에 따라서, content 주변의 크기가 가변한다.