CSS 박스 모델
- 웹 문서의 내용을 박스 형태로 정의하는 방법
- 마진, 패딩, 테두리 등 박스가 여러겹 들어있음
1. 블록 레벨 요소
- 태그를 사용해 요소를 삽입했을 때, 한 줄을 차지하는 요소
- 대표적으로 <h1>, <div>, <p> 가 있음
2. 인라인 레벨 요소
- 한 줄을 차지하지 않고 콘텐츠 만큼 영역을 차지하는 요소
- 대표적으로 <span>, <img>, <strong> 등이 있음
박스 모델의 기본 구성
- 웹 문서의 블록 레벨 요소는 모두 박스 형태임
- 이런 요소를 박스 모델 요소라고 함
- 콘텐츠 영역, 패딩, 테두리, 마진 등 여러 요소로 구성
1. 콘텐츠 영역의 크기를 지정하는 방법, weight, height
- 크기, 백분율, auto에 따라 지정되며 기본 값은 auto
| 종류 | 설명 |
| <크기> | 너비, 높이 값을 px이나 em으로 정의 |
| <백분율> | 박스 모델을 포함하는 부모 요소를 기준으로 너비, 높이 값을 백분율로 지정 |
| <auto> | 너비와 높이가 콘텐츠 양에 따라 자동으로 결정, 기본 값 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.size {
width: 100px;
height: 100px;
border: 1px solid black;
}
.percent {
width: 50%;
height: 100px;
border: 1px solid black;
}
.auto {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>크기, 백분율, auto 지정</h1>
<div class="size">
고정 크기
</div>
<div class="percent">
퍼센테이지
</div>
<div class="auto">
오토
</div>
</body>
</html>
- 해당 전체화면에서 크기를 반으로 줄이면
- 이미지와 같이 퍼센테이지로 적용한 것은 50%에 맞게 줄어들게 된다. 고정 크기는 변하지 않았다.
2. 박스 모델의 크기를 계산하는 box-sizing 속성
- width와 height의 경우 박스 모델에서 콘텐츠 주변 여백과 테두리를 뺀 크기를 가리킴
- 요소를 배치할 때, 항상 패딩과 테두리의 값을 계산하여 모델의 크기를 넣는 것을 방지하기 위해 box-sizing 속성 사용
| 종류 | 설명 |
| border-box | 테두리 포함 너빗값 지정 |
| content-box | 콘텐츠 영역만 너빗값을 지정, 기본값 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.size {
width: 200px;
height: 100px;
border: 10px solid gray;
box-sizing: border-box;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<h1>크기, 백분율, auto 지정</h1>
<div class="size">
고정 크기
</div>
</body>
</html>
- border-box로 지정하여, 값을 매긴 200px에서 padding, border 옵션을 포함하여 계산하게 되므로 실제 콘텐츠 영역은 140px이 된다.
- 요소의 크기를 쉽게 계산하려면 border-box로 지정하는 것이 편하다.
3. 박스 모델에 그림자 효과를 주는 box-shadow 속성
- 수평 거리(x) 와 수직 거리(y)를 지정해야함
- 넣을 수 있는 속성 값은 다음과 같음
| 종류 | 설명 |
| <수평 거리> | 그림자가 가로로 얼마나 떨어져있는지 나타내는 값, 양수는 오른쪽, 음수는 왼쪽으로 그림자 생성 (필수) |
| <수직 거리> | 그림자가 세로로 얼마나 떨어져있는지 나타내는 값, 양수는 아래쪽, 음수는 위쪽으로 그림자 생성 (필수) |
| <흐림 정도> | 이 값 생략시 0을 기본값으로 하여 진한 그림자 표시, 값이 커질 수록 부드러운 그림자 생성 |
| <번짐 정도> | 양수 값은 그림자가 퍼져 박스보다 그림자가 크게 표시, 음수값은 모든 방향으로 그림자 축소(기본 0) |
| <색상> | 그림자의 색상을 나타냄, 여러개의 색상 지정가능하며 기본 값은 검은색 |
| inset | 키워드 사용시 안 쪽 그림자로 그리게 됨 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.size {
width: 200px;
height: 100px;
border: 10px solid gray;
box-sizing: border-box;
padding: 20px;
margin: 10px;
box-shadow: 2px -2px 5px 0px;
}
.size1 {
width: 200px;
height: 100px;
border: 10px solid gray;
box-sizing: border-box;
padding: 20px;
margin: 10px;
box-shadow: 5px 5px 15px 5px blue;
}
</style>
</head>
<body>
<h1>그림자</h1>
<div class="size">그림자 표현</div>
<div class="size1">그림자 표현 2</div>
</body>
</html>
CSS 테두리 스타일 지정하기
- 박스 모델에서 속성을 직접 적용시에 top -> right -> bottom -> left 순으로 속성을 적용할 수 있음
1. 테두리 스타일을 지정하는 border-style
- 기본 값은 none으로, 속성 값을 따로 지정하지 않으면 색상과 두께를 지정해도 화면에 표시되지 않음
| 종류 | 설명 |
| none | 테두리 없는 기본 값 |
| hidden | 테두리를 감추는 옵션, border-collapse: collapse인 경우, 다른 테두리도 표시 안됨 |
| solid | 테두리를 실선으로 표시 |
| dotted | 테두리를 점선으로 표시 |
| dashed | 테두리를 짧은 직선으로 표시 |
| double | 테두리를 이중선으로 표시, 두 선 사이의 간격은 border-width |
| groove | 테두리를 창에 조각한 처럼 표시, 입체 느낌 생성 |
| inset | border-dollapse: seperate일 경우 전체 박스 테두리가 창에 박혀 있는 것 처럼 표시, border-dollapse: collapse인 경우 groove와 똑같이 표시 |
| outset | border-dollapse: seperate일 경우 전체 박스 테두리가 창에서 튀어 나와 있는 것 처럼 표시, border-dollapse: collapse인 경우 ridge와 똑같이 표시 |
| ridge | 테두리를 창에서 튀어 나온 것처럼 표시 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.size {
border-style: solid;
}
.size1 {
border-style: dotted;
}
.size2 {
border-style: dashed;
}
.size3 {
border-style: double;
}
.size4 {
border-style: inset;
}
.size5 {
border-style: ridge;
}
</style>
</head>
<body>
<h1>그림자</h1>
<div class="size">실선</div>
<br/>
<div class="size1">점선</div>
<br/>
<div class="size2">짧은 선</div>
<br/>
<div class="size3">이중 선</div>
<br/>
<div class="size4">창에 조각한 것 처럼</div>
<br/>
<div class="size5">창에서 튀어나온 것 처럼</div>
</body>
</html>
2. 테두리 두께를 지정하는 속성 border-width
- 설명 그대로 두께를 지정하는 속성임
//기본형
border-width: <크기> | thin | medium | thick;- top - right - botton - left 순으로 옵션 각각 지정 가능
- 값이 2개인 경우 (위, 아래)로 인식
- 값이 3개인 경우 (위, 오른쪽, 아래)로 인식하여 왼쪽 값은 오른쪽을 따라가게됨
3. 테두리 속성을 지정하는 border-color
- 외곽 선 색상을 지정하는 기능
- border-top-color 등을 사용하여 각각 색상 지정 가능
4. 둥근 테두리를 만드는 border-radius
| 종류 | 설명 |
| <크기> | 반지름 크기를 px나 em 등 단위와함께 수치로 표현 |
| <백분율> | 현재 요소의 크기를 기준으로 비율로 지정 |
//타원으로 만드는 법
border-radius: <가로 반지름> / <세로 반지름>
//원으로 만드는 법
border-radius: 50%여백을 조절하는 속성들
1. 요소 주변의 여백을 설정하는 margin
- 요소와 요소 사이의 간격을 조절할 수 있음
| 종류 | 설명 |
| <크기> | 너빗값이나 높잇값을 px, em 단위와 함께 수치로 지정 |
| <백분율> | 박스 모델 포함 부모 요소를 기준으로 너비나 높이를 퍼센트로 지정 |
| <auto> | display 속성에서 지정한 값에 맞게 적절한 값 자동 지정 |
- 이 속성도 똑같이 (top -> right -> bottom -> left) 적용
마진 중첩(마진 상쇄)이란
▶ 요소를 세로로 배치할 경우, 각 요소의 마진과 마진이 서로 만나 큰 쪽으로 겹쳐지는 문제로, 여러 요소를 세로로 배치할 때 사이에 있는 마진이 지나치게 커지는 것을 방지하기 위한 것이다.
▶ 아래 마진과 위 마진이 서로 만나면 큰 마진 값으로 합쳐지고, 오른쪽 마진과 왼쪽 마진이 만날경우는 중첩이 되지 않는다.
2. 콘텐츠와 테두리 사이 여백을 설정하는 padding
- 테두리 안쪽의 여백이라고 생각하면 편함
- top - right - bottom - left 순서 적용
- padding 값이 크면 클수록 글은 안쪽으로 들어옴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.notpad {
border-style: solid;
}
.pad {
border-style: solid;
padding: 20px;
}
</style>
</head>
<body>
<h1>패딩딩</h1>
<div class="notpad">패딩 없음</div>
<div class="pad">패딩 있음</div>
</body>
</html>
웹 문서의 레이아웃 만들기
1. 배치 방법을 결정하는 display
- 속성 사용시 블록 레벨과 인라인 레벨 요소를 서로 바꿔서 사용 가능
| 종류 | 설명 |
| block | 인라인 레벨 요소를 블록 레벨 요소로 변경 |
| inline | 블록 레벨 요소를 인라인 레벨 요소로 변경 |
| inline-block | 인라인 레벨 요소, 블록 레벨 요소의 속성을 모두 가지며 마진과 패딩 부여 가능 |
| none | 해당 요소를 화면에 표시안함 |
2. 왼쪽 또는 오른쪽으로 배치하는 float
- 문단의 왼쪽이나 오른쪽에 이미지를 나란히 배치할 때 사용하는 방법
| 종류 | 설명 |
| left | 해당 요소를 문서의 왼쪽에 배치 |
| right | 해당 요소를 문서의 오른쪽에 배치 |
| none | 아무곳에도 배치하지 않음, 기본 값 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.float {
float: left;
margin-right: 40px;
}
</style>
</head>
<body>
<h1>플롯</h1>
<img class="float" src="dog.jpg" />
<p>
설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분
설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분
설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분
설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분
설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분
설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분
설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분
설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분
설명하는 부분 설명하는 부분 설명하는 부분 설명하는 부분
</p>
</body>
</html>
3. float 속성을 해제하는 clear 속성
- float 속성 적용하는 경우 다음 이미지에도 똑같은 속성이 전달되므로, clear로 적용하지 않는 것이 가능함
- 더이상 뜨지 않게 만드는 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.float1 {
background: aqua;
float: left;
}
.float2 {
background: #0094ff;
float: left;
}
.float3 {
background: blue;
}
.float4 {
background: purple;
clear: left;
}
</style>
</head>
<body>
<h1>플롯 클리어</h1>
<div class="float1">적용</div>
<div class="float2">적용</div>
<div class="float3">적용X</div>
<div class="float4">클리어</div>
</body>
</html>
웹 요소의 위치 지정하기
1. 웹 요소의 위치를 정하는 left, right, top, bottom
- 각각 기준 위치와 요소 사이에, 방향으로 얼마나 떨어져있는지 지정함
- position 속성과 자주 사용
2. 배치 방법을 지정하는 position
- 웹 문서의 요소를 자유자재로 배치해주므로 중요한 속성임
| 종류 | 설명 |
| static | 문서의 흐름에 맞춰 배치, 기본 값 |
| relative | 위치값을 지정할 수 있다. 이외에는 static과 같음 |
| absolute | relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치 |
| fixed | 브라우저 창을 기준으로 위치를 지정해 배치 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.static {
border: 1px solid black;
position: static;
}
.relative {
border: 1px solid black;
position: relative;
}
.relative2 {
border: 1px solid black;
position: relative;
left: 100px;
top: -50px;
}
.fixed {
width: 100px;
height: 100px;
background-color: #222;
position: fixed;
right: 30px;
top: 30px;
}
</style>
</head>
<body>
<h1>포지션</h1>
<p class="static">설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..</p>
<p class="relative">설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..</p>
<p class="relative2">설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..설명 어쩌구..</p>
<p class="fixed"></p>
</body>
</html>
'HTML, CSS, JavaScript' 카테고리의 다른 글
| [CSS] CSS 고급 선택자 (0) | 2025.03.04 |
|---|---|
| [CSS] 이미지 & 그라데이션으로 배경 꾸미기 (0) | 2025.02.24 |
| [CSS] 텍스트 관련 스타일 (2) | 2025.01.20 |
| [CSS] CSS - 글꼴 설정하기 (2) | 2025.01.16 |
| [CSS] CSS의 기본 (5) | 2025.01.14 |