day8

상은👸·2023년 10월 17일

뚜벅뚜벅 두번째

목록 보기

6/13

📌정리

relative = 흐름대로 // 시작점 : 각자위치
absolute = 흐름무시 // 시작점 : 부모요소위치 부모요소중에 relative가 있으면 그게 시작점! relative 없으면 body가 시작점!
fixed = 흐름무시, 스크롤 내려도 고정위치 // 시작점 : 부모요소 상관없이 그냥 전체페이지 기준

=================================================
transition : 다른 속성들의 변화, 일정시간동안 자연스럽게 // 1회만!!! // 마우스오버에서 마우스 뗐을때 다시 원래대로 돌아오는 (휙돌아오냐 vs 자연스럽게 스르륵 돌아오냐)

animation : 여러단계로 나눠서, 움직임 // 몇회반복, 무제한 반복 // 마우스오버에서 마우스를 떼면 다시 원래대로 돌아오지 않고 그자리에서 멈춤

transform : 해당 요소의 크기,회전,이동

transition + transform
animation + transform

💡효과가 나타나게 하고 싶은 박스에 transition, animation 속성들 넣는것!!

=================================================

🚨🚨🚨주의🚨🚨🚨
transition,animation은 속성 따로 써도 적용이 다 되는데
transform은 속성 쓰려면 같이 써야한다!!!

transform:scale(2,2);
transform:rotate(45deg); 로 쓰면 제일 마지막에 있는 rotate만 먹힌다
그래서
transform:scale(2,2) rotate(45deg); 이렇게 같이 써줘야한다

=================================================
💡 :hover (마우스오버) 일때!!!

공통 => 공통적인 성질 모아두는 box클래스 하나 만들어주고

transition => 1회만!!!!! (마우스떼면 다시 제자리로 돌아감)

마우스 오버했을때 바뀌어야 하는 사항들 입력해주고
.container:hover > .box1 {
width: 400px;
height: 100px;
}
.container:hover > .box3 {
margin-left: 200px;
}
.container:hover > .box2 {
background-color: purple;
}
.box4:hover {
border: 7px solid red;
}
.box5:hover {
border: 7px solid red;
}
각각 box1, box2, box3, box4, box5 마다
transition-property: all;
transition-duration: 1s;
transition-timing-function: linear;
잡아주고
(휙바뀌는 효과를 주고싶으면 transition: 속성을 hover에 넣어주면 휙바뀐다! -> hover안에 transition속성이 있으니까 hover 기능이 끝나버리면(마우스를 떼버리면) transition도 끝나버리니까 휙바뀌는것!)

animation => 무제한반복!!!!! (마우스떼면 그자리에서 멈춤)

먼저 @keyframes로 애니메이션 효과들을 만들어준다
@keyframes box1-ani {
0% {
width: 100px;
height: 100px;
}
```
100% {
     width: 400px;
     height: 100px;
}
```
}
@keyframes box3-ani {
0% {
left: 0px;
}
```
100% {
    left: 200px;
}
```
}
그 다음 적용하고싶은 박스에 animation-name: box1-ani;을 줘서 animation 적용시킨다 그리고 마우스오버했을때 효과가 나타나야 하는거니까 가만히 있을땐 정지하고 있게 animation-play-state: paused;을 주고
.box1 {
background-color: red;
animation-name: box1-ani;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
position: relative;
animation-play-state: paused;
}
.box3 {
background-color: black;
animation-name: box3-ani;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
position: relative;
animation-play-state: paused;
animation-fill-mode: both;
}
그리고 마우스오버했을때 효과가 나타나게 한다!
.container:hover > .box1 {
animation-play-state: running;
}
.container:hover > .box3 {
animation-play-state: running;
}

✏️연습문제

굴러가는 사각형 표현하기

<body>
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      .box {
          margin: 30px;
          width: 100px;
          height: 100px;
          background-color: blue;
          position: relative; //left 나타나게 하기위해!
          animation-name: box-ani;
          animation-duration: 3s;
          animation-iteration-count: infinite;
          animation-direction: alternate;
      }

       @keyframes box-ani {
          0% {
              background-color: blue;
              left: 0px;
          }
          50% {
              background-color: orange;
              left: 200px;
              transform: rotate(180deg);
          }
          100% {
              background-color: pink;
              left: 400px;
              transform: rotate(360deg);
          }
       }
  </style>
</body>

<body>
    <div class="box"></div>
</body>

=> 💻
이런식으로 데굴데굴 굴러가는 형태의 결과가 나온다

📖 flex⭐

컨테이너 => 컨테이너에 flex를 잡아주고 안에 아이템을 정렬!!!!!!
-아이템
-아이템

💡적용💡

컨테이너 안에 display: flex; 를 넣는다
주축을 바꾸고 싶으면 flex-direction: column; 으로 지정한다 (기본값은 row(행,가로))
줄바꿈 하고 싶으면 flex-wrap: wrap;으로 지정!
주축 기준 정렬은 justify-content: center;
교차축 기준 정렬은 align-items: center; 로 지정!
아이템 각자 자체정렬 그 아이템에 가서 따로 align-self: flex-start;로 지정!

레이아웃 : 화면의 배치구조

컨테이너
내부 아이템
정렬기준
주축(가로,세로)
교차축(세로,가로)

1. flex 속성 적용

display : inline, block, inline-block
display : flex, inline-flex

2. 주축 지정

flex-direction
row : 가로축
row-reverse : 가로축 역방향
column : 세로축
column-reverse : 세로축 역방향

3. 줄바꿈 처리여부

flex-wrap
nowrap : 줄바꿈X
wrap : 줄바꿈O
wrap-reverse : 줄바꿈O-역방향

flex-flow: row nowrap; => 가로축 줄바꿈
(direction) (wrap)

4. ⭐정렬

1) 주축 정렬 : justify-content @

flex-start : (주축)시작 기준 정렬
flex-end : (주축)끝 기준 정렬
center : 가운데 정렬
space-between : 아이템 사이 간격 균일
space-around : 아이템 둘레 간격 균일 (margin까지 포함)
space-evenly : 아이템 사이+양끝 간격 균일 (사이를 양끝간격 사이에 맞춰)

2) 교차축 정렬 : align-items @

flex-start : (교차축)시작 기준 정렬
flex-end : (교차축)끝 기준 정렬
center : 가운데 정렬 @
stretch : 교차축 방향으로 늘어남
baseline : 아이템 baseline기준 정렬

3) 아이템 교차축 자체 정렬 : align-self

4) 여러줄일때 교차축 정렬 : align-content (align-items랑 같이쓰기엔 애매,, 걍 처음부터 사이즈를 잘맞추래)

💎정리
display: flex;

flex-direction: column; (기본값이 row야 그래서 행으로 바꾸고 싶을때!)

flex-wrap: wrap; (줄바꿈 하고 싶을때)

justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly; (주축 정렬)

align-items: flex-start, flex-end, center, stretch, baseline; (교차축 정렬)

align-self: flex-start, flex-end, center, stretch, baseline; (아이템 교차축 자체 정렬)

align-content: flex-start, flex-end, center, space-between, space-around, space-evenly stretch; (여러줄일때 교차축 정렬)

상은👸

뒤죽박죽 벨로그

이전 포스트

day9

다음 포스트