실습을 하면서, 헷갈렸던 부분들을 다시 정리해보았다. 자, 정리한 뒤 박스 모델과 레이아웃 내용에 대해서 정리해보겠다.
CSS에서 block, inline, inline-block의 차이점
CSS에서는 요소가 화면에서 어떻게 배치되는지를 display 속성으로 정하는데, 그중에서도 block, inline, inline-block은 가장 기본적인 세 가지 방식이다. 각각의 배치 방식이 다르고, 웹 페이지를 레이아웃할 때 중요한 역할을 한다.
1. Block 요소
• 특징: block 요소는 화면에서 한 줄 전체를 차지하는 성질을 가진다. 한 줄에 여러 개의 block 요소가 나란히 배치되지 않고, 하나의 block 요소가 끝나면 그 다음 요소는 아래쪽에 배치된다.
• 대표적인 예: div, h1, p, header, footer 같은 요소들은 기본적으로 display: block 속성을 가진다.
• 예시: block 요소는 상자들이 아래로 쌓이는 형태와 비슷하다. 예를 들어 div 태그는 기본적으로 block 성질을 가져서 한 줄을 차지하고, 그 아래로 다음 요소가 배치된다.
• CSS 속성: width와 height를 자유롭게 조절할 수 있으며, margin과 padding을 모두 적용할 수 있다.
<div style="background-color: lightblue;">첫 번째 박스</div>
<div style="background-color: lightcoral;">두 번째 박스</div>위 코드에서는 두 개의 div가 세로로 쌓여서 각각 한 줄씩 차지하게 된다.
2. Inline 요소
• 특징: inline 요소는 자신의 내용만큼의 공간만 차지한다. 따라서 inline 요소는 옆에 다른 요소들이 나란히 배치될 수 있다.
• 대표적인 예: span, a, strong, em 같은 요소들은 기본적으로 display: inline 속성을 가진다.
• 예시: 문장 중간에 특정한 스타일을 적용할 때 inline 요소를 자주 사용한다. 예를 들어 a 태그는 링크를 만드는 요소로, 문장 안에 끼워 넣을 수 있다.
• CSS 속성: width와 height를 직접 설정할 수 없고, 요소가 내용에 맞게만 차지하게 된다. 다만 padding과 margin의 좌우 값은 적용할 수 있다.
<p>이 문장에는 <span style="color: blue;">파란색으로 강조된 부분</span>이 있다.</p>위 코드에서 span 태그는 문장 안에 파란색으로 강조된 부분처럼 나타나게 된다.
3. Inline-block 요소
• 특징: inline-block은 inline처럼 옆에 다른 요소와 나란히 있을 수 있으면서도, block처럼 크기를 조절할 수 있는 성질을 가진다.
• 대표적인 예: 버튼이나 네비게이션 메뉴 같은 요소들에 자주 사용된다.
• 예시: 여러 개의 버튼을 가로로 나란히 배치하고 싶을 때 inline-block을 사용하면 편리하다. block처럼 크기를 조절할 수 있으면서도 inline처럼 가로로 배치할 수 있다.
• CSS 속성: width, height, padding, margin 모두 자유롭게 사용할 수 있어서 크기와 위치를 조정하기에 적합하다.
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightgreen;">첫 번째 버튼</div>
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightpink;">두 번째 버튼</div>위 코드에서는 inline-block으로 지정된 div들이 옆으로 나란히 배치되고 크기도 조절된다.
CSS 필수 규칙들 🎯
CSS를 효율적으로 사용하기 위해 알아야 할 기본 규칙들이 있다. 이 규칙들을 이해하면 스타일을 더 깔끔하게 관리할 수 있다!
1. 선택자 우선순위: CSS에서는 어떤 스타일이 더 우선적으로 적용될지를 결정하는 우선순위라는 개념이 있다.
• 인라인 스타일: 태그 안에 직접 style="..."로 넣는 스타일이 가장 높은 우선순위를 가진다.
• ID 선택자: #myID { ... }처럼 #으로 시작하는 ID 선택자는 클래스보다 우선순위가 높다.
• 클래스 선택자: .myClass { ... }와 같이 .으로 시작하는 클래스 선택자는 자주 사용되며, 동일한 스타일을 여러 요소에 쉽게 적용할 수 있다.
• 태그 선택자: div { ... }, p { ... }와 같은 태그 선택자는 우선순위가 제일 낮다.
2. 상속: CSS에서는 부모 요소의 스타일이 자식 요소에게 전달되는 경우가 많다. 예를 들어 부모 요소에 font-family를 설정하면 자식 요소들도 그 폰트를 따르게 된다.
3. 박스 모델: 모든 HTML 요소는 박스 모델이라는 구조를 가진다. 박스 모델은 요소의 크기를 계산할 때 content(내용) + padding(안쪽 여백) + border(테두리) + margin(바깥 여백)을 모두 합친 크기로 요소의 전체 크기를 결정한다. 보통 box-sizing: border-box;를 사용하면 테두리와 패딩을 포함한 크기를 지정할 수 있다.
4. 중복 스타일 방지: 여러 요소에 반복되는 스타일이 많다면, 클래스를 만들어 재사용하거나 중복된 스타일을 한꺼번에 적용하는 방식이 코드 관리에 효율적이다.
박스 모델의 개념
박스 모델은 모든 HTML 요소가 네 가지 주요 구성 요소로 이루어져 있다는 개념이다. 이 구성 요소들은 다음과 같다:
1. Content (내용)
• 요소에 실제로 표시되는 텍스트나 이미지 등 콘텐츠 자체를 의미한다.
• 이 콘텐츠의 크기를 조절하기 위해 width와 height 속성을 사용할 수 있다.
2. Padding (안쪽 여백)
• 콘텐츠와 border(테두리) 사이의 공간이다.
• padding을 설정하면 콘텐츠와 테두리 사이에 여유 공간이 생겨서 요소 안의 콘텐츠가 더 여유롭게 배치된다.
3. Border (테두리)
• 콘텐츠와 패딩을 둘러싼 테두리 영역이다.
• border 속성으로 테두리의 색상, 두께, 스타일을 지정할 수 있다.
4. Margin (바깥 여백)
• 요소의 가장 바깥쪽에 위치하며, 다른 요소와의 간격을 조절한다.
• margin을 사용하면 요소와 주변 요소들 사이에 여백을 줄 수 있다.
박스 모델의 전체 크기는 이 네 가지 요소가 모두 더해진 크기다. 예를 들어, width와 height가 100px로 설정된 div 요소가 있고, padding, border, margin 값이 각각 10px, 5px, 15px라면 전체 크기는 100 + 2*(10 + 5 + 15) = 160px이 된다.
box-sizing 속성과 사용법
기본적으로 박스 모델의 크기는 content + padding + border + margin으로 계산되기 때문에, 설정한 width나 height 값보다 요소가 더 크게 나타날 수 있다. 이를 조절하는 데 유용한 속성이 **box-sizing**이다.
1. box-sizing: content-box (기본값)
• content-box는 요소의 width와 height가 콘텐츠 영역만을 의미한다.
• padding과 border가 추가되면서 전체 크기가 커지게 된다.
.content-box {
width: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: content-box;
}이 경우, 전체 너비는 100px(콘텐츠) + 10px*2(패딩) + 5px*2(테두리) = 130px이 된다.
2. box-sizing: border-box
• border-box는 요소의 width와 height가 전체 크기를 의미한다.
• padding과 border가 포함된 상태로 계산되기 때문에, 요소의 크기가 설정한 width와 height 안에서 유지된다.
.border-box {
width: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
}여기서는 padding과 border가 포함된 상태로 크기를 조절하기 때문에, 전체 너비는 지정된 100px로 유지된다.
실습을 해보면서 이해해보자.
- html 코드 (주석 포함)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 모델 예제</title>
<link rel="stylesheet" href="style.css"> <!-- 외부 CSS 파일 연결 -->
</head>
<body>
<!-- 박스 두 개: 하나는 기본 박스 모델(content-box), 하나는 테두리 포함 박스 모델(border-box) -->
<div class="box content-box">Content-box</div>
<div class="box border-box">Border-box</div>
</body>
</html>
- CSS 코드 (쉬운 설명 주석 포함)
/* 페이지 전체의 기본 스타일 */
body {
font-family: Arial, sans-serif; /* 폰트 설정 */
display: flex; /* 박스들을 세로로 정렬하기 위해 flex 사용 */
flex-direction: column;
align-items: center; /* 모든 박스를 중앙에 위치시키기 */
gap: 20px; /* 박스들 사이에 20px 간격 추가 */
margin-top: 50px; /* 화면 상단에 50px 여백 추가 */
}
/* 공통 박스 스타일: 두 박스에 공통 적용 */
.box {
width: 200px; /* 박스의 너비: 200px */
height: 100px; /* 박스의 높이: 100px */
padding: 20px; /* 박스 내부 여백: 콘텐츠와 테두리 사이에 20px */
border: 5px solid black; /* 테두리: 두께 5px, 검정색 */
margin: 15px; /* 박스 외부 여백: 다른 요소들과의 간격 */
background-color: lightblue; /* 박스 배경색: 연한 파란색 */
text-align: center; /* 텍스트를 중앙 정렬 */
line-height: 60px; /* 세로 정렬 효과를 주기 위해 줄 간격 설정 */
color: darkblue; /* 텍스트 색상: 짙은 파란색 */
font-weight: bold; /* 텍스트를 굵게 표시 */
}
/* 첫 번째 박스: 기본 박스 모델(content-box) */
.content-box {
box-sizing: content-box; /* 기본 박스 모델: 너비와 높이는 '콘텐츠' 부분만 포함 */
/* 따라서 padding과 border는 너비와 높이에 더해짐 */
}
/* 두 번째 박스: 테두리 포함 박스 모델(border-box) */
.border-box {
box-sizing: border-box; /* 테두리 포함 박스 모델: 너비와 높이에 padding과 border가 포함됨 */
/* 설정한 너비와 높이에 padding과 border가 포함되어 크기가 변하지 않음 */
}
1. .content-box (box-sizing: content-box)
• 기본 박스 모델이다. width와 height는 콘텐츠 부분만의 크기를 의미한다.
• 즉, padding과 border가 더해지면 전체 크기가 설정한 크기보다 더 커지게 된다.
• 전체 너비 계산:
• 200px(콘텐츠 너비) + 20px*2(padding) + 5px*2(border) = 250px
• 전체 높이 계산:
• 100px(콘텐츠 높이) + 20px*2(padding) + 5px*2(border) = 150px
• 결과: .content-box의 실제 크기는 250px x 150px이 된다.
2. .border-box (box-sizing: border-box)
• border-box는 전체 크기에 padding과 border를 포함한 박스 모델이다.
• width와 height가 전체 크기를 의미하기 때문에, padding과 border가 포함되어도 설정한 크기에서 벗어나지 않는다.
• 전체 너비 계산:
• 설정한 200px 그대로 (padding과 border 포함된 크기)
• 전체 높이 계산:
• 설정한 100px 그대로 (padding과 border 포함된 크기)
• 결과: .border-box는 설정한 크기대로 200px x 100px을 유지한다.