CSS / Reference / background-image
개요
background-image는 이미지를 배경으로 사용하게 하는 속성입니다.
- 기본값 : none
- 상속 : No
- 애니메이션 : No
- 버전 : CSS Level 1
문법
background-image: none | url | initial | inherit
- none : 이미지를 배경으로 사용하지 않습니다.
- url : 이미지의 URL을 입력합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 나옵니다.
예제
<!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-house.png" );
}
</style>
</head>
<body>
<div class="a">
</div>
</body>
</html>
참고
- 배경 이미지의 스크롤 여부는 background-attachment 속성으로 정합니다.
- 배경 이미지의 위치는 background-position 속성으로 정합니다.
- 배경 이미지의 반복 여부와 반복 방향은 background-repeat 속성으로 정합니다.
- 배경 이미지의 가로 크기와 세로 크기는 background-size 속성으로 정합니다.
CSS / Reference / background-color
background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1
opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3
clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2
color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
CSS / Reference / align-content
flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다.
CSS / Reference / border-width
border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-width border-right-width border-bottom-width border-left-width
box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3
CSS / Reference / border-style
border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-style border-right-style border-bottom-style border-left-style
font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
CSS / Reference / list-style-type
목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.