[속성] 박스 모델을 구성하는 속성 (margin, padding 등)

 

 

 

---

 

박스 모델은 무엇인가?

 

 

---

 

 

 

 

박스 모델

 

--

CSS의 박스 모델은

모든 HTML 요소가 하나의 박스로 표현되는 개념으로

각 요소는 여러 개의 영역으로 구성되며, 이를 이해하면 "여백", "테두리", "크기 조정" 등을 쉽게 다룰 수 있게 된다.

 

• margin   :   요소의 외부 여백을 의미
• border   :   요소의 테두리(경계선)를 의미
• padding   :   요소의 내부 여백을 의미
• content   :   요소의 내용을 의미

 

크롬 브라우저의 개발자 도구(F12)를 통해 박스 모델 확인하기

--

 

 

 

 

margin 영역

 

--

margin은 요소의 외부 여백을 의미한다.

 

 

기본 형식

/* margin의 각 영역 정의하기 */
margin-top: 크기;
margin-right: 크기;
margin-bottom: 크기;
margin-left: 크기;

/* margin 한 번에 정의하기 */
margin: margin-top 크기 margin-right 크기 margin-bottom 크기 margin-left 크기;
margin: margin-top 크기 margin-right 크기 margin-bottom 크기;
margin: margin-top & margin-right 크기 margin-bottom & margin-left 크기;
margin: margin-top & margin-right & margin-bottom & margin-left 크기;

 

예시 코드

p {
   margin: 10px 20px;
}

 

margin 겹침 현상
위 예시 코드 결과처럼 요소 간에 margin 영역이 겹치게 되는데
이때 두 요소의 인접한 margin값이 둘 중 큰 값으로 통일된다.

만약 A요소의 margin-bottom: 20px, B요소의 margin-top: 30px라면
둘 사이의 거리는 20 + 30 = 50px이 아니라 큰 값인 30px 거리가 된다.

--

 

 

 

 

border 영역

 

--

border는 요소의 테두리(경계선)를 의미한다. [요소의 내부와 외부의 경계선]

 

 

margin 영역을 정의하는 방법과 동일하게

border 영역도 top,  right, bottom, left를 각자 정의하거나 통합해서 정의할 수 있다.

다만, margin과 달리 테두리에 알맞는 속성들을 사용해야 한다.

 

기본 형식

/* margin의 각 영역 정의하기 */
margin-top: border-width border-style color;
margin-right: border-width border-style color;
margin-bottom: border-width border-style color;
margin-left: border-width border-style color;

/* border 한 번에 정의하기 */
border: border-width border-style color;

 

• border-width   :   테두리 두께
• border-style   :   테두리 스타일
• color   :   테두리 색상

 

border-style(테두리 스타일) 속성 값 종류

• none   :   테두리 없음
• hidden   :   테두리를 화면에서 숨김
• solid   :   실선
• double   :   이중 실선
• dotted   :   점선
• dashed   :   dotted보다 긴 점선
• groove   :   테두리가 파인 것 같은 테두리
• ridge   :   테두리가 튀어나온 것 같은 테두리
• inset   :   요소가 파인 것 같은 테두리
• outset   :   요소가 튀어나온 것 같은 테두리

 

예시 코드

.p1{
   border:1px solid #f00;
}
.p2{
   border-bottom:5px dotted black;
}

--

 

 

 

 

padding 영역

 

--

padding 영역은 요소의 내부 여백을 의미한다.

 

 

margin 영역에서 사용하는 속성과 형식이 매우 비슷하다.

 

기본 형식

padding-top: 크기;
padding-right: 크기;
padding-bottom: 크기;
padding-left: 크기;

padding: padding-top padding-right padding-bottom padding-left;
padding: padding-top padding-right padding-bottom;
padding: padding-top & padding-right padding-bottom & padding-left;
padding: padding-top & padding-right & padding-bottom & padding-left;

 

예시 코드

p {
    border:1px solid black;
    padding:10px
}

--

 

 

 

 

content 영역

 

--

content 영역은

시작 태그와 종료 태그 사이에 사용된 콘텐츠가 속하는 영역으로 content 영역 자체를 다루는 속성은 없다.

즉, 텍스트관련 속성으로 content 영역을 제어하게 된다.

 

추가로 content 영역을 제어하는 속성처럼 영향을 주는 "width 속성"과 "height 소성"이 있다.

• width  :  content 영역의 너비
• height  :  content 영역의 높이

 

기본 형식

width: 크기;
height: 크기;

 

예시 코드

div{
   width:100px;
   height:100px;
   border:1px solid black;
}

 

 

box-sizing 속성

div{
   width:100px;
   height:100px;
   padding:10px;
   border:1px solid black;
   margin:10px;
}

 

width와 height 속성을 각각 100px로 적용했지만

웹 브라우저에 표시된 요소의 총 너비와 높이는 10 + 1 + 10 + 100 + 10 + 1 + 10 = 122px이다.

웹 브라우저가 요소를 화면에 렌더링 할 때 각 영역의 너비와 높이를 종합적으로 계산하기 때문이다.

 

나의 의도처럼 총 100px로 표시하기 위해서는 border, padding 크기를 제와한 78px로 설정하면 되지만

해당 방법은 계속 계산을 해줘야 하기 때문에 매우 번거롭다.

 

이를 개선한 것이 box-sizing 속성이다.

 

기본 형식

box-sizing: 속성값;

 

속성 값 종류

• content-box   :   width, height 속성의 적용 범위를 content 영역으로 제한
• border-box   :   width, height 속성의 적용 범위를 border 영역으로 제한

 

예시 코드

div{
   width:100px;
   height:100px;
   padding:10px;
   border:1px solid black;
   margin:10px;
   box-sizing:border-box;
}

--

 

 

 

 

박스 모델의 성격 & display 속성

 

--

HTML의 모든 태그는 박스 모델을 가진다.

즉, 박스 모델도 "블록", "인라인", "인라인 블록"이라는 서로 다른 성격이 존재한다.

 

블록 성격

요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 전부 차지하는 것을 의미한다.

그래서 태그를 여러 번 사용하면 무조건 줄 바꿈이 된다.

(ex. hn 태그, p 태그, div 태그)

 

인라인 성격

요소의 너비가 콘텐츠 크기만큼만 차지하는 것을 의미한다.

그래서 여러 번 사용할 때 보면 웹 브라우저의 수평 공간이 남아있으면 이어서 한 줄로 배치된다.

(ex. a 태그, span 태그, strong 태그)

 

인라인 블록 성격

인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼만 차지하지만,

그 외의 성격은 블록 성격을 가지는 복합적인 성격을 말한다.

그래서 img 태그를 사용할 때 보면 웹 브라우저의 수평 공간이 남아 있으면 이어서 한 줄로 배치가 된다.

 

블록 vs 인라인 vs 인라인 블록

블록과 인라인 블록 성격은 width, height, margin, padding 속성을 전부 적용할 수 있지만

인라인 성격은 width, height 속성은 적용되지 않고 padding, margin 속성은 좌, 우만 적용된다.

 

실제로 인라인 성격인 span 태그에 width 속성이나 height 속성을 지정하면 설정되지 않는다.

padding과 margin 속성 또한 위, 아래 적용이 안된다.

 

display 속성

HTML 태그가 기본적으로 가지고 있는 박스 모델 성격은 display 속성을 통해 변경할 수 있다.

 

속성 값 종류

• block
• inlind
• inline-block

 

기본 형식

display: 속성값;

 

예시 코드

h1, h2{
   display:inline;
}

h1태그, h2 태그는 인라인 속성이 된다.

--