CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성
개요
background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다.
- 기본값 : repeat
- 상속 : No
- 애니메이션 : No
- 버전 : CSS Level 1
문법
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
- repeat : 가로 방향, 세로 방향으로 반복합니다.
- repeat-x : 가로 방향으로 반복합니다.
- repeat-y : 세로 방향으로 반복합니다.
- no-repeat : 반복하지 않습니다.
- 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" );
background-repeat: repeat;
}
</style>
</head>
<body>
<div class="a">
</div>
</body>
</html>
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
브라우저 지원
- Chrome : 1.0+
- Firefox : 1.0+
- Internet Explorer : 4.0+
- Opera : 3.5+
- Safari : 1.0+
Related Posts
개요 font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-family: font | initial | inherit font : family-name 또는 generic-family initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음 font family-name은 글꼴 이름입니다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다. generic-family는 글꼴 유형입니다. serif : 삐침 있는 ...
여백에는 안쪽여백과 바깥여백이 있습니다. 안쪽여백은 padding 속성으로, 바깥여백은 margin 속성으로 정합니다. 속성값 부여하기 padding과 margin 속성에 값을 부여하는 방법은 다음과 같습니다. padding: xx yy zz ww; margin: xx yy zz ww; xx는 위, yy는 오른쪽, zz는 아래, ww는 왼쪽 여백입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-color | initial | inherit border-width : 선의 두께를 정합니다. 기본값은 medium입니다. border-style : 선의 모양을 정합니다. 기본값은 none입니다. border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...
CSS / background-color / 배경색을 정하는 속성
개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit transparent : 배경색이 없습니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta ...
CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기
체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...
CSS / opacity / 요소를 투명하게 만드는 속성
개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 숫자가 작을수록 투명해집니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Reference ...
크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; } 가변폭 ...
CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성
CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...
CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성
개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...