01. css 기본 구성
선택자 { 속성 : 속성값 ; 속성 : 속성값; }
02. css 주석
/* 주석 내용 */
03. css 속성값과 단위
- 문자열 타입 : “inherit"와 같이 css에서 미리 정의된 키워드나 제작자가 정의한 저작자 키워드 등 텍스트로 입력하는 속성 값
- 숫자 타입 : 정수, 실수 값, 퍼센트 값
- 길이 단위 타입 : 길이 단위 타입은 상대 길이 단위 값과 절대 길이 단위 값이 있다.
상대 단위
em : 폰트의 기본 크기 값에 비례한 단위
ex : 폰트의 기본 X 높이에 비례한 단위
ch : “0”의 기본 폭에 비례한 단위
rem : 최상위 요소의 폰트 크기에 비례한 단위
vw : 뷰포트 너비에 비례한 단위
vh : 뷰포트 높이에 비례한 단위
vmin : 뷰포트 최소 너비, 높이에 비례한 단위
vmax : 뷰포트 최대 너비, 높이에 비례한 단위
% : 부모 요소에 비례한 단위
절대 단위
cm : 센터미터 단위
mm : 밀리미터 단위
in : 인치(inch) 단위(1inch = 2.54cm)
px : 픽셀(pixel) 단위 (1px = 1pt / 0.75)
pt : 포인트(point) 단위 (1pt = 1px * 0.75)
pc : 피카(picas) 단위 (1pc = 12pt)
04. css 색상
- 키워드 입력하기
예) red, orange, blue, green, brown, purple, lime, yellow, white, black, pink, skyblue
- transparent : 색상을 투명하게 지정한다.
- HEX 코드 :
16진수를 사용해서 각 색상 요소(rgb)에 00부터 FF까지의 숫자를 입력한다.
포토샵 또는 http://www.colorpicker.com
예) #000000, #000
- RGB 색상 : R(빨간색), G(초록색), B(파란색)의 조합을 0~255 숫자로 입력한다.
예) rgb(255, 255, 255)
※ RGBA 색상 : css3에서는 알파 값(투명도)까지 추가할 수 있다. 알파 값은 0부터 1까지의 숫자로 입력한다.
예) rgba(255, 255, 255, 0.5)
- HSL 색상 :
H(hue, 색상), S(saturation, 채도), L(lightness, 명도)를 사용한다.
H는 0~255까지의 숫자, S와 L은 0~100%로 % 단위를 입력한다.
예) hsl(33, 100%, 50%)
※ HSLA 색상 : css3에서는 알파 값(투명도)까지 추가할 수 있다. 알파 값은 0부터 1까지의 숫자로 입력한다.
예) hsla(33, 100%, 50%, 0.5)
- currentcolor :
currentcolor 키워드는 현재 요소 박스의 color 속성 값을 의미한다.
예를 들어 border-color의 색상을 지정할 때 border-color:currentcolor;로 선언하면
테두리 색상이 글자 색상과 동일하게 적용된다.