CSS / Reference / background-position
개요
background-position은 배경 이미지의 위치를 정하는 속성입니다.
- 기본값 : 0% 0%
- 상속 : No
- 애니메이션 : Yes
- 버전 : CSS Level 1
문법
background-position: x-position y-position | initial | inherit
- x-position y-position : 가로 위치와 세로 위치를 정합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
위치 값으로 사용할 수 있는 것은 다음과 같습니다.
- 가로 위치 값 : left, center, right, 백분율, 길이
- 세로 위치 값 : top, center, bottom, 백분율, 길이
예제
- 왼쪽에서 10%, 위쪽에서 100px 위치에 배경 이미지를 배치합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
width: 100%;
height: 600px;
border: 1px solid #bcbcbc;
}
.a {
background-image: url( "images/bg-gray-400x300.png" );
background-repeat: no-repeat;
background-position: 10% 100px;
}
</style>
</head>
<body>
<div class="a">
</div>
</body>
</html>
- 배경 이미지를 가운데 배치합니다.
background-position: center center;
font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1
CSS / Reference / border-style
border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-style border-right-style border-bottom-style border-left-style
CSS / Reference / background-clip
HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3
CSS / Reference / letter-spacing, word-spacing
글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.
CSS / Reference / background-image
background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1
word-wrap은 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3
CSS / Reference / border-width
border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-width border-right-width border-bottom-width border-left-width
CSS / Reference / backface-visibility
backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3
empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2