CSS 레이아웃의 뼈대가 되는 블록Block과 인라인Inline, 그리고 요소의 크기와 여백을 결정하는 박스 모델Box Model은 웹 디자인의 가장 기초적인 개념이다.
이번 포스트에서는 이 핵심 개념들과 더불어 실무에서 필수적인 box-sizing 속성까지 차근차근 알아보겠다.
이전 포스트
CSS 캐스케이딩, 우선순위를 조절하는 방법
생활코딩 CSS 수업 영상: block과 inline
CSS 레이아웃의 가장 기본이 되는 두 성질, 블록Block과 인라인Inline은 한마디로 요소가 화면에서 자리를 차지하는 방식의 차이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1,a{border:1px solid red;}
h1{display:inline;}
a{display:block;}
</style>
</head>
<body>
<h1>Hello world</h1>
안녕하세요. <a href="https://opentutorials.org" target="_blank">생활코딩</a>입니다.
</body>
</html>1. 블록(Block) 요소
Block을 사전에서 검색해 보면 '차단', '막다', '구역' 등의 뜻이 있다고 나온다.
이처럼 Block 요소는 화면의 가로 폭 전체를 자신의 영역Area으로 설정하고, 자신의 옆에 다른 요소가 오는 것을 차단한다.
- 특징: 옆에 다른 요소가 오는 것을 허용하지 않고 무조건 다음 줄로 넘겨버린다.
- 크기: 가로폭(
width)을 지정하지 않으면 부모의 너비를 100% 다 채운다.width,height,margin,padding을 모두 자유롭게 조절할 수 있다. (이 내용은 다음 영상을 보면 더 잘 이해할 수 있다.) - 대표 태그:
<div>,<h1>부터<h6>까지,<p>,<ul>,<li>등.
2. 인라인(Inline) 요소
글자처럼 흐르는 성질로, 필요한 만큼의 공간만 차지한다.
- 특징: 내용물의 크기만큼만 자리를 잡으며, 옆에 다른 인라인 요소가 올 수 있다. (줄 바꿈이 일어나지 않음)
- 크기:
width와height를 지정해도 무시된다. 상하margin역시 제대로 작동하지 않는 경우가 많아, 오직 글자 크기나 줄 간격에 의해서만 높이가 결정된다. (이 내용도 역시 다음 영상에서 나온다.) - 대표 태그:
<span>,<a>,<img>,<strong>등.
인라인처럼 옆으로 나열하고 싶은데, 블록처럼 크기 조절도 하고 싶다면, display: inline-block;을 사용하면 두 성질의 장점만 골라 쓸 수 있다.
생활코딩 CSS 수업 영상: box model
Block과 Inline을 공부한 뒤, 바로 이어서 공부하기 가장 좋은 개념이 바로 이 박스 모델Box Model이다.
<!DOCTYPE html>
<html>
<head>
<style>
p, a {
border: 10px solid red;
padding: 20px;
margin: 40px;
width: 300px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, numquam.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, cum.
</p>
안녕하세요. <a href="https://lab.mistyroom.com" target="_blank">미스티</a>입니다.
</body>
</html>1. Padding (안쪽 여백)
테두리(Border)와 컨텐츠 사이의 내부 공간을 말한다.
- 특징: 패딩을 늘리면 박스 자체가 커지는 효과가 있다. (내용물에 숨을 쉴 공간을 주는 것과 같다.)
- 비유: 택배 박스 안의 물건이 망가지지 않게 채워 넣는 에어캡(뽁뽁이) 같은 존재다.
2. Margin (바깥 여백)
테두리(Border) 바깥의 외부 공간을 말한다.
- 특징: 요소와 요소 사이의 간격을 조절할 때 사용한다. 박스 자체의 크기에는 영향을 주지 않고, 옆에 있는 다른 박스를 밀어내는 역할을 한다.
- 비유: 사람과 사람 사이의 '사회적 거리두기', '개인 공간'이라고 생각하면 쉽다.
3. Width & Height: 컨텐츠의 크기
말 그대로 요소의 가로Width와 세로Height 크기를 정한다.
- 특징: 앞서 우리가 이야기한 것처럼, Block 요소에서만 제대로 작동하며 Inline 요소에서는 무시된다.
- 주제: 텍스트나 이미지가 들어가는 '순수 컨텐츠 영역'의 크기만을 의미한다.
생활코딩 CSS 수업 영상: box-sizing
box-sizing 속성은 박스의 전체 크기(너비와 높이)를 계산할 때, 어디까지를 기준으로 삼을지 결정하는 속성이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
div {
margin: 10px;
width: 150px;
}
#small {
border: 10px solid black;
}
#large {
border: 30px solid black;
}
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html><style> 태그 내의 *{ } 선택자는 이 웹페이지 내의 모든 태그에 적용하는 선택자다.
1. content-box (기본값)
가장 원시적인 계산 방식이다.
width를 설정하면 오직 컨텐츠 영역만 그 크기가 된다.
- 문제점: 여기에
padding이나border를 추가하면, 그만큼 박스 전체 크기가 커진다. - 예시:
width: 100px인 박스에padding: 20px을 주면 전체 너비는 140px이 된다. (계산하기 매우 번거롭다.)
2. border-box (실무 표준)
테두리(border)를 기준으로 크기를 계산한다.
- 특징:
width를 설정하면 그 안에 패딩과 테두리가 모두 포함된다. 즉, 패딩을 아무리 조절해도 박스 전체 크기는 변하지 않는다. - 예시:
width: 100px인 박스에padding: 20px을 주면, 안쪽 컨텐츠 영역이 알아서 줄어들고 전체 너비는 그대로 100px을 유지한다.
최근에는 웹사이트 제작 시, 개발자들은 혼란을 방지하기 위해 (위의 생활코딩 수업 영상에서 사용한 코드처럼) CSS 파일 최상단에 모든 요소에 border-box를 적용하는 코드를 넣고 시작한다.
다음 포스트
CSS 마진 겹침 현상 이해하기: 3가지 발생 사례
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩