길이 단위
폰트 크기나 넓이, 높이 등을 지정할 때 여러가지 단위를 사용하여 지정할 수 있습니다.
절대 길이
길이가 어느 장치에서나 동일하게 보이는 고정 길이입니다.
하지만 같은 장치에서도 해상도나 여러 조건에 따라 다르게 보일 수 있으므로, 완전한 절대 길이라고 할 수는 없습니다.
-
px(pixels) : 1px은 화면에서 하나의 점과 같습니다.
웹 개발 시, 여러 환경에서 디자인을 동일하게 표현하며, 브라우저 호환성 보장에서 유리하므로, 디자인 의도가 많이 반영된 웹 사이트에서 사용이 권장됩니다. -
pt(points) : Windows에서는 9pt=12px, Mac에서는 9pt=9px입니다.
표준 인쇄 단위로, 인쇄물이나 워드프로세서에서 주로 사용됩니다. 따라서 웹에서 인쇄용 문서 스타일 정의 시 유용합니다.
상대 길이
특정 대상에 대해 상대적인 길이를 가집니다.
-
%(percentage) : 기본 글꼴 크기에 대해 상대적 값을 가집니다.
요소에 정의된 px을 percentage로 조절할 수 있습니다. -
em(font size of the element) : 선언된 폰트의 '대문자 M' 너비에 대해 상대적 값을 가집니다.
1em은 현재 폰트 크기, 2em은 현재 폰트 크기의 두배(200%)입니다.
em은 소수점 셋째자리까지 사용 가능합니다. -
rem(font size of the root element) : 'root'를 기준으로 em을 적용합니다.
'root'는 최상위 태그로써, 보통<html>태그를 의미합니다. -
vw & vh : 'viewport(브라우저)'의 사이즈를 기준으로 상대적 값을 가집니다.
'vw(viewport width)'는 넓이를 기준으로하여, 1vw는 width의 1% 값을 가집니다.
'vh(viewport height)'는 높이를 기준으로하여, 1vh는 height의 1% 값을 가집니다.
색상 표기
색상을 지정할 때 여러가지 표기 형식을 사용하여 지정할 수 있습니다.
색상명
div{
color: blue;
}가장 간단한 방법으로, 색상명을 명시적으로 작성하여 색상을 지정합니다.
16진수
div{
color: #0000ff;
}16진수 형식으로 색상 표현시, '#'뒤의 6자리에 각각 '16진수 형식(0~9, a~f)'으로 숫자를 기입합니다.
6자리는 다시 2자리씩 끊어서 각각 R(Red), G(Green), B(Blue)의 비율을 지정합니다.
div{
color: #RRGGBB;
}#000000은 검정색, #ffffff은 흰색을 표현합니다.
<div class="black"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="white"></div>div{
width: 300px;
height: 50px;
}
.black { background-color: #000000;}
.red { background-color: #ff0000;}
.green { background-color: #00ff00;}
.blue { background-color: #0000ff;}
.white { background-color: #ffffff;}
축약형
div{
color: #RGB;
}2자리씩 끊었을 때 그 두자리 숫자가 일치하는 경우에는 한번씩만 작성하여, 6자리가 아닌 3자리로 표현할 수 있습니다.
<div class="black"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="white"></div>div{
width: 300px;
height: 50px;
}
.black { background-color: #000;}
.red { background-color: #f00;}
.green { background-color: #0f0;}
.blue { background-color: #00f;}
.white { background-color: #fff;}RGB
div{
color: rgb(0,0,255);
}RGB 표기 형식은 'rgb' 뒤 괄호 안의 세곳에 각각 R, G, B에 해당하는 값을 0~255 사이로 입력합니다.
div{
color: rgb(r,g,b);
}rgb(0,0,0)은 검정색, rgb(255,255,255)는 흰색을 표현합니다.
<div class="black"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="white"></div>div{
width: 300px;
height: 50px;
}
.black { background-color: rgb(0,0,0);}
.red { background-color: rgb(255,0,0);}
.green { background-color: rgb(0,255,0);}
.blue { background-color: rgb(0,0,255);}
.white { background-color: rgb(255,255,255);}RGBA
RGB 형식에 'A(alpha)' 값을 추가한 형식입니다.
alpha 값은 투명도를 지정하며, 0~1 사이의 값을 입력합니다.
0에 가까울수록 투명해지고, 1에 가까울수록 불투명해집니다.
<div class="black"></div>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="white"></div>div{
width: 300px;
height: 50px;
}
.black { background-color: rgba(0,0,0,0.5);}
.red { background-color: rgba(255,0,0,0.5);}
.green { background-color: rgba(0,255,0,0.5);}
.blue { background-color: rgba(0,0,255,0.5);}
.white { background-color: rgba(255,255,255,0.5);}
배경
CSS에서 'background-'로 시작하는 속성으로 배경에 다양하게 활용할 수 있습니다.
background-color
<div></div>div{
width: 1000px;
height: 500px;
background-color: lightgreen;
}
속성값에 색상을 입력하면 해당 색상이 적용됩니다.
background-image
<div></div>div{
width: 1000px;
height: 500px;
background-image: url(https://www.w3schools.com/cssref/img_tree.gif);
}
속성값으로 이미지의 경로를 입력하면 해당 이미지가 표시됩니다.
background-repeat
div{
width: 1000px;
height: 500px;
background-image: url(https://www.w3schools.com/cssref/img_tree.gif);
background-repeat: no-repeat;
}
해당 이미지를 어떻게 반복하여 표시할지 지정합니다.
-
repeat : 기본값, 이미지를 반복하여 표시합니다.
-
no-repeat : 이미지를 한번만 표시합니다.
-
repeat-x : 이미지를 x축으로만 반복하여 표시합니다.
-
repeat-y : 이미지를 y축으로만 반복하여 표시합니다.
background-position
div{
width: 1000px;
height: 500px;
background-image: url(https://www.w3schools.com/cssref/img_tree.gif);
background-repeat: no-repeat;
background-position: center top;
}
이미지를 표시할 위치를 지정합니다.
위치를 명시적으로 지정할 경우 왼쪽에 x축 위치를 지정하는 키워드인, 'left, center, right'를 작성하고, 오른쪽에 y축 위치를 지정하는 키워드인, 'top, center, bottom'을 작성합니다.
'px'이나 '%'를 사용하여 지정할 수도 있는데, 이때 위치의 기준은 '좌측상단'이됩니다.
background-attachment
div{
width: 1000px;
height: 500px;
background-image: url(https://www.w3schools.com/cssref/img_tree.gif);
background-attachment: fixed;
}속성값에 'fixed'를 적용하면 스크롤을 내려도 이미지가 고정되어있습니다.
기본값은 'scroll'이며, 스크롤을 내리면 이미지가 스크롤에따라 움직입니다.
