Css 특징

Css는 Cascading Style Sheet의 줄임말로 위에서부터 차례대로 적용된다. 

 

따라서 위에서부터 가장 마지막에 있는 것이 나타나게 된다. 

 

Inline :

width, height속성을 가질 수 없다. 

옆에 위치한다. 

 

block :

width, height를 가질 수 있고 옆에 오지 않고 밑에 붙는다. 

 

block는 3가지 속성을 가진다. 

margin 

: box의 border(경계)의 바깥에 있는 공간

🔥 여기서 margin값을 적용시킬때 알아두어야 할 것이 있다. 

margin :20px 면 사방으로 margin이 20px가 적용되고 

margin: 20px 15px면 20px는 상하, 15px는 좌우로 적용이 된다. 

margin : 20px 5px 12px 10px 면 순서대로 위 오른쪽 아래 왼쪽으로 적용된다. (시계방향)이다. 

 

이렇게 margin을 설정하다보면 일어나는 문제점이 있다. 

Collapsing margins이다! 

 

 

body태그에 위쪽으로 margin값을 20px만 줬음에도 불구하고 div태그와 같이 움직이는 걸 볼 수 있다. 

이는 body의 margin을 지워도 똑같이 나타나는데 이러한 현상을 Collapsing margins이라고 한다. 

이러한 현상은 흰색의 box와 보라색 box의 경계값이 같을 때 발생하고 margin의 위아래로만 발생한다.

좌우는 적용이 잘 된다. 

 

border

padding