자주 사용하는 CSS 속성값

CSS에서 자주 사용하는 속성값을 정리한 내용이다.

색상(Color)

css에서 색을 표현하는 방법에는 색상 이름으로 표현, RGB 색상값으로 표현, 16진수 색상값으로 표현 3가지 방법이 있다.

색상 이름으로 표현

표준 색상 명을 입력하여 표현한다.

{
  color:black;
}

RGB 색상값으로 표현

RGB의 범위인 0~255까지의 숫자로 조합된 색 표현 방식이다.

{
  color:rgb(0,0,255);
}

16진수 색상값으로 표현

16진수로 표현된 색 표현 방식이다.

{
  color:#0000FF
}

배경(background)

css background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한번에 지정할 수 있다.

background-color

background-color는 해당 요소의 배경색을 설정한다.

background-image

background-imag는 해당 요소의 배경으로 나타낼 이미지를 설정한다.

background-size

background-size는 해당 요소의 배경 이미지의 크기를 설정한다.

속성값으로는 contain, cover, auto, 길이값 직접 입력, 퍼센트 입력이 존재한다.

텍스트 정렬

text-align

text-align은 블록 요소나 표의 칸 상자의 가로 정렬을 설정한다.

속성값으로는 start, end, left, right, center, justify 등이 존재한다.

글꼴(font)

css font 속성에는 여러개가 있지만 여기에서는 font-family, font-weight, font-size 3가지만 소개한다.

font-family

font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해준다.

font-family는 하나의 글꼴만을 설정할 수 도 있고 여러 개의 글꼴을 같이 설정할 수 도 있다.

font-family 사용시 글꼴의 이름이 한 단어 이상이면 반드시 따옴표를 사용하여 둘러 쌓아야 하며 여러개의 글꼴을 나열 할 때에는 쉼표로 구분 짓는다.

font-weight

font-weight 속성은 텍스트의 굵기를 설정한다.

font-size

font-size 속성은 텍스트의 크기를 설정한다.

크기를 지정하는 방식에는 2가지 방식이 있는데 바로 절대적 크기와 상대적 크기이다.

절대적 크기

절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용 한다.
즉 모든 웹 브라우저에서 같은 크기로 표현된다.

단위에는 px, pt 등이 있다.

px(픽셀) : 스크린의 픽셀을 기준으로 하는 절대적인 크기이다.
pt(포인트) : 포인트 크기를 의미하는 절대적인 크기이다.

상대적 크기

상대적 크기는 텍스트의 크기도 같이 변하는 방식이다.

단위에는 %, em, rem, vw, vh 등이 있다.

% : 백분율 단위로 기본 크기를 100%로 설정하고 그에 대한 상대적인 크기를 설정한다.
em : 해당 글꼴의 기본 크기를 1em으로 설정하고 그에 대한 상대적인 크기를 설정한다.
rem : html의 폰트 사이즈를 1rem으로 설정하고 그에 대한 상대적인 크기를 설정한다.
vw(Viewport Width) : 브라우저 너비값의 100분의 1이다. 즉 1vw는 viewport의 넓이의 1%와 같다.
vh(Viewport Height) : 브라우저 높이값의 100분의 1이다. 즉 1vh는 viewport의 높이의 1%와 같다.

반응형 웹사이트들이 많아 지면서 절대 단위보다는 상대 단위를 많이 쓰는 추세이다.