CSS 박스 모델

 

1. 블록레벨

- 요소 1, 2, 3이 높이가 다르며, 그에 상관없이 각 한줄씩을 차지하고 있음

- p태그나 div태그 등이 해당

 

2. 인라인 레벨

- 한 줄에 요소들이 들어감

- strong, span 등의 강조 태그가 해당

 

3. 박스모델

- 콘텐츠, 패딩, 테두리, 마진의 영역을 구성

 

4. 넓이와 높이는 콘텐츠 영역의 넓이와 높이를 뜻함

 

 

display 속성

 

1. 이미지를 펼쳤을 때 세로 기준으로

2. 가로기준을 펼치고 좁아지면 아래로 내려감

3. 펼치면서 가로와 세로 원하는대로 바꿀 수 있음

 

<예제>

 

- 이렇게 만들면 기본으로 display가 inline-block로 돼있음

 

<예제>

 

<예제>

 

 

 

<예제>

 

<예제>

 

테두리 관련 속성들

border-style

 

<예제>

 

border-width

 

- 4개는 시계방향으로 각각을 가리킴

 

 

border-color

 

<예제>

 

border

 

<예제>

 

border-radius

 

- 박스 모서리 둥글게 처리

 

- 각각 해당하는 위치에 지정한 px크기만큼 둥글게 처리

 

<예제>

 

<예제>

 

 

box-shadow

 

- 선택한 위치에 그림자 효과

- 수평과 수직은 필수값이고, 나머지는 선택

- 수직 : 양수는 아래, 음수는 위

- 번짐 정도에서 양수는 모든 방향으로 퍼져나감

 

<예제>

 

여백을 조절하는 속성들

margin

 

- 위에서부터 시계방향으로 돌아감

- auto는 화면을 늘리거나 축소해도 가운데에 맞춰서

 

<예제>

 

 

<예제>

 

마진 중첩 현상

 

- 마진이 30픽셀일 때 각각의 여백을 가지는게 아니라 중첩되서 하나만 적용됨

- 만약 두 마진의 사이즈가 다를 경우 큰 쪽으로 적용된다.

- 세로방향일 경우에만 중첩됨(가로의 경우 30px을 주면 사각형 사이에서 60px적용됨)

 

padding 속성

 

<예제>