#2 프로젝트 - 떠나보조 소개 및 애니메이션 기능, Css

안녕하세요!

두 번째 일주일 프로젝트 '떠나보조'를 시작하게 되면서, 진행과정을 기록하려고 합니다!

 

'떠나보조'는 여행을 좋아하고, 개발자를 꿈꾸는 병아리 개발자들의 모임입니다 :)

떠나보조 프로젝트에서는 떠나보조 멤버를 소개하고,

방문해주시는 사용자분들도 참여하실 수 있도록 추천여행지를 공유하는 서비스를 계획했습니다!

 

이번 프로젝트가 제게 더 의미가 있는 것은,

기획부터 전체레이아웃, 서비스 기능까지 제 아이디어가 많이 반영되었기 때문입니다.

(팀원분들께서 감사하게도.. 제 아이디어를 채택해주셨어요!)

 

 

오늘은, 초안과 전체 레이아웃에 대한 후기를 말씀드릴려고 해용!

(오늘이 벌써.. 프로젝트 3일차랍니다 ^^ 글쓰기가 밀렸어요..ㅎㅎ 하핫 ;;)

 

원래 초안은,

이것이었습니다!! 원래는 저희 멤버 소개만 하는 페이지를 만들 계획이었어요.

 

근데.. 만들면서.. 욕심이 생기더라구요?

저희 페이지를 방문해주시는 분들과 함께할 수 있는 기능이 있으면 좋겠다 싶어서, 지금은 여행 추천 공유 서비스까지 만들고 있습니다! 이건 나중 후기로 말씀드릴게요!

 

저는 이 프로젝트에서

• 전체 레이아웃 및 반응형 웹페이지 최적화
• 여행 추천 공유 서비스 기능

역할을 맡아서 프로젝트에 참여했습니다!

 

그럼 전체 레이아웃을 살펴보러 가시죠!

 

 

레이아웃을 만들면서, 흥미로웠던 점 몇 가지를 톱아볼게요!

 

1. keyframes rolling 함수 (애니메이션 기능!)
2. Css 단위 vw, vh, em, rem
3. @media(){} 이용하여 창 크기를 기준으로 요소들의 위치, 크기 등 변화

대표적으로 이 세 가지 얘기를 해볼 수 있을 것 같아요!

 

먼저, 애니메이션 기능!

저희 멤버들이 다녀본 나라들을 동적으로 표현해보고 싶었는데,

rolling을 이용하여 애니메이션 동작을 추가할 수 있었습니다!

 

Css에서 애니메이션 기능을 추가할 수 있다는 것이 신기하고, 재밌었어요!

keyframes rolling {
    0% {
        transform: translateY(0); /*대입한 값만큼 자기자신 높이 기준에서 알아서 위로 올린다.*/
    }
    11.5%{
        transform: translateY(-10%);
    }
    23%%{
        transform: translateY(-20%);
    }
    34.5%{
        transform: translateY(-30%);
    }
    46%% {
        transform: translateY(-40%);
    }
    57.5%% {
        transform: translateY(-50%);
    }
    69%% {
        transform: translateY(-60%);
    }
    80.5%% {
        transform: translateY(-70%);
    }
    91.6%% {
        transform: translateY(-80%);
    }
    100%% {
        transform: translateY(-90%);
    }
}

/*그리고 다음을 추가*/

.trip-list {
    animation-name: rolling;
    animation-duration: 13s; 
    animation-iteration-count: infinite; /*동작 계속~*/
    animation-direction: reverse; /*동작 방향 위에서 아래로*/
}

 

두 번째로, Css 단위였습니다!

사실 저는 그동안 px, %로 작업을 했었는데, 이번에 공부하면서 vh, vw, em, rem를 알게 되었어요!

vh, vw는 뷰포트 기준으로 너비와 높이를 결정한다는 것이 신기했어요. 

 

간단히 설명하면, 1vh는 뷰포트 높이의 1%이고, 1vw는 뷰포트 너비의 1%를 의미합니다.

em은 상위요소(부모 태그) 크기의 몇 배인지를 정하는 단위이고, rem은 최상위, 가장 상위인 html 태그에 적용된 폰트사이즈가 기준이 됩니다. 즉, rem은 em과 다르게, 현재 태그 위치를 기준으로 부모 태그와는 전혀 상관이 없어요.

예를 들어, 현재 태그 위치에서 부모태그의 폰트 사이즈가 10px이고 자식태그의 폰트 사이즈가 2em이라면, 자식 태그의 폰트 사이즈는 20px이 됩니다. 반대로, 2rem일 경우, 부모 태그와 상관없이 가장 상위인 html태그에 적용된 폰트 사이즈의 두 배만큼이 되겠죠. 참고로, em보다는 rem이 더 접근성이 좋아요! 왜냐면 더 사용하기 편하기 때문이죠!

 

이렇게 vh, vw, rem, em.. 특히 vh, vw를 사용하니, 반응형 웹을 제작하는데 아주 큰 도움이 되었습니다!무엇보다, 모바일과 웹 어디서든지 접근성이 좋아질 수 있었어요!

 

세 번째로, @media(){}를 이용하여 창 크기에 따라서 요소들의 위치 또는 크기를 변화시킨 것!

 @media (min-width: 1200px) {
            .portrait {
                position: fixed;
                left: 2vw;
                top: 5vw;
                width: 40vw;
                height: 100vh;
                padding: 0;
            }  /*사진*/

            .profile2 {
                margin-left: 40vw;
            }  /*사진 이외의 요소들을 크게 profile2 클래스로 묶어줬어요.*/

            .name {
                font-size: 3vw;
            }

            .card {
                width: 13vw;
            }

            .yourcomment {
                font-size: 14px;
            }

        }

@media(){}를 사용하니 창 크기에 따라 클래스 값들의 위치나 크기 등을 변하게 할 수 있었어요. 

제가 쓴 코드는.. 최소 너비가 1200px이 되었을 때, 중괄호로 되어있는 css들을 실행하는 것입니다.그래서 1200px 이상이 되면, 사진은 position:fixed가  되고, 왼쪽으로 2vw만큼 등등 설정할 수 있는 것이죠!

모바일이냐.. 맥이냐.. 윈도우냐.. 에 따라서 창 크기가 다르기 때문에 좀 더 편하게 볼 수 있도록 코드를 설정했습니다! 

 

 

이렇게.. 초안과 전체 레이아웃까지 후기를 남겨보았습니다!

 

개발자 공부를 시작한지 얼마되지 않아서 아는 것도 별로 없는 상황이긴 하지만..  저는 프론트엔드.. 그러니까 Css가 너무 어렵더라고요...

그래서 이번에 전체 레이아웃을 만들면서 Css 공부도 할 수 있어서 좋았고, 약간의.. 자신감까지는 아니지만.. 더 공부할 수 있는 용기가 생겼습니다 ㅋㅋ

 

지금은 전체 레이아웃에 내용들을 채워가고 있고, 전체 작업의 한 70프로 정도가 마무리된 상황이에요!

빠른 시일내에.. 지금하는 작업들에 대한 후기도 올리도록 하겠습니다!

 

긴 글 읽어주셔서 감사합니다.