css 박스 모델(Box Model)
- 박스 모델(Box Model)
- 박스모델은 모든 HTML 요소가 사각형 박스로 구성된다는 CSS의 기본 개념
- 각 박스는 네 가지 영역으로 나뉨
1. content: 텍스트나 이미지가 들어가는 실제 내용 영역
2. Padding: 내용과 테두리 사이의 내부 여백
3. Border: 테두리, 요소의 경계를 나타냄
4. Margin: 요소 외부의 여백, 다른 요소와의 간격
-
박스 모델 구조
-
CSS 예시
CSS
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}CSS 우선순위(Specificity)
- CSS 우선순위
- CSS 우선순위(specificity)는 여러 CSS 규칙이 동일한 요소에 적용될 때, 어떤 스타일이 적용되는지를 결정하는 규칙.
- 우선순위 계산 방식
- 인라인 스타일: 가장 높은 우선순위
- ID 선택자: 높은 우선순위
- 클래스, 속성, 가상 클래스 선택자: 중간 우선순위
- 태그 선택자: 낮은 우선순위
-!important를 사용하면 어떤 규칙보다 우선 적용
- 예시 코드
HTML
<style>
p {
color: blue; /* 태그 선택자 */
}`
.highlight {
color: red; /* 클래스 선택자 */
}
#unique {
color: green; /* ID 선택자 */
}
p.inline-style {
color: yellow !important; /* !important */
}
</style>
<p id="unique" class="inline-style highlight">CSS 우선순위 예시입니다!</p>- 우선순위 계산
- 태그 선택자:
p(우선순위:1) - 클래스 선택자:
.highlight(우선순위: 10) - ID 선택자:
#unique(우선순위:100) !important: 무조건 적용(하지만 자주 사용 x)
자주 사용하지 말아야 하는 이유.
1) 유지보수 어려움
- 나중에 스타일을 바꾸려 해도!important때문에 적용이 안될 수 있음.
- 다른 사람이나 나중의 자신이 코드를 이해하기 어려워짐
2) specificity 계산 무력화
- CSS 설계의 핵심인 선택자 우선순위 개념이 무시됨
- 결국 "강제로 덮어쓰기"만 반복하게 됨
3) 재사용성과 확장성 저하
- 클래스별 스타일을 재사용하거나 레이아웃을 변경하기 어려워짐
- 프레임 워크나 라이브러리와 충돌 가능성 증가
4) 코드 혼란
- 너무 많은!important사용 -> 어느 스타일이 적용될지 추적 어려움
- 디버깅 시간이 늘어남
대안
1) 특정성 높이기: 선택자를 조금 더 구체적으로 작성 (.container p.highlight)
2) 스타일 구조 개선: CSS 구조를 명확하게 계층화
3) 변수 활용: CSS 변수(--color-main)를 활용해 변경 용이성 확보
CSS 단위 (Units)
- CSS 단위 (Units)
- CSS에서 요소의 크기, 간격, 위프를 설정할 때 다양한 단위 사용
- 주요 단위
1) 고정 단위:px(픽셀) - 화면의 고정된 크기를 의미
2) 상대 단위:
-em,rem- 글꼴 크기에 상대적인 단위
-%- 부모 요소 크기에 상대적인 백분율
-vw,vh-뷰포트(화면) 크기에 비례하는 단위
- 단위 비교 예시
CSS
.container {
width: 50%; /* 부모 요소 너비의 50% */
padding: 1rem; /* 기본 글꼴 크기의 1배 */
margin: 20px; /* 20 픽셀 */
font-size: 2em; /* 현재 글꼴 크기의 2배 */
}- 주요 단위 설명
px: 고정된 크기로, 디바이스 화면 크기에 상관없이 일정하게 유지.em: 부모 요소의 글꼴 크기에 비례. (1em = 부모 글꼴 크기)rem: 루트 요소(html)의 글꼴 크기에 비례.%: 부모 요소의 크기에 비례.vw,vh: 각각 뷰포트의 너비, 높이에 대한 백분율.
실습 과제
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 실습</title>
<style>
/* 1. 박스 패딩, 테두리, 마진 설정 */
.box {
/* 이곳에 패딩, 테두리, 마진을 설정 */
padding: 10px;/* 패딩 설정 */
border: 3px solid blue; /* 테두리 설정 */
margin: 20px; /* 마진 설정 */
}
/* 2. 제목의 기본 색상은 녹색 */
h1 {
/* 이곳에 기본 제목 색상을 설정 */
color: green;
}
/* 3. 제목에 클래스 .highlight가 있을 때는 빨간색 */
.highlight {
/* 이곳에 클래스 적용 시 제목 색상을 설정하세요 */
color: red;
font-size: 3em;/* 글자 크기 설정 */
}
/* 4. id가 special인 경우 노란색 */
#special {
/* 이곳에 id 적용 시 색상을 설정 */
color: yellow;
}
/* 5. 단위를 적절히 사용해 크기 및 글자 크기를 설정 */
.content {
width: 50%; /* 50%로 박스 크기를 설정 */
font-size: 1.5em; /* 글자 크기 설정 */
}
</style>
</head>
<body>
<h1 class="highlight">박스 모델 실습</h1>
<h1 id="special">우선순위 실습</h1>
<h1 class="highlight" id="special">우선순위와 박스 모델</h1>
<h1>기본 제목</h1>
<div class="box content">
이곳은 박스 모델이 적용된 콘텐츠입니다.
</div>
</body>
</html>
사랑합니다.