6.1 사용자 정의 속성 (CSS Variables)
약 6분
본문 듣기
읽기 설정
글자 크기
줄 간격
글꼴
6.1 사용자 정의 속성 (CSS Variables)
CSS 사용자 정의 속성(변수)은 웹 디자인에서 더욱 효율적으로 스타일을 정의하고 변경할 수 있도록 도와주는 강력한 도구입니다. 특정 값을 변수로 정의해두고, 이를 여러 곳에서 재사용할 수 있습니다. 이렇게 하면 코드의 일관성을 유지하고, 나중에 변경이 필요할 때도 간편하게 수정할 수 있습니다.
예를 들어, 만약 사이트의 주 색상이나 폰트 크기 같은 여러 스타일을 사용할 경우, 각각의 속성에 반복적으로 같은 값을 사용할 필요 없이 변수로 정의함으로써 코드를 더 깔끔하게 만들 수 있습니다.
예제
아래의 HTML과 CSS 코드를 사용하여 사용자 정의 속성을 사용하는 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 변수 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>비상장 주식의 최근 동향</h1>
<p>오늘은 <span class="highlight">CSS 변수</span>의 장점에 대해 알아보겠습니다.</p>
<button>자세히 알아보기</button>
</div>
</body>
</html>
:root {
--main-color: #4CAF50; /* 주 색상 */
--font-size: 16px; /* 기본 폰트 크기 */
}
body {
font-size: var(--font-size); /* 변수 사용 */
background-color: #f4f4f4;
}
.container {
margin: 20px;
padding: 20px;
background-color: white;
border: 1px solid var(--main-color); /* 변수 사용 */
border-radius: 5px;
}
.highlight {
color: var(--main-color); /* 변수 사용 */
}
button {
background-color: var(--main-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
opacity: 0.8; /* 색상 변화 시 투명도 감소 */
}
실습
이제 자신만의 웹페이지를 만들어 보겠습니다. 아래의 요구 사항을 따라 해보세요.
- 웹페이지의 제목과 설명을 수정하여 개인적인 내용을 추가하세요.
- 사용자 정의 속성을 이용해 사이트의 주 색상과 폰트 크기를 정의하세요.
- 버튼의 텍스트도 변경해 보세요.
예상 결과
웹페이지를 열었을 때, 지정한 주 색상으로 테두리와 텍스트가 표시되며, 버튼을 클릭 시 구분된 스타일이 적용된 것이 보여야 합니다.
자주 발생하는 오류와 해결 방법
- 오류: 변수 이름이 잘못되었습니다.
- 해결 방법: 변수는 항상
--로 시작해야 하며, 올바른 이름을 사용했는지 확인합니다.
- 해결 방법: 변수는 항상
- 오류: 변수가 적용되지 않음.
- 해결 방법:
var(--변수이름)을 사용하였는지 다시 확인해 보세요.
- 해결 방법:
실습 후, 수정한 내용을 친구들과 공유하며 피드백을 받아보는 것도 좋습니다!
정리
이 장에서는 CSS 사용자 정의 속성에 대해 학습했습니다. CSS 변수를 사용하여 코드의 가독성을 높이고 일관성을 유지할 수 있는 방법을 알게 되었습니다. 이러한 변수를 적절히 활용한다면, 더 쉽고 효율적인 웹 개발이 가능하다는 점을 기억해 두세요.
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨보세요.