박스를 구성하는 요소
CSS 박스 모델은 아래 그림만 생각하면 된다.
그림에서 border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.
border(테두리)
테두리는 시각적 용도 외에도, 개발 과정에서 매우 의미 있게 사용한다.
각 영역이 차지하는 크기를 파악하기 위해 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만든다.
border: 1px solid red 테두리에 red색상 두께는 1px 인 solid(실선) 을 추가해본다
margin(바깥 여백)
margin: 100px 20px 30px 40px 를 <p>요소의 CSS에 적용시켜본다.
참고로 margin에 주는 값의 순서는 시계방향순이다(top right bottom left)
만약 margin값을 두개만 넣으면 top과 bottom이 100px, right와 left가 20px이다.
-->
p {
margin: 100px 20px;
}값을 하나만 넣으면 모든 방향의 바깥 여백에 적용!
-->
p {
margin: 100px;
}따로따로 한쪽에만 넣기도 가능!
p {
margin-top: 100px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}padding(안쪽 여백)
padding은 border를 기준으로 박스 내부의 여백을 지정한다.
값의 순서에 따른 방향은 margin과 동일하게 시계방향순 이다.
-> (top, right, bottom, left)
박스를 벗어나는 콘텐츠 처리!
위와 같이 속성을 넣다 보면 콘텐츠가 박스 바깥으로 빠져 나오기도 한다.
이렇게 콘텐츠가 박스를 뚫고 나가는 경우에는 박스 크기에 맞게 콘텐츠를 더 이상 표시하지 않거나, 혹은 박스 안에 스크롤을 추가하여 콘텐츠를 확인할 수 있게 만든다.
콘텐츠가 넘치는 경우 스크롤을 생성하도록 하는 ->
overflow: auto; 속성을 넣어준다.
넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때에는
->
overflow: hidden;
overflow 속성은 x축과 y축을 지정해 가로방향,세로방향으로 스크롤 할 수 있게끔 지정할 수 있다.
->
overflow-x , overflow-y
박스 크기 측정 기준
위처럼 id가 container인 박스에 width속성 300px을 지정했다.
하지만 개발자 도구로 확인 하니 width의 값은 324px이다.
id가 inner인 박스의 width는 364px이었다.
이럴때 박스 크기 측정하는 방법은
여백과 테두리 두께를 포함해서 박스크기를 계산하게 만드는 것이다.
아래의 속성을 추가한다.
box-sizing: border-box;
- {} 를 써서 HTML문서 전체에 적용한다.
일부요소에만 적용할 시에는 혼란을 가중시킬 수 있다.
* {
box-sizing: border-box;
}
content-box는 박스의 크기를 측정하는 기본값이다.
그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장한다.
