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+
CSS / content / 요소 앞 또는 뒤에 텍스트, 이미지 등 콘텐트 추가하기
content content 속성은 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가한다. 예를 들어 p 요소 앞에 콘텐트를 넣으려면 다음과 같이 하고 p:before { content: xxx; } 뒤에 넣으려면 다음과 같이 한다. p:after { content: xxx; } 텍스트 추가하기 p 요소 앞에 Hello World를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서
가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...
다음과 같은 인용문(blockquote)을 꾸미는 몇 가지 예제이다. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> </blockquote> 예제 1 blockquote { border: 1px solid #27a9e3; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; border-left: 10px solid #27a9e3; } 예제 2 blockquote:before { ...
CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성
backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 backface-visibility: visible | hidden | initial | inherit visible : 보이게 합니다. 기본값입니다. hidden : 보이지 않게 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 체크박스에 체크하면 박스가 180도 회전합니다. 첫 번째 박스는 앞면이 보이고, 두 번째 박스는 ...
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다. 하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> ...
짧은 밑줄 만들기 밑줄은 보통 text-decoration이나 border 속성으로 만듭니다. 그런데 그렇게 만든 밑줄은 선택한 요소 전체에 적용됩니다. 즉, 요소가 길면 밑줄도 길게 만들어지고, 요소가 짧으면 밑줄도 짧게 만들어집니다. 요소보다 짧은 밑줄을 만드는 방법은 :after 선택자를 이용하는 것입니다. 요소 뒤에 선을 만들고 위치와 길이를 정해주면 됩니다. 예를 들어 h1 요소에 짧은 밑줄을 만들고 싶다면 다음과 ...
CSS / 표(table) 꾸미기 / 반응형 표 만들기
데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...
display: grid 그리드(grid)는 콘테이너(container)와 아이템(item)으로 구성됩니다. 아래는 그리드를 위한 간단한 HTML 문서입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...
CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성
개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성이다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여준다. hide : 빈 셀의 테두리를 숨긴다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 예제 첫 번째 표는 빈 셀의 테두리를 표시한다. 두 ...
개요 flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정한다. 문법 flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit nowrap : 기본값으로, 넘기지 않는다. wrap : 넘긴다. wrap-reverse : 역순으로 넘긴다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 - nowrap 기본값은 nowrap으로... <!doctype html> <html lang="ko"> <head> ...