css로 진입하니 장벽이 높게만 느껴지는 거 같아 벌써부터 머리가 아프다.
html 기초 강의로 자기소개 웹페이지를 생성하고 css 기초를 통해 벗은 마네킹에 옷을 입혀주었다.
css를 하면서 박스에 관련해 이해가 되지 않아 다시 한번 정리해보려고 한다.
BOX모델
브라우저가 요소를 렌더링 할 때 기본적으로 사각형의 형태로 영역을 처리하며 이 영역을 BOX라고 표현한다.
*CSS는 박스의 크기, 위치, 속성을 결정할 수 있다.
박스 영역의 구성
■ 콘텐츠 영역: P, span, div등 콘텐츠를 표시하는 영역으로써 너비와 높이를 가지고 있고 테두리 안에 있다.
■ 안쪽여백
■ 경계선 (테두리)
■ 바깥쪽 여백
박스 영역 크기를 정하는 속성
콘텐츠: width, height
안쪽 여백: padding
바깥쪽 여백: margin
테두리: border-width
박스 크기보다 콘텐츠의 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나온다.
이럴 때는 'overflow' 속성을 지정하여 박스보다 큰 콘텐츠에 스크롤을 표시한다
박스 크기 측정하기
박스의 적용할 여백을 고려하지 않고 크기를 디자인하면 생각한 레이아웃에서 벗어날 수 있다. 이럴 때 'border-box'를 사용하여 테두리와 안쪽 여백의 크기도 요소의 크기로 고려할 수 있다.
width와 height 속성이 안쪽 여백과 테두리는 포함하고 바깥쪽 여백을 포함하지 않는다
box-sizing
1. content-box(기본값): 너비와 높이가 콘텐츠 영역만을 포함한다.
2. border-box: 너비와 높이가 안쪽 여백과 테두리까지 포함한다.
*너비와 높이가 같더라도 box-sizing 속성값에 따라 크기가 달라질 수 있다.
이론으로만 보여졌던 box-sizing에 대해서 조금 더 복습하고 나니까 조금은 이해하고 습득하고 있는 것 같아 뿌듯하긴 하지만 아직 갈 길이 멀다.
이제 막 시작인데 잘 할 수 있을지 막연하게 꿈만 꾸고 있는 건 아닌지 싶지만 노력은 배신하지 않는다고 하니 조금 더 노력해보자
