웹 페이지를 구성하는 모든 요소는 상자(box) 형태로 표현된다. CSS의 상자 모델(Box Model)은 이 상자를 구성하는 요소와 그것이 웹 페이지에 어떻게 배치되는지를 이해하는 데 중요한 개념이다.
CSS 상자 모델의 구성 요소
CSS 상자 모델은 다음과 같은 네 가지 주요 구성 요소로 이루어져 있다
- 콘텐츠(Content): 요소의 실제 내용이 들어가는 공간이다. 텍스트, 이미지, 동영상 등이 포함한다.
- 패딩(Padding): 콘텐츠와 경계(Border) 사이의 간격이다. 패딩은 투명하며 콘텐츠 주위에 추가적인 공간을 제공한다
- 경계(Border): 콘텐츠와 패딩 주위를 둘러싸는 테두리이다. 경계는 다양한 스타일과 색상으로 설정할 수 있다.
- 마진(Margin): 요소의 경계와 다른 요소들 사이의 간격이다. 마진은 투명하며 요소 주위에 추가적인 공간을 제공한다.
+-----------------------------+
| Margin |
| +-----------------------+ |
| | Border | |
| | +-----------------+ | |
| | | Padding | | |
| | | +-----------+ | | |
| | | | Content | | | |
| | | +-----------+ | | |
| | +-----------------+ | |
| +-----------------------+ |
+-----------------------------+전역 속성 값
inherit, initial, unset 키워드는 속성 값을 상속받거나 초기화하여 더욱 유연하고 관리하기 쉬운 스타일을 작성할 수 있다.
- inherit: 부모 요소로부터 속성 값을 상속받음.
- initial: 속성 값을 기본값으로 설정.
- unset: 속성을 상속 가능한 경우 상속받고, 그렇지 않으면 초기값으로 설정.
width & height 속성
width와 height 속성은 요소의 너비와 높이를 지정하는 데 사용된다.
다양한 단위
| 단위 | 키워드 | 설명 |
| 픽셀 | px | 픽셀은 고정된 단위로, 화면에서 정확한 크기를 지정할 때 사용한다. |
| 백분율 | % | 백분율은 부모 요소의 크기에 대한 비율로 크기를 지정한다. 반응형 디자인에서 유용하다. |
| 뷰포트 | vw,vh | 뷰포트 단위는 뷰포트(화면)의 너비와 높이를 기준으로 크기를 지정한다. vw는 뷰포트 너비의 1%, vh는 뷰포트 높이의 1%이다. |
| em | em | 요소의 현재 폰트 크기를 기준으로 크기를 지정한다. |
| rem | rem | 루트 요소(<html>)의 폰트 크기를 기준으로 크기를 지정한다. |
최소 및 최대 크기
요소의 최소 및 최대 크기를 설정하는 데 사용된다. 요소는 최소 값보다 작아질 수 없으며 최대 값보다 커질 수 없다.
.box {
min-width: 100px;
min-height: 100px;
}
.box {
max-width: 500px;
max-height: 300px;
}주의사항
- 상대적 크기: 백분율(%) 단위는 부모 요소의 크기에 종속적이다. 부모 요소의 크기가 변하면 자식 요소의 크기도 변한다.
- 콘텐츠 오버플로우: 요소의 콘텐츠가 지정된 너비와 높이보다 클 경우, 오버플로우가 발생할 수 있다. 이때 overflow 속성을 사용해 스크롤을 추가하거나 숨길 수 있다.
테일윈드 CSS 클래스
| 클래스 | CSS 속성 |
| w(h)-0 | width(height): 0; |
| w(h)-1 | width(height): 0.25rem; |
| w(h)-2 | width(height): 0.5rem; |
| w(h)-4 | width(height): 1rem; |
| w(h)-8 | width(height): 2rem; |
| w(h)-16 | width(height): 4rem; |
| w(h)-1/2 | width(height): 50%; |
| w(h)-1/3 | width(height): 33.333333%; |
| w(h)-2/3 | width(height): 66.666667%; |
| w(h)-1/4 | width(height): 25%; |
| w(h)-full | width(height): 100%; |
| w(h)-screen | width(height): 100vw; |
box-sizing 속성
콘텐츠를 구성하는 HTML 요소가 차지하는 영역을 콘텐츠 영역이라고 할 때, 다음 그림처럼 컨테이너는 자신의 테두리(border)와 패딩(padding)이라고 부르는 콘텐츠 영역 간의 간격으로 구성된다. 이럴 때 컨테이너의 진정한 크기가 무엇인지가 혼란스럽다.
컨테이너의 크기를 테두리 내부 영역이라고 하면 '컨테이너 크기 = 테두리 두께 + 패딩 두께 +콘텐츠 영역 크기'라고 계산할 수 있지만, 전통적으로 CSS에서는 테두리와 패딩을 무시한 콘텐츠 영역의 크기만을 컨테이너 크기로 보아왔다.
Border
+-----------------+
| Padding |
| +-----------+ |
| | Content | |
| +-----------+ |
+-----------------+
이 때문에 CSS 표준은 box-sizing이란 스타일 속성을 제공하여 컨테이너 크기를 결정하게 한다. box-sizing의 설정값은 다음처럼 4가지 가운데 하나이며 기본값은 content-box이다.
box-sizing: content-box | padding-box | border-box | inherit
content-box
요소의 너비와 높이를 콘텐츠 영역만 기준으로 계산한다. 즉, 패딩과 테두리의 크기는 별도로 추가된다.
아래 예제에서 요소의 총너비는 200px(콘텐츠) + 40px(패딩) + 20px(테두리) = 260px이 된다.
.element {
box-sizing: content-box;
width: 200px; /* 콘텐츠의 너비 */
padding: 20px; /* 콘텐츠와 테두리 사이의 공간 */
border: 10px solid black; /* 테두리 두께 */
}border-box
border-box는 요소의 너비와 높이에 패딩과 테두리의 크기를 포함시켜 계산한다. 따라서 요소의 총크기는 변하지 않고, 패딩과 테두리의 크기가 콘텐츠 영역에서 차감된다.
아래 예제에서 요소의 총너비는 200px - 40px(패딩) - 20px(테두리) = 140px이 된다.
.element {
box-sizing: border-box;
width: 200px; /* 패딩과 테두리를 포함한 전체 너비 */
padding: 20px;
border: 10px solid black;
}
대세는 border-box
border-box는 요소의 크기를 계산하기 쉽게 만들어준다. 모든 요소의 크기를 쉽게 예측하고 조정할 수 있기 때문이다. 많은 CSS 프레임워크는 기본적으로 border-box를 사용하여 레이아웃을 더 직관적으로 만든다.
글로벌 설정
모든 요소에 border-box를 적용하려면 다음과 같이 CSS를 설정할 수 있다.
이렇게 설정하면 모든 요소와 가상 요소(::before, ::after)에 box-sizing: border-box가 적용되어, 패딩과 테두리를 포함한 전체 크기를 더 쉽게 관리할 수 있다.
*,
*::before,
*::after {
box-sizing: border-box;
}
콘텐츠 크기 유지
border-box는 패딩과 테두리가 포함된 상태에서도 요소의 크기를 유지할 수 있게 한다.
이 경우 .container의 총너비는 항상 300px로 유지되므로 레이아웃이 예측 가능해진다.
.container {
width: 300px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box;
}반응형 디자인
반응형 웹 디자인에서는 요소의 크기가 화면 크기에 따라 동적으로 조정된다. border-box를 사용하면 요소의 크기를 더 직관적으로 조정할 수 있다.
이 경우 .responsive-box는 부모 요소의 50% 너비를 유지하면서 패딩과 테두리도 포함하여 크기를 조정한다.
.responsive-box {
width: 50%;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
}테일윈드 CSS 클래스
| 클래스 이름 | CSS 속성 |
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
padding 속성
콘텐츠를 컨테이너가 감싸고 있다는 관점에서 볼 때 CSS는 padding-left, right, top, bottom이란 스타일 속성을 제공한다.
padding-방향 형태의 속성들이 같은 값을 가질 때 좀 더 쉽게 패딩값을 설정할 수 있게 해 준다. 예를 들어 padding: 1 rem;은 padding-방향 형태의 속성값을 모두 'M' 글자 1개의 크기 (1 rem)로 설정한다.
컨테이너
+------------------------------+
| padding-top |
| +----------+ |
| padding | | padding |
| left | content | right |
| | | |
| +----------+ |
| padding-bottom |
+------------------------------+테일윈드 CSS 클래스
| 클래스 | 설명 |
| p-{숫자} | 모든 방향에 동일한 패딩을 설정합니다. |
| py-{숫자} | 수직 방향(상하)에 패딩을 설정합니다. |
| px-{숫자} | 수평 방향(좌우)에 패딩을 설정합니다. |
| pt-{숫자} | 상단 패딩을 설정합니다. |
| pr-{숫자} | 오른쪽 패딩을 설정합니다. |
| pb-{숫자} | 하단 패딩을 설정합니다. |
| pl-{숫자} | 왼쪽 패딩을 설정합니다. |
margin 속성
margin 스타일 속성은 HTML 요소와 인접한 요소 간의 간격을 결정하는 스타일 속성이다.
+----+
| |
+----+
margin-top
+----+ +----+ +----+
| | margin | | margin | |
| | left | | right | |
+----+ +----+ +----+
margin-bottom
+----+
| |
+----+테일윈드 CSS 클래스
| 클래스 | 설명 |
| m-{숫자} | 모든 방향에 동일한 마진 설정 |
| mt-{숫자} | 위쪽 마진 설정 |
| mr-{숫자} | 오른쪽 마진 설정 |
| mb-{숫자} | 아래쪽 마진 설정 |
| ml-{숫자} | 왼쪽 마진 설정 |
| mx-{숫자} | 좌우측 마진 설정 |
| my-{숫자} | 상하측 마진 설정 |
| m-auto | 자동 마진 설정 |
background-image 속성
보통 웹 브라우저는 이미지의 비율을 유지하려고 하며, 이미지의 실제 크기에 맞게 <img> 요소의 높이를 자동으로 조정한다. 이로 인해 원래의 이미지 비율을 유지하려는 노력으로 인해 특정 높이로 이미지를 강제로 고정하기가 어려울 수 있다.
이러한 이유로 디자이너들은 종종 CSS의 background-image 속성을 선호한다. background-image 속성은 url 이란 css 함수에 이미지의 url을 매개변수로 사용하는 형태로 사용한다. 그런데 이 형태는 이미지 url 부분을 타입스크립트 코드로 결정하려고 할 때 번거롭다.
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Image Example</title>
<style>
.bg-image {
height: 20rem;
background-image: url('https://picsum.photos/1309/411');
background-size: cover; /* 이미지를 요소에 맞추어 확대 또는 축소 */
background-position: center; /* 이미지를 요소의 가운데로 정렬 */
}
</style>
</head>
<body>
<div class="bg-image">
<!-- 이곳에는 배경 이미지가 설정된 요소의 내용이 들어갈 수 있다. -->
</div>
</body>
</html>
background-size와 background-position 속성을 사용하여 이미지 크기를 조정하고 위치를 조정할 수 있다. 테일윈드는 이에 대응하는 클래스를 제공한다.
| 클래스 | 의미 | 배치 방식 |
| bg-auto | background-size: auto; | 이미지 원본 크기를 유지하며 요소에 맞게 배치 |
| bg-cover | background-size: cover; | 이미지를 확대하여 요소를 완전히 덮도록 배치 이때 한 축(가로 또는 세로)이 요소와 일치하도록 이미지가 조정 |
| bg-contain | background-size: bg-contain; | 이미지를 비율을 유지하면서 축소하여 요소 내에 들어갈 수 있도록 배치 이미지가 빈곳을 매우기 위해 반복될 수 있음 |
border 속성
CSS 상자 모델은 HTML 요소가 차지하는 면적의 테두리를 상하좌우 4방향에서 각기 다르게 설정할 수 있다.
border
+----------+
border | HTML 요소 | border
+----------+
border
border
border 속성은 border-width, border-style, border-color의 단축 속성이다.
.selector {
border-width: 2px;
border-style: dashed;
border-color: red;
}
.selector {
border 2px dashed red
}border-radius
테두리의 모서리를 둥글게 만드는 속성이다. 속성값은 픽셀, 퍼센트, em, rem 등의 단위를 설정할 수 있다.
테일윈드 CSS
| 클래스 | 설명 |
| border | border-width: 1px; |
| border-t | border-top-width: 1px |
| border-r | border-right-width: 1px; |
| border-b | border-bottom-width: 1px; |
| border-l | border-left-width: 1px; |
| border-{ 0 | 2 | 4 | 8 } | 0px, 2px, 4px, 8px |
| border-t-{ 0 | 2 | 4 | 8 } | 위쪽 0px, 2px, 4px, 8px |
| border-r-{ 0 | 2 | 4 | 8 } | 오른쪽 0px, 2px, 4px, 8px |
| border-b-{ 0 | 2 | 4 | 8 } | 아래쪽 0px, 2px, 4px, 8px |
| border-l-{ 0 | 2 | 4 | 8 } | 왼쪽 0px, 2px, 4px, 8px |
| border-solid | border-style: solid; |
| border-dashed | border-style: dashed; |
| border-dotted | border-style: dotted; |
| border-double | border-style: double; |
| border-none | border-style: none; |
| border-transparent | border-color: transparent; |
| border-black | --tw-border-opacity: 1; border-color: rgba(0, 0, 0, var(--tw-border-opacity)); |
| border-white | --tw-border-opacity: 1; border-color: rgba(255, 255, 255, var(--tw-border-opacity)); |
| border-{색상 이름}-{색상 번호} | border-color: 색상값 |
| rounded | border-radius: 0.25rem; |
| rounded-full | border-radius: 9999px |
| rounded-sm | border-radius: 0.125rem; |
| rounded-md | border-radius: 0.375rem; |
| rounded-lg | border-radius: 0.5rem; |
| rounded-xl | border-radius: 0.75rem; |
| rounded-2xl | border-radius: 1rem; |
| rounded-{ t | b }-{ sm | md | lg | xl | 2xl ...} | 윈쪽이나 아래쪽 모서리만 둥글게 |
| rounded-{ tl | tr | bl | br }-{ sm | md | lg | xl | 2xl ...} | 한 쪽 모서리만 둥글게 |
display 속성
display 스타일 속성은 HTML 요소의 배치(layout)를 결정하는 속성이다.
inline
- 수평으로 배치되며 더 이상 수평으로 배치할 수 없을 때 줄을 바꾼 다음 왼쪽에서 오른쪽으로 배치된다.
- width와 height 스타일 속성값을 명시적으로 설정할 수 없다. 즉, 설정할 수는 있지만 반영되지 않는다.
block
- 수직으로 배치된다.
- width와 height 스타일 속성값을 명시적으로 설정할 수 있다.
inline-block
- 수평으로 배치되지만 줄을 바꾸지 않고, 요소의 크기를 width와 height 스타일 속성값으로 설정할 수 있다.
- inline 요소처럼 수평으로 배치되지만, block 요소처럼 크기를 지정할 수 있다.
테일윈드 CSS
| 클래스 이름 | 설명 |
| hidden | display: none; |
| block | display: block; |
| inline-block | display: inline-block |
| inline | display: inline; |
| flex | display: flex; |
visibility 속성
visibility 속성은 요소의 가시성을 제어한다. 이 속성은 요소를 숨기거나 표시하는 데 사용되며, 요소가 레이아웃에 여전히 영향을 미치는지 여부를 결정한다.
visible
화면에 보인다.
hidden
display:none 과는 다르게 화면에 보이지는 않아도 공간을 차지하게 된다.
collapse
주로 테이블 관련 요소에서 사용된다. 요소가 보이지 않고, 레이아웃에서도 공간을 차지하지 않는다.
inherit
부모 요소의 visibility 속성 값을 상속받는다.
테일윈드 CSS
| 클래스 이름 | 설명 |
| visivle | visibility: visible; |
| block | visibility: hidden; |
| collapse | visibility: collapse; |
위치 관련 속성
left, right, top, bottom의 의미
- left: 요소의 왼쪽 모서리를 기준으로 오른쪽 방향으로 거리를 설정한다.
- right: 요소의 오른쪽 모서리를 기준으로 왼쪽 방향으로 거리를 설정한다.
- top: 요소의 위쪽 모서리를 기준으로 아래쪽 방향으로 거리를 설정한다.
- bottom: 요소의 아래쪽 모서리를 기준으로 위쪽 방향으로 거리를 설정한다.
position 속성과의 관계
위치 관련 스타일 속성을 사용하려면, 먼저 position 속성을 설정해야 한다.
- absolute: 요소를 절대 위치로 설정한다. 기준이 되는 요소에 따라 위치가 결정된다.
- relative: 요소를 상대 위치로 설정한다. 원래 위치를 기준으로 이동한다.
- fixed: 요소를 고정 위치로 설정한다. 뷰포트를 기준으로 위치가 고정된다.
- sticky: 스크롤에 따라 요소가 고정 위치로 전환된다.
absolute의 기준
- 기본적으로 최상위 요소인 <html>을 기준으로 한다.
- 요소의 부모 컨테이너 중 position: relative가 설정된 가장 가까운 요소를 기준으로 합니다.
relative의 기준
- 요소의 원래 위치를 기준으로 한다.
- top, right, bottom, left 속성을 사용하여 요소의 위치를 원래 위치에서 상대적으로 이동시킨다.
- 요소는 문서의 기본 레이아웃 흐름에서 차지하는 공간을 유지한다. 즉, 요소가 이동하더라도 주변 요소들의 레이아웃에는 영향을 미치지 않는다.
예시
.relative-element는 원래 위치에서 top: 20px, left: 30px만큼 이동한다. 하지만 .relative-element가 이동하더라도 그 자리에는 여전히 빈 공간이 남아 있게 된다.
.absolute-element는 .relative-container를 기준으로 left: 1rem, top: 1rem 위치에 배치된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Example</title>
<style>
.relative-container {
position: relative;
top: 20px;
left: 30px;
width: 200px;
height: 200px;
border: 1px solid black;
}
.absolute-element {
position: absolute;
left: 1rem;
top: 1rem;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="relative-container">
<div class="absolute-element"></div>
</div>
</body>
</html>
테일윈드 CSS
| 클래스 이름 | 설명 |
| absolute | position: absolute; |
| relative | position: relative; |
z-index
z-index는 요소의 쌓임 순서를 제어한다. 즉, 페이지에서 요소들이 겹칠 때 어떤 요소가 위에 보일지를 결정한다. 이 속성은 position 속성이 relative, absolute, fixed, 또는 sticky로 설정된 요소에만 적용된다.
z-index 기본 개념
- 기본 값: auto (요소는 기본 쌓임 순서에 따른다)
- 숫자 값: 쌓임 순서를 명시적으로 지정한다. 숫자가 클수록 해당 요소가 더 위에 보인다.
- 음수 값: 음수 값을 사용하면 요소가 더 아래에 표시된다.
z-index 동작 원리
- 컨텍스트 생성: z-index는 동일한 쌓임 컨텍스트 내에서만 작동한다. 쌓임 컨텍스트는 요소에 position 속성과 함께 z-index를 설정하면 생성된다.
- 중첩된 컨텍스트: 쌓임 컨텍스트는 중첩될 수 있다. 내부 쌓임 컨텍스트는 부모 컨텍스트와 별도로 독립적으로 동작한다.
- 자동 쌓임 순서: z-index를 명시하지 않은 요소는 기본적으로 형제 요소들 사이에서 HTML 소스 코드 순서에 따른다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-Index Example</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: lightblue;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
background-color: lightcoral;
top: 80px;
left: 80px;
z-index: 2;
}
.box3 {
background-color: lightgreen;
top: 110px;
left: 110px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</body>
</html>테일윈드 CSS
| 클래스 이름 | 설명 |
| z-0 | z-index: 0; |
| z-10 | z-index: 10; |
| z-20 | z-index: 20; |
| z-30 | z-index: 30; |
| z-40 | z-index: 40; |
| z-50 | z-index: 50; |
| z-auto | z-index: auto; |
'CSS' 카테고리의 다른 글
| CSS flex 레이아웃 이해하기 (0) | 2024.06.29 |
|---|---|
| CSS 캐스케이딩 (0) | 2024.06.24 |
| CSS 텍스트 표현 방법 (0) | 2024.06.16 |
| CSS 색상 표현 방법 (0) | 2024.06.16 |
| Tailwind CSS (2) | 2024.06.15 |