1) 학습한 내용

오늘의 작업

반응형 작업/테스트

내가 디자인 시안을 봤을 때, 반응형 부분을 봤을 때, 요구되는 사항은

1. 모바일은 768 × 1870

2. 태블릿은 1280 × 2272

3. PC는 1920 × 1080

로 나왔다.

처음에 내가 반응형을 처음 적용했을 때는 임의로 적용시켰지만 디자인 시안에 요구되는 반응형으로 수정하는 작업을 거쳤다.

PC판 외형

PC판은 디자인 사안과 똑같은 모습으로 구현했었다. 한 가지 옥의 티는 배경에 있는 디그레이션을 넣지 않았는데 그것은 나중에 구현할 것이다.

태블릿판 외형

태블릿판은 max-width 값을 조정해서 글자가 겹치더라도 라인에서 이탈하지 않게 했었다.

/*1280px(테블릿) 기준*/
@media screen and (max-width:1280px){

    .moado-middle{
        margin:0 auto;
    }
    .etc-chart img{
        height:70%;
        width:70%;
    }
}
@media screen and (max-width:1201px){
    .ecoce-img1{
        display:none;
    }
    .moado-left{
        display:none;
    }
}

추가로, 원본 이미지를 미디어 쿼리를 적용시키지 않고 적용시키면 오른쪽에 있는 부분이 아래로 내려가는 현상이 일어난다.

모바일판 화면

모바일판은 왼쪽에 있는 이미지가 사라지게끔 했었다. 어떻게 보면 안일하기 그지 없는 짓이지만 피드백을 받는 다면 피드백에 맞춰서 조정할 것이다.

/*768px(모바일) 기준*/
@media screen and (max-width:768px){
    .ecoce-right img{
        max-width:90%;
    }
    .ecoce-store li{
        max-width:90%;
        margin-left:10px;
    }
    .ecoce-store img{
        align-items:center;
        max-width:40%;
    }
    .moado-left{
        display:none;
    }
    .moado-right img{
        max-width:90%;
        float:right;
    }
    .site-button{
        text-align:center;
    }
    .site-button{
        justify-content:center;
    }
}

그 외

그 외에 나는 자바스크립트와 관련된 코드를 뒤지다가 화면의 스크롤을 내리면 화면에 있는 이미지와 글자들이 모습을 드러나게하는 코드를 적용시켰다.

/*ecoce 부분에 스크롤을 내리면 ecoce파트가 화면에서 나타남.*/
$(document).ready(function(){
    /*윈도우 스크롤*/
    $(window).scroll(function(){
        /*에코스가 나타나게 하는데, 필요한 계산식*/
        $('#ecoce').each(function(i){
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();/*오브젝트의 위치*/
            var bottom_of_window = $(window).scrollTop() + $(window).height();/*윈도우창의 스크롤과 높이*/
            /*윈도우 창 밑부분이 오브젝트 바닥보다 높으면 opacity가 1로 바뀐다.*/
            if(bottom_of_window > bottom_of_object/1){
                $(this).animate({'opacity':'1'},500);
            }
        });
    });
});
/*moado 부분에 스크롤을 내리면 moado파트가 화면에서 나타남*/
$(document).ready(function(){
    /*윈도우 스크롤*/
    $(window).scroll(function(){
        /*모아두가 나타나게 하는데, 필요한 계산식*/
        $('#moado').each(function(){
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();/*오브젝트의 위치*/
            var bottom_of_window = $(window).scrollTop() + $(window).height();/*윈도우창의 스크롤과 높이*/
            /*윈도우 창 밑부분이 오브젝트 바닥보다 높으면 opacity가 1로 바뀐다.*/
            if(bottom_of_window > bottom_of_object/1){
                $(this).animate({'opacity':'1'},600);
            }
        });
    });
});
/*etc 부분에 스크롤을 내리면 etc 파트가 화면에서 나타남.*/
$(document).ready(function(){
    /*윈도우 스크롤*/
    $(window).scroll(function(){
        /*2*/
        $('#etc').each(function(i){
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();/*오브젝트의 위치*/
            var bottom_of_window = $(window).scrollTop() + $(window).height();/*윈도우창의 스크롤과 높이*/
            /*윈도우 창 밑부분이 오브젝트 바닥보다 높으면 opacity가 1로 바뀐다.*/
            if(bottom_of_window > bottom_of_object/1){
                $(this).animate({'opacity':'1'},700);
            }
        });
    });
});

그리고, 이것은 Jquery를 적용시킨 것이다. 본래는 WOW.js를 구상했었지만, 다른 팀원들이 WOW.js를 사용하지 않은 것과 거기에 WOW.js가 Animate.css와 함께 사용된다는 것을 알게 되자, 나는 이 페이지 하나 때문에 굳이 파일을 더 생성할 이유가 없자 이내 제이쿼리로 바꿨다.

2) 학습내용 중 어려웠던 점

나는 지금까지 HTML, CSs를 다루는 방법은 어느 정도 익숙해졌지만, 이번에는 생각을 바꿔서 자바스크립트를 한 번 응용해보면 어떨까라는 생각에 코드를 작성하려고 했었다가, 나는 자바스크립트에 익숙해져야 할 필요를 자각했다.

3) 해결방법

사실, 자바스크립트에 적용시켰던 코드는 다른 사람이 사용했던 것을 그대로 적용시켜서 따라 작성한 것이다. 프로그래밍을 한다면, 코드 작성을 배워야 한다.

4) 학습소감

웹 디자이너와 프론트엔드 개발자의 차이를 한 번 생각해보면, 프론트 엔드는 화면이 작동되도록 하는 것이고 웹 디자이너는 화면의 외향을 꾸미는 작업을 하는 사람이다. 그런데, 달리 생각해보면, 프론트 엔드 개발을 하는 사람이 웹 디자인에 소질이 있거나 반대로 웹 디자인을 하는 사람이 자바스크립트를 다룰 줄 안다면, 거기에 무슨 차이가 있는가를 생각해보았다.