24년 08월 26일

 

---

오전

현재 TransForm 배우는중 

요소가 부드럽게 변하는 효과 주기

sitemenu

체크박스 만든후에

밑에다가 block 속성의 span 태그 3개 만듬

 

sitemenu 작성 화면

여기서 오른쪽 위 막대3개를 클릭하면 wrapper의 background 색이 바뀐다.

visibility : hidden ; 은 말 그대로 요소를 숨기는 것 뿐이기 때문에

display: none ; 과 다르게 공간을 여전히 확보중이기 때문에 레이아웃에 영향을 미치고 있는 상태이다.

---

Transform3D

perspective : 뷰어와 요소와의 거리

transform-style : 요소의 표현 방식

      a{text-decoration: none; color:black;}
      .top-header>ul{
        display: flex;
        justify-content: right;
        align-items: center;
      }
      .top-header>ul>li{
        padding:0 15px;
      }

      .sitemenu>input[type="checkbox"]:checked{
        display: none;  //체크박스 체크되면 안보이게 함
      }
      .sitemenu>input[type="checkbox"]:checked~.site-block{
        background-color: aqua;
        margin-top:10px;
        transition: 12s; margin-top:30px; background-color: blue;
      } //체크 되었을 때 siteblock 속성지정
      
      .sitemenu>label{}
      .sitemenu>label>span{   //가로3줄 막대의 크기
        display: block;
        width:25px;
        height:3px;
        margin:5px;
        background-color: black;
        
      }
      .sitemenu>input[type="checkbox"]:checked+label span:nth-child(1){
        transform: translate(0px,8px) rotate(45deg);
        transition: 1s;
      }
      .sitemenu>input[type="checkbox"]:checked+label span:nth-child(2){
        visibility: hidden;  //체크 될 시, 2번째 span 숨김
        transition: 0s;
      }
      .sitemenu>input[type="checkbox"]:checked+label span:nth-child(3){
        transform: translate(0px,-8px) rotate(-45deg);
        //각도 회전 , 45도 회전
        transition: 1s;
      }
      .site-block{
        width:1200px;
        height:800px;
        margin:50px auto;
        border: 2px solid;
        background-color: beige;

        position:fixed;
        left:0;right:0;
        top:50px;
        margin:auto;
        z-index:5;
        transition: 12s;
      }

---

원근법

        .container{
            width:100px;
            height:100px;
            background-color:skyblue;

            position:relative;
            /class contain 박스 생성
        }
        .item{
            position:absolute;
            left:0;top:0;
            width:100px;
            height:100px;
            background-color: blueviolet;
            transition: 3s;
            //item class 박스 transition 시간 3초
        }
        .container:hover .item{
            transform : perspective(10px) rotateY(500deg);
            
            item 박스에 커서 올릴시 10px(엄청 가까이옴) 500deg(단위)
            만큼 회전한다. (Y축) 
            값이 낮을수록 원근법으로 더 가까이 온다.

 

---

transform3D 트랜스폼으로 요소 가로회전

동전 뒤집기 하듯이 도형돌리는것도 가능.

            margin:0px;padding:0px;
            display: flex;
            justify-content: center;
            align-items: center;
            height:100vh;
        }
        .container{
            width:150px;
            height:150px;
            /* background-color:skyblue; */

            position:relative;
            perspective: 1000px;
        }
        .item{
            position:absolute;
            left:0;top:0;
            width:100%;
            height:100%;
            /* background-color: blueviolet; */
            transition: 1.5s;

            /*  */
            transform-style:preserve-3d;
            transition: 3s;
        }

        .item>.front,
        .item>.back{
            width:100%;
            height:100%;
            position:absolute;
            left:0;
            top:0;
            border-radius: 50%;
            border:1px solid;

            /*  */
            backface-visibility: hidden;
        }
        .item>.front{
            background-color:orange;
            transform: rotateY(180deg);
        }
        .item>.back{
            background-color:royalblue;
            /* transform: rotateY(180deg); */
        }
        .container:hover .item{
            transform: rotateY(180deg);

transform-style:preserve-3d : 3d 방법으로 렌더링 , 자식요소들을 렌더링하는방법

 

(기본값은 flat , 납작한) , 사용하면 이 해당 컨테이너 영역은 3차원으로 사용할 수 있다. 3차원으로 만들어주지 않으면 z축은 변화를 줘도 보이지가 않는다.

그리고 transform 들이 hover 와 거의 세트로 자주 쓰이는것같다.

---

animation 속성 **

11:34 07

각각 움직이는 animation span 태그의 모습

 

span 블럭 3개를 만든후에 각자 움직이게 하는 animation 속성을 주는 중인데

선생님이 제시한 예시에는 1,2,3 블럭이 서로의 영역을 침범하면서 자유롭게 움직이는데

내가 한거는 서로의 영역을 절대 침범하지 않으면서 따로 움직이려고 한다.

2번의 상하를 안움직이게 해놓고 1번 블럭을 위아래로 움직이면 2번 블럭이 같이 딸려 내려가버린다.

---

// 그냥 duration 시간만 다르게 하면 되는 거였음 ;;;

따로 속성 지정같은건 안해도 되는듯?

        div:nth-child(1){
            animation-name:moving1; /moving1 이름의 keyframes 사용
            animation-duration: 2s; /바뀌는 시간 2s
            animation-iteration-count: infinite; /반복횟수 무한
            animation-direction:alternate; /움직임 방향:왔다갔다
            animation-timing-function:linear; : 왔다갔다 속도 일정함

 

---

 

오후

스타일가이드 , 스토리보드 완성

process(화면흐름도) 완성

 

조별과제 전체적은 구조 완성.

내일 마지막으로 최종검수 후에 ppt 디자인 리모델링 한다음에 제출하면 될 것 같다 !

---

 

요즘 html 수업을 들으면 수업내용에서 반복되는 부분이 많다고 느껴지는데 (예를 들어 wrapper>header>.class 이런식)

처음엔 너무 반복만 하는게 아닌가 생각했는데 진짜 따라만 하는것 뿐일수도 있지만 코드가 점점 눈에 들어오는게 느껴진다. 아마 내려놓지 않고 계속 공부를 한다면 진도를 빨리 나가도 금방금방 이해하고 할 수 있을것같다.

 

오늘은 오전에만 진도를 나가고 오후에는 거의 내일 조별과제에 대해 시간을 내주셔서 조별과제를 계속 작업했다.

다행히 오후 수업종료 전까지 모든 구조적인 작업은 마쳤다.

나머지는 당일날 조원들과 전체적인 ppt 디자인 수정, 최종 검수만 마치면 무난하게 조별과제는 마무리 될 것 같다.

 

이번에 팀원과 과제를 진행하며 의논하고 같이 협업하는 과정에서 꽤나 많은 감정을 느꼈다.

소통의 중요성 , 협업의 중요성 그리고 스스로의 능력에 대해서도 많이 부족함을 느꼈다. 그럴때마다 팀원과 상의하며 

같이 문제를 해결해나가니 확실히 혼자서 해결하려 노력하는 것보다 시간적인 면이나 질적인 부분에서 모두 훨씬 나은 모습을 보였다. 역시 독학,이론도 중요하지만 중요한건 실전을 겪는것이다. ! 

중요한건 실전…!