코코아톡 클론코딩(5일차)
ㄱㄱㄱㄱㄱ 가보자고
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
body {
height: 100vh;
}
body:hover{
background-color: darkgreen;
}
body:focus-within {
background-color: crimson;
}
a:visited {
color: coral;
}
a:hover {
background-color: black;
}
a:focus {
font-size: larger;
}
body:hover input:nth-child(3){
border-radius: 10px;
}
</style>
</head>
<body>
<a href="https://apple.com">apple</a>
<input type="text">
<input type="text">
</body>
각 요소들에 마우스를 올리거나(hover) 방문한 링크에 대한 속성을 따로 정해줄 수 있다. → State 라는 개념. body:hover input:nth-child(3) 처럼 연계해서 적용할 수도 있다!
Pseudo Selector 는 “:” 만이 아니라 “::” 를 사용하는 것들이 있음.
1
2
3
4
5
6
p::first-line {
text-decoration: line-through;
}
p::selection {
color: green;
}
first-line 은 말 그대로 p의 content 중 첫 줄에 오는 것들에 대한 속성을 부여하는 것임. selection 은 클릭해서 드래그할 때 속성을 부여하는 pseudo selector.
CSS 에서 색상을 설정하는 방법은 총 3가지가 있음. 16진수(#FFFFFF), rgb(128, 128, 128), rgba(128, 128, 128, opacity value).
1
2
3
4
5
6
7
8
9
10
11
:root {
--main-color: #F32FDD;
--mycolor: #080eb9;
}
p::first-line {
text-decoration: line-through;
}
p {
color: var(--main-color);
background-color: var(--mycolor);
}
- css 에서 일종의 변수를 사용할 수 있다! → custom property 라고 부름. 단순히 색상만 적용할 수 있는 것은 아니라고 한다! 변수를 저장하고 싶으면 –(dash 2개)를 사용해야 적용되는 듯. 하나만 하거나 안 쓰면 적용이 안됨.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
a {
color: blue;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition: background-color 5s, color 3s, font-size 4s;
}
a:hover {
color: violet;
background-color: black;
font-size: 100px;
}
</style>
</head>
<body>
<a href="#">home</a>
</body>
위 코드는, state 가 변할 때 속성이 변하는 과정에서 일종의 애니메이션을 넣을 수 있는 것을 다룸. → transition! 일일이 속성을 나열해서 지정해줄 수 있고, all 을 사용하면 모든 속성에 대해 transition 을 적용할 수 있음. 근데 중요한 것, state selector 를 사용한 것에 transition 을 적용하지 말고 tag or id or class selector 에 설정을 명시해라!
https://matthewlein.com/tools/ceaser → transition 에서 사용할 수 있는 애니메이션이 조금 더 있는데, ease-in, ease-out, ease-in-out 등 다양한 설정이 있음. 위 링크에 구현해 놓은예시가 있으니 조금 살펴보면 도움이 될 것!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
img {
border: 5px solid red;
border-radius: 30px;
transition: 3s ease-in;
}
img:hover{
transform: rotateY(540deg) translateY(100px);
}
</style>
</head>
<body>
<img src="img/123.png" alt="" />
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, quas voluptatibus nobis velit, nisi, ullam commodi suscipit ea blanditiis ratione iure vel? Itaque, minus? Eaque laudantium in omnis culpa hic.</p>
</body>
</html>
- 하나 더! transform 이 있다. transform 은 회전을 시키거나, margin 이나 padding 을 설정할 필요 없이 html 요소를 state 에 따라 변화시킬 수 있다! → transition 과 함께 적용한다면 아주 훌륭한 효과를 만들 수 있을 것! 그리고, margin이나 padding 을 적용하지 않고 위치를 옮겨줄 수 있는데 이 것이 큰 장점. 다른 요소의 위치에 상관 없이 옮길 수 있어서 덮어버리는 것도 가능함. 위 예시 코드 한 번 살펴보면 좋을듯.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
@keyframes superCoinFlip {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(540deg);
}
}
img {
border: 5px solid red;
border-radius: 30px;
animation: superCoinFlip 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/123.png" alt="" />
</body>
- transfrom 을 state 에 따라서 일어나게 하지 말고, 그냥 계속 어떤 애니메이션효과를 주고 싶을 땐 어떻게 ?? → @keyframes 을 이용한다. from : 초기 상태, to : 마지막 상태. 이때, transition 은 animation 속성을 통해 설정할 수 있음.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
@keyframes superCoinFlip {
0% {
transform: rotateX(0deg);
}
25% {
opacity: 0;
}
50% {
tramsform: rotateX(30deg);
border-radius: 90px;
opacity: 1;
}
75% {
transform: rotateX(80deg);
opacity: 0;
}
100% {
transform: rotateX(0deg);
opacity: 1;
}
}
img {
border: 5px solid red;
border-radius: 30px;
animation: superCoinFlip 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/123.png" alt="" />
- 조금 더 상위호환! 0–100 사이 % 로 표현해 애니메이션을 좀 더 다채롭게 만들 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
div {
height: 120px;
width: 120px;
background-color: tan;
}
@media screen and (min-width: 300px) and (max-width: 400px) {
div {
background-color: tomato;
}
}
@media screen and (min-width: 400px) {
div {
background-color: red;
}
}
@media screen and (orientation: landscape) {
span {
display: none;
}
}
</style>
<body>
<div></div>
<span>Please Flip your phone :(</span>
</body>
- 이번엔, 반응형 웹사이트를 위한 조건을 사용할 수 있는 media query 가 있다! 기기의 해상도나 디스플레이의 다양한 정보를 가지고, 각각 다른 속성을 부여할 수 있음. → 아주 강력한 기술! 내가 해본 것은, width 가 300px 이하면 div 색은 tan, 300–400px 사이면 tomato, 400px 이상이면 red로 설정했다. 또한, 핸드폰에서 가로 모드일 때만 span 이 없어지도록 설정한 것임. 끝!
This post is licensed under CC BY 4.0 by the author.