오늘 한 일

드디어, 투두메이트를 통해서 할일을 정리해서 하나씩 해결해나가는 그런 계획적 비슷한 인간이 되려고 시도했다.
뭐 역시 항상 시작하긴 쉽고 그걸 유지하는건 어렵다. 특히 나는 나를 너무 잘알아서 얼마나 잘 이어갈지는...
그래서 하루에 딱 30분 이내로 쓰는시간을 정하면 그래도 귀찮아도 하지 않을까 싶어서 나만의 룰을 정했는데,, 제발 지켜지기를 바라는 마음...

진짜 오늘 무엇을 했냐면

• 파머 마이페이지 base
• 시민원 특판 대비 점검사항 반영

등을 생각할 수 있겠다.

파머 마이페이지 base

PC의 마이페이지 base다.

css를 PC와 모바일로 따로 빼느라 모바일 버전 css를 작성하고 PC버전 웹에서 css의 @import 를 사용했다.
css의 cascade한 성질을 고려해 보면,,, (아니 애초에 css는 cascading style sheet의 약자니까...) import한 모바일 css가 먼저 나오고 그 다음에 PC의 css가 나오게 된다.

그래서 미디어쿼리를 적용했음에도 불구 결국 PC의 css로 오버라이드 된다.

그럼 import문을 제일 아래로 내리면 되는거 아닐까?

안된다. @import는 제일 위에 작성하는게 원칙이다.

하여튼, 결국 !important 떡칠로 어떻게 해결은 했다.

css grid-template-area

PC 버전에서는 카테고리 버튼을 하나하나 독립된 버튼으로 디자인 하였다.

그런데 모바일에서는 하나의 라인으로, 선택된 영역의 하단만 하이라이트 되는 방식을 사용한다.

이걸 외주 인원들이 어떻게 해결했나 싶었는데, grid-template-area를 사용해서 각각 영역에 line1~line6의 네이밍을 했더라..

    #line {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            'line1 line2 line3 line4 line5' /* 이런 식으로 네이밍을... */
            'line line line line line';
        grid-gap: calc(100% / 5);
    }

결국 이걸 어떻게 써먹나 했더니... JS를 통해서 특정 element의 grid area를 지정하면 되더라...

    if (window.matchMedia("(max-width: 768px)").matches) {
        document.getElementById('menu_carts').classList.add('selected');
        document.getElementById('selected_line').style.gridArea= "line3"; // 이렇게 js로 스타일 지정
    }

이런식으로 css와 스크립트의 의존성을 높이는 것은 유지보수성에 많이 안좋을텐데... 그래도 뭐 딱히 뾰족한 방법은 없다,,, (내가 모를지도)