베이스 캠프에서 (3)
CSS 박스 모델 (Box Model)에 대해서 다뤘다.
1. **Content**: 텍스트나 이미지가 들어가는 실제 내용 영역
2. **Padding**: 내용과 테두리 사이의 내부 여백
3. **Border**: 테두리, 요소의 경계를 나타냄
4. **Margin**: 요소 외부의 여백, 다른 요소와의 간격
- **우선순위 계산 방식**:
- **인라인 스타일**: 가장 높은 우선순위를 가집니다.
- **ID 선택자**: 높은 우선순위
- **클래스, 속성, 가상 클래스 선택자**: 중간 우선순위
- **태그 선택자**: 낮은 우선순위
- `!important`를 사용하면 어떤 규칙보다 우선 적용됩니다.
CSS 단위 (Units)
1. **고정 단위**: `px` (픽셀) - 화면의 고정된 크기를 의미
2. **상대 단위**:
- `em`, `rem` - 글꼴 크기에 상대적인 단위
- `%` - 부모 요소 크기에 상대적인 백분율
- `vw`, `vh` - 뷰포트(화면) 크기에 비례하는 단위
<!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>
.box {padding: 10px;
border: 3px solid blue;
margin: 20px;}
h1 {
font color:green
}
.highlight {
color: red;
}
#special { color: yellow
}
*/
.content {
width: 50%;
font-size: 1.5em;
}
</style>
</head>
<body>
<h1 class="highlight">박스 모델 실습</h1>
<h1 id="special">우선순위 실습</h1>
<div class="box content">
이곳은 박스 모델이 적용된 콘텐츠입니다.
</div>
</body>
</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>
.box {padding: 10px;
border: 3px solid blue;
margin: 20px;}
h1 {
font color:green
}
.highlight {
color: red;
}
#special { color: yellow
}
*/
.content {
width: 50%;
font-size: vh(30);
}
</style>
</head>
<body>
<h1 class="highlight">박스 모델 실습</h1>
<h1 id="special">우선순위 실습</h1>
<div class="box content">
이곳은 박스 모델이 적용된 콘텐츠입니다.
</div>
</body>
</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>
.box {padding: 10px;
border: 3px solid blue;
margin: 20px;}
h1 {
font color:green
}
.highlight {
color: red;
}
#special { color: yellow
}
*/
.content {
width: 50%;
font-size: rem;
}
</style>
</head>
<body>
<h1 class="highlight">박스 모델 실습</h1>
<h1 id="special">우선순위 실습</h1>
<div class="box content">
이곳은 박스 모델이 적용된 콘텐츠입니다.
</div>
</body>
</html>
댓글
댓글 쓰기