[CSS] background

aramjs·2023년 6월 14일

목록 보기

5/8

background

요소의 순서는 상관없다.

background : url('01.jpg') no-repeat center center fixed; : 이미지를 반복하지 않고 중앙 정렬한 후 스크롤에 따라다니지 않도록 고정한다.
요소 사이에 콤마를 사용하지 않는다.

center center : 사진을 정중앙 정렬한다.

background: blue; : 배경색을 지정한다.
background: url('01.jpg') repeat-x 100px; : 위에서부터 100px 내려와서 repeat-x 한다.
background: url('01.jpg') no-repeat top right; : 사진을 오른쪽 끝으로 이동한다.

불릿에 이미지 넣기 - li의 style

background: url('01.jpg') no-repeat left; : 이미지를 반복하지 않고 왼쪽에 배치한다.

background-size: 100px; : 이미지의 크기를 지정한다.

padding-left: 50px; : 글씨를 오른쪽으로 밀어야 이미지가 들어갈 공간이 생긴다.

list-style: none; : 글머리 기호를 없애주어야 한다.

background-color : background-color: pink;
background-image : url('경로') 를 사용하여 이미지 경로를 지정한다.
background-repeat : 이미지 반복 여부를 지정한다. 기본값은 repeat-x이다.
- no-repeat : 반복하지 않는다.
- repeat-x : 가로로 반복된다.
- repeat y : 세로로 반복된다.
background-position : 사진 위치를 지정한다. center, top, right, (가로, 세로) 등을 사용한다.

background-size

배경의 크기를 설정한다. background와는 따로 지정한다.
가로만 지정하면 세로는 비율에 맞게 조정된다.

요소들 사이에 콤마를 사용하지 않는다.

cover : 한 화면이 다 채워진다. background-size: cover;
cover 사용해도 fixed를 사용하지 않으면 스크롤에 따라다닌다.
-> background에서 fixed는 필수이다.

auto : 기본값이다. 사진의 왼쪽 위만 크게 보여진다. background-size: auto;
50% : 이미지의 가로가 박스의 절반이다. 비율이 유지된다. background-size: 50%
50% 50% : 정확하게 1/4 크기이다. 비율이 망가진다. background-size: 50% 50%
100% : 가로가 화면에 꽉 차고, 비율은 유지한다. background-size: 100%
cover 와 같은 결과이다.
100% 100% : 비율이 망가지고 꽉 찬다. background-size: 100% 100%

background-clip

border-box : border부터 background를 채운다.

padding-box : padding부터 적용한다. border은 적용하지 않는다.

content-box : 박스 안의 content부터 적용한다.

other

position

static : 기본값이다.
absolute : 절대 좌표로 위치를 지정할 수 있다.
relative : 원래 있던 위치를 기준으로 좌표를 지정한다.
relative인 컨테이너 내부에 absolute 인 객체가 있으면 절대좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 된다.
relative가 없는 경우, 기준은 문서 전체이다.
- fixed : 스크롤에 따라다니지 않는다.
inherit : 부모 태그의 속성값을 상속받는다.