1. Color
- CSS에서는 색상이 매우 중요한 요소이다. IDE자체에서 제공하는 색상도 많지만 제한적이라는게 사실이다. 그렇다면 어떻게 다양한 색상을 구현할 수 있을까? CSS에서 색상을 표현하는 방법은 3가지가 있다.
1) 16진수 표현법 - 색상을 16진수로 표현
2) RGB 표현법 - 색상을 R(red), G(green), B(blue)의 비율로 표현
3) RGBa 표현법 - 색상을 R(red), G(green), B(blue)의 비율과 alpha(투명도)를 표현
2. CSS Custom Properties - variable(변수)
- CSS에서도 변수를 사용할 수 있다. 어떻게 사용하고 왜 사용하는지 알아보자.
- 예를 들어, 토마토 색상을 메인으로 하는 웹사이트를 제작한다고 해보자. 그렇다면 토마토 색상이 쓰인 엘리먼트가 수십개에서 수백개가 존재할 것이다. 홈페이지를 개편하면서 메인 색상을 파란색으로 변경한다면 기존의 토마토 색상이 적용되어 있는 엘리먼트를 찾아 일일히 바꿔야하는 수고가 필요하다. CSS 변수를 사용하면 이를 한방에 해결할 수 있다.
<style>
body {
height: 1000vh;
margin: 50px;
}
div {
height: 150px;
width: 150px;
border: 1px solid black;
background-color: tomato;
}
p {
background-color: tomato;
}
article {
background-color: tomato;
}
</style>
</head>
<body>
<div></div>
<p>안녕하세요. 이 웹사이트의 메인색상은 토마토 색상입니다.</p>
<article>이 자리는 article 태그입니다.</article>
</body>
</html>
- 위와 같은 코드가 있을 때, 엘리먼트의 색상을 바꾸려면 div, p, article태그에 적용된 배경색을 하나씩 바꿔야 한다. 하지만, CSS변수를 사용한다면 쉽게 색상을 변경할 수 있다.
<style>
:root {
--main-color: #489ee4;
}
body {
height: 1000vh;
margin: 50px;
}
div {
height: 150px;
width: 150px;
border: 1px solid black;
background-color: var(--main-color);
}
p {
background-color: var(--main-color);
}
article {
background-color: var(--main-color);
}
</style>
</head>
<body>
<div></div>
<p>안녕하세요. 이 웹사이트의 메인색상은 토마토 색상입니다.</p>
<article>이 자리는 article 태그입니다.</article>
</body>
</html>
- 위와 같은 코드의 구조를 갖는다면, 각 엘리먼트의 배경색을 하나씩 바꾸지 않고 :root에 만들어 놓은 --main-color라는 변수의 색상만 변경한다면 쉽게 색상을 바꿀 수 있다는 뜻이다.
- 예시에서 사용한 배경색 속성 이외에도 적용가능한 모든 css 속성을 변수로 저장하여 사용할 수 있다.
* 중요)
- 변수를 만들 때에는 반드시 아래 사진에서 보이는 규칙을 따라야 한다.
- 변수명 앞에는 반드시 --(작대기 두개)를 붙여야 한다.
- 선언한 변수를 사용할 때는 var(변수명) 형식의 속성값으로 명시한다.
'Front-end > HTML + CSS' 카테고리의 다른 글
| HTML/CSS - Animation (2) | 2020.08.30 |
|---|---|
| HTML/CSS - Transition & Transformation (0) | 2020.08.30 |
| HTML/CSS - State & 속성 선택자(selector) (0) | 2020.08.26 |
| HTML/CSS - Pseudo selectors(선택자) (0) | 2020.08.25 |
| HTML/CSS - Position (relative&absolute) (0) | 2020.08.24 |
댓글