//노마드 코더의 코코아톡 클론코딩 듣는 중//
/* transition: 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법
바꿀 거는 무조건 state에 명시가 되어 있어야 함
트랜지션은 무조건 상태가 없는 곳에 써야 함
*/
a {
color: white;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 20px;
transition: all 1s ease-in-out;
/* transition: background-color 10s ease-in-out, color 5s ease-in-out;
걍 변하는 모든 것들을 한번에 all이라고 쓸 수 있음
- ease-in; 시작과 끝이 빠름
- ease-out; 시작과 끝이 느림
- ease-in-out; 시작이 빠르고 끝이 느림
- cubic-bezier; 커스텀 하는 듯*/
}
a:hover {
border-radius: 20px;
color: tomato;
background-color: wheat;
}
https://matthewlein.com/tools/ceaser" target="_blank" rel="noopener" data-mce-href="http:// https://matthewlein.com/tools/ceaser">http:// https://matthewlein.com/tools/ceaser
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
//transform
https://developer.mozilla.org/ko/docs/Web/CSS/transform
transform - CSS: Cascading Style Sheets | MDN
CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델 (en-US)의 좌표 공간을 변경합니다.
developer.mozilla.org
<style>
img {
border: 6px solid black;
/*원이 됨 */
border-radius: 50%;
/* transform; 3d가능
다른 요소 box를 변경하지 않고 이동하기 위해서 사용함.
margin, padding 다 안 됨
여러 개 적용 가능 */
/* 트랜지션은 무조건 루트 엘리먼트에 있어야 함
없으면,, 쓰레기래 안예쁘대 ㅋㅋㅋㅋㅋ */
transition: transform 2s ease-in-out;
}
img:hover {
/* 한바퀴 돌리고, 작아졌다가 돌아옴
X,Y,Z 축에 따라 달라짐..
재밌는 게 왤케 많아,. */
transform: rotateY(360deg) scale(0.5);
}
</style>
</head>
<body>
<img src="img/logo.jpg" />
<span>ddddsg</span>
</body>
//@keyframes
<style>
/* 마우스 없이도 돌아가고 멈춤
@keyframes 애니메이션 이름 쓰고 어떻게 할 지 적어주면 됨*/
@keyframes superSexyCoinFlip {
from {
transform: rotateY(0);
}
to {
transform: rotateY(180deg) translateX(100px);
}
}
img {
border: 6px solid black;
border-radius: 50%;
/* infinite 계속 되게 만들 수 있음 */
animation: superSexyCoinFlip 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/logo.jpg" />
<span>ddddsg</span>
</body>
다른 방법
<style>
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
/* 마우스 없이도 돌아가고 멈춤
@keyframes 애니메이션 이름 쓰고 어떻게 할 지 적어주면 됨
움직이고 돌아가서 시작하는 게 안 이뻐서 바꿈
원하는 만큼 스텝을 가질 수 있음 0~100까지
2step이면 걍 from-to로 하면 됨
transform이 아니어도 되지만 추천함
border-radius도 바뀜*/
@keyframes superSexyCoinFlip {
0% {
transform: rotateY(0);
}
25% {
transform: scale(2);
}
50% {
border-radius: 0px;
transform: rotateY(180deg) translateY(100px);
border-color: tomato;
opacity: 0;
}
75% {
transform: scale(5);
}
100% {
transform: rotateY(0) translateY(0);
}
}
img {
border: 6px solid black;
border-radius: 50%;
/* infinite 계속 되게 만들 수 있음 */
width: 200px;
animation: superSexyCoinFlip 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/logo.jpg" />
<span>ddddsg</span>
</body>
//@media
...inspector에서 ...기종마다 화면 조절하는 거 볼 수 있을 줄 몰랐음ㅠㅠㅠ 역시.. 사람은 배워야 해...
<style>
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
flex-direction: column;
}
div {
background-color: teal;
width: 200px;
height: 200px;
}
/* orientation으로 폰 방향 조절 시 조건 부여
min-device-width 폰에만 적용됨*/
@media screen and (min-width: 601px) and (max-width: 1200px) and (orientation: portrait) {
div {
background-color: wheat;
}
}
span {
font-size: 36px;
}
@media screen and (orientation: landscape) {
span {
display: none;
}
}
/* @media print는 진짜 프린트할 때 적용함 */
@media print {
body {
background-color: tomato;
}
}
</style>
</head>
<body>
<div></div>
<span>please flip your phone</span>
</body>'Web Developing > CSS' 카테고리의 다른 글
| [CSS] position: inline, inline-block, flex, absolute, relative, fixed (0) | 2024.04.05 |
|---|---|
| [CSS] reset.css, variables.css, not, form의 action/ methods (0) | 2024.04.05 |
| [css] shift +opt + 위/아래, BEM, css hack (0) | 2024.04.04 |
| [CSS] custom properties, root: (0) | 2024.04.03 |
| [CSS] contributors, attributes, pseudo elements, states (1) | 2024.04.03 |