이번 글에서는 css의 background 속성에 대해 알아보겠습니다.
- background란?
태그의 배경을 지정하는 속성으로, font와 비슷하게 세부 속성을 갖고 있습니다.
1. background-color(배경 색 지정)
2. background-repeat(배경 이미지의 반복 여부)
3. background-image(배경 이미지)
4. background-position(배경 이미지의 위치)
이렇게 세부 속성이 있으며 background: ~ 로 4가지 세부 속성을 지정할 수 있습니다.
기본 설명은 여기까지로 하고, 각각 예시를 보면서 이해하도록 하겠습니다.
.visual .prev, .visual .next {display: block;position: absolute;top: 50%; transform: translateY(-50%);
width:25px; height:47px; background: url(../image/sp_com.png) no-repeat; color: transparent;}
.visual .prev {left:82px; background-position: -128px -60px;}
.visual .next {right:82px; background-position: -158px -60px;}
일단 이 예시 코드를 보면
background: url(../image/sp_com.png) no-repeat;
background-position: -128px -60px;
background-position: -158px -60px;
이렇게 background가 쓰였는데 위에서 background: ~로 세부 속성들을 지정할 수 있다고 했었죠?
이 예시에서는 처음에 background url 로 먼저 background-image 속성을, no-repeat로
background-repeat 속성을 지정해 줬습니다.
url에 파일 경로값을 넣어 화면에 들어갈 이미지를 지정해 줬고, no-repeat값을 줌으로써 이미지가
반복되지 않게 명시를 해 준 것입니다.
그리고 아래에 따로 background-position값을 줬는데 사실 위의 설명에 "배경 이미지의 위치"라고만
되어 있는 것을 보면 이해되지 않을 수 있습니다.
근데 보면 일단 position값으로 -128px -60px 이렇게 들어가 있죠?
저 위치값을 기억하면서 경로에 쓰인 이미지 파일을 보겠습니다.
이렇게 페이지에 쓰인 여러 아이콘들을 한 곳에 다 모아놓은 이미지 파일이었습니다.
근데 이 예시에서는 이 이미지파일의 전체가 아닌 필요한 아이콘만 떼어와서 사용을 해야 합니다.
그럼 그냥 background에 이미지 파일만 지정한 상태라면 이 이미지 전체가 화면에 나와 버리겠죠?
그럴 때 background-position값을 따로 줘서 해당 아이콘이 있는 위치값을 줌으로써
필요한 아이콘만 빼올 수 있는 것입니다.
그 아이콘의 x축, y축 값이 저 -128px -60px 이 되는 것이죠.
그럼 페이지의 해당 부분을 보겠습니다.
이렇게 양 옆을 보면 왼쪽, 오른쪽 화살표 아이콘이 있는 것을 볼 수 있습니다.
background position을 통해 아이콘 전체 이미지에서 해당 아이콘만 빼온 결과값입니다.
이번에는 background-repeat를 설명하기 위해 다른 예제 코드를 작성하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.abox{
width: 279px;
height: 181px;
margin-bottom: 100px;
background-image: url("./image/background_eximage.jpg");
border: 1px solid #AAA;
}
#box3-1{ background-repeat: no-repeat; }
#box3-2{ background-repeat: repeat-x; width:1000px;}
#box3-3{ background-repeat: repeat-y; height:500px;}
#box3-4{ background-repeat: repeat; width: 1000px; height: 500px;}
</style>
</head>
<body>
<div id="box3-1" class="abox"></div>
<div id="box3-2" class="abox"></div>
<div id="box3-3" class="abox"></div>
<div id="box3-4" class="abox"></div>
</body>
</html>
div 4개에 background-image로 제가 인터넷에서 다운받은 호랑이 사진의 경로값을 넣었습니다.
그리고 div에 각각 repeat값을 다르게 넣었는데요.
(div마다 width와 height값이 다르게 설정된 이유는 이미지가 반복되는 것을 보여주기 위함입니다.)
실행 전 예상을 해 보면, 첫 번째 div는 반복되지 않으니 호랑이 이미지가 한 번만 나올 것이고,
두 번째는 x축으로 반복을 시켰으니 가로로 반복될 것이고 세 번째는 동일한 원리로 세로로 반복될
것입니다.
마지막은 전부 반복(repeat)이니 가로, 세로로 쭉 반복될 것 같습니다.
맞는지 한 번 볼까요?
이렇게 반복되는 이미지가 예상에 맞게 나왔습니다.
마지막으로 background 자체의 사용법에 대한 예제 코드 하나를 보고 마무리하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#box {
width: 500px;
height: 500px;
background: yellow url(./image/background_eximage.jpg) no-repeat center center;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
이번에는 가로 500, 세로 500의 공간을 주고 background로 background-color값(yellow),
background-image값, 뒤의 center, center는 background-position처럼 이미지 자체에서
좌표를 수정하는 것이 아닌 해당 위치에서 이미지의 위치값을 조정하는 값을 넣은 것입니다.
여기서는 center, center를 했으니 가로 중앙, 세로 중앙에 오게 되니 가운데 정렬이 되겠죠?
이렇게 배경색과 이미지, 이미지의 가운데 정렬까지 되어 있는 것을 볼 수 있습니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| display flex 속성 (0) | 2021.12.17 |
|---|---|
| html 리스트 태그 (0) | 2021.12.16 |
| css clear 속성 (0) | 2021.12.16 |
| css의 float 속성 (0) | 2021.12.16 |
| css 접두어 webkit, moz, ms, o 의미 (0) | 2021.12.16 |
댓글