728x90
1. CSS 변수 (CSS Custom Properties)
CSS 변수는 값이 자주 사용되는 색상, 크기 등을 한 곳에 정의하고, 필요할 때마다 변수로 호출하여 사용하는 방식입니다. 변수는 유지 보수가 쉬워지고, 일관된 디자인을 유지하는 데 도움을 줍니다.
변수 선언과 사용법
CSS 변수는 --로 시작하는 이름으로 정의하며, var() 함수를 사용해 호출합니다.
:root {
--main-color: #3498db;
--font-size-large: 24px;
}- :root: 문서의 최상위 요소로, 전역 변수를 선언할 때 주로 사용합니다.
- var(--변수명): 정의된 변수를 호출할 때 사용합니다.
예제: CSS 변수 사용하기
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size-large: 24px;
}
body {
color: var(--main-color);
font-size: var(--font-size-large);
}
.button {
background-color: var(--secondary-color);
padding: 10px 20px;
color: #fff;
}코드 설명
- --main-color와 --secondary-color로 색상을 정의하여 텍스트와 버튼에 반복적으로 적용했습니다.
- var()로 변수 값을 호출하여 코드의 가독성을 높이고, 수정이 필요할 때 변수만 변경하면 되므로 유지 보수가 쉽습니다.
2. CSS 함수
CSS 함수는 스타일 값을 동적으로 계산하거나 조정할 때 유용합니다. 자주 사용되는 CSS 함수에는 calc(), clamp(), min(), max() 등이 있습니다.
1) calc() 함수
calc() 함수는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 연산을 사용하여 동적으로 값을 계산합니다. 크기나 위치를 상대적으로 설정할 때 유용합니다.
.container {
width: calc(100% - 50px);
padding: calc(10px + 2%);
}2) clamp() 함수
clamp() 함수는 최소값, 유연한 값, 최대값을 지정하여 값을 제한합니다. 반응형 텍스트 크기와 같은 경우에 유용합니다.
.text {
font-size: clamp(16px, 2vw, 24px);
}코드 설명
- clamp(16px, 2vw, 24px): 글자 크기가 뷰포트에 따라 16px에서 24px 사이로 조정되며, 기본적으로 2vw에 비례합니다.
3) min()과 max() 함수
min()과 max() 함수는 여러 값 중에서 가장 작은 값 또는 가장 큰 값을 반환합니다.
.box {
width: min(50%, 300px); /* 화면 크기에 따라 50% 또는 300px 중 더 작은 값을 사용 */
height: max(200px, 10vw); /* 화면 크기에 따라 200px 또는 10vw 중 더 큰 값을 사용 */
}3. 실전 예제: CSS 변수와 함수 활용
CSS 변수와 calc(), clamp(), min() 함수를 활용하여 반응형 카드 레이아웃을 구성하는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS 변수와 함수 예제</title>
<style>
/* CSS 변수 선언 */
:root {
--card-width: clamp(200px, 40%, 400px);
--main-padding: 20px;
--border-radius: 8px;
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size-small: 14px;
--font-size-large: 18px;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* 카드 스타일 */
.card {
width: var(--card-width);
padding: var(--main-padding);
background-color: white;
border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
color: var(--main-color);
}
.card h2 {
font-size: var(--font-size-large);
color: var(--main-color);
margin-bottom: 10px;
}
.card p {
font-size: var(--font-size-small);
color: #555;
}
.card button {
background-color: var(--secondary-color);
color: white;
padding: 10px 20px;
font-size: var(--font-size-small);
border: none;
border-radius: calc(var(--border-radius) / 2);
cursor: pointer;
transition: background-color 0.3s;
}
.card button:hover {
background-color: var(--main-color);
}
</style>
</head>
<body>
<div class="card">
<h2>CSS 변수와 함수 예제</h2>
<p>CSS 변수와 함수를 사용해 반응형 카드 레이아웃을 구성합니다.</p>
<button>더 알아보기</button>
</div>
</body>
</html>코드 설명
- CSS 변수로 카드 레이아웃에 필요한 색상, 크기, 여백, 글꼴 크기를 정의했습니다.
- clamp() 함수로 카드 너비를 뷰포트에 따라 조정하여 반응형으로 만들었습니다.
- calc() 함수로 버튼의 테두리 둥근 정도를 설정하여, 변수의 값을 기반으로 동적인 계산을 했습니다.
4. CSS 변수와 함수의 활용 팁
- 일관성 유지: 색상, 여백, 폰트 크기 등 반복되는 스타일을 변수로 정의하여 스타일의 일관성을 유지합니다.
- 반응형 디자인: clamp(), calc() 함수는 반응형 디자인을 구현할 때 유용하며, 다양한 화면 크기에서 유연한 레이아웃 구성을 돕습니다.
- 유지 보수성 향상: CSS 변수는 한 곳에서 값을 변경하여 여러 곳에서 재사용할 수 있으므로 코드 유지 보수성이 높아집니다.
요약
이번 강의에서는 CSS 변수와 유용한 CSS 함수들을 활용하여 코드의 가독성과 유지 보수성을 높이는 방법을 배웠습니다. CSS 변수는 스타일을 일관되게 관리하는 데 유용하며, calc(), clamp(), min(), max()와 같은 함수는 값 계산과 반응형 레이아웃 구현에 매우 효과적입니다. 다음 강의에서는 CSS 프레임워크를 사용하여 빠르게 반응형 웹 페이지를 만드는 방법을 알아보겠습니다.
728x90
'Study > CSS' 카테고리의 다른 글
| CSS 기초 강의 11편: 고급 CSS 기법과 트릭 활용하기 (0) | 2024.11.26 |
|---|---|
| CSS 기초 강의 10편: CSS 프레임워크를 활용한 빠른 웹 페이지 제작 (0) | 2024.11.25 |
| CSS 기초 강의 8편: 웹 접근성과 시맨틱 태그 활용하기 (0) | 2024.11.23 |
| CSS 기초 강의 7편: CSS 애니메이션과 트랜지션으로 시각 효과 만들기 (0) | 2024.11.22 |
| CSS 기초 강의 6편: 반응형 웹 디자인과 미디어 쿼리 (0) | 2024.11.21 |
