HTML
HTML(transition)_2024-07-10
앵보몬
2024. 7. 10. 14:47
728x90
반응형
전환(transition)
전환(transition)을 위해 제공되는 속성(property)는 다음과 같습니다.
1. transition
2. transition-delay
3. transition-duration
4. transition-property
5. transition-timing-function
transition 속성
transition 속성은 다음과 같은 순서로 정의할 수 있습니다.
1. 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정합니다.
2. 추가할 전환 효과가 지속될 시간을 설정합니다.
다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비가 1초 동안 3배로 늘어나는 예제입니다.
예제
<style>
div.keyboard {
width: 100px;
-webkit-transition: width 1s;
transition: width 1s;
}
div.keyboard:hover { width: 300px; }
</style>
또한, 해당 요소의 여러 속성을 동시에 변경할 수도 있습니다.
다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비뿐만 아니라 높이까지도 변경하는 예제입니다.
예제
<style>
#resize {
height: 100px;
width: 150px;
-webkit-transition: width 1s, height 3s;
transition: width 1s, height 3s;
}
#resize:hover { width: 300px; height: 500px; }
</style>
지속 시간의 기본값은 0초이므로, 효과가 지속될 시간을 명시하지 않으면 아무런 효과도 나타나지 않을 것입니다.
transition-timing-function 속성
transition-timing-function 속성은 전환(transition) 효과의 시간당 속도를 설정합니다.
transition-timing-function 속성의 속성값으로는 다음과 같은 값을 설정할 수 있습니다.
1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
2. ease : 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다.
3. ease-in : 전환(transition) 효과가 천천히 시작됩니다.
4. ease-out : 전환(transition) 효과가 천천히 끝납니다.
5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝납니다.
6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.
예제
<style>
div {
width: 100px;
-webkit-transition: width 1s;
transition: width 1s;
}
#div_01 {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
#div_05 {
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
div:hover { width: 300px; }
</style>
transition-delay 속성
transition-delay 속성은 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정합니다.
전환(transition) 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 비로소 시작됩니다.
예제
<style>
#resize {
height: 100px;
width: 150px;
-webkit-transition: width 1s, height 2s;
transition: width 1s, height 2s;
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
#resize:hover { width: 300px; height: 300px; }
</style>
전환(transition) 효과와 변형(transform) 효과의 동시 적용
전환(transition) 효과와 변형(transform) 효과를 같이 적용할 수도 있습니다.
예제
<style>
#windmill {
height: 100px;
width: 100px;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
#windmill:hover {
width: 300px;
height: 300px;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
CSS3 transition 속성
| transition | 모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
| transition-property | 요소에 추가할 전환(transition) 효과를 설정함. |
| transition-duration | 전환(transition) 효과가 지속될 시간을 설정함. |
| transition-timing-function | 전환(transition) 효과의 시간당 속도를 설정함. |
| transition-delay | 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함. |
https://www.tcpschool.com/css/css3_transform_transition
images.zip
0.19MB
test89.html
0.00MB
ps-1.html
0.00MB
ps-2.html
0.00MB
ps-3.html
0.00MB
test89.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container{
width: 600px;
height: 200px;
margin: 20px auto;
font-size: x-large;
line-height: 100px;
}
.origin{
width: 350px;
height: 100px;
float: left;
margin: 40px;
perspective: 200px;
}
.origin>div{
width: 350px;
height: 100px;
background-color: black;
transition: all 3s;
}
#name{
color: white;
font-weight: bolder;
text-align: center;
}
#name{
transform: skew(-15deg);
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="name">css변형 함수 익히기</div>
</div>
</body>
</html>
ps-1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 선택자</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 {
float: left;
width: 150px;
padding: 10px;
}
.navi a:link,
.navi a:visited {
display: block;
font-size: 14px;
color: #000;
padding: 10px;
text-decoration: none;
text-align: center;
}
.navi a:hover,
.navi a:focus {
background-color: skyblue;
color: #fff;
}
.navi a:active {
background-color: blue;
}
.contents{
border: 2px solid black;
font-weight: bolder;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-bottom: 20px;
color: black;
background-color: white;
width: 500px;
height: 250px;
text-align: justify;
padding: 20px 30px;
margin: 30px auto;
}
#intro:target {
background-color:#0069e0; /* 배경색 - 파란색 */
color:#fff; /* 글자색 - 흰색 */
}
#room:target {
background-color:#ff9844; /* 배경색 - 주황색 */
}
#reservation:target{
background-color:#fff8dc; /* 배경색 - 베이지색 */
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#intro">이용 안내</a></li>
<li><a href="#room">객실 소개</a></li>
<li><a href="#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
<li><a href="ps-3.html">오시는길</a></li>
</ul>
</nav>
<div id="intro" class="contents">
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p>
</div>
<div id="room" class="contents">
<h2>객실 소개</h2>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
</div>
<div id="reservation" class="contents">
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor. </p>
</div>
</div>
</body>
</html>
ps-2.html
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원 가입</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 {
float: left;
width: 150px;
padding: 10px;
}
.navi a:link,
.navi a:visited {
display: block;
font-size: 14px;
color: #000;
padding: 10px;
text-decoration: none;
text-align: center;
}
.navi a:hover,
.navi a:focus {
background-color: skyblue;
color: #fff;
}
.navi a:active {
background-color: blue;
}
#signup {
background:#fff;
border:1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left:5px;
padding-bottom: 10px;
}
#signup ul li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup fieldset:first-of-type label {
float: left;
font-size: 13px;
width: 60px;
}
/* #signup input[type=text], input[type=tel] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
} */
#signup input:not([type=radio]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}
#signup input:not([type=radio]):hover {
border-color: #f00;
}
#signup input:checked + label { /* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
color:red; /* 글자색 */
font-weight:bold; /* 글자 굵게 */
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
font: 16px 맑은고딕,굴림,돋움;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
#signup b {
float: left;
font-size: 13px;
width: 110px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="ps-1.html#intro">이용 안내</a></li>
<li><a href="ps-1.html#room">객실 소개</a></li>
<li><a href="ps-1.html#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
<li><a href="ps-3.html">오시는길</a></li>
</ul>
</nav>
<form id="signup">
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="fullname">이름</label>
<input id="fullname" name="fullname" type="text" required placeholder="홍길동">
</li>
<li>
<label for="tel">연락처</label>
<input id="tel" name="tel" type="tel" required placeholder="xxx-xxxx-xxxx">
</li>
</ul>
</fieldset>
<fieldset>
<legend>객실 형태</legend>
<ul>
<li>
<input type="radio" name="room" id="basic">
<label for="basic">기본형(최대 2인)</label>
<li>
<li>
<input type="radio" name="room" id="family">
<label for="family">가족형(최대 8인)</label>
</li>
</ul>
</fieldset>
<button type="submit"> 제출 </button>
</form>
</div>
</body>
</html>
ps-3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>회원 가입</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 {
float: left;
width: 150px;
padding: 10px;
}
.navi a:link,
.navi a:visited {
display: block;
font-size: 14px;
color: #000;
padding: 10px;
text-decoration: none;
text-align: center;
}
.navi a:hover,
.navi a:focus {
background-color: skyblue;
color: #fff;
}
.navi a:active {
background-color: blue;
}
#signup {
background: #fff;
border: 1px solid #222;
border-radius: 5px;
padding: 20px;
width: 400px;
margin: 30px auto;
}
#signup fieldset {
border: 1px solid #ccc;
margin-bottom: 30px;
}
#signup legend {
font-size: 16px;
font-weight: bold;
padding-left: 5px;
padding-bottom: 10px;
}
#signup ul li {
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
#signup fieldset:first-of-type label {
float: left;
font-size: 13px;
width: 60px;
}
/* #signup input[type=text], input[type=tel] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
} */
#signup input:not([type="radio"]) {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
width: 200px;
}
#signup input:not([type="radio"]):hover {
border-color: #f00;
}
#signup input:checked + label {
/* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
color: red; /* 글자색 */
font-weight: bold; /* 글자 굵게 */
}
#signup button {
border: 1px solid #222;
border-radius: 20px;
display: block;
font: 16px 맑은고딕, 굴림, 돋움;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
}
#signup b {
float: left;
font-size: 13px;
width: 110px;
}
#hotel {
border: 1px solid #ccc;
border-radius: 80%;
box-shadow: 5px 5px 30px 2px whitesmoke;
width: 100%;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="ps-1.html#intro">이용 안내</a></li>
<li><a href="ps-1.html#room">객실 소개</a></li>
<li><a href="ps-1.html#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
<li><a href="ps-3.html">오시는길</a></li>
</ul>
</nav>
<img id="hotel" src="hotel.jpg" />
</div>
</body>
</html>
728x90
반응형