CSS 박스 모델링

<목차로 돌아가기>

박스 스타일

모든 HTML 요소는 box를 고려합니다. CSS에서 박스 모델은 디자인과 레이아웃에서 다루게 됩니다.

CSS 박스모델은 기본적으로 html 요소들을 감싸고 있습니다. 그래서 margins, boder, padding, content를 고려합니다.

박스모델은 우리가 요소에 벽을 추가하는 것에 따라 다릅니다. 그리고 요소의 공백을 정의합니다.

그림으로 설명하면 아래와 같습니다.

 

용어 설명

Content - 텍스트와 이미지가 표시되는 상자의 내용

Padding - Content 주위의 여백을 설정합니다. Padding 영역은 투명합니다.

Border - border영역은 padding 영역을 감싸고 있습니다.

Margin - Border 주변의 여백을 설정합니다. Margin영역은 투명합니다.

경계선 설정하기

border-top-style 경계선 위쪽 설정

border-right-style 경계선 오른쪽 설정

border-left-style 경계선 좌측 설정

border-bottom-style 경계선 아래쪽 설정

border-width:medium 경계선의 폭 지정 속성은('thick','medium','1px')

border: 5px solid red; 경계선 두께, 경계선의 스타일, 경계선 색상

border-radius:20px; 둥근 코너의 반지름

마진 설정하기

값	설명
auto	브라우저가 마진을 계산한다.
length	마진을 px, pt, cm 단위로 지정할 수 있다. 디폴트는 0px이다.
%	마진을 요소 폭의 퍼센트를 지정한다.
ingerit	마진이 부모 요소로부터 상속된다.

margint-top : 10px <--마진 탑 10px

margint-right : 20px; <--마진 오른쪽 20px;

margin-bottom : 20px;<--마진 밑쪽 20px;

margin-left : 20px;<--마진 왼쪽 20px;

패딩 설정하기

값	설명
length	마진을 요소 폭의 퍼센트를 지정한다.
ingerit	마진이 부모 요소로부터 상속된다.

padding-top : 10px; <-- 패딩 탑 10px

padding-right : 20px;<--패딩 오른쪽 20px;

padding-bottom : 10px; <--패딩 밑쪽 20px;

padding-left : 20px; <--패딩 왼쪽 20px; 

정렬속성

text-align:center <-- text 중앙정렬

블록 중앙정렬

margin-left:auto;margin-right:auto;

Example

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

 

넓이와 높이의 요소

모든 브라우져에서 넓이와 높이가 일정하게 만드려면 박스모델에 대해서 알아야 합니다.

 

Example

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

 

 

예제에서 나오는 소스를 분석 및 계산해 보면 요소의 넓이는 아래와 같습니다.

320px 

+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

---