1) 학습한 내용

오늘의 할 일

미디어 쿼리를 적용시켜야 할 때, 폰트를 조정해야 할 일이 있다. 예를 들면, PC판에는 적절할 지라도 간혹 글자가 칸을 나가버리는 경우가 왕왕 있어서 미디어 쿼리를 적용시킬 때, 특정 크기 쯤에 폰트를 줄이는 방법이 있다.

폰트 줄이기

/*768px(모바일) 기준*/
@media screen and (max-width:768px){
    .moado-right .site-button {
        z-index:2;
    }
    .moado-body, #etc, .ecoce-wrap, .moado-title, .ecoce-title{
        max-width:708px; margin:0 auto;
    }

    .moado-body{
        margin-top:50px;
    }
    .ecoce-right p:nth-child(1), .moado-right p:nth-child(1){
        font-size:20px;
    }

}

디자인 수정

.ecoce-right {
    width: 50%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    flex-direction: column;
    padding-bottom:6%;
}

에코스 오른쪽 부분을 디자인 시안과 비슷하게 맞추었다. 그리고, 오른쪽 부분은 순수 HTML를 고려하면 반응형을 적용하면 아래쪽 부분에도 바로 영향을 가기 때문에 나는 모아두 부분 반응형도 css를 수정했다.

@media screen and (max-width:1280px){


    #ecoce, .moado-wrap, #etc{
        max-width: 1000px; margin:0 auto;
    }

    .moado-back{
        margin-top:-6%;
    }

}

수정전

수정 전에는 제시되었던 디자인 도안과 비교한 결과, 오른쪽의 글귀가 디자인 시안의 위치와 맞지 않다는 걸 확인하고 오른쪽의 글귀를 디자인 시안에 맞추다가 여백 부분이 벌려지는 현상이 일어났는데, 이는 착시현상으로 제대로 나온것이 맞지만, 이를 확인할 수가 없다. 이는 CSS로 아무리, 꾸민다해도 결국에는 CSS의 근본이 HTML이었기에 나는 HTML에 맞춰서 모아두의 여백을 유지해야 할 필요가 있기에 에코스와 모아두 사이의 여백을 유지시켜야 할 필요가 있다.

수정후

모아두 부분은, 여백을 맞추기 위해서, 오른쪽에 padding을 주었을 때, 모아두 부분에는 margin을 주었다.

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

이번 건은 디자인 시안과 최대한 맞춰야 할 필요가 있었다. 나는 팀에 맞춰야 할 필요가 있다. 팀 프로젝트에는 팀을 잘 따르는 것이 중요하기 때문이다. 그리고, 이번 시간은 자잘한 디자인 수정 및 오류 수정의 시간이다.

3) 해결방법

각설하고, 이번의 디자인 수정은 화장을 고치는 수준이라고 보면 된다. 난이도로 따지면 자바스크립트로 메뉴를 만드는 것보다는 쉽지만 css가 어려운 것은 계속 코드를 작성하면 생각해야 할 것들이 많아지기 때문에 코드가 꼬여버릴 수가 있기 때문이다.

4) 학습소감

이번의 홈페이지 제작도 1차 마감 기간에 맞춰가면서 슬슬 정리해가고 있다. 그리고, 내일은 이력서 작성에 내가 지원할 회사 명단이 나올 예정인 날이다. 나는 그 사이에 자바스크립트, 리액트, 장고, Node.js, 스프링,MySQL을 배워야 한다. 프론트엔드는 웹 디자인과 경계가 모호하기 때문에 백엔드를 공부해야 할 필요가 있다.