6주차 09
배경색과 배경 범위 지정하기
background-color
배경식을 지정하려면 배경을 넣고 싶은 요소의 사트일 규칙을 만들때 background-color 속성을 사용한다.
background-clip
배경을 넣고 싶은 요소마다 속성을 입력하면 되지만 박스 모델 관점에서 배경의 적용 범위를 조절할 수도 있다.
박스 모델의 외곽인 테두리까지 적용할지, 테두리를 빼고 패딩 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있다. |종류|설명| |:---:|-----| |border-box|박스 모델의 가장 외곽인 테두리까지 적용한다. 기본값| |padding-box|박스 모델에서 테두리를 뺀 패딩 점위까지 적용한다.| |content-box|박스 모델에서 내용(콘텐츠) 부분에만 적용한다.|
background-image
웹 요소에 배경 이미지를 넣을 때 가장 기본으로 알아 둘 속성은 background-image이다. url()에 이미지 파일 경로를 넣어서 사용한다.
기본형 backgroud-image: url('이미지 파일 경로')파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있다.
배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채운다.
background-repeat
background-repeat 속성을 사용하면 배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수도 있다.
repeat
브라우저 화면에 가득 찰 때까지 가로와 세로를 반복한다. 기본값
repeat-x
브라우저 화면 너비에 가득 찰 때까지 가로로 반복한다.
repeat-y
브라우저 화면 높이에 가득 찰 때까지 세로로 반복한다.
no-repeat
한 번만 표시하고 반복하지 않는다.
backgroud-position
backgroud-position 속성을 이용하면 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정 할 수 있다.
기본형 background-position: <수평 위치> <수직 위치>;
수평 위치 : left | center | right | <백분율> | <길이 값>
수직 위치 : top | center | bottom | <백분율> | <길이 값>속성값을 2개로 지정한다면 첫 번째 값은 수평 위치의 값이 되고 두 번째 값은 수직 위치의 값이다.
속성값을 하나만 지정한다면 웹 브라우저에서는 지정한 값을 수평 위칫값으로 간주하고, 수직 위칫값은 50%나 center로 간주한다.
키워드
배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성값은 키워드이다. 수평 위치는 left, center, right 중에서 선택할 수 있고 수직 위치는 top, bottom, center 중에서 선택한다.
백분율(%)
위치 속성값을 백분율로 표시한다는 것은 요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다는 것이다. 예를 들어 background-position: 30% 60%; 라면 배경 이미지를 넣을 요소의 왼쪽 모서리부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로 세로가 각각 30%, 60%인 위치를 맞춘다.
크기
배경 이미지의 위치를 길이로 직접 지정할 수도 있다. background-position: 30px 20px; 이라고 지정하면 가로 30픽셀, 세로 20픽셀의 위치에 배경 이미지의 왼쪽 상단 모서리를 맞춘다.
background-origin
박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있다. 배경 이미지를 적용할 범위는 background-origin 속성으로 지정한다. |종류|설명| |:---:|-----| |content-box|박스 모델에서 내용 부분에만 배경 이미지를 표시한다. 기본값| |padding-box|박스 모델에서 패딩까지 배경 이미지를 표시한다.| |border-box|박스 모델에서 테두리까지 배경 이미지를 표시힌다.|
background-attachment
배경 이미지가 있는 웹 문서를 웹 브라우저에서 열고 스크롤 막대를 위아래로 조절하면 문서 전체가 움직이므로 배경 이미지도 함께 이동한다. 하지만 background-attachment 속성을 사용하면 배경 이미지를 고정할 수 있다. |종류|설명| |:---:|-----| |scroll|화면을 스크롤하면 배경 이미지도 스크롤된다. 기본값| |fixed|화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤된다.|
background 속성 하나로 배경 이미지 제어
지금까지 설명한 배경 이미지 관련 속성을 background라는 하나의 속성으로 줄여 사용할 수 있다.
body {
background-image: url(경로)
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: fixed;
}
background: url(경로) no-repeat center bottom fixed;background-size
배경을 채울 요소 크기에 비해 이미지가 너무 작거나 클 경우 background-size 속성을 사용하여 배경 이미지의 크기를 조절할 수 있다. 특히 화면에 배경 이미지를 가득 채워야 할 경우에도 유용하다.
속성값이 하나라면 그 값은 너비로 인식하고 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산한다. |종류|설명| |:---:|-----| |auto|원래 배경 이미지 크기만큼 표시한다.| |contain|요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소 한다.| |cover|배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소한다. |<크기>|이미지의 너비와 높이를 지정한다. 값이 하나만 주어질 경우 너빗값 으로 인식며, 이미지의 너빗값에 맞춘 높잇값도 자동 계산한다. |<백분율>|배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 에 맞도록 배경 이미지를 확대, 축소 한다.|
그라데이션 효과로 배경 꾸미기
선형 그라데이션
선형 그라데이션이란 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. 이것을 만들어 주는 함수는 linear-gradient인데 색상이 어느 방향으로 바뀌는지 그리고 어떤 색상으로 바뀌는지 알려 주어야 한다. 선형 그라데이션의 기본형은 다음과 같이 지정한다.
기본형 linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상중지점>,
...]);방향
그라데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다. to 다은에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. 이때 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다.
예를 들어 색상이 왼쪽에서 오른쪽으로 변하는 그라데이션이라면 to right로 사용한다. 그리고 왼쪽 아래에서 오른쪽 위로 변하는 그라데이션이라면 to right top 또는 to top right로 사용한다.
각도
각도는 선형 그라데이션에서 색상이 바뀌는 방향을 알려 주는 방법이다. 이때 각도는 그라데이션이 끝나는 부분이고 값은 deg로 표기한다.
css에서 각도는 맨 윗부분이 0deg이고, 시계 방향으로 회전하면서 90deg, 180deg가 된다.
색상 중지점
2가지 색 이상의 선형 그라데이션을 만들려면 색상이 바뀌는 부분을 지정해 주어야 한다. 그라데이션에서 바뀌는 색을 색상 중지점 이라고 한다. 색상 중지점을 지정할 때 쉼표(,)로 색상을 구분하는데, 색상만 지정할 수도 있고 색상과 함께 중지점의 위치도 함께 지정할 수 있다.
원형 그라데이션
선형 그라데이션이 직선 형태로 색상이 바뀌는 거라면, 원형 그라데이션은 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다. 따라서 원형 그라데이션은 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라에디션의 모양은 선택한다.
기본형 radial-gradient(<모양> <크기> at <위치>, <색상 중지점>)모양
원형 그라데이션에서 만들어지는 모양은 원형(circle)과 타원형(ellipse)이다. 모양을 따로 지정하지 않으면 타원형으로 인식힌다.
크기
원형 그라데이션을 지정할 때 원의 크기도 정할 수 있다. 원의 모양과 크기를 나타내는 키워드값을 함께 쓰면 된다.
위치
at 키워드와 함께 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다.
색상 중지점
선형 그라데이션처럼 원형 그라데이션에서도 색상이 바뀌는 부분을 색상 중지점이라고 한다. 그라데이션의 색상과 어느 부분에서 색상을 바꿀지 위치도 함께 지정할 수 있다.
Last updated