1. 가상요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>특수효과</title>
</head>
<style>
/* 첫번째 예제 - ::before, ::after */
body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background: #333;
color: #fff;
}
/* .is-required::before는 앞쪽에 붙임 */
.is-required::before {
content: '⭐';
padding-right: 2px;
}
/* .is-required::after는 뒤쪽에 붙임 */
.is-required::after {
content: '⭐';
padding-left: 2px;
}
/* 두번째 예제 - 기존 배경과 겹치게 하기*/
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
}
header h1 {
font-size: 6rem;
margin: 1rem;
}
/* 기존에 있는 black배경과 겹치게 함 */
header::before {
content: '';
background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* z-index 겹쳤을 떄 아래쪽(기본은 0) */
z-index: -1;
/* opacity 투명도 */
opacity: 0.5;
}
</style>
<body>
<!-- example 1 -->
<!-- <label class="is-required" for="name">Name</label>
<input type="text" /> -->
<!-- example 2 -->
<header>
<h1>Hello World</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic!
</p>
</header>
</body>
</html>2. 텍스트 쉐도우(text-shadow)
글자 그림자 효과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 그림자 효과</title>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 5rem;
}
h1.a {
/* 가로 | 세로 | color */
/* rem은 기본은 16px이다. px로 해도 된다 */
text-shadow: 0.2rem 0.2rem steelblue;
}
h1.b {
/* 가로 | 세로 | 번짐 */
text-shadow: 0.4rem 0.3rem 0.7rem steelblue;
}
h1.c {
/* 글자가 흰색일때 쉐도우로 나타냄 */
color: #fff;
text-shadow: 0.2rem 0.2rem 1rem steelblue;
}
h1.d {
/* 음수일때 반대쪽 */
text-shadow: -0.4rem -0.3rem 0.7rem steelblue;
}
</style>
</head>
<body>
<h1 class="a">Welcome To My Course</h1>
<h1 class="b">Welcome To My Course</h1>
<h1 class="c">Welcome To My Course</h1>
<h1 class="d">Welcome To My Course</h1>
</body>
</html>3. 박스쉐도우(box-shadow)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
}
.box {
padding: 1rem;
margin: 1rem;
background: coral;
color: #fff;
/* 가로 | 세로 | color */
/* box-shadow: 10px 10px teal; */
/* 가로 | 세로 | 번짐정도 | color */
/* box-shadow: 5px 5px 20px teal; */
/* 음수값 적용시 반대방향 그림자 생성 */
/* box-shadow: -5px -5px 20px teal; */
/* 가로 | 세로 | 번짐정도 | 번짐거리 | color */
box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.3);
/* 색의 종류 1.red(이름있는색) 2.#색깔번호(16진수) 3.rgb색, 4.rgba색(rgb에서 투명도가 추가됨) */
/* 멀티 박스 쉐도우 적용, inset은 안쪽 */
/* box-shadow: inset 1px 1px 20px teal, 10px 10px 20px olive; */
/* border-radius는 테두리 둥글게 */
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h3>Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, vel.
</p>
</div>
<div class="box">
<h3>Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, vel.
</p>
</div>
<div class="box">
<h3>Heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, vel.
</p>
</div>
</div>
</body>
</html>4. 트랜스폼(transform)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>트랜스폼</title>
<style>
body {
background: #333;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box {
background: white;
width: 300px;
height: 300px;
/* Transform - rotate, scale, skew */
/* rotate는 회전 */
transform: rotate(25deg);
/* transform-origin은 회전 기준, 없으면 중앙이 기준 */
transform-origin: top left;
/* skew는 뒤틀림 */
/* transform: skew(25deg); */
/* scale은 크기 */
/* transform: scale(2); */
/* 트랜지션은 변화되는데 걸리는 시간 */
transition: all 1s ease-in-out;
}
/* hover는 마우스 올리면 */
.box:hover {
transform: rotate(180deg);
/* transform: skew(-25deg); */
/* transform: scale(1); */
/* border-radius: 50%; */
/* background-color: blue; */
/* translate는 이동 */
/* transform: translateY(100px); */
/* transform: translateX(-100px); */
/* x & y */
/* transform: translate(100px, 100px); */
/* transform: translate3d(100px, 100px, 100px); */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>5. 트랜지션(transition)
변화의 시간
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>트랜지션 변화의 시간</title>
<style>
body {
background: #333;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.box {
background: white;
width: 100px;
height: 100px;
/* transition-property: background-color border-radius height width; */
transition-property: all;
transition-duration: 3s;
/* transition-timing-function: ease-out; */
/* transition-delay: 2s; */
/* 단축키워드 - property/duration/timing-function/delay */
/* ease-in-out은 천천히 */
transition: all 2s ease-in-out;
}
.box:hover {
background: red;
border-radius: 50%;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>6. 애니메이션(animation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>애니메이션</title>
<style>
body {
background: #333;
}
.box {
font-size: 200px;
width: 200px;
height: 200px;
background: transparent;
position: relative;
/* 애니메이션 이름 */
animation-name: animate2;
/* 시간 */
animation-duration: 3s;
/* 횟수 */
animation-iteration-count: infinite;
/* 마지막 상태 */
animation-fill-mode: backwards;
/* 진행방향 normal 한방향, alternate 왔다갔다*/
animation-direction: alternate;
}
/* 애니메이션 사용시 따로 @keyframes 이름 {}를 만든다. */
@keyframes animate1 {
/* 처음 시작이 0, 끝날때 100 */
0% {
/* 이동없음, 색은 빨간색 */
transform: translateX(0);
background-color: red;
}
100% {
/* 가로로 500%이동 하면서 1.5배 크기 회전 360도 */
transform: translateX(500%) scale(1.5) rotate(360deg);
background-color: blue;
}
}
@keyframes animate2 {
/* % 방법 */
0% {
left: 0px;
top: 0px;
background-color: white;
border-radius: 0 0 0 0;
}
25% {
left: 300px;
top: 0px;
background-color: red;
border-radius: 50% 0 0 0;
}
50% {
left: 300px;
top: 300px;
background-color: green;
border-radius: 50% 50% 0 0;
}
75% {
left: 0px;
top: 300px;
background-color: blue;
border-radius: 50% 50% 50% 0;
}
100% {
left: 0px;
top: 0px;
background-color: white;
border-radius: 50% 50% 50% 50%;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
안녕하세요!!