[고양이 사진 검색 사이트] HTML, CSS - 시맨틱, media query, 다크모드(dark mode)

프로그래머스 과제 테스트 준비

프로그래머스는 html,css, javaScript이기 때문에 실질적으로 도움이 될 만한 React로 준비했다. 

테스팅에 목적이 아닌 학습을 위한 구현자료로써, 디자인은 하지 않았고 기능에 초점을 두었다. 

 

프로그래머스

🐇 HTML, CSS

 

🥕시맨틱 마크업 적용

코드가 전체적으로 div로만 이루어져 있습니다.
시멘틱한 방법으로 마크업을 변경하세요.

 

시맨틱한 코드

시맨틱(symantic)한 코드란 무엇인가? 시맨틱은 '의미의'라는 뜻을 가지고 있는 단어다. 코드에 적용하게 되면 말 그대로 Div 태그를 남발하지 않고 의미있는 코드를 작성하라는 정도로 이해하면 될 것 같다.

 

* HTML 주요 태그

<header></header> //페이지 최상단에 위치
<nav></nav> //네비게이션 바
<aside></aside> //사이드에 위치하는 공간
<main></main> //주요 내용
<section></section> //문서의 특정 영역
<article></article> //특정 영역 내부의 콘텐츠
<ul>
<li></li> // ul과 li는 함께 쓰이며 리스트 의미
</ul>
<footer></footer> //페이지 하단

이 외에도 많은 태그들이 존재하는데 시맨틱한 코드를 작성하기 위해서는 적재적소에 어울리는 HTML 코드를 알고 있을 필요가 있다.

 

시멘틱 마크업 예시

//시맨틱하지 않은 코드
<div>푸터입니다.</div>

//시맨틱한 코드
<footer>푸터입니다.</footer>

.

 

🥕 반응형 CSS 지원

유저가 사용하는 디바이스의 길이에 따라 row당 column개수를 적절히 변경해야 한다.
- 992px 이하 3개
- 768px 이하 2개
- 576px 이하 1개

display: grid; 을 이용해서 1열의 개수를 정했다. 

 

* Display : grid

grid-template-rows	명시적 행(Track)의 크기를 정의
grid-template-columns	명시적 열(Track)의 크기를 정의

grid 더 알아보기

 ImgContainer: styled.div`

    display: grid;

    grid-template-columns: repeat(5, 1fr); /* 기본 설정: 5개의 column */

    gap: 10px; /* 각 column 사이의 간격 */

    @media (max-width: 992px) {

      grid-template-columns: repeat(

        2,

        1fr

      ); /* 가로 길이 992px 이하: 3개의 column */

    }

    @media (max-width: 768px) {

      grid-template-columns: repeat(

        2,

        1fr

      ); /* 가로 길이 768px 이하: 2개의 column */

    }

    @media (max-width: 576px) {

      grid-template-columns: repeat(

        1,

        1fr

      ); /* 가로 길이 576px 이하: 1개의 column */

    }

  `,

 

🥕 다크모드 지원

기존 CSS의 모든주석을 제거 하고 모든 글자는 #FFFFFF, 배경은 #000000으로 한정한다.
OS의 다크모드 활성화 여부를 기반으로 동작.
유저가 테마를 토글링할 수 있도록 좌측 상단에 해당 기능을 토글하는 체크박스를 생성.

 

- 다크 모드

다크 모드는 어두운 색상의 배경에 밝은 요소를 사용하는 UI이다. 다크모드를 구현하는 방법은 여러가지가 있는데 prefers-color-scheme CSS를 사용했다.

그리고 토글 버튼을 사용해서 현재 상태가 라이트 모드면 다크 모드로, 다크 모드면 라이트 모드로 전환을 해야 한다. 

 

* prefers-color-sheme

다크 모드는 어두운 색상의 배경에 밝은 요소를 사용하는 UI이다.

prefers-color-scheme는 사용자 환경이 다크모드인지 라이트 모드인지 자동으로 인식하고 그에 맞춘 테마를 제공해야 하는데 역할을 해준다. 

 

1. global.css 생성한다 

 

/* 다크 모드 스타일 */

.dark-mode {

  background-color: #000;

  color: #fff;

}

/* 라이트 모드 스타일 */

.light-mode {

  background-color: #fff;

  color: #000;

}

2. App.js에 global.css를 import 한다. 

3. darkMode 인지 state로 판단한다.

 ※ 이때, prefers-color-scheme 을 사용한다.

const [isDarkMode, setIsDarkMode] = useState(

    window.matchMedia('(prefers-color-scheme: dark)').matches

  );

4. page - rendering 시 dark mode 확인한다. 

return (

    <S.Wrapper className={isDarkMode ? 'dark-mode' : 'light-mode'}>

    </S.Wrapper>

  );

 

5. 사용자가 테마를 토글링할 수 있도록 좌측 상단에 해당 기능을 토글하는 체크박스를 생성한다.

<input type="checkbox" checked={isDarkMode} onChange={changeTheme} />

 

6. 사용자가 토글시 darkMode를 전환할 수 있눈 함수를 생성한다. 

※ input onChange를 사용하면 된다.

// theame 변환

  const changeTheme = () => {

    setIsDarkMode(!isDarkMode);

  };