week 6
6주차
09 이미지와 그러데이션 효과로 배경 꾸미기
09-1 배경색과 배경 범위 지정하기
배경색을 지정하는 background-color 속성
background-color 값은 상속되지 않음. 기본적으로 모든 웹 문서 요소의 배경은 투명하므로 body 스타일로 지정한 문서 배경이 그대로 비치는 것일 뿐 웹 요소에 배경색이 상속된 것은 아님
배경색의 적용 범위를 조절하는 background-clip 속성
background-clip의 속성값
border-box : 박스 모델의 가장 외곽인 테두리까지 적용. 기본값.
padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 적용.
content-box : 박스 모델에서 내용(콘텐츠) 부분에만 적용.
09-2 배경 이미지 지정하기
웹 요소에 배경 이미지를 넣는 background-image 속성
기본형 background-image: url('이미지 파일 경로')
이미지 파일은 *.jpg, *.gif, *.png 형식을 사용, 파일 경로에는 작은따옴표('')나 큰따옴표("") 붙임
웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있음
요소보다 이미지 크기가 작으면 이미지가 가로 세로 반복되며 배경을 가득 채움
배경 이미지의 반복 방법을 지정하는 background-repeat 속성
background-repeat의 속성값
repeat : 브라우저 화면에 가득 찰 때까지 가로 세로 반복. 기본값.
repeat-x : 브라우저 화면 너비에 가득 찰 때까지 가로 반복
repeat-y : 브라우저 화면 높이에 가득 찰 때까지 세로 반복
no-repeat : 한 번만 표시
배경 이미지의 위치를 조절하는 background-position 속성
기본값 background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이 값> 수직 위치: top | center | bottom | <백분율> | <길이 값>
속성값을 하나만 지정한다면 수평 위칫값으로 간주하고, 수직 위칫값은 50%나 center로 간주
키워드
가장 많이 사용하는 속성값 : 키워드
수평 위치는 left, center, right / 수직 위치는 top, bottom, center 중에서
모두 가운데로 지정한다면 줄여서 background-position : center;
백분율(%)
요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다는 뜻
ex) background-position: 30% 60%; : 왼쪽 모서리로부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로 세로가 각각 30%, 60%인 위치를 맞춤
크기
길이로 직접 지정.
ex) background-position: 30px 20px; : 가로 30픽셀, 세로 20픽셀 위치에 배경 이미지의 왼쪽 상단 모서리를 맞춤
배경 이미지의 적용 범위를 조절하는 background-origin 속성
background-origin의 속성값
content-box : 박스 모델에서 내용(콘텐츠) 부분에만 적용. 기본값.
border-box : 박스 모델의 가장 외곽인 테두리까지 적용.
padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 적용.
배경 이미지를 고정하는 background-attachment 속성
background-attachment의 속성값
scroll : 화면을 스크롤하면 배경 이미지도 스크롤. 기본값.
fixed : 화면을 스크롤하면 이미지는 고정되고 내용만 스크롤.
background 속성 하나로 배경 이미지 제어하기
하나의 속성으로 줄여 사용하기
body {
background-image: url('images/bg4.png');
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: fixed;
}
background: url('images/bg4.png') no-repeat center bottom fixed;속성값이 다르므로 입력 순서는 상관 없음!
배경 이미지 크기를 조절하는 background-size 속성
background-size의 속성값
auto : 원래 배경 이미지 크기만큼 표시. 기본값.
contain : 요소 안에 배경 이미지가 다 들어오도록 이미지 확대/축소
cover : 배경 이미지로 요소를 모두 덮도록 이미지 확대/축소
<크기> : 이미지의 너비와 높이 지정. 값이 하나만 주어지면 너비로 인식되며 높잇값 자동 계산
<백분율> : 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대/축소
09-3 그러데이션 효과로 배경 꾸미기
선형 그러데이션
기본형 linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ...]);
방향 끝 지점을 기준으로 to 예약어와 함께 사용 to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용
수평 방향 : left, right
수직 방향 : top, bottom ex) 색상이 왼쪽에서 오른쪽으로 변하는 그러데이션 :
to right왼쪽 아래에서 오른쪽 위로 변하는 그러데이션 :to right toporto top right선형 그러데이션의 위치나 각도 옵션을 생략하면to bottom으로 인식
각도
선형 그러데이션에서 색상이 바뀌는 방향을 알려주는 방법.
이때 각도는 그러데이션이 끝나는 부분이고 값은 deg로 표기
CSS에서 각도는 맨 윗부분이 0deg이고, 시계 방향으로 회전하면서 90deg, 180deg, 270deg ...
ex) 왼쪽 아래에서 오른쪽 위 방향 지정할 때 : 그러데이션이 끝나는 부분의 각도는 오른쪽 위 방향 부분이므로 45deg 정도의 값
색상 중지점 2가지 색 이상의 선형 그러데이션에서 색상이 바뀌는 부분 : 색상 중지점(color-stop) 색상 중지점을 지정할 때 쉼표(,)로 색상을 구분하는데 색상만 지정할 수도 있고 중지점의 위치도 함께 지정할 수 있음
원형 그러데이션
기본형 radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ....])
모양 원형(circle) / 타원형(eclipse) : 기본값 인식
크기 원형 그러데이션의 크기 속성값
closest-side : 그러데이션 가장자리가 중심에서 가장 가까운 요소의 측면에 닿을 때까지 그림
closest-corner : 그러데이션 가장자리가 중심에서 가장 가까운 요소의 **코너(꼭짓점)**에 닿을 때까지 그림
farthest-side : 그러데이션 가장자리가 중심에서 가장 먼 요소의 측면에 닿을 때까지 그림
farthest-corner : 그러데이션 가장자리가 중심에서 가장 먼 요소의 코너에 닿을 때까지 그림
위치
at 키워드와 함께 지정하면 그러데이션이 시작하는 원의 중심을 다르게 나타낼 수 있음
사용할 수 있는 위치 속성값은 키워드(left/center/right, top/center/bottom) 또는 백분율
속성값을 생략하면 가로 세로 모두 중앙인 center로 인식
색상 중지점 ex)
.grad1 {
background: skyblue; /* CSS3를 지원하지 않는 웹 브라우저용 */
background: radial-gradient(yellow, white, orange); /* 색상 중지점 지정 */
}
.grad2 {
background: skyblue;
background: radial-gradient(yellow, white 10%, orange 60%); /* 색상 중지점의 위치까지 지정 */
}그러데이션을 사용한 패턴 만들기
선형 그러데이션을 반복할 때는 repeating-linear-gradient를 사용하고, 원형 그러데이션을 반복할 때는 repeating-radial-gradient를 사용
그러데이션을 반복해서 패턴을 만들 때는 각 색상 중지점의 위치를 적절하게 조절해야 함. 시작 색상과 끝 색상을 명확히 구분해 줘야 중간에 섞이지 않음.
Last updated