색상과 배경 꾸미기

색상 표현하기

텍스트나 배경 등 우리가 색상을 사용하는 일은 비일비재할 정도로 많다. 웹에서도 마찬가지이다. 오늘은 색상을 표현하는 방법과 배경을 적용하는 방법에 대해서 알아보려고 한다.

• 16진수 표기법

‘#’기호 다음에 알파벳이나 숫자로 색상을 표현하는 것은 16진수 표기법이라고 한다. 6자리는 앞에서부터 두자리씩 묶어 RGB(red, green, blue)를 표현한다. 예를 들어 ‘#ffff00’은 빨강과 초록은 가득 파란색은 전혀 없는 것을 의미한다.

• rgb와 rgba

css에서 색상을 표기하는 방법 중 하나는 rgb와 rgba를 사용하는 것이다.

color: rgb(255,0,0);

이렇게 작성할 경우 빨간색이 나온다. 또한 여기선 10진수를 사용하여 표기한다. 근데 rgba는 무엇일까? a는 불투명도를 나타내는 값이다. 0부터 1까지의 숫자로 사용하고 1은 완전 불투명함을 뜻한다. 0.5 대신 .5로 표시하여도 된다.

• hsl, hsla

hsl은 hue(색), saturation(채도), lightness(밝기)를 나타내는 표시이다. a는 위와 마찬가지로 불투명도를 나타낸다.

hsl(<hue>, <saturation>, <lightness>)

색은 3요소 중 하나로 각도 기준으로 색상을 배치한다. 0과 360도는 빨간색 120도에는 초록색, 240도에는 파란색이 배치되어 그 사이사이에 다른색들이 배치되어 있다. 채도는 %로 표시하고 0%이면 회색톤, 100%이면 무색이다. 밝기도 %로 표시하고 0%가 가장 어둡고 100%가 가장 밝다.

• 이름 표기법

색상을 단순히 이름으로 표기할 수도 있다. 웹 안전색상이라고 부르는 이 색상들은 기본 16가지를 포함, 모두 216가지로 표현할 수 있다.

• 예제

배경 색과 배경 이미지 꾸미기

• background-color : 배경 색 지정

background-color 속성은 배경색을 지정할 때 사용한다. 16진수 ,rgb, 이름 표기법 모두 사용할 수 있다.
주의할 점은 이 속성은 상속되지 않는다.

• background-clip : 배경 적용 범위 조절하기

박스 모델에 따라 적용 범위를 조절할 수 있다. 예를 들어 테두리까지 적용할지, 패딩 범위까지 적용할 지 등을 정하는 속성이다. 속성값으로는 border-box(테두리까지), padding-box(패딩까지), content-box(콘텐츠까지)가 있다.

• background-image : 웹 요소에 배경 이미지 넣기

이 속성은 배경에 이미지를 넣을 때 사용한다. background-image: url(‘파일경로’)을 사용하며 상대 경로 절대 경로 모두 이용 가능하다.

• background-repeat : 배경 이미지 반복 지정.

배경 이미지를 반복시키는 방법을 설정할 수 있다. 속성값에는 repeat(가로 세로 반복), repeat-x(창 너비와 같아질 때까지 가로로 반복), repeat-y (세로 반복), no-repeat(반복하지 않음)

• background-size : 배경 이미지 크기 조절

배경 이미지의 크기를 조절할 수 있다. 속성값으로는 auto, contain(요소 안에 배경 이미지가 다 들어오게 하기), cover(모두 덮도록), 크기 값, 백분율이 있다.

• background-position : 배경 이미지 위치 조절하기

제목이나 본문에 한 쪽에서 이미지를 표시할 경우 사용한다. left,center,right, top, bottom, 백분율, 길이 값 등을 사용할 수 있다.

• background-origin : 배경 이미지 배치 기준

배경 이미지가 어떻게 배칠될 지 기준을 정하는 속성이다. 속성값으로는 border-box, padding-box, content-box가 있다.

• background-attachment : 배경 이미지 고정하기

배경 이미지를 고정시킬 수 있따. 속성에 scroll을 사용하면 스크롤과 함께 배경이미지도 이동, fixed는 고정된다.

그라데이션

종류에는 선형, 원형 그라데이션이 있다. 하지만 웹 브라우저마다 호환성이 다 다르기 때문에 접두사를 붙여줘야 한다는 불편함이 있다.

• 선형 그라데이션

수직, 수평 또는 대각선 방향으로 일정하게 변하게 하는 그라데이션을 말한다.

line-gradient(각도 to 방향, color-stop ...)

방향은 to top, to left, to right, to bottom이 있다.

• 원형 그라데이션

원이나 타원 중심부터 동심원을 그리면서 바깥 방향으로 색상이 바뀐다.

• 위치 지정

그라데이션이 시작하는 중심도 지정할 수 있다. 주의할 점은 브라우저 접두사를 붙이는 구문에는 at 키워드를 생략해야 한다.

• 크기

원의 크기 또한 지정할 수 있다.

closest-side 속성값은 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 모서리와 만난다. 타원일 경우 그라데이션 중심에서 가장 가까운 요소의 수평축이나 수직축과 만난다.
closest-corner는 가장 가까운 코너에 닿도록 한다.
farthest-side는 그라데이션 가장자리가 중심에서 가장 먼 모서리와 만나게 한다.
farthest-corner는 그라데이션 가장자리가 그라데이션 중심에서 제일 먼 코너에 닿도록 한다.

• 색상 중지 점

원형 그라데이션에서도 색상이 바뀌는 부분을 색상 중지점이라고 하며 색상뿐 아니라 색상이 바뀌는 위치도 지정 가능하다.

• 그라데이션 반복

그라데이션은 패턴을 만든 후 요소를 채울 만큼 반복해서 표시할 수 있다. repeating-linear-gradient(선형 그라데이션 반복), repeating-radial-gradient(원형 그라데이션 반복)을 사용한다.