CSS3 02

2017. 2. 21. 00:35Work/CSS

728x90
반응형

CSS3 Reference 참고

W3Schools(http://w3schools.com/)


CSS3 단위

- 크기 단위

-- % : 백분율 단위

p:nth-child(1){font-size : 120%;}

-- em : 배수 단위

p:nth-child(2){font-size : 1.0em;}

-- px : 픽셀

p:nth-child(3){font-size : 10px;}

-> 각각 단위별 사이즈를 조절 가능, 


- 색상 단위

-- #000000 : HEX 코드 단위, 파일 용량을 미세하게 줄일 수 있다.

-- rgb(red, green, blue) : RGB 색상 단위

p:nth-child(1){color:rgb(159, 61, 184)}

-- rgba(red, green, blue, alpha) : RGBA 색상 단위

p:nth-child(2){color:rgba(122, 220, 224, 0.48)}

-- hsl(hue, saturation, lightness) : HSL 색상 단위

p:nth-child(3){color:hsl(113, 94%, 44%)}

-- hsla(hue, saturation, lightness, alpha) : HSLA 색상 단위

p:nth-child(4){color:hsla(302, 100%, 58%, 0.47)}

-> color : #000000 오른쪽 클릭후 빠른 편집(ctrl+e)에 가면 바로 적용할 수 있다.


- URL 단위

body{background-image: url(weare.jpg);} -> 현재 폴더

body{background-image: url(otherfolder/weare.jpg);} -> 다른 폴더

body{background-image: url(/weare.jpg);} -> root 폴더

-> CSS3에서 이미지 파일이나 폰트 파일을 불러올 때 사용



728x90
반응형

'Work > CSS' 카테고리의 다른 글

CSS3 06  (0) 2017.02.23
CSS3 05  (0) 2017.02.23
CSS3 04  (0) 2017.02.22
CSS3 03  (0) 2017.02.22
CSS3 01  (0) 2017.02.18