박스모델(box model)

브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간이다.

브라우저를 통해 렌더링 되는 웹요소들 또한 그 안에서 개별적으로 너비와 높이를 가진다.

 

박스 모델은 너비와 높이를 가지는 개별요소를 가리켜 '박스'라 표현하고 ,

박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델이다.

사진출처 : 유노코딩

바깥쪽 여백 : margin

경계선 : border

안쪽 여백 : padding

콘텐츠 영역 : width(가로) , height

크롬에서 개발자 도구(F12)를 열면 박스모델을 확인할 수 있다.

 

테두리 스타일  - 테두리는 화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있는 영역

 

테두리 스타일을 정의할 때는 단축 속성인 border를 사용하거나 border의 하위 속성을 개별적으로 사용하는 방법을 사용한다.

 

 

border-width : 테두리의 두께를 지정

border-style : 점선,실선,겹선 등으로 테두리의 모양을 지정

border-color : 테두리의 색상을 지정

border : 테두리의 두께 , 모양, 색상등을 한번에 지정

border-radius : 박스를 둥글게

 

 

박스 모델의 여백에는 4개의 면이 존재하는데,

속성값 사용 개수에 따라 네 면의 여백 크기를 달리 정할 수 있다.

 

margin : 10px;   여백의 모든 면에 동일한 값을 지정

margin : 20px 10px;    상하여백 20px, 좌우여백 10px

 

 

margin : 10px 20px 15px ;  상좌,우, 하 순 (3개면 상자우하)

• 위(위쪽): 10px
• 오른쪽: 20px
• 아래쪽: 15px
• 왼쪽: 위쪽에 지정된 값인 10px과 동일함

 

margin : 10px 20px 30px 40px

시계 :12시 기준

상우하좌 순임.

• 위(위쪽): 10px
• 오른쪽: 20px
• 아래쪽: 30px
• 왼쪽: 40px

--------

box-sizing

박스를 어떻게 다룰것인가??

박스 사이징에 관해선 두가지이다.

content-box , border-box

 

content-box는 기본값이다.

요소의 너비, 높이는 콘텐츠 영역의 크기만을 고려한다. 즉, "패딩과 테두리"가 포함되지 않는다.

 

border-box는 콘텐츠영역+패딩과 테두리까지다.

따라서 패딩과 테두리가 콘텐츠 영역 안에 포함되어 전체 박스크기를 고정하고

콘텐츠 영역의 크기는 유지된다. (이걸 쓰면 변수가 적다)

-------

박스에 배경 추가하기