한 걸음씩
[Web] The box model 본문
1. 개요
► CSS Box Model
- 모든 HTML 요소를 (사각형) 박스로 표현
- 박스에 대한 크기, 여백, 테두리 등의 스타일을 지정하는 디자인 개념
2. 구성 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 300px;
padding-left: 25px;
padding-bottom: 25px;
margin-left: 25px;
margin-top: 50px;
border-width: 3px;
border-color: black;
border-style: solid;
}
.box2{
width: 300px;
padding: 25px 50px; <!--상하/좌우-->
margin: 25px auto; <!--상하/좌우-->
border: 1px dashed black;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
💡 box3를 오른쪽에 위치하게 하려면 어떻게 해야 할까?
박스에 아무 설정도 안 했을 때 margin-right: auto; 상태인데
오른쪽에 위치하는 것으로 위치를 변경하려면 margin-left: auto; 상태로 설정한다
더 나아가서 가운데 정렬하려면 margin-right: auto;와 margin-left: auto; 상태로 같이 정렬해 주면 된다
► width & height
- 요소의 너비와 높이를 지정
- 이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 함
► Box-sizing
- 요소의 너비와 높이를 계산하는 방법을 지정
<!-- 박스 사이즈를 content 기준으로 지정 -->
<!-- 너비를 300px로 지정했을 때 박스 사이즈는 border값 + content값 + padding값 -->
*{
box-sizing: content_box;
}
<!-- 박스 사이즈를 border 기준으로 지정 -->
<!-- 너비를 300px로 지정했을 때 박스 사이즈는 300px -->
*{
box-sizing: border_box;
}
<!-- 실제 개발시에 초기값을 설정해두는 몇 가지 요소가 있는데 그 중 하나가 box-sizing: border_box;-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
border: 2px solid black;
padding: 10px;
margin: 20px;
background-color: lightblue;
}
.content_box{
box-sizing: content-box;
}
.border_box{
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box content_box">content_box</div>
<div class="box border_box">border_box</div>
</body>
</html>
3. 박스 타입
<!-- block 속성은 위에서 아래로 -->
.index{
display: block;
}
<!-- inline 속성은 왼쪽에서 오른쪽으로 -->
.index{
display: inline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a, span, img{
border: 1px solid red;
}
h1, p, div{
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>Normal flow</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit?</p>
<div>
<p>block 요소는 기본적으로 부모 요소의 너비 100%를 차지하며, 자식 콘텐츠의 최대 높이를 취함</p>
<p>block 요소의 총 너비와 총 높이는 content + padding + border width/height다.</p>
</div>
<p>block 요소는 서로 margins로 구분된다.</p>
<p>inline 요소는 <span>이 것처럼</span> 자체 콘텐츠의 너비와 높이만 차지한다.
그리고 inline 요소는 <a href="#">width나 height 속성을 지정할 수 없다</a></p>
<p>물론 이미지도 <img src="#" alt="#">인라인 요소다.
단, 이미지는 다른 inline 요소와 달리 width나 height로 크기를 조정할 수 있다.</p>
<p>
만약 inline 요소의 크기를 제어하려면 block 요소로 변경하거나 inline-block 요소로 설정해줘야 한다.
</p>
</body>
</html>
► block 타입
- 항상 새로운 행으로 나뉨
- 하나의 행에 하나의 박스만!
- why? block속성은 자신이 차지하지 못한 부분은 margin-right: auto; 상태로 자동 설정되어 있기 때문에
- width와 height 속성을 사용하여 너비와 높이를 지정할 수 있음
- 기본적으로 width 속성을 지정하지 않으면 박스는 inline방향으로 사용 가능 공간을 모두 차지함(너 미를 사용가능한 공간의 100%로 채우는 것)
- 대표적인 block 타입 태그 : h1~h6, p, div
► inline 타입
- 새로운 행으로 나뉘지 않음
- width와 height 속성을 사용할 수 없음
- 수직 방향
- padding, margins, borders가 적용되지만 다른 요소를 밀어낼 수 없음
- 수평 방향
- padding, margins, borders가 적용되어 다른 요소를 밀어낼 수 있음
- 대표적인 inline 타입 태그 : a, img, span
4. 참고
► shorthand 속성
1. border
- border-width, border-style, border-color를 한 번에 설정하기 위한 속성
/* 순서는 영향을 주지 않음 */
border: 1px solid black;
2. margin & padding
- 4방향의 속성을 각각 지정하지 않고 한 번에 지정할 수 있는 속성
<!-- 4개 : 상우하좌 -->
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
<!-- 3개 : 상/좌우/하 -->
margin: 10px 20px 30px;
padding: 10px 20px 30px;
<!-- 2개 : 상하/좌우 -->
margin: 10px 20px;
padding: 10px 20px;
<!-- 1개 : 공통 -->
margin: 10px;
padding: 10px;
► display: inline-block
- inline과 block요소 사이의 중간 지점을 제공하는 display 값
- 요소가 줄 바꿈 되는 것을 원하지 않으면서(inline) 너비와 높이를 적용하고 싶은 경우(block)에 사용
- block 요소의 특징을 가짐
- 너비 및 높이 속성이 준수
- 패딩, 여백 및 테두리로 인해 다른 요소가 상자에서 밀려남
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.block{
width: 100px;
height: 100px;
margin: 10px;
background-color: palevioletred;
}
.inline-block{
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: powderblue;
}
.inline{
display: inline;
width: 100px;
height: 100px;
margin: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline"></div>
<div class="inline"></div>
<div class="inline"></div>
</body>
</html>
💡block, inline-block, inline의 차이는 무엇일까?
- block 속성은 한 행에 하나의 박스만
- 위의 사진에서 핑크색 박스
- inline-block 속성은 한 행에 여러개의 박스
- 위의 사진에서 파란색 박스
- inline 속성은 왜 나타나지 않는 걸까?
- 위의 코드를 보면 <div>여기에 텍스트가 존재하지 않음 </div>
- 다시 말해 inline 속성은 content에만 영향을 줌
- block, inline-block, inline 어느 것이 더 낫다고 말하기보다는 상황에 맞게 사용하기
► Margin collapsing
- 두 block 타입 요소의 margin top과 bottom 이 만나 큰 margin으로 결합되는 현상
- 웹 개발자가 레이아웃을 더욱 쉽게 관리할 수 있도록 함
- 각 요소에 대한 상/하 margin을 각각 설정하지 않고 한 요소에 대해서만 설정할 수 있음
'Web' 카테고리의 다른 글
| [Web] Semantic Web (0) | 2023.03.02 |
|---|---|
| [Web] Flexible box for CSS layout (1) | 2023.02.28 |
| [Web] Floating for CSS layout (0) | 2023.02.28 |
| [Web] Positioning for CSS layout (0) | 2023.02.27 |
| [Web] Fundamentals of HTML and CSS (0) | 2023.02.22 |
'Web' Related Articles
more
