CSS / backface-visibility / 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성

backface-visibility

backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다.

기본값 : visible
상속 : No
애니메이션 : No
버전 : CSS Level 3

문법

backface-visibility: visible | hidden | initial | inherit

visible : 보이게 합니다. 기본값입니다.
hidden : 보이지 않게 합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

체크박스에 체크하면 박스가 180도 회전합니다.
첫 번째 박스는 앞면이 보이고, 두 번째 박스는 보이지 않습니다.

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>CSS</title>
		<style>
			.jb {
				box-sizing: border-box;
				display: inline-block;
				width: 200px;
				height: 150px;
				margin: 10px;
				background-color: orange;
				transition: 2s;
			}
			.jb1 {
				backface-visibility: visible;
			}
			.jb2 {
				backface-visibility: hidden;
			}
			input:checked ~ .jb {
				transform: rotateY( 180deg )
			}
		</style>
	</head>
	<body>
		<input type="checkbox">
		<div class="jb jb1">backface-visibility: visible;</div>
		<div class="jb jb2">backface-visibility: hidden;</div>
	</body>
</html>

브라우저 지원

Chrome : 36.0+
Firefox : 16.0+
Internet Explorer : 10.0+
Opera : 23.0+
Safari : 9.0+

CSS

CSS / 기초 / 문법

문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다. 즉, CSS 코드는 다음처럼 구성됩니다. selector ...

CSS / background-image / 배경 이미지 정하는 속성

개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...

CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...

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 : ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앱니다. x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 ...

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 / Grid / order

order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / border-collapse / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 처리 방식 정하는 속성

개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. initial : 기본값으로 설정합니다. inherit ...

CSS / placeholder의 색, 글자 모양 등 꾸미기

placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다. 다음은 꾸미기 전의 input과 textarea입니다. <!doctype html> <html lang="ko"> <head> ...

CSS / CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CODING FACTORY