CSS (Cascading Style Sheets)#
CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 스타일 시트 언어.
HTML이 웹 페이지의 구조와 내용을 담당한다면, CSS는 그 내용의 시각적 표현을 담당한다.
콘텐츠와 디자인을 분리하여 웹 개발의 효율성을 높인다.
주요 기능#
- 색상, 폰트, 크기, 레이아웃, 애니메이션 등 다양한 스타일 속성 제어
- 반응형 웹 디자인을 위한 미디어 쿼리 지원
- 선택자를 통한 세밀한 요소 선택 및 스타일 적용
- 일관된 디자인 유지 및 변경 용이
- 코드의 재사용성 향상
- 페이지 로딩 시간 단축
주의사항#
- 브라우저 호환성 고려 필요
- 복잡한 선택자 사용 시 성능 저하 가능성
CSS 작성 방법#
CSS를 HTML 문서에 적용하는 방법에는 세 가지가 있다:
인라인 스타일:
1
| <p style="color: blue; font-size: 16px;">이것은 파란색 텍스트입니다.</p>
|
내부 스타일 시트:
1
2
3
4
5
6
7
8
| <head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
|
외부 스타일 시트:
1
2
3
| <head>
<link rel="stylesheet" href="styles.css">
</head>
|
- 선택자(Selector)와 선언부(Declaration)로 구성된다.
- 선택자는 스타일을 적용할 HTML 요소를 지정한다.
- 선언부는 속성(Property)과 값(Value)으로 이루어져 있다.
CSS 선택자#
CSS 선택자는 스타일을 적용할 HTML 요소를 지정하는 방법:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| /* 요소 선택자 */
p {
color: blue;
}
/* 클래스 선택자 */
.highlight {
background-color: yellow;
}
/* ID 선택자 */
#header {
font-size: 24px;
}
/* 자식 선택자 */
div > p {
margin-left: 20px;
}
/* 후손 선택자 */
div p {
line-height: 1.5;
}
/* 가상 클래스 선택자 */
a:hover {
text-decoration: underline;
}
|
CSS 박스 모델#
모든 HTML 요소는 박스 모델을 따른다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .box {
/* 내용 */
width: 200px;
height: 100px;
/* 안쪽 여백 */
padding: 20px;
/* 테두리 */
border: 1px solid black;
/* 바깥쪽 여백 */
margin: 10px;
}
|
CSS 레이아웃#
Flexbox 레이아웃:
1
2
3
4
5
6
7
8
9
10
| .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
margin: 10px;
}
|
Grid 레이아웃:
1
2
3
4
5
6
7
8
9
10
| .grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
}
|
반응형 디자인#
미디어 쿼리를 사용한 반응형 디자인:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| /* 기본 스타일 */
.container {
width: 100%;
max-width: 1200px;
}
/* 태블릿 크기 */
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
}
/* 모바일 크기 */
@media (max-width: 480px) {
.container {
padding: 0 10px;
}
}
|
CSS 변수(커스텀 프로퍼티)#
1
2
3
4
5
6
7
8
9
10
| :root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--padding-large: 20px;
}
.button {
background-color: var(--primary-color);
padding: var(--padding-large);
}
|
CSS 애니메이션과 트랜지션#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| /* 트랜지션 */
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: darkblue;
}
/* 애니메이션 */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.animated-element {
animation: slide-in 1s ease-out;
}
|
CSS의 주요 개념들#
캐스케이딩(Cascading)
스타일이 적용되는 우선순위를 결정하는 규칙:
- !important
- 인라인 스타일
- ID 선택자
- 클래스 선택자
- 요소 선택자
특정성(Specificity)
선택자의 우선순위를 결정하는 값:
- 인라인 스타일: 1000점
- ID 선택자: 100점
- 클래스/속성/가상 클래스: 10점
- 요소/가상 요소: 1점
상속
부모 요소의 스타일이 자식 요소에게 상속되는 특성:
1
2
3
4
| body {
font-family: Arial, sans-serif; /* 모든 자식 요소에 상속됨 */
color: #333; /* 모든 자식 요소에 상속됨 */
}
|
CSS 방법론들#
BEM (Block Element Modifier)
1
2
3
| .block {}
.block__element {}
.block--modifier {}
|
OOCSS (Object-Oriented CSS)
1
2
3
4
5
6
7
8
9
10
| /* 구조와 스킨 분리 */
.button {
padding: 10px;
border-radius: 5px;
}
.button-primary {
background-color: blue;
color: white;
}
|
CSS 최적화 기법#
성능 최적화
유지보수성 향상
최신 CSS 기능들#
CSS Grid
복잡한 레이아웃 구성에 사용:
1
2
3
4
5
| .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
|
CSS Custom Properties
동적인 스타일링에 활용:
1
2
3
4
5
6
7
8
9
| :root {
--theme-color: blue;
}
@media (prefers-color-scheme: dark) {
:root {
--theme-color: lightblue;
}
}
|
참고 및 출처#