들어가기 전에
background 속성은 요소의 배경에 관련된 속성을 지정할 때 사용합니다.
배경에 관련된 속성에는 색상, 이미지, 반복 여부 등 여러 속성이 존재하고,
이 속성들을 한 번에 모아서 사용할 수도 있습니다.
이번 강의에서는 background의 여러 속성과 사용 방법에 대해 알아보도록 하겠습니다.
핵심키워드
학습하기
background 관련 속성
기본 값 : transparent
배경의 색상을 지정하는 속성입니다.
앞선 색상 강의에서 배운 색상 값 적용 방식과 같습니다.
기본 값 : none
배경으로 사용할 이미지의 경로를 지정하는 속성입니다.
url의 경로는 절대 경로, 상대 경로 모두 사용 가능합니다.
만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면,
그 부분에 background-color 색상이 노출됩니다.
이미지의 반복 여부와 방향을 지정하는 속성입니다.
기본값이 repeat이기 때문에 따로 설정하지 않으면 x, y축으로 반복되어서 표시됩니다.
background-repeat의 값으로 사용할 수 있는 것들은 다음과 같습니다.
< 속성 값 >
repeat | x, y축 으로 모두 반복합니다. |
repeat-x | x 축 방향으로만 반복합니다. |
repeat-y | y 축 방향으로만 반복합니다. |
no-repeat | 이미지를 반복하지 않습니다. |
< 속성 값 >
% | 기준으로부터 % 만큼 떨어진 지점과 이미지의 % 지점이 일치하는 곳에 위치시킵니다. |
px | 기준으로부터 px 만큼 떨어진 지점과 이미지의 (0,0) 지점이 일치하는 곳에 위치시킵니다. |
키워드 | top, left, right, bottom, center 키워드를 사용할 수 있습니다. 키워드는 선언 순서와 관계없이 top, bottom은 y축 기준으로 하며 left, right는 x축을 기준으로 합니다. |
< 속성 값 >
scroll | 배경 이미지는 요소 자체를 기준으로 고정되어 있으며 내용과 함께 스크롤 되지 않습니다. |
local | 배경 이미지는 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤 됩니다. |
fixed | 배경 이미지는 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않습니다. |
- 뷰포트 : 사용자가 시각적으로 볼 수 있는 웹페이지 영역을 의미합니다.
컴퓨터나 휴대폰과 같은 장치에 Display 요소가 표현되는 영역을 말합니다.
background: [-color] [-image] [-repeat] [-attachment] [-position];
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>background</title>
<style>
div {
height: 500px;
background-color: yellow;
background-image: url(https://www.w3schools.com/CSSref/img_tree.gif);
background-repeat: no-repeat;
background-position: center top;
/* 축약형 */
background: yellow url(https://www.w3schools.com/CSSref/img_tree.gif) no-repeat center top;
}
</style>
</head>
<body>
<div> css background 속성 실습 </div>
</body>
</html>
생각해보기
강의에서 살펴본 속성 이외에도 배경과 관련된 다양한 방식이 존재합니다.
background-size, background-origin, background-clip, background-blend-mode 등 다른 다양한 속성들도 확인해보시기 바랍니다.
참고자료
https://www.w3schools.com
comment
2023.02.06
background-color 기본값 : transparent
background-repeat 기본값 : repeat
background-attachment 기본값 : scroll
background-position 기본값 : 0% 0%
속성 / 백그라운드
Background
div {
background-color: pink;
}
백그라운드 컬러 지정 가능
div {
background-image: url(./bg.jpg);
}
백그라운드 이미지 지정 가능
div {
background-image: url(./bg.jpg);
background-repeat: no-repeat; //repeat-x, repeat-y
}
백그라운드 이미지 지정시, 웹 사이트보다 이미지 크기가 작을 경우 자동으로 repeat되게 되어 있음.
이미지 하나만 표시하고 싶다면 no-repeat을 지정해주면 됨.
repeat-x로 지정시 X축으로 반복되며, repeat-y로 지정시 Y축으로 반복됨.
div {
background-image: url(./bg.jpg);
background-repeat: no-repeat;
background-position: center center;
}
이미지 하나만 표현하고, 화면 가운데에 표시하고 싶다면
position 값을 center, center로 설정해주면 됨.
position 기본 값: 0 0 (left, top)
div {
background-image: url(./bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
}
attachment가 scroll이면 웹 사이트를 스크롤할 때 같이 스크롤되며,
div {
background-image: url(./bg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
attachment가 fixed이면 웹 사이트를 스크롤해도 position에 고정된 위치에서 이미지를 볼 수 있음.
background: [-color] [-image] [-repeat] [-attachment] [-position];
앞서 보았던 속성 값들을 축약하여 한 줄로 표현 가능.
수강완료
21.11.19
21.10 22 강의 내용이 헷갈리네요. 무엇을 설명하려고 하는 것 인지......
21.08.04.
21.06.24
21.03.27
21.01.10
이미지 불러오는 게 어렵네요ㅠ
unsplash 이미지 주소 입력했는데 잘 안되더라구요ㅠ
저장해서 불러오는 게 나을 수도 있다는 생각입니다.
background-color 기본값 = transparent (투명)
백그라운드는 축약해서 쓸 수 있다! 순서에 주의!