히바리 쿄야 와 함께 하는 Developer Cafe
[4일차] DO IT HTML5 & CSS3 / p370 ~488 / 시멘틱태그, 선택자,애니메이션 본문
section 요소
- 문서의 내용 부분을 나타내는 요소이다.
- 하나의 section은 하나의 주제를 가지고 있으며 보통 h1~h6 태그와 같이 제목을 표현하는 heading 요소와 함께 사용한다.
- 주의할점은 하나의 section 요소에는 하나의 heading 요소만을 사용해야 한다.
- 주제별로 나눌경우 하나의 주제 안에 또 다른 세부 주제가 있을경우 section 요소 안에 section요소를 중첩 사용 가능하다.
* 중복하여 heading 요소인 h태그를 사용할 경우 h1~h6 요소의 레벨에 따라 결정된다.
* 같은 레벨의 h1~h6 요소를 사용하게 되면 한개의 section 요소는 두개의 section 요소로 나뉘게 되고
다른 레벨의 h1~h6 요소를 사용하게 되면 내부에 또 다른 section 요소가 중첩하여 생성된 것처럼 암죽적으로 해석된다.
article 요소
- 개별 콘텐츠를 담는 요소이다.(위의 실제 예시로 보면 콘텐츠라 나와있는데 그 부분이 article 이다.)
- article 요소 안의 내용은 포함되어 있는 문서와 분리하여 개별적으로 사용이 가능하다는 것을 의미한다.
header 요소
- 사이트의 로고나 제목, 메뉴, 소개 정보 등과 같이 머리말에 놓이는 내용을 담는다. (네이버나 다음같이 상단에 로고 제목 등등)
footer 요소
- 제작자의 정보나 저작권 정보 등과 같이 꼬리말에 놓이는 내용을 담는다.(홈페이지 하단에 나오는 정보들...)
nav 요소
- 주로 전체 웹 페이지에 적용되는 네비게이션 메뉴(GNB)를 나타낸다.
- 일반적으로 웹 페이지의 상단에 적용된다. (쉽게 말해 메뉴바들을 보통 nav태그를 사용합니다.)
aside 요소
- 주요 콘텐츠 이외에 남아 있는 콘텐츠 등을 나타낸다.
- 웹 페이지의 사이드 바 영역 등을 지정하는데 사용될 수 있다.
address
사이트 제작자 정보 연락처 정보 나타내기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<header>
<h1>애완견 종류</h1>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</nav>
</header>
<section>
<h2>활달한 강아지</h2>
<article>
<h3>요크셔테리어</h3>
<p>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</p>
</article>
<article>
<h3>말티즈</h3>
<p>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</p>
</article>
<article>
<h3>포메라이언</h3>
<p>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다.</p>
</article>
<article>
<h3>골든 리트리버</h3>
<p>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</p>
</article>
</section>
<footer>
<p>published by funnycom</p>
</footer>
</body>
</html>
header_nav.html = 헤더 네비게이션
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
</head>
<body>
<div class="container">
<header>
<h1>Joandora</h1>
<h2>가장 제주다운 수산리집</h2>
</header>
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
</div>
</body>
</html>
audio
<audio src="오디오 파일 경로" [속성] [속성="속성 값"]></audio>
autoplay - 오디오를 자동 재생
controls - 웹 화면에 컨트롤 막대를 표시 컨트롤 막다애네느 재생/멈춤,진행 바, 볼륨 등이 표시
loop - 오디오를 반복 재생
muted - 음소거
preload - 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드 준비해 둠
CSS 선택자
하위 선택자 - 지정한 모든 하위 요소에 스타일 적용
header (상위요소) p (하위요소) {color:blue;}
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
#container ul {
border: 1px dotted blue; /* #container 요소의 모든 하위 ul 요소에 파란 1px 실선 */
}
</style>
</head>
<body>
<section id="container">
<header><h1>예약 방법 및 요금</h1></header>
<p> 요안도라에 예약하려면?
<ul>
<li> 예약 방법
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
</li>
<li>요금
<ul>
<li>1인 : 40,000원</li>
<li>2인 : 60,000원</li>
<li>3인 : 80,000원</li>
<li>4인 : 100,000원</li>
</ul>
</li>
</ul>
</section>
</body>
</html>
자식 선택자 - 자식 요소에만 스타일 적용
부모요소 > 자식요소
section > p {color:blue;}
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
#container > ul {
border : 1px dotted blue; /* #container 요소의 자식 ul 요소에 파란 1px 실선 */
}
</style>
</head>
<body>
<section id="container">
<header><h1>예약 방법 및 요금</h1></header>
<p> 요안도라에 예약하려면? </p>
<ul>
<li> 예약 방법
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
</li>
<li>요금
<ul>
<li>1인 : 40,000원</li>
<li>2인 : 60,000원</li>
<li>3인 : 80,000원</li>
<li>4인 : 100,000원</li>
</ul>
</li>
</ul>
</section>
</body>
</html>
인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용
요소1 + 요소2
h1 + p {text-decoration:underline;}
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
h1+ul { /* h1 요소 다음의 첫 번째 ul 요소에 적용할 스타일 */
color:blue; /* 글자색 파랑 */
font-weight:bold; /* 글자 굵게 */
}
</style>
</head>
<body>
<section id="container">
<h1>예약 방법 및 요금</h1>
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
<ul>
<li>1인 : 40,000원</li>
<li>2인 : 60,000원</li>
<li>3인 : 80,000원</li>
<li>4인 : 100,000원</li>
</ul>
</section>
</body>
</html>
형제 선택자 - 형제 요소에 스타일 적용
요소1 ~ 요소2
h1 ~ p {text-decoration:underline;}
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
h1~ul {
color:blue; /* 글자색 파랑 */
font-weight:bold; /* 글자 굵게 */
}
</style>
</head>
<body>
<section id="container">
<h1>예약 방법 및 요금</h1>
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
<ul>
<li>1인 : 40,000원</li>
<li>2인 : 60,000원</li>
<li>3인 : 80,000원</li>
<li>4인 : 100,000원</li>
</ul>
</section>
</body>
</html>
속성 선택자 [속성]
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
ul {
list-style:none;
}
li {
width:120px;
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
a[href] {
background:yellow;
}
</style>
</head>
<body>
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</body>
[속성 = 값] 선택자 - 특정 값을 갖는 속성에 스타일 적용
[속성 ~= 값] 여러 값 중 특정 값이 포함된 속성에 스타일 적용
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
ul {
list-style:none;
}
li {
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
.flat {
background:blue;
color:white;
}
[class ~="button"] {
border: 2px solid black;
box-shadow: rgba(0,0,0,0.4) 5px 5px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#" class="button">메뉴 3</a></li>
<li><a href="#" class="flat button" >메뉴 4</a></li>
</ul>
</body>
[속성 |= 값] 특정 값이 포함된 속성에 스타일 적용
[속성 ^= 값] 특정 값으로 시작하는 속성에 스타일 적용
[속성 $= 값] 특정 값으로 끝나는 속성에 스타일 적용
[속성 *= 값] 값의 일부가 일치하는 속성에 스타일 적용
:link 가상 클래스 - 방문하지 않은 링크에 스타일 적용
:visited 가상 클래스 - 방문한 링크에 스타일 적용
:hover 가상 클래스 - 웹 요소에 마우스 커서를 올려놓을때의 스타일 적용
:active 가상 클래스 - 웹 요소를 활성화했을때 스타일 적용
:focus 가상 클래스 - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>link 스타일</title>
<style>
.container {
width: 960px;
margin : 0 auto;
}
.navi{
width:960px;
height:60px;
padding-bottom:10px;
border-bottom:2px solid #ccc;
}
.navi ul{
list-style: none;
padding-top:10px;
padding-bottom:5px;
}
.navi ul li {
display:inline-block;
width:150px;
padding:10px;
}
.navi a:link, .navi a:visited {
font-size:14px;
padding: 10px;
text-decoration: none; /* 밑줄 없음 */
}
.navi a:hover, .navi a:focus {
background-color:#222; /* 배경 색 */
color:#fff; /* 글자 색 */
}
.navi a:active {
background-color:#f00; /* 배경 색 */
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법 및 요금</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
</div>
</body>
</html>
:enabled 와 :disabled 가상 클래스 - 요소를 사용할 수 있을 때와 없을 때의 스타일 지정
:checked 가상 클래스 - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 가상 클래스 </title>
<style>
body {
background-color:#fff;
}
form fieldset{
margin-bottom:25px;
}
form legend{
font-size:15px;
font-weight:600;
}
input:disabled {
background:#ddd;
border:1px #ccc solid;
}
input:checked + span {
color:blue;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>사용자 정보</legend>
<label>이름 <input type="text" disabled></label>
</fieldset>
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요</p>
<label><input type="radio" name="subject" value="speaking"><span>회화</span></label>
<label><input type="radio" name="subject" value="grammar"><span>문법</span></label>
<label><input type="radio" name="subject" value="writing"><span>작문</span></label>
</fieldset>
</form>
</body>
</html>
:root 가상 클래스 - 문서 전체에 적용
:nth-child(n) :nth-last-child(n) 가상 클래스 - 자식 요소의 위치에 따라 스타일 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>가상 클래스</title>
<style>
#container {
text-align:center;
color:#2b2b2b;
}
table, tb, th {
border:1px solid #ccc;
}
table {
width:200px;
margin:0 auto;
border-collapse:collapse;
}
td {
text-align:left;
padding:10px;
padding-left:20px;
}
table tr:nth-child(2n+1) {
background:lightgray;
color:black;
}
</style>
</head>
<body>
<div id="container">
<h1>건강에 좋은 건강 식품</h1>
<table>
<tr>
<td>블루베리</td>
</tr>
<tr>
<td>귀리</td>
</tr>
<tr>
<td>토마토</td>
</tr>
<tr>
<td>시금치</td>
</tr>
<tr>
<td>적포도주</td>
</tr>
<tr>
<td>견과류</td>
</tr>
<tr>
<td>브로콜리</td>
</tr>
<tr>
<td>연어</td>
</tr>
<tr>
<td>마늘</td>
</tr>
<tr>
<td>녹차</td>
</tr>
</table>
</div>
</body>
</html>
:nth-of-type(n) , :nth-last-of-type(n) - 특정 태그 위치에 스타일 적용
:first-child , :last-child 가상클래스 - 첫번째, 마지막 요소에 스타일 적용
:first-of-type , :last-of-type - 형제 관계 요소의 위치에 따라 스타일 적용
:only-child , :only-of-type - 하나뿐인 자식 요소에 스타일 적용
:target - 앵커 목적지에 스타일 적용
:not - 특정 요소가 아닐 때 스타일 적용
::first-line, ::first-letter - 첫 번째 줄 , 첫번째 글자에 스타일 적용
::before, ::after 요소 - 내용의 앞 뒤에 콘텐츠 추가
CSS3애니메이션
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.box {
margin-top: 50px;
margin-left: 100px;
padding: 20px;
height: 60px;
-webkit-animation-name: moving;
-moz-animation-name: moving;
-o-animation-name: moving;
animation-name: moving;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes moving {
from {
width: 200px;
background: #faef7c;
opacity: 0.5;
transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ff9400;
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@-moz-keyframes moving {
from {
width: 200px;
background: #faef7c;
opacity: 0.5;
transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ff9400;
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@-o-keyframes moving {
from {
width: 200px;
background: #faef7c;
opacity: 0.5;
transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ff9400;
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes moving {
from {
width: 200px;
background: #faef7c;
opacity: 0.5;
transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ff9400;
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="box">
<h3>CSS3 Animation</h3>
</div>
</body>
</html>
transform: 변형함수;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 200px;
height: 134px;
border: 1px solid black;
float:left;
margin:40px;
}
.movex:hover {
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
-moz-transform: translateX(50px);
-o-transform: translateX(50px);
transform: translateX(50px); 마우스 오버 하면 50px 만큼 이동
}
.movey:hover {
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
-moz-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
}
.movexy:hover {
-webkit-transform: translate(10px, 20px);
-ms-transform: translate(10px, 20px);
-moz-transform: translate(10px, 20px);
-o-transform: translate(10px, 20px);
transform: translate(10px, 20px);
}
</style>
</head>
<body>
<div class="origin">
<div class="movex">
<img src="images/bus.jpg">
</div>
</div>
<div class="origin">
<div class="movey">
<img src="images/bus.jpg">
</div>
</div>
<div class="origin">
<div class="movexy">
<img src="images/bus.jpg">
</div>
</div>
</body>
</html>
scale - 요소 확대/ 축소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 210px;
height: 200px;
border: 1px solid black;
float: left;
margin: 40px;
}
.scalex:hover {
-webkit-transform: scaleX(1.2);
-ms-transform: scaleX(1.2);
-moz-transform: scaleX(1.2);
-o-transform: scaleX(1.2);
transform: scaleX(1.2);
}
.scaley:hover {
-webkit-transform: scaleY(1.5);
-ms-transform: scaleY(1.5);
-moz-transform: scaleY(1.5);
-o-transform: scaleY(1.5);
transform: scaleY(1.5);
}
.scale:hover {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
-moz-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
}
</style>
</head>
<body>
<div class="origin">
<div class="scalex">
<img src="images/fruit.jpg">
</div>
</div>
<div class="origin">
<div class="scaley">
<img src="images/fruit.jpg">
</div>
</div>
<div class="origin">
<div class="scale">
<img src="images/fruit.jpg">
</div>
</div>
</body>
</html>
rotate - 요소 회전하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 210px;
height: 200px;
border: 1px solid black;
float: left;
margin: 40px;
}
.rotate1:hover {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
.rotate2:hover {
-webkit-transform: rotate(-40deg);
-ms-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
}
</style>
</head>
<body>
<div class="origin">
<div class="rotate1">
<img src="images/fruit.jpg">
</div>
</div>
<div class="origin">
<div class="rotate2">
<img src="images/fruit.jpg">
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 210px;
height: 200px;
margin: 56px;
float: left;
border: 1px solid black;
-webkit-perspective: 200px;
-moz-perspective: 200px;
-ms-perspective: 200px;
perspective: 200px;
}
.rotatex {
-webkit-transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
-o-transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
transform: rotateX(45deg);
}
.rotatey {
-webkit-transform: rotateY(45deg);
-moz-transform: rotateY(45deg);
-o-transform: rotateY(45deg);
-ms-transform: rotateY(45deg);
transform: rotateY(45deg);
}
.rotatez {
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.rotatexyz {
-webkit-transform: rotate3d(2.5, 1.2, -1.5, 45deg);
-moz-transform: rotate3d(2.5, 1.2, -1.5, 45deg);
-o-transform: rotate3d(2.5, 1.2, -1.5, 45deg);
-ms-transform: rotate3d(2.5, 1.2, -1.5, 45deg);
transform: rotate3d(2.5, 1.2, -1.5, 45deg);
}
</style>
</head>
<body>
<div class="origin">
<div class="rotatex"></div>
</div>
<div class="origin">
<div class="rotatey"></div>
</div>
<div class="origin">
<div class="rotatez"></div>
</div>
<div class="origin">
<div class="rotatexyz"></div>
</div>
</body>
</html>
skew - 요소를 비틀어 왜곡하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 160px;
height: 240px;
border: 1px solid black;
float: left;
margin: 100px;
}
.skewx:hover {
-webkit-transform: skewX(30deg);
-ms-transform: skewX(30deg);
-moz-transform: skewX(30deg);
-o-transform: skewX(30deg);
transform: skewX(30deg);
}
.skewy:hover {
-webkit-transform: skewY(15deg);
-ms-transform: skewY(15deg);
-moz-transform: skewY(15deg);
-o-transform: skewY(15deg);
transform: skewY(15deg);
}
.skewxy:hover {
-webkit-transform: skew(-25deg, -15deg);
-ms-transform: skew(-25deg, -15deg);
-moz-transform: skew(-25deg, -15deg);
-o-transform: skew(-25deg, -15deg);
transform: skew(-25deg, -15deg);
}
</style>
</head>
<body>
<div class="origin">
<div class="skewx">
<img src="images/rose.jpg">
</div>
</div>
<div class="origin">
<div class="skewy">
<img src="images/rose.jpg">
</div>
</div>
<div class="origin">
<div class="skewxy">
<img src="images/rose.jpg">
</div>
</div>
</body>
</html>
transform-origin: x축 y축 z축
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.origin {
width: 160px;
height: 240px;
border: 1px solid black;
float: left;
margin: 40px;
}
.rose {
-moz-transform: rotateZ(10deg);
-ms-transform: rotateZ(10deg);
-o-transform: rotateZ(10deg);
-webkit-transform: rotateZ(10deg);
transform: rotateZ(10deg);
}
.ltop .rose {
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}
.rtop .rose {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
-moz-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
}
.lbottom .rose {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
}
.rbottom .rose {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
}
</style>
</head>
<body>
<div class="origin">
<div class="ltop">
<img src="images/rose.jpg" class="rose">
</div>
</div>
<div class="origin">
<div class="rtop">
<img src="images/rose.jpg" class="rose">
</div>
</div>
<div class="origin">
<div class="lbottom">
<img src="images/rose.jpg" class="rose">
</div>
</div>
<div class="origin">
<div class="rbottom">
<img src="images/rose.jpg" class="rose">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
#no-pers, #pers {
width:152px;
height:180px;
border:1px solid black;
margin:30px;
float:left;
}
.rotatex img {
-webkit-transform: rotateX(50deg);
-ms-transform: rotateX(50deg);
-moz-transform: rotateX(50deg);
-o-transform: rotateX(50deg);
transform: rotateX(50deg);
}
#pers {
-moz-perspective: 300px;
-ms-perspective: 300px;
-webkit-perspective: 300px;
perspective: 300px;
}
</style>
</head>
<body>
<h4>원본 이미지</h4>
<div>
<img src="images/sunset.jpg" alt="">
</div>
<div id="no-pers">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
<div id="pers">
<div class="rotatex">
<img src="images/sunset.jpg" alt="">
</div>
</div>
</body>
</html>
트랜지션
transition-duration : 트랜지션 시간 지정
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.tr1 {
width: 100px;
height: 100px;
background-color: blue;
border: 1px solid black;
-webkit-transition-property: width, height;
-moz-transition-property: width, height;
-o-transition-property: width, height;
transition-property: width, height;
-webkit-transition-duration: 2s, 1s;
-moz-transition-duration: 2s, 1s;
-o-transition-duration: 2s, 1s;
transition-duration: 2s, 1s;
}
.tr1:hover {
width:200px;
height:120px;
}
</style>
</head>
<body>
<div class="tr1"></div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
h1 {
text-align:center;
font-size:52px;
}
.tr1 {
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
-webkit-transition-property: background-color, transform, width, height;
-moz-transition-property: background-color, transform, width, height;
-o-transition-property: background-color, transform, width, height;
transition-property: background-color, transform, width, height;
-webkit-transition-duration: 2s, 3s;
-moz-transition-duration: 2s, 3s;
-o-transition-duration: 2s, 3s;
transition-duration: 2s, 3s;
}
.tr1:hover {
width: 200px;
height: 200px;
background-color: #ff6e5f;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="tr1"><h1>!</h1> </div>
</body>
</html>
transition-timing-function - 트랜지션 속도 곡선 지정
transition-delay - 지연 시간 설정
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transition timing function</title>
<style>
#ex {
position: relative;
width: 500px;
height: 150px;
margin: 0 auto;
border: 1px solid #aaa;
border-radius: 30px;
padding: 20px;
}
#ex:hover .box{
-webkit-transform:rotate(720deg);
transform:rotate(720deg);
margin-left:420px;
}
.box {
font-size:12px;
position:relative;
width:60px;
height:60px;
margin-bottom:10px;
background-color:#eee;
}
.box p {
text-align: center;
padding-top: 4px;
}
#no-delay {
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
border: 1px solid #ff6a00;
}
#delay {
-webkit-transition-duration: 3s;
-moz-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
border: 1px solid #006aff;
}
</style>
</head>
<body>
<div id="ex">
<div id="no-delay" class="box"> <p>no-delay</p> </div>
<div id="delay" class="box"> <p>delay</p> </div>
</div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.tr1 {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
-webkit-transition: 2s ease-in;
-moz-transition: 2s ease-in;
-o-transition: 2s ease-in;
transition: 2s ease-in;
}
.tr1:hover {
width: 100px;
height: 100px;
background-color: #ff6e5f;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
</style>
</head>
<body>
<div class="tr1"></div>
</body>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
div {
width:100px;
height:100px;
margin:100px;
background:#0094ff;
}
.box {
-webkit-transition: 2s ease-in;
-moz-transition: 2s ease-in;
-o-transition: 2s ease-in;
transition: 2s ease-in;
}
.box:hover {
-webkit-transform: scale(2) perspective(120px) rotateX(180deg);
-moz-transform: scale(2) perspective(120px) rotateX(180deg);
-o-transform: scale(2) perspective(120px) rotateX(180deg);
-ms-transform: scale(2) perspective(120px) rotateX(180deg);
transform: scale(2) perspective(120px) rotateX(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
애니메이션
@keyframes 속성 - 애니메이션 지점 설정하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
-webkit-animation-name: change-bg;
-moz-animation-name: change-bg;
-o-animation-name: change-bg;
animation-name: change-bg;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
@-webkit-keyframes change-bg{
from {
background-color:blue;
border:1px solid black;
}
to {
background-color:#a5d6ff;
border-radius:50%;
}
}
@-moz-keyframes change-bg {
from {
background-color: blue;
border: 1px solid black;
}
to {
background-color: #a5d6ff;
border-radius: 50%;
}
}
@-o-keyframes change-bg {
from {
background-color: blue;
border: 1px solid black;
}
to {
background-color: #a5d6ff;
border-radius: 50%;
}
}
@keyframes change-bg {
from {
background-color: blue;
border: 1px solid black;
}
to {
background-color: #a5d6ff;
border:1px solid blue;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
div {
width: 100px;
height: 100px;
float:left;
margin:50px;
}
#box1 {
background-color: #4cff00;
border: 1px solid black;
-webkit-animation-name: shape;
-moz-animation-name: shape;
-o-animation-name: shape;
animation-name: shape;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
#box2 {
background-color: #8f06b0;
border: 1px solid black;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-o-animation-name: rotatboxe;
animation-name: rotate;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}
@-webkit-keyframes shape{
from {
border:1px solid black;
}
to {
border: 1px solid black;
border-radius: 50%;
}
}
@-moz-keyframes shape {
from {
border: 1px solid black;
}
to {
border: 1px solid black;
border-radius: 50%;
}
}
@-o-keyframes shape {
from {
border: 1px solid black;
}
to {
border: 1px solid black;
border-radius: 50%;
}
}
@keyframes shape {
from {
border: 1px solid black;
}
to {
border: 1px solid black;
border-radius: 50%;
}
}
@-webkit-keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(45deg);
}
}
@-moz-keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(45deg);
}
}
@-o-keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(45deg);
}
}
@keyframes rotate {
from {
transform:rotate(0deg)
}
to {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
animation-duration - 애니메이션 실행 시간 설정
animation-direction - 애니메이션 방향 지정
animation-iteration-count - 반복횟수 지정
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.box {
margin-top: 50px;
margin-left: 100px;
padding: 20px;
height: 60px;
-webkit-animation-name: moving;
-moz-animation-name: moving;
-o-animation-name: moving;
animation-name: moving;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
-o-animation-direction: normal;
animation-direction: normal;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes moving {
from {
width: 200px;
background: #faef7c;
opacity: 0.5;
transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ff9400;
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@-moz-keyframes moving {
from {
width: 200px;
background: #faef7c;
opacity: 0.5;
transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ff9400;
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@-o-keyframes moving {
from {
width: 200px;
background: #faef7c;
opacity: 0.5;
transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ff9400;
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes moving {
from {
width: 200px;
background: #faef7c;
opacity: 0.5;
transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ff9400;
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="box">
<h3>CSS3 Animation</h3>
</div>
</body>
</html>
'CSS3' 카테고리의 다른 글
| [4일차] DO IT HTML/CSS/JAVASCRIPT 웹 표준의 정석/p293~p438/선택자,트랜지션,반응형 플렉스 (0) | 2021.03.05 |
|---|---|
| [3일차] DO IT HTML/CSS/JAVASCRIPT 웹 표준의 정석/p167~p292/CSS기본,텍스트로 표현하는 다양한 스타일,CSS 박스모델 (0) | 2021.03.04 |
| [5일차] DO IT HTML5&CSS3/p490 ~ 550/반응형웹디자인 (0) | 2021.01.13 |
| [3일차] DO IT HTML5&CSS3/P294 ~ 368/Box Model,Position,column (0) | 2021.01.11 |
| [2일차] DO IT HTML5&CSS3 / p186 ~ 292/ font , background,ul,li 스타일 (0) | 2021.01.11 |
