웹 반응형 및 다크모드

제작 중인 블로그 사이트의 반응형과 다크모드 작업을 마쳤다. 작업에 관한 내용을 간단하게 기록해보려 한다.

반응형

작업순서

• 반응형 작업 전 우선 PC 버전으로 css 작업을 했다.
• css 작업 후 브라우저 창 크기를 줄이며 사이트가 어떻게 어디서 깨지는 지 확인 후 3의 배수로 반응형 작업할 해상도를 잡았다. (1024 / 768 / 640 / 540 / 420 / 360)
• 기본으로 작성된 PC버전 코드 이 후부터 아래처럼 높은 해상도 부터 차례로 반응형 작업했다.

@media all and (max-width : 1024px) {}
@media all and (max-width : 768px) {}
@media all and (max-width : 640px) {}
@media all and (max-width : 540px) {}
@media all and (max-width : 420px) {}
@media all and (max-width : 360px) {}

반응형 후기

반응형 작업은 언제나 시간이 많이 든다. 그래도 매번 '조금만 더 가성비 있게 작성해보자' 라는 마음으로 작업하다보니 돌아보니 시간도 시간이지만 코드도 좀 더 짧아진 것 같다. 모든 작업물이 그랬지만 역시 보면 볼수록 불편한 게 자꾸 생겨서 그만 봐야겠다.ㅋㅋ

다크모드

• mode 라는 클래스의 버튼에 클릭이벤트를 달아주었다.

<button class="mode" @click="modeChange"></button>

• body에 클래스를 토글하는 방식으로 구현했다.

const modeChange = () => {
      $('body').toggleClass('light');
    }

• 그리고 body 시맨틱 태그와 light 클래스를 동시 보유한 태그에 속성을 부여하도록 코드를 작성했다.

body.light {
	// 라이트모드 관련 코드
}

다크모드 후기

반응형과 달리 color 와 background-color 을 변경하는 작업이 대부분이라 계층 구조로 작업하지않고 색상별로 묶어서 !important 로 작업했다.
색상변수도 고려했으나 결국 변하는 부분에 대한 코드는 일일히 다 작성해주어야 해서 변수로 사용하지 않았다.
나름 코드를 최소화했지만 생각보다 내가 무책임하게 색상을 꽤나 다양하게 사용했다.ㅋㅋ 디자인도 잘 모르면서 예쁘게는 꾸미고 싶고 고민하다보니 시간은 시간대로 쏟고 코드는 코드대로 길어져있었다. 사실 클론코딩이 아닌 새로운 사이트를 몇 번 만들다보니 어느 순간 디자인을 점점 싫어하고 있었다.쨌든 하나만 하자. 디자이너분들 존경합니다..!