-
개인 공부 후 정리 목적의 글입니다.
배경을 지정하는 background 속성
background-color
- 배경색을 지정
background-clip
- 배경색의 적용 범위를 조절
border-box 박스 모델의 가장 외각인 테두리까지 적용, 기본값 padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box 박스 모델에서 내용(콘텐츠) 부분에만 적용 background-image: url('이미지 파일 경로')
- 웹 요소에 배경 이미지를 넣는 속성
background-repeat
- 배경 이미지의 반복 방법을 지정하는 속성
repeat 브라우저 화면에 가득 찰 때까지 가로,세로로 반복, 기본값 repeat-x 브라우저 화면 너비에 가득 찰 때까지 가로로 반복 repeat-y 브라우저 화면 높이에 가득 찰 때까지 세로로 반복 no-repeat 한 번만 표시하고 반복하지 않는다. background-position: <수평 위치> <수직 위치>;
- 배경 이미지의 위치를 조절하는 속성
수평 위치 : left, center, right, 백분율(%), 길이 값(px)
수직 위치 : top, center, bottom, 백분율(%), 길이 값(px)
background-origin
- 배경 이미지의 적용 범위를 조절하는 속성
content-box 박스 모델에서 내용 부분에만 배경 이미지를 표시, 기본값 padding-box 박스 모델에서 패딩까지 배경 이미지를 표시 border-box 박스 모델에서 테두리까지 배경 이미지를 표시 background-attachment
- 배경 이미지를 고정하는 속성
scroll 화면을 스크롤하면 배경 이미지도 스크롤, 기본값 fixed 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤 background-size
- 배경 이미지 크기를 조절하는 속성
auto 원래 배경 이미지 크기만큼 표시, 기본값 contain 요소 안에 배경 이미지가 다 들어오도록 이미지 확대, 축소 cover 배경 이미지로 요소를 모두 덮도록 이미지 확대, 축소 크기 이미지의 너비와 높이를 지정
값이 하나만 주어질 경우 너비값으로 인식하며,
이미지의 너비와 너빗값에 맞춘 높잇값도 자동 계산백분율 배경 이미지가 들어갈 요소의 크기를 기준으로 값을
백분율로 지정하고 그 크기에 맞도록 배경 이미지를 확대,축소선형 그라데이션
- 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것
linear-gradient (to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ....] );
방향 : to 예약어와 함께 사용하며 수평 방향 = left, right
수직 방향 = top, bottom
각도 : 선형 그라데이션에서 색상이 바뀌는 방향을 알려준다.
각도는 그라데이션이 끝나느 부분, 시계방향으로 회전하며 값은 deg
색상 중지점 : 2가지 색이상의 선형 그라데이션의 색상이 바뀌는 색
원형 그라데이션
- 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 변하는 것
radial-gradient (<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ......] )
모양 : circle(원형), ellipse(타원형)
크기
closeset-side 그라데이션 중심에서 가장 가까운 요소의 측면에 닿을 때까지 그린다. closeset-corner 그라데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그린다. farthest-side 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어져 있는 측면에 닿을 때까지 그린다. farthest-corner 그라데이션의 가장자리가 그라데이션의 중심에서 가장 멀리 떨어져 있는 코너에 닿도록 한다. 기본값 위치 : at 키워드와 함께 사용하며 위치 속성값은
키워드(left, center, rigth 중 하나 또는 top, center, bottom 중 하나) 또는 백분율
속성값 생략시 가로, 세로 모두 중앙인 center로 인식
색상 중지점 : 2가지 색이상의 선형 그라데이션의 색상이 바뀌는 색
그라데이션을 사용한 패던 만들기
- 선형 그라데이션을 반복할 때 : repeating - linear - gradient
- 원형 그라데이션을 반복할 때 : repeating - radial - gradient