국비지원 19일차 (transform, transition, hover을 활용실습)

오늘은 저번 차수에서 배운 transform, transition, hover을 활용해 몇 가지 기능을 살펴보도록 하겠다.

 

※. 박스 양쪽 끝에서 텍스트가 서서히 보이면서 중앙으로 위치시키는 기능.

1번예제 결과값.

1.. box클래스에 가로*세로(100%*세로 400px로) 크기를 잡아준다 그리고 기준점으로 활용할 것이기 때문에 position :relative를 적용시켜 준다.

 

2. box2라는 클래스를 1번 적용시킨 박스처럼 똑같이 지정한 후 다른 css를 적용해 준다 box클래스는 앞으로 여러 가지 탱크에 사용될 예정이라서 공통으로 들어갈 것만 써준 것이다.

 

box2에는 display:flex(x축방향으로 나열)와 justify-content:center(가로방향으로 중앙 위치) , align-item ( 1가지 아이템을 세로로 중앙을 먹이는 것이다.) (img-1-3, img_2_3을 정렬해 준 것이다)

 

3. inner이라는 박스(안에 글씨 2개 png를 감쌀 박스를 뜻한다) 중앙에서 위치할 박스이다.

 

4.img1_1 박스에 img를 등록하고 position:absolute를 주고 top:0  , left :0으로 inner 박스왼쪽에 붙여 나열하고, 

  . img2_1 박스에도 마찬가지로 img 적용 후 포지션을 주고 부모가 inner에 position:relative를 준상태로 bottom:0 , right:0을 주고, img1박스는 translateX을 화면대비 -100vw로 와 img2박스는 마찬가지로 100vw를 입력해 양쪽으로 밖으로 뺴준다.

그리고 transition:all 1s (css 속도를 뜻한다.- display , background 에는 바로 적용 못하고 opacity, transform, visibillity로 적용가능하다.

 

5.. box 클래스를 hover 하면 그 아래 자식클래스인. img 가  translateX(0); 으로 주면 양쪽에 창밖에 위치하던 img박스들이 다시 inner 박스 의 원래 위치로 돌아올 것이다.

 

※item  hover시 약간 띄워지게 만드는 효과.

 

기능 2결과값

1.ul :menu 클래스에 display:flex 걸어서  li클래스가 가로 정렬이 되게 뜸해준다.

 

2.menu_li에 배경색 핑크와 margin을 적용시켜 준다.

 

3.li안에 menu_img_box라는 클래스 2개를 만들고 가로*세로(250px*250px) 씩 지정해 주고 boder-radius로 테두리 부분을 원형으로 깎아준다. 이 원형 배경색을 흰색으로 해주고 overflow:hidden;을 적용시켜 준다

transition을  css에 시간을 적용시켜 준다

 

*transiton을 hover 시  적용이 안될 수가 있는데 그땐 해당 박스에다가 직접 사방값이라든지, transform, 이라든지 기본값을 적용시켜 주면 시간이 적용된다.

*overflow를 적용시켜 준 이유가 나중에 hover시 scale 로이미지를 키워줄 것이데 hover 적용 안 돼있으면 이미지가 튀어나와 보일 것이다.

 

4.img 박스에는 가로 100% 주고 이미지를 적용시켜 보면 원형 테두리 안에 이미지가 중앙에 위치하지 않을 수 있다. 이때 원래는 calc를 계산해서 사방값에 (50% - (자기 자신크기(이미지크기)에 / 2)를 한 값을 계산해 위치시켜 줬는데 , 이번엔 포지션으로 left, top :50% 씩 위치시켜 주면 이미지의 기준점이 왼쪽  모 소리위쪽에 있을 것이라서 중앙이 위치가 안 돼 있을 건데 ,

이때 translate로 자신 이미지크기에 1/2의 크기를 빼주면 중앙에 위치할 것이다. ( -50% ,-50%)- translate는 원래 자기 자신대비 크기를 늘려주거나 줄여주는 기능을 한다. hover 시적용될 속성 ( rotate 나 scale) 도 이 박스 자체에다 기본값을 적용해 준다.(시간이 적용이 안 되는 오류가 있을 수 있으니) transition속성도 0.5s로 지정한다.

 

5. li를 hover. menu_img_box는 left :5, top:5px 씩 떨어지게 하고 box-shadow를 적용시켜 준다.

 

6. li를 hover시 img는 translate로 중앙위치시켜 주는 (-50% ,-50%)를 적용시켜 주고 rotate 를3600deg정도 돌리고 , scale (1.2) 배만큼 더 커지게 해 준다. -이거 순서 적용시키는 것도 어느 순서대로 적용하냐에 따라서 css 가 틀려질 수 있으니 주의하자.

 

※ 2개의 원형박스를 중앙에 위치시키고 각각 위아래로 위치시켜 hover 하면 작동되게 해 주기.

 

 

3번기능 결과값.

1. box클래스에 이미지나 가로 세로 크기로 바탕을 지정해 주고. box3클래스에 flex와 justify-content :center 가로정렬 시켜준다.(중앙 circle_box에 적용됨)

 

2. circle_box에 가로*세로 ( 400px*400px) , 배경색 :brown, 테두리 깎아주고, rotateY(180 deg)-우선 돌려주는 이유가 나중에 hover시 다시 180 deg 돌리면 글씨가 반대로 보이게 때문에 우선 돌려서 opacity로 숨겨놓고 hover시 180도 돌면서 원래 글씨가 나오게 해 주는 것이다. transition에 opacity 걸어줄 수 있다.

 

3.  box3를 hover시  > (바로 다음 자식클래스). circle_box:nth-child(1)  child는 그 선택자 자식 중에서 위에서 1번째 해당하는 거에 속성을 준다는 뜻이다.

 

translate(0, - 70px )로 y축 위로 올려주고 rotateY(180 deg 돌렸던걸 다시 원래대로 0 deg)로 돌려 글씨를 똑바로 위치시킨다. opacity:1 (다시 opacity:0 돼 잇는 것을 1로 바꿔서 나타나게 해 주는 것이다. 

child(2) :박스에 는 똑같이 css적용하되  late만 y축을 70px 줘서 밑에 다가 위치하게 하고 , delay 적용시켜 child(1) 박스보다 0.2초 늦게 시작하게 하는 효과를 줄 수 있다.

 

※ 박스 2개를 앞뒤로 붙여서 rotate 적용 시 박스 앞뒤에 적용된 내용이 다르게 기능구현.

 

 

기능 4번 결과값.

1.box 클래스에 배경 화면 구현하고. box 4 클래스에도 flex, justify :center로 중앙 맞춰준다.

 

2.circle_box_box 클래스에 포지션 relative를 걸어준다.

 

3.circle_box (1번쓰인 박스)를 가로*세로 (400px)씩 정해주고 이미지를 갖고 온다. 테두리도 깎아주고,

rotateY(180 deg) 도를 적용해 우선 뒤집어서 위치시킨다.

backface -visibility :hidden; 을적용해 (박스에 뒷면을 숨기는 것이다) 준다.

transition :all 1s opacity 0, 5s 적용해 준다 (이 박스 자체에다 적용 시 호버를 안 해도 똑같은 속도로 복귀할 수 있고, hover시 transition을 적용하면 hover 할 때 (마우스 갖다 대고 있을 때만) 속도가 적용된다. 그래서 대부분 박스 자체에다가 transition을 적용하는 게 좋다.

 

4.circle_box2 (2번 쓰인 박스)를 크기랑 모양은 1번 박스랑 동일하게 하고 rotateY는 1번 박스랑 겹쳐지게 해야 되니 2번 박스는  0 deg를 적용해 원래 앞면이 보이도록 해준다 그리고 뒷면은 동일하게 backface:hidden으로 없애준다. 

 

5. 이렇게 박스 css적용이 끝나면 마지막으로 각각 position:absolute를 적용하고 기준점을  circle_box_box에 relative를 적용하고 1,2번 박스 각각 left:0 , top:0으로 겹쳐지게 준비해 놓는다.

그러면 앞뒤로 겹쳐져서 한 곳에 위치할 것이다.

 

6.

1) box4번을 hover 눌렀을떄. circle_box  {

transform :late (0.-70px ) 적용해 눌렀을떄 y축 위로 이동하게 만들고 rotateY(0)으로 적용해 원래 180 deg 돌아져 있던 박스 1번을 0도로 돌려지게 한다.

 2) box4번을 hover 눌렀을떄. circle_box2  {

transform :late (0.-70px ) 적용해 눌렀을떄 y축 위로 이동하게 만들고 rotateY(180 deg)으로 적용해 원래 0 deg 돌아져 있던 박스 1번을 180도로 돌려지게 한다.

위에 6번같이 적용하면 뒷면을 숨긴 박스 2개가 absolute로 겹쳐져 있는 상태에서 각각 다시 원상태로 rotate 적용하면 같은 박스 앞뒤로 돌려지는 듯한 효과를 보여줄 것이다.