TIL 09___CSS basic 5(배경 꾸미기)

Young A·2021년 11월 7일

CSS TIL web

css

목록 보기

5/6

웹 문서의 전체 배경뿐만 아니라 텍스트, 목록 등 특정한 요소에 배경을 지정하는 방법 등에 대해 알아본다.

1. 배경색을 지정하는 background-color 속성

색상을 세밀히 조절하고 싶다면 16진수값을, 투명도도 함께 조절하고 싶다면 rgba표기법을 사용 또는 색상 이름을 사용해 지정한다.

👉 글꼴이나 글자 크기 등은 `<body>`태그 선택자에서 지정하면 문서 전체에 상속된다. 하지만 예외로 backgroung-color값은 상속되지 않는다. 기본적으로 모든 웹 문서 요소의 배경은 투명하므로 body 스타일로 지정한 문서 배경이 그대로 비치는 것일뿐 웹 요소에 배경색이 상속된 것은 아니다.

2. 배경색의 적용 범위를 조절하는 background-clip 속성

배경을 넣고 싶은 요소마다 속성을 입력하면 되지만 박스 모델 관점에서 배경의 적용 범위를 조절할 수도 있다. 즉, 박스 모델의 border, padding, content 부분에만 적용할지 선택할 수 있다.

🔹 background-clip의 속성값

border-box 기본값이며, 박스 모델의 가장 외곽인 테두리까지 적용한다.
padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다.
content-box 박스 모델에서 콘텐츠 부분에만 적용한다.

3. 웹 요소에 배경 이미지를 넣는 background-image 속성

background-image: url('이미지 파일 경로')

🔹 배경 이미지의 반복 방법을 지정하는
background-repeat 속성값

repeat 기본값,브라우저 화면에 가득 찰 때까지 가로와 세로로 반복한다.
repeat-x 브라우저 화면 너비에 가득 찰 때까지 가로로 반복한다.
repeat-y 브라우저 화면 높이에 가득 찰 때까지 세로로 반복한다.
no-repeat 한 번만 표시하고 반복하지 않는다.

🔹 배경 이미지의 위치(수평, 수직)를 조절하는
background-position 속성값

background-position: <수평 위치> <수직 위치>;

🔹 배경 이미지의 적용 범위를 조절하는
background-origin 속성값

content-box 기본값이며, 박스 모델에서 내용 부분에만 배경 이미지를 표시한다.
padding-box 박스 모델에서 패딩까지 배경 이미지를 표시한다.
border-box 박스 모델에서 테두리까지 배경 이미지를 표시한다.

🔹 배경 이미지를 고정하는
background-attachment 속성값

scroll 기본값이며, 화면을 스크롤하면 배경 이미지도 스크롤된다.
fixed 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤된다.

🔹 배경 이미지 크기를 조절하는
background-size 속성값

auto 기본값이며, 원래 배경 이미지 크기만큼 표시한다.
contain 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소한다.
cover 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소한다.
<크기> 이미지의 너비와 높이를 지정한다. 값이 하나만 주어질 경우 자동 계산한다.
<백분율> 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대, 축소한다.

4. 선형 그라데이션 관련 속성

선형 그라데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. 이것을 만들어 주는 함수는 linear-gradient이며 색상이 어느 방향으로 바뀌는지 , 어떤 색상으로 바뀌는지 지정해야 한다.

linear-gradient(to <방향> 또는 <각도>,<색상 중지점>, [<색상 중지점>, ....]);

방향

끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. 사용할 수 있는 예약어는 left와 right, top과 bottom이 있다.

각도

그라데이션이 끝나는 각도를 지정한다. 값은 deg로 표기한다.

색상 중지점

쉼표(,)로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정한다.

5. 원형 그라데이션 관련 속성

원형 그라데이션은 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다. 따라서 원형 그라데이션은 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라데이션의 모양을 선택한다.

radial-gradient(<모양> <크기> at <위치>,<색상 중지점>, [<색상 중지점>, ....]);

모양

ellipse 기본값이며, 타원형의 그라데이션을 나타낸다.
circle 원형의 그라데이션을 나타낸다.

크기

closest-side 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 측면에 닿게 한다.
closest-corner 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 꼭지점에 닿게 한다.
farthest-side 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 측면에 닿게 한다.
farthest-corner 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿게 한다.