초보도 성공! HTML/CSS/JS 6장, 백그라운드 필수 속성 완벽 마스터!

웹페이지 배경 꾸미기!

웹페이지 배경을 멋지게 꾸미는 방법을 알려줄게!

1. 배경 색깔 바꾸기

background-color: 색깔이름;

background-color 속성을 사용하면 배경 색깔을 바꿀 수 있어. red, blue 같은 색깔 이름을 써도 되고, rgb(0,0,0)처럼 색깔 코드를 써도 돼.

2. 배경 이미지 넣기

background-image: url('이미지파일경로');

background-image 속성을 사용하면 배경에 이미지를 넣을 수 있어. url() 안에 이미지 파일이 있는 경로를 적어주면 돼.

이미지가 반복되는 이유?

만약 배경으로 넣은 이미지가 화면보다 작으면, 웹브라우저는 이미지를 반복해서 화면을 채워줘. 마치 퍼즐 조각처럼 말이야.

3. 이미지 반복 제어하기

이미지가 반복되는 게 싫다면 background-repeat 속성을 사용해봐.

• no-repeat: 반복 안 함
• repeat-x: 가로로만 반복
• repeat-y: 세로로만 반복
• repeat: 전부 반복 (기본값)

4. 배경 이미지 크기 조절하기

background-size 속성을 사용하면 배경 이미지 크기를 조절할 수 있어.

• cover: 이미지가 배경을 꽉 채우도록 확대/축소
• contain: 이미지 비율을 유지하면서 배경에 맞게 조절

주의! background-size가 제대로 작동하려면 배경이 될 요소에 높이 값이 있어야 해.

5. 배경 이미지 위치 잡기

background-position 속성을 사용하면 배경 이미지 위치를 조절할 수 있어.

• center: 가운데 정렬
• left top: 왼쪽 위
• right bottom: 오른쪽 아래

center center처럼 가로, 세로 위치를 같이 지정할 수도 있어.

6. 배경 이미지 고정하기

background-attachment 속성을 사용하면 스크롤해도 배경 이미지가 움직이지 않게 고정할 수 있어.

• fixed: 고정 (스크롤해도 안 움직임)
• scroll: 스크롤하면 같이 움직임 (기본값)

7. 모든 배경 속성 한 번에 쓰기

background 속성을 사용하면 위에 설명한 모든 배경 관련 속성을 한 번에 쓸 수 있어. 하지만 속성이 많아지면 좀 복잡해 보일 수 있으니, 처음에는 각 속성을 따로따로 쓰는 걸 추천해!

background: url('이미지.jpg') no-repeat center center / cover fixed;

이 정도만 알아도 웹페이지 배경을 멋지게 꾸밀 수 있을 거야! 직접 해보면서 익혀보자!