CSS 단위, 색상, 선언방법

티스토리 뷰

Coding/CSS

jeongah story 2018. 12. 5. 10:05

부모나 기타 요소들에 영향을 받지 않고 항상 일정한 크기를 유지하는 단위이다.

색상값을 표현하는 여러가지 색상 모델을 지원한다.

#RRGGBB : 빨강, 초록, 파랑의 강도를 16진수 두 자리로 지정한다. 각 요소별로 256단계를 표현할 수 있으며 총 1600만 가지 색을 사용할 수 있다.
#RGB : 빨강, 초록, 파랑의 16진수 한자리로 지정한다. 색상 요소별로 16단계밖에 강도를 지정할 수 없어 잘 사용되지 않는다.
rgb(r, g, b) : 빨강, 초록, 파랑의 강도를 0~255 번위의 정수로 지정한다.
rgba(r, g, b, a) : rgb값 외에 투명도를 지정하는 알파를 0~1 사이의 실수로 지정한다. 0은 투명한 색이며 1은 불투명, 0.5는 반투명이다.
hsl(h, s, l) : 색상, 채도, 명도로 색상을 지정한다. 채도는 0~365 사이의 각도이고 명도, 채도는 백분율이다.
hsla(h, s, l, a) : hsl값 외에 투명도를 지정하는 알파를 0~1 사이의 실수로 지정한다. 0은 투명한 색이며 1은 불투명, 0.5는 반투명이다.
색상 이름 : red, green, blue 등 미리 정의된 색상 이름을 사용한다.

HTML문서에 CSS를 사용하는 방법은 3가지가 있습니다.

외부선언 (external css) : css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.
내부선언 (internal css) : HTML문서내에서 HTML 문서 안의 <head>과 </head> 안에 CSS 코드를 넣는 방법입니다.
엘리먼트에 직접 선언 (inline css) : 위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다.

Image 출처 : https://cdn.dribbble.com/users/103909/screenshots/3047179/onplane-05.png