CSS 쉽게 배우기 | 배경 만들기

CSS로 배경으로 이미지 사용하기

 

안녕하세요

이번 편에서는 배경을 꾸며볼게요

배경으로 원하는 색을 사용할 수도 있지만

이미지를 배경으로 사요 하면 좀 더 보기 좋겠죠?

 

그럼 먼저 CSS에서 배경은 어떻게 선택하고 조절할 수 있는지 알아볼게요

 

배경 선택하기

CSS에서 배경은 여러 부위로 나뉘어 있습니다

background-color       배경 색
background-image       배경 이미지
background-repeat      배경 반복
background-position    배경 위치
background-size        배경 사이즈
background-attachment  배경 부착 (고정, 스크롤)

background             배경 단축 속성

뭐가 많죠?

하나하나 차근차근 알아볼게요

 

 

 

이미지 배경 만들기

background-color 배경 색 사용하기

배경 색은 CSS 쉽게 배우기 | 색상 편을 참고해 주세요

background-color: red/#ff0000/rgb(255,0,0);

 

 

background-image 배경 이미지 사용하기

배경 이미지는 이미지의 URL을 사용합니다

이미지의 URL은 웹 주소나 이미지 파일의 위치입니다

background-image: url("https://..."); 웹 주소
background-image: url("./bg.jpg");    이미지 파일 위치

 

배경 이미지는 주로 배경 반복, 배경 위치, 배경 사이즈와 같이 사용됩니다

 

 

background-repeat 배경 반복 사용하기

배경 반복은 주로 배경 이미지와 같이 사용됩니다

배경 반복은 배경을 반복할지 안 할지를 정합니다

배경에 이미지를 적용하면 기본으로 이미지가 반복되어 배경을 커버합니다

반복된 마지막 이미지는 잘립니다

background-repeat: repeat;      배경 반복, 잘림
background-repeat: no-repeat;   배경 반복 없음, 잘림
background-repeat: repeat-y;    배경 세로 반복, 잘림
background-repeat: repeat-x;    배경 가로 반복, 잘림
background-repeat: space;       배경 간격두고 반복, 잘림 없음
background-repeat: round;       배경 간격없이 반복, 잘림 없음

 

 

 

 

 

background-position 배경 위치 사용하기

배경 이미지의 위치는 3가지 방법으로 조정할 수 있습니다

background-position: 좌,우,위,아래,중앙 방향 조합;
background-position: X% Y%;
background-position: Xpx Ypx;

방향 조합에 단어 두 개를 사용하면 가로/세로의 위치를 조절할 수 있습니다

단어 한 개를 사용하면 다른 한 단어는 자동으로 '중앙'이 사용됩니다

 

% 나 px는 이미지의 왼쪽 위 꼭짓점의 좌표입니다

 

 

 

 

 

background-size 배경 사이즈 사용하기

배경의 사이즈는 4가지 방법으로 정할 수 있습니다

background-size: Xpx Ypx;   가로 세로 픽셀
background-size: X% Y%;     가로 세로 퍼센트
background-size: cover;     커버
background-size: contain;   콘테인

배경의 사이즈를 커버로 정하면 요소의 배경 전체를 커버합니다

이때 이미지가 늘어날 수도 있고, 부분이 잘릴 수도 있습니다

 

콘테인을 사용하면 이미지가 전부 보일 수 있게 자동 조절됩니다

이미지가 요소보다 짧을 수 있습니다

 

 

 

 

 

background-attachment 배경 부착

배경 부착은 배경 이미지가 페이지 스크롤 때 어떻게 움직이는지를 정합니다

배경 부착에는 3가지 방법이 있습니다

background-attachment: scroll; (default)   배경 부착 스크롤 (기본)
background-attachment: fixed;              배경 부착 고정
background-attachment: local;              배경 부착 로컬

배경 부착 스크롤은 기본으로 적용되기 때문에 굳이 직접 적용하지 않아도 됩니다

스크롤은 페이지 스크롤 때 페이지와 같이 움직입니다

 

고정은 페이지에 고정돼서 페이지 스크롤 때도 움직이지 않습니다

페이지 스크롤때 이미지가 보이고, 숨겨지는 이펙트를 나타낼 수 있습니다

 

로컬은 요소의 스크롤 때 같이 움직입니다

스크롤과 다르게 페이지 스크롤과는 따로 움직입니다

 

 

 

 

이렇게 배경 이미지를 알아봤는데, 뭐 쓸게 참 많네요

그래서 배경 단축 속성을 알려드릴게요

 

background 배경

background는 배경 단축 속성으로 여러 값을 한 번에 적용시킬수 있습니다

background: color url("") repeat attachment position/size;  색 이미지 반복 부착 위치/사이즈

background속성 하나로 배경 색, 이미지, 반복, 부착, 위치, 사이즈를 한번에 조절할 수 있습니다

 

 

 

 

 

 

이렇게 배경에 이미지를 사용하는 방법을 알아봤습니다

배경에 이미지를 사용하면 예쁜 페이지를 만들 수 있지만

이미지 사이즈가 너무 크면 페이지 로딩에 영향을 줄 수도 있습니다

배경에 사용할 이미지를 어떻게 최적화해야 하는지 조사해보는 걸 추천드립니다

 

 

수고하셨습니다

 

 

끝!