레이아웃을 구성하는 css 박스모델 (1)

처음에는 웹을 만들 때 웹을 큰 하나의 화면으로 보고 모든 요소를 그 위치에 맞게 조절해야 하는 줄 알았는데 사이드바, 본문 푸터등 큰 틀을 먼저 잡아서 하나의 큰 화면을 만든다는 것을 알았다,

 

이 전에도 헤더 푸터와 같은 내용을 배웠지만 그걸 구현하는 방법을 몰랐었는데 다시 한 번 짚고 넘어가니 쉽게 이해할 수 있었다.

 

또한, 패딩과 마진같은 테두리 안에 있는 용어에 대해서도 다시한번 생각해 볼 수 있었다.

---

박스모델

- 블록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 (가로로 100%)
- 인라인 레벨 요소: 태그의 콘텐츠만큼만 영역을 차지하며 다른 요소가 올 수 있음 (가로로 해당 크기만큼)

박스 모델의 기본 구성

- 콘텐츠 영역 (content)

- 패딩 (padding)

- 마진 (margin)

- 테두리 (border)

콘텐츠 영역을 지정하는 속성

- width : 가로 길이를 지정하는 속성. 직접 픽셀로 지정할 수 있고 백분율도 가능하다. 

- height : 세로 길이를 지정하는 속성. 직접 픽셀로 지정할 수 있고 백분율도 가능하다. 

→ 백분율로 지정했을 시 페이지 창에 크기에 따라 변한다.

 

박스 모델의 크기를 계산하는 속성

width 속성을 200px을 지정하고 좌우 패딩값 40px 좌우 테주리값 20px 모두 합치면 결국 총 박스의 크기는 260px이 된다.

 

그래서 box-sizing 속성을 이용하여 박스모델의 너비와 높이를 어떻게 결정할지 정한다. 

- box-sizing : 테두리까지 포함해서 너빗값 지정

- content-box : 콘텐츠영역만 너빗값 지정

 

박스모델에 그림자 효과를 주는 속성

- box-shadow: <수평거리> <수직거리> <흐림정도> <번짐정도> <색상> inset

종류	설명
<수평거리>	그림자가 가로로 얼마나 떨어져 있는지 나타냄. 필수 속성
<수직거리>	그림자가 세로로 얼마나 떨어져 있는지 나타냄. 필수 속성
<흐림정도>	값이 작을수록 그림자가 진해짐. 음수값은 사용 불가능 기본값은 0
<번짐정도>	값이 클 수록 모든 방향으로 그림자가 퍼져 크게 표시 기본값은 0
<색상>	한 가지만 지정할 수도 있고, 공백으로 구분해서 여러개의 색상을 지정할 수도 있음 기본값은 검은색
insert	키워드를 삽입했을 시에 그림자가 안쪽으로 생성

 

테두리 스타일을 지정하는 속성

- border-style : 테두리를 만들 때 필요한 속성. 기본값은 none이며 테두리를 그리려면 borser-style의 속성을 지정해야 함.

종류	설명
none	테두리가 없음. 기본값
soild	테두리를 실선으로 표시
dotted	테두리를 점선으로 표시

 

테두리에 관련된 속성

- border-width : 테두리의 두께를 지정하는 속성. 상하좌우 각각 다르게 지정할 수 있으며 한 번에 지정할 수도 있음

- border-color : 테두리의 색상을 지정하는 속성. 4면의 색상을 따로 지정할 수 있으며 한 번에 지정할 수도 있음

- borser-radius : 둥근 테두리를 만드는 속성. 원의 반지름을 이용하여 둥근 정도를 나타낼 수 있음

 

여백을 조절하는 속성

- margin : 요소 주변의 여백을 조정하는 속성. 요소와 요소 사이의 간격을 조절할 수 있다. 

margin 영역

- padding : 콘텐츠와 테두리 사이의 여백을 조정하는 속성. 테두리 안쪽의 여백

padding 영역