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
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"> ...
CSS / list-style-type / 목록 앞의 마커 정하는 속성
목록은 <ul> 또는 <ol> 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 모양의 마커를 사용할지는 list-style-type으로 정합니다. 속성값은 다음과 같습니다. <ul> : disc, circle, square <ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha 공통 : none 의미상으로는 <ul>과 <ol>에 사용하는 속성값을 구분하는게 맞지만, <ul>에 decimal을 사용하거나 <ol>에 disc를 사용하는 ...
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-image / 배경 이미지 정하는 속성
개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...
CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성
개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...
개요 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 : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...
사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...
flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다. 기본값은 stretch로, 높이를 꽉 채웁니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
CSS / 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, 백분율, 길이 세로 위치 ...
CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성
개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성은 입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다. break-all : 글자 기준으로 줄바꿈합니다. keep-all : ...