○ background-position : 배경 이미지 위치 조정
배경 이미지로 적용된 이미지들 역시 background-position 속성 값을 부여함으로써, 수평 or 수직으로 위치를 이동할 수 있습니다. 우선, 기본적인 속성 값의 적용 형태는 아래와 같습니다.
선택자 {
background-position: <수평> <수직>
}
속성 값으로 두 개의 값을 부여하면 각각 수평, 수직 값으로 인식됩니다. 만일 한 개의 값만을 입력한다면 브라우저에서 해당 속성 값을 수평 값으로 인식하고 수직 위치는 50%나 center로 인식하게 됩니다.
background-position의 속성 값으로는 키워드 / 백분율 / 크기 값을 각각 입력이 가능합니다. 각각의 속성 값의 종류에 대해서도 살펴보겠습니다.
우선 키워드는 말 그대로 수평, 수직에 부여하는 값을 사전 지정된 키워드로 지정하는 것입니다. 수평은 left / center / right, 그리고 수직은 top / bottom / center로 지정할 수 있습니다.
백분율로 속성 값을 표시할 수 있습니다. 이를테면 수평 값 50%, 수직 값 40% 이런 형태로 말이죠. 만일 수평 50% / 수직 40%로 값을 지정하게 되면, 실제로 어떤 위치에 적용될까요? 해당 백그라운드 이미지를 어떤 특정 요소(태그)에 넣는다고 하면, 해당 요소(이를테면 body)의 왼쪽 모서리로부터 가로 50%, 세로 40%에 해당하는 지점에 - 배경 이미지의 가로 세로가 각각 50%, 40%인 위치를 맞춰서 배치하게 됩니다.
크기는 직접 해당 배경 이미지의 위치를 지정하는 경우에 사용합니다. 만일 background-position 값을 50px, 40px로 지정하게 된다면 가로 50px / 세로 40px의 위치에 해당 배경 이미지의 왼쪽 상단 모서리를 맞추게 됩니다.
아래와 같은 예시에서 background-position을 좀 더 디테일하게 사용해 보겠습니다. 일단 <ul> 태그로 불릿이 있는 리스트를 만들어 보겠습니다. 그리고 임의의 아이콘 이미지를 <li> 태그에 적용해 기존의 불릿을 제거하고 해당 아이콘 이미지를 불릿으로 써먹어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>example</title>
<meta charset="UTF-8">
<style>
ul {
list-style-type: none;
margin-left: 30px;
}
li {
background-image: url('images/20_CSS3_logo.png');
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;
line-height: 40px;
}
</style>
</head>
<body>
<h1>백그라운드 포지션 테스트</h1>
<ul>
<li>리스트 1</li>
<li>리스트 2</li>
<li>리스트 3</li>
<li>리스트 4</li>
</ul>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 4 (0) | 2023.05.09 |
|---|---|
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 3 (0) | 2023.05.06 |
| [CSS] 5. 배경 이미지와 그라데이션(2) - background image 1 (0) | 2023.05.03 |
| [CSS] 5. 배경 이미지와 그라데이션(1) - background color & clip (0) | 2023.05.01 |
| [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 4 : fixed, sticky (0) | 2023.04.27 |
