190517 TIL less && 반응형 && 크로스브라우징

May 17, 2019 » 1막, TIL (Today I Learned)

less

과제를 하면서 css 전처리기를 써봤다.

Less CSS Pre-Processor Tutorial 이 영상을 많이 참고했는데, less 완전 신세계였다!!

이전엔 전처리기를 써본 적이 없었고 왜 써야되는지도 사실 잘 몰랐는데, 이렇게 편리하다니! 왜 전처리기 인지도 알겠다..ㅎㅎ

가장 편리한 기능은 필요한 변수들을 미리 선언해놓고 값을 할당 할 수 있는 것이었다.

아래 값들을 library.less에 저장해두고,

@primary-color: #00c854;
@outline-color: #dde6df;
@bar-color: #5c656eb7;

그리고 해당 컴포넌트에서,

.article {
    box-shadow: 3px 3px 5px #aaaaaa;
    background-color: #fff;
    border: 1px solid @outline-color;
    margin-bottom: 1rem;
}

이렇게 쓸 수 있는 것이다!

이 부분에선 정말 희열을 느꼈는데, 왜냐하면 교재개발 일을 할 때, 한 책에서 공유되는 통일성, 일관성을 지키기 위해 팀장님과 치열하게 싸웠던 순간들이 떠올랐기 때문이다….

이런 통일성… 너무 좋아….

반응형

그리고 less를 이용하면 반응형도 쉽게 구현할 수 있었다.

@max-point: ~"only screen and (min-width: 1700px)";
@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1699px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";
@mid-point:    ~"only screen and (min-width: 480px) and (max-width: 719px)";
@mobile:    ~"only screen and (min-width: 320px) and (max-width: 479px)";
@min-point:    ~"only screen and (max-width: 319px)";

.container {
     margin: 0 auto;
     @media @max-point {
       width: 40vw;
     }
     @media @desktop {
       width: 50vw;
     }
     @media @tablet {
       width: 80vw;
     }
     @media @mid-point {
       width: 85vw;
     }
     @media @mobile {
       width: 90vw;
     }
     @media @min-point {
       width: 319px;
     }
}

이렇게 이쁘게 반응형이 됩니다! (감동ㅠㅠ)

May-18-2019 14-55-32

크로스 브라우징

크로스 브라우징도 할 수 있는 데 까지는 해보고 싶었다.

IE9까지는 지원해 볼 수 있을 것 같아서 시도했고, 가장 큰 문제는 내 사랑 flex를 쓸 수 없다는 것이다….

찾아보니 float이 flex를 대체할 수 있다고 해서 수정했고, clearfix를 만들어서 편하게 적용했다.

.clearfix() {
    *zoom: 1;

    &:before,
    &:after {
        display: table;
        line-height: 0;
        content: "";
    }

    &:after {
        clear: both;
    }
}

호환성은 caniuse.com 사이트를 많이 참고해서 작성했다.