개발공부일지
CSS 2 ( flex/grid/animation-transform,transition,keyframe /media query ) 본문
Intro
CSS 2 ( flex/grid/animation-transform,transition,keyframe /media query )
보람- 2023. 6. 16. 15:38목차
1. flex-box
2. grid
3. css animation
3-1 transform
3-2 transition
3-3 keyframe
4. media query
1. flex-box
.flex-box {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
/* 가로에 대해서 정렬 */
justify-content: end;
justify-content: space-around; /* 아이템하나를 기준으로 각자의 여백을 같은크기로 배치
justify-content: space-evenly; /* 모두 여백을 같은 크기로 배치
justify-content: space-between; /* 좌우 끝에 맞추고 같은 간격으로 배치
height: 200px;
/* 진행방향에 따라서 */
align-items: center;
align-items: stretch;
flex-direction: column;
}
2. grid
.grid1 {
display: grid;
grid-template-rows: repeat(2, 50px) 100px;
grid-template-columns: repeat(4, minmax(150px, 300px));
row-gap: 10px; column-gap: 20px;
}
.grid2 {
display: grid;
grid-template-rows: 50px 100px; grid-template-columns: 50px 100px;
grid-template-areas: "header header" "menu content";
}
.grid2 > div { border: 1px solid black;}
.grid2 .header { grid-area: header; }
.grid2 .menu { grid-area: menu; }
.grid2 .content { grid-area: content; }
.grid2 .center { grid-area: center; }
3. css animation
3-1 transform
.transform div {
transform: translate(100px, 50px);
transform: rotate(45deg);
transform: scale(5);
transform: translate(100px, 50px) rotatez(45deg) scale(5);
}
3-2 transition
.transition div {
/* transition: transform 3s linear; */
/* transition: transform 3s ease, background-color 1s ease-in; */
transition: all 3s ease;
/* 모든 속성을 적용하는 all */
}
.transition:hover div {
/* transform: translate(100px, 50px) rotate(4500deg);
background-color: red; */
border: 10px dotted blue;
}
3-3 keyframe
@keyframes rotate1 {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(3600deg);
}
to {
transform: rotate(360deg);
}
}
.keyframe div {
animation: 10s ease infinite rotate1;
}
4. media query
@media only screen and (max-width: 1000px) {
#root {
background-color: #ddd;
}
}
@media only screen and (max-width: 900px) {
#root {
background-color: #bbb;
}
}
@media only screen and (max-width: 800px) {
#root {
background-color: #999;
}
}
@media only screen and (max-width: 700px) {
#root {
background-color: #777;
}
.keyframe div {
animation: 1s ease infinite rotate1;
}
.circle {
width: 200px;
height: 200px;
}
}
5. 그외에
- z-index:1
- opacity
★ 오늘의 포인트와 남겨두기 ★
※ box-sizing : border-box → 외곽선까지 포함해서 측정
※ flex:1 → 좌우로 늘릴때 사용
※ grid로 공간배분
※ 반응형 Media Query @media only screen and ()
*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!
'Intro' 카테고리의 다른 글
| CSS 1 (선택자/ display/ position/단위/색상) (0) | 2023.06.15 |
|---|---|
| HTML - Element와 속성 (0) | 2023.06.14 |
| 웹 브라우저와 HTML (0) | 2023.06.13 |
| 프로그래밍이란? (0) | 2023.06.12 |