6주차 - 이미지와 그라데이션 효과로 배경 꾸미기
09에 들어가기 앞서 css 스타일들의 경우 부모에서 자식으로 상속이 되는 스타일 규칙들이 있는데 이를 먼저 알아보도록 하자.
이미지와 그데션이션 효과로 배경 꾸미기
내용 전체뿐만 아니라 특정 부분이나 글자 등 여러 요소에 배경을 넣어 꾸며보자.
배경 : 색상, 이미지
다양한 스타일 : 그라데이션 or 색의 투명도
09-1 배경색과 배경 범위 지정하기 09-2 배경 이미지 지정하기 09-3 그라데이션 효과로 배경 꾸미기
09-1 배경색과 배경 범위 지정하기
다양한 요소에 배경을 지정할 수 있는데, 먼저 배경색을 지정하는 방법에 대해 알아보자.
배경색을 지정하는 background-color 속성
개념 : 배경을 넣고 싶은 요소에 배경색을 지정 예시 {
background-color: #008000;
background-color: rgb(0, 128, 0);
background-color: green; }
특징 : backgorund-color값은 상속되지 않는다.
배경은 따로 설정이 없을 경우 상위 영역에 따라 설정값이 바뀌는 것처럼 보이고, 이는 상속 받은 것이 아니기 때문이다. 또한 개발자 도구로 살펴보면 스타일이 설정되어 있지 않은 것을 확인할 수 있다.
배경색의 적용 범위를 조절하는 background-clip 속성
배경을 요소마다 넣을 수도 있지만 박스 모델 관점에서 범위를 설정하여 일괄적으로 배경을 넣어줄 수 있다.
배경을 테두리까지 할지, 패딩까지 할지, 컨텐츠 영역까지 할지 결정
border-box
박스 모델의 가장 외곽인 테두리까지 적용합니다. 기본값입니다.
padding-box
박스 모델에서 테두리를 뺀 패딩 범위까지 적용합니다.
content-box
박스 모델에서 내용(콘텐츠) 부분에만 적용합니다.
09-2 배경 이미지 지정하기
배경 이미지는 웹 요소에 이미지를 넣거나 목록의 불릿 이미지를 대신하여 아이콘과 같은 이미지를 넣을 떄도 사용합니다. 배경 이미지는 관련된 속성이 많다는 점을 알아두자.
웹 요소에 배경 이미지를 넣는 background-image 속성
개념: 웹 요소에 배경 이미지를 넣는다. 기본형: background-image: url('이미지 파일 경로')
배경 이미지의 반복 방법을 지정하는 background-repeat 속성
개념: 배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수 있다.
repeat
브라우저 화면에 가득 찰 때까지 가로와 세로로 반복합니다. 기본값입니다.
repeat-x
브라우저 화면 너비에 가득 찰 때까지 가로로 반복합니다.
repeat-y
브라우저 화면 높이에 가득 찰 떄까지 세로로 반복합니다.
no-repeat
한 번만 표시하고 반복하지 않습니다.
배경 이미지의 위치를 조절하는 background-position 속성
개념: 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다. 기본형: background-position: <수평 위치> <수직 위치>; 수평 위치: left | center | right | <백분율> | <길이 값> 수직 위치: left | center | right | <백분율> | <길이 값>
특징: 속성값을 2개 지정할 경우 전자는 수평 위치, 후자는 수직 위치가 된다. 속성값을 1개 지정할 경우 지정한 값을 수평ㄹ 위칫값으로 간주하고, 수직 위칫값은 50%나 center로 간주한다.
배경 이미지의 위치를 지정하는 3가지 방법에 대해 알아보자.
키워드
수평 위치: left, center, right 수직 위치: top, bottom, center
백분율(%)
이상한게 수평 위치의 경우 적용이 되는데, 수직 위치가 적용이 안되는거 같은데 이걸 잘 모르겠네;; 이유를 알았는데 차지하고 있는 block 기준으로 퍼센트라 미세하게 바뀌어서 알기 힘들었던 것 같다.
크기
배경 이미지의 적용 범위를 조절하는 background-origin 속성
개념: 박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수도 있다.
이따 clip과 origin의 차이를 이해하는게 중요할 것 같다.
content-box
박스 모델에서 내용 부분에만 배경 이미지를 표시합니다. 기본값입니다.
padding-box
박스 모델에서 패딩까지 배경 이미지를 표시합니다.
border-box
박스 모델에서 테두리까지 배경 이미지를 표시합니다.
배경 이미지를 고정하는 background-attachment 속성
개념: 원래 이미지의 경우 웹 브라우저의 스크롤을 통해 위치를 변경할 수 있지만 background-attachment 스타일을 통해 웹 브라우저에 고정할 수 있다.
scroll
화면을 스크롤하면 배경 이미지도 스크롤됩니다. 기본값입니다.
fixed
화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤됩니다.
background 속성 하나로 배경 이미지 제어하기
개념: background의 다양한 속성을 background 속성으로 다룰 수 있다.
배경 이미지 크기를 조절하는 background-size 속성
개념: 배경 이미지의 크기를 조절할 수 있다. 특징: 속성값이 1개 2개 설정에 따른 차이가 있다.
auto
원래 배경 이미지 크기만큼 표시합니다. 기본값입니다.
contain
요소 안에 배경 이미지가 다 들어오도록 이미지를 확대•축소합니다.
cover
배경 이미지로 요소를 모두 덮도록 이미지를 확대•축소합니다.
<크기>
이미지의 너비와 높이를 지정합니다. 값이 하나만 주어질 경우 너빗값으로 인식하며, 이미지의 너비와 너빗값에 맞춘 높잇값도 자동 계산합니다.
<백분율>
배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대•축소합니다.
09-3 그라데이션 효과로 배경 꾸미기
그라데이션 효과를 주어보자?
선형 그라데이션
개념: 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. 기본형: linear-gradient (to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점], .....);
방향
각도
색상 중지점
2가지 색 이상의 선형 그라데이션을 만들려면 색상이 바뀌는 부분을 지정해 주어야 하는데, 이를 색상 중지점color-stop이라 한다.
원형 그라데이션
기본형: radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>ㅡ .....])
모양
circle vs ellipse default값은 ellipse이다.
크기
위치
`at 키워드와 함께 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다.
그라데이션을 사용한 패턴 만들기
repeating-linear-gradient를 사용하여 선형 그라데이션을 반복
repeating-radial-gradient를 사용하여 원형 그라데이션을 반복
Last updated