본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다.
[무료] CSS 기본부터 활용까지 - 인프런 | 강의
CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. CSS는 디지털 컨텐츠를 생산하는 사람들에게는 붓 질과 같은 것이 아닐까 싶습니다. 이 수업에서는 디지털 붓 질을 하는 법을 알려드립니
www.inflearn.com
Color
색을 나타내는 방법은 크게 3가지가 있다.
- color name
- rgb
- hex
color name은 red, blue, green처럼 색상의 영문 이름을 넣어서 색상을 표현하는 방식이다.
- ex) color:red
rgb방식은 첫번째 값은 빨간색 영역, 두번째 값은 초록색 영역, 세번째색은 파란색 영역으로, 색의 강도는 0~256중에 정해서 넣는다. 0은 가장 약한 값, 256은 가장 쎈 값이다. rgb(256,0,0)일경우 빨간색이 나타나고,rgb(256,256,256)일 경우흰색이, rgb(0,0,0)일 경우 검정색이 나타난다.
- ex) color:rgb(256,0,0) ->red
hex방식은 #rgb방식으로 작성된다. 각 부분에는 16진수로 00에서 ff까지의 숫자가 들어간다. rgb방식을 16진수로 변형해 사용한다 생각해도 괜찮다.
- ex) color:#ff0000 ->red
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>color</title>
<style>
h1{color:red;}
h2{color:rgb(0,0,0);}
h3{color:#FF0000;}
</style>
</head>
<body>
<h1>Hello world</h1>
<h2>Hello world</h2>
<h3>Hello world</h3>
</body>
</html>
색상에 관한 더욱 깊이 있는 내용은 다음을 참고하자
https://www.w3schools.com/css/css_colors.asp
'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 기본부터 활용까지 - Font (0) | 2022.07.29 |
|---|---|
| CSS 기본부터 활용까지 - text : align (0) | 2022.07.29 |
| CSS 기본부터 활용까지 - 크기 : font-size (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 캐스케이딩 실습 (0) | 2022.07.28 |
| CSS 기본부터 활용까지 - 캐스케이딩 소개 (0) | 2022.07.28 |