본 내용은 해당 강의 토대로 작성
Advanced CSS
1. Transitions
- 어떤 상태에서 다른 상태로 변화할 때 애니메이션 효과를 줄 수 있다.
- 규칙
- transitions는 state가 없는 요소에 붙어야 한다.
- 그렇지 않으면 자연스럽게 동작하지 않는다.
- state에 들어있는 것을 기준으로 애니메이션 효과를 준다
- 사용 예시
<head>
<style>
a {
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 55px;
transition:
background-color 1s ease-in-out,
color 1s ease-in-out,
border-radius 1s ease-in-out;
} /* all 5s ease-in-out */
a:hover {
border-radius: 15px;
color:tomato;
background-color: wheat;
}
</style>
</head>
<body>
<a href="#">Go home</a>
</body>- a:hover에서 변경되는 것들을 기준으로 애니메이션 효과가 적용된다.
- color 1s ease-in-out
- 적용할 속성, 시간, 변화하는 방법 순으로 쓴다
- 바뀌는 모든 속성에 적용할 때는 all 1s ease-in-out을 쓴다.
- https://matthewlein.com/tools/ceaser 에서 다양한 변화 방법을 볼 수 있다.
- 자신이 원하는 Transition을 만들 수 있다.
2. Transformations
- 한 요소를 원하는대로 변형할 수 있다.
- matrix, rotate, scale 등이 있다.
- Box element를 변형하지 않는다.
- margin, padding이 적용되지 않는다.
- 옆의 요소에게 영향을 끼치지 않는다.
- Transformation 끼리 결합할 수 있다.
- Transitions와 함께 사용해서 화려한 효과를 넣을 수 있다.
- GPU를 사용하는 3D효과
- 사용 예시
<head>
<style>
img {
border: 5px solid black;
border-radius: 50%;
transition: transform 2s ease-in-out;
}
img:hover {
transform: rotate(360deg) scale(0.5);
}
</style>
</head>
<body>
<img src="img/anything.png"/>
</body>- transform: rotate(360deg) scale(0.5)
- 회전과 작아지는 효과
- transition: transform 2s ease-in-out과 조합해서 자연스럽게 돌아가며 작아지는 효과가 구현된다.
- border-radius: 50%는 이미지를 원으로 만들 수 있다.
3. Animations
- 자동으로 움직이는 Animation 효과를 넣을 수 있다.
- 사용 예시
<head>
<style>
@keyframes superSexyCoinFlip{
from{
transform: rotateY(0);
}
to{
transform: rotateY(180deg);
}
}
img {
border: 10px solid black;
border-radius: 50%;
animation: superSexyCoinFlip 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/anything.png"/>
</body>- @keyframes 뒤에 Animation의 이름을 적는다.
- form에서 to로 효과를 적용한다.
- 적용할 요소 안에 animation:뒤에 설정한 Animation의 이름을 적어준다.
- infinite는 무한 반복한다는 의미이다.
- 아래처럼, 단계를 더 세분화할 수 있다.
<head>
<style>
@keyframes superSexyCoinFlip{
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg) translateY(100px);
}
100% {
transform: rotateY(0);
}
}
img {
border: 10px solid black;
border-radius: 50%;
width: 200px;
animation: superSexyCoinFlip 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/anything.png"/>
</body>- 퍼센트로 단계를 세분화 할 수 있다.
- 더 자연스럽게 많은 효과를 넣고 싶으면 원하는 대로 추가할 수 있다.
- https://animista.net 에 많은 Animation효과를 볼 수 있다.
4. Media Queries
- Media query를 이용하여 반응형 웹사이트를 만들 수 있다.
- 사용 예시
<head>
<style>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
flex-direction: column;
}
div {
background-color: teal;
width: 200px;
height: 200px;
}
@media screen and (max-width: 600px) {
div {
background-color: tomato;
}
}
@media screen and (min-width: 601px) and (max-width: 1200px) {
div {
background-color: wheat;
}
}
@media screen and (min-width: 1200px) {
div {
background-color: turquoise;
}
}
span {
font-size: 36px;
}
@media screen and (orientation: landscape) {
span {
display: none;
}
}
</style>
</head>
<body>
<div></div>
<span>Please flip your phone</span>
</body>- **@media **로 media query호출한 뒤 조건을 입력한다.
- 조건이 참일 때 CSS를 실행한다.
- 괄호를 열고 안에 요소를 적어야한다.
- screen : 우리가 보는 스크린에 적용한다는 의미
- print : 인쇄 환경에서의 출력
- and를 써서 연결된다.
- max : 숫자보다 작을 때
- min: 숫자보다 클 때
- min-device-width : 모바일 환경에서의 조건
- orientation : landscape로 가로모드일 때 출력 조건을 입력할 수 있다.
- portrait : 세로모드
느낀점
와 정말 재밌게 배웠다. 실무에서 엄청 유용할 것 같은 기능들을 많이 배울 수 있었다. GIF로만 애니메이션을 출력할 수 있을 줄 알았는데 요즘은 하드웨어의 발달로 CSS로도 충분히 좋은 효과들을 낼 수 있는 것이 대단한 것 같다.
'programming study > Clone coding' 카테고리의 다른 글
| [노마드코더]코코아톡 클론코딩 (6)(2021.1.7 ~ 8) (0) | 2021.01.08 |
|---|---|
| [노마드코더]코코아톡 클론코딩 (5)(2021.1.7) (0) | 2021.01.07 |
| [노마드코더]코코아톡 클론코딩 (3)(2021.1.5) (0) | 2021.01.05 |
| [노마드코더]코코아톡 클론코딩 (2)(2021.1.4) (0) | 2021.01.04 |
| [노마드코더]코코아톡 클론코딩 (1)(2021.1.1 ~ 2) (1) | 2021.01.02 |
