HTML 문서에서 사용된 각각의 요소가 어떤 원리로 웹 브라우저에 배치되어 표시되는지 이해 하려면 박스 모델을 이해해야 함
박스 모델
-> 모든 HTML 요소가 사각형의 박스로 둘려 쌓여 있다는 개념
-> 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 웹 페이지를 만드는 본질
-> 가운데는 content
| 구성 요소 | 설명 |
|---|---|
| margin | 요소의 외부 여백을 의미 |
| border | 요소의 테두리 경계선을 의미 |
| padding | 요소의 내부 여백을 의미 |
| content | 요소의 내용을 의미 |
margin 영역
margin은 박스 모델에서 가장 외부에 있는 영역
-> 요소의 외부 여백을 담당
-> 각 방향에 해당하는 속성이 독립적으로 존재
margin-top:<크기>;
margin-right:<크기>;
margin-bottom:<크기>;
margin-left:<크기>;
margin:<margin-top> <margin-right> <margin-bottom> <margin-left>
margin:<margin-top> <margin-right> <margin-bottom>
margin:<margin-top & margin-bottom> <margin-right & margin-left>
margin:<margin-top & margin-right & margin-bottom & margin-left>각 방향에 해당하는 속성은 형식이 비교적 간단하지만, 네 방향을 한번에 정할 수 있는 margin 속성은 속성값을 작성하는 방법에 따라 적용되는 방식이 다름
margin 속성값을 4개
-> margin-top, margin-right, margin-bottom, margin-left
3개 적을 시(top, right, bottom)
-> left에는 마주보는 margin-right와 같은 값을 적용
2개를 적으면 (top,bottom), (left,right)가 그룹에 묶여 같은 값으로 지정
1개를 적을 시 모든 방향이 같은 값을 가짐
<style>
p{
margin-bottom:20px;
}
</style>
<body>
<p> lorem1</p>
<p> lorem2</p>
</body>
위 경우 lorem1의 buttom에 20, top 16이 적용되어 있음
-> 기본 스타일 시트에 의해 P 태그에 이미 속성값(16px)가 적용되어 있음
-> buttom의 경우 사용자 정의 스타일의 우선순위가 높아 20으로 적용
p{
margin:10px 20px;
}
4방향이 모두 적용된것을 확인 할 수 있음
margin 겹침 현상
예를 들어 첫번째 요소에는 margin 값이 아래쪽에 20px가 적용됐고, 두번째 요소에는 margin 값이 위쪽으로 30px가 적용되었다고 가정
-> 이 경우 두 요소 사이의 간격이 20+30px인 50px가 될거 같지만, 실제론 30px 가 적용됨
-> 이러한 경우가 Margin 겹침 현상
-> 같은 레벨 즉 형제관계에 있는 요소들의 Margin 영역이 중첩되며 더 큰 값을 가진 Margin 영역으로 병합되어 출력되는 현상
<style>
.first{
margin-bottom:20px;
}
.second{
margin-top:30px;
}
</style>
<body>
<p class = "first"> lorem1</p>
<p class = "second"> lorem2</p>
</body>
-> 코드를 실행하면 속성 값이 더큰, 아래 요소의 값이 적용되어 두 요소의 사이의 간격은 30px
border 영역
border 영역은 margin 보다 안쪽에 있으며, 요소의 테두리를 담당
모든 방향을 한번에 똑같은 값으로 적용하고 싶다면 border 속성을 사용하면 됨
-> 다만, border 속성은 margin과 다르게 여러 속성값이 복합적으로 사용
border:<border-width> <border-style> <color>;border-width 속성은 테두리 굵기를 지정
border-width:<크기>;
border-width:2pxborder-style 속성은 테두리 모양을 지정
border-style:<속성값>;| 속성 값 | 설명 |
|---|---|
| none | 테두리를 그리지 않음 |
| hidden | 테두리를 화면에서 감춤 |
| solid | 테두리를 실선으로 그림 |
| double | 테두리를 이중 실선으로 그림 |
| dotted | 테두리를 점선으로 그림 |
| dashed | 테두리를 dotted 보다 긴 점선으로 그림 |
| groove | 테두리를 파인 것처럼 그림 |
| ridge | 테두리를 튀어나온 것 처럼 그림 |
| inset | 테두리 요소가 파인 것처럼 그림 |
| outset | 테두리를 요소가 튀어나온것 처럼 그림 |
h1{
border:1px soild #f00;
}
h2{
border-bottom:2px dotted black;
}
padding 영역
margin, border 영역보다 안쪽에 있으며 요소의 내부 여백을 담당
속성 사용 방법이나 속성 적용 원리는 Margin 영역과 같음!
p{
border:1px solid black;
padding : 10px;
}
content 영역
HTML 문법에서 content란 시작 태그와 종료 태그 사이에 작성하는 것
-> 박스 모델에서도 content 영역은 시작 태그와 종료 태그 사이에 사용된 콘텐츠가 속하는 영역
-> 다른 구성 요소와 다르게 content 영역 자체를 제어하는 속성은 없지만 보통 텍스트 관련 스타일 속성이 content 영역을 제어하는 속성이라 할 수 있음
-> content 영역을 제어하는 속성처럼 content에 영향을 주는 width, height 속성이 있음
width & height 속성
width는 content 영역의 너비, height는 content 영역의 높이를 지정하는데 사용
width : <크기>;
height : <크기>;div{
width : 100px;
height : 100px;
border : 1px solid black;
margin-left:auto;
margin-right:auto; /* 이 두 옵션을 통해 사각형이 중앙에 위치 */
}
-> content 영역의 너비와 높이가 100px
box-sizing 속성
width ,height 속성은 content 여역에 직접 영향을 주는 속성이라 때로는 의도치 않게 작동한다고 느껴질 때가 있음
div{
width:100px;
height:100px;
padding:10px;
border:1px solid black;
margin:10px;
}위 경우 div 태그의 너비와 높이는 각각 100px라고 생각하게 됨
하지만 웹 브라우저에 표시된 요소의 너비와 높이는 122
-> 웹 브라우저가 요소를 화면에서 렌더링 할 때 border,padding,content 영역의 너비와 높이를 종합적으로 계산하기 때문
-> 즉, 화면에 보이는 요소의 너비와 높이는 외부 여백인 margin 영역을 제외하고 border, padding, content 영역을 전부 포함한 크기
-> border 영역과 padding 영역까지 포함해 width 속성의 100px, padding 속성의 왼쪽 10px, 오른쪽 10px, border 속성의 왼쪽 1px, 오른쪽 1px을 모두 더한 122px(100px + 10px + 10px + 1px + 1px)로 계산
-> 요소를 100px로 표시하려면 78px로 설정하면 됨
-> 이 방법은 padding이나 border의 값이 달라지만 다시 계산해야 한다는 불편함
-> 이를 해결하기 위해 box-sizing:<속성 값>;
| 속성 값 | 설명 |
|---|---|
| content-box | width, height 속성의 적용 범위를 content 영역 으로 제한 |
| border-box | width, height 속성의 적용 범위를 border 영역으로 제한 |
default는 content-box 옵션
->border-box로 지정 시 width,height 속성의 지정 영역을 border 영역으로 바꿀수 있음
div{
width:100px;
height:100px;
padding:10px;
border:1px solid black;
margin:10px;
box-sizing:border-box;
}
border box로 지정 시 width,height 속성에 지정한 크기에 요소를 맞추기 위해 내부 content 영역의 너비와 높이가 자동으로 조절 됨
박스 모델의 성격과 display 속성
HTML의 모든 태그는 박스 모델을 가지고 있음
-> 이러한 박스 모델도 블록,인라인,인라인 블록이라는 서로 다른 성격 존재
블록 성격
hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한줄을 다 차지하는 것
-> 이러한 태그 여러번 사용 시 자동 줄 바꿈
인라인 성격
a, span, strong 태그를 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 성격
-> 여러 번 사용 시 웹 브라우저의 수평 공간이 남아있으면 한줄로 배치
인라인 블록 성격
인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적 성격
-> ex) img 태그 사용 시 웹 브라우저의 수평 공간이 남아있으면 한줄로 배치
차이
인라인 블록 성격은 width, height, margin, padding 속성이 전부 적용되지만, 인라인 성격은 width, height 속성이 적용되지 않고, padding,margin 속성은 각가 왼쪽과 오른쪽 방향만 적용됨
ex) 인라인 성격인 span 태그에 width나 height 속성을 지정하면 너비와 높이가 설정되지 않음, padding,margin도 위아래는 적용되지 않음
display 속성
HTML 태그가 기본적으로 가지고 있는 박스 모델의 성격을 display 속성으로 바꿀수 있음
속성 값 : block, inline, inline-block
ex) hn 태그를 인라인 성격으로 바꾸기
h1, h2{
display:inline;
}인라인 성격을 블록이나 인라인 블록으로 설정
a{
display:inline-block;
}
img{
display:block;
}