[CSS] CSS 박스 모델을 구성하는 속성 다루기(박스 모델의 성격과 display 속성)

HTML의 모든 태그는 박스 모델을 가지고 있다. 그런데 이를 자세히 들여다보면 박스 모델도 블록, 인라인, 인라인 블록이라는 서로 다른 성격이 존재한다.

 

1. 블록 성격

블록 성격은 hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다 차지하는 것을 말한다.

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

 

2. 인라인 성격

인라인 성격은 a, span, strong 태그를 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 성격을 말한다.

a, span, strong 태그를 여러번 사용할때 웹 브라우저의 수평 공간이 남아있으면 한 줄로 배치된다.

 

3. 인라인 블록 성격

인라인 블록 성격은 인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적인 성격을 말한다. 그래서 img 태그를 사용할 때 브라우저의 수평 공간이 남아 있으면 한 줄로 배치된다.

 

4.  블록 vs 인라인 vs 인라인 블록

박스 모델의 3가지 성격은 박스 모델의 구성 요소와 관련한 속성을 적용할 때 조금씩 차이가 있다. 

블록 성격이나 인라인 블록 성격은 width, height, margin, padding 속성이 전부 적용 되지만,

인라인 성격은 width, height 속성은 적용되지 않고 padding, margin 속성은 각각 왼쪽과 오른쪽 방향만 적용된다.

실제로 인라인 성격인 span 태그에 width 속성이나 height 속성을 지정하면 너비와 높이가 설정되지 않는다. padding, margin 속성도 위쪽과 아래쪽은 적용되지 않는다.

 

블록	인라인	인라인 블록
width, height, margin, padding 적용	padding, margin 왼쪽, 오른쪽만 적용	width, height, margin, padding 적용

 

 

5. display 속성

HTML 태그가 기본으로 가지고 있는 박스 모델의 성격은 display 속성을 사용하면 변경할 수 있다.

속성값으로는 block, inline, inline-block을 사용한다.

 

예를 들어 블록 성격인 태그를 인라인 성격으로 바꾸고 싶다면 display 속성값을 inline으로 지정하면 된다.

h1, h2{
	display:inline;
}

 

반대로 인라인 성격인 태그를 블록 성격이나 인라인 블록 성격으로 바꾸고 싶다면

display 속성값을 block 또는 inline-block으로 지정하면 된다.

a{
    display:inline-block;
}
img{
    display:block;
}

 

 

깜짝 퀴즈

아래 코드를 보고 요소의 너비와 높이를 계산해 보시오

div{
    width:100px;
    height:100px;
    border-top:5px solid red;
    border-bottom:10px solid red;
    border-rigth:10px solid red;
    border-left:20px solid red;
    margin:10px 20px;
    padding:10px 20px
}

너비 : __________ px

높이 : __________ px

 

---

 

▼▼▼ 아래에 정답 있어요 ▼▼▼

 

---

너비 : 170px

높이 : 135px

 

box-sizing 속성을 별도로 지정하지 않았기 때문에 너비와 높이는 boder + padding + content 영역으로 계산해야 한다.

따라서 너비는 170px(10px + 20px + 20px + 20px + 100px) 높이는 135px(5px + 10px + 10px + 10px + 100px)이 된다.