고양이 사진 검색 사이트 - 1. HTML, CSS 관련

HTML, CSS 관련

• 현재 HTML 코드가 전체적으로 <div> 로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다.
• 유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.
  • 992px 이하: 3개
  • 768px 이하: 2개
  • 576px 이하: 1개
• 다크 모드(Dark mode)를 지원하도록 CSS를 수정해야 합니다.
  • CSS 파일 내의 다크 모드 관련 주석을 제거한 뒤 구현합니다.
  • 모든 글자 색상은 #FFFFFF , 배경 색상은 #000000 로 한정합니다.
  • 기본적으로는 OS의 다크모드의 활성화 여부를 기반으로 동작하게 하되, 유저가 테마를 토글링 할 수 있도록 좌측 상단에 해당 기능을 토글하는 체크박스를 만듭니다.

 

---

1. 시맨틱한 방법으로 변경

 

2. column 갯수 변경

@media (max-width: 992px) {
  .SearchResult {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .SearchResult {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}

@media (max-width: 576px) {
  .SearchResult {
    grid-template-columns: repeat(1, minmax(250px, 1fr));
  }
}

 

3. 다크 모드(Dark mode)를 지원

     css에 추가

/*dark mode 처리*/
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: white;
  }
}

.darkmode {
  background-color: #000;
  color: #FFF;
}

.mode {
  margin: 0;
  padding: auto 0;
  text-align: center;
}

.Search_Mode_Box {
  display: flex;
  width: 100%;
}

 

     SearchInput.js 변경

const TEMPLATE = '<input type="text">';
const body = document.getElementById("body");

class SearchInput {
  constructor({ $target, onSearch }) {
    const box = document.createElement("div");
    const mode = document.createElement("span");

    const $searchInput = document.createElement("input");
    this.$searchInput = $searchInput;
    this.$searchInput.placeholder = "고양이를 검색해보세요.|";

    box.classList.add("Search_Mode_Box");

    $searchInput.className = "SearchInput";
    box.appendChild(mode);
    box.appendChild($searchInput);

    $target.appendChild(box);

    mode.style.height = $searchInput.offsetHeight + "px";
    mode.style.width = mode.offsetHeight + "px";
    mode.style.lineHeight = mode.offsetHeight + "px";
    mode.classList.add("mode");

    let inputwWidth = box.offsetWidth - mode.offsetWidth;
    $searchInput.style.width = inputwWidth + "px";

    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      mode.innerText = "light";
    } else {
      mode.innerText = "dark";
    }

    mode.addEventListener("click", function() {
      body.classList.toggle("darkmode");

      if (mode.textContent == "dark") {
        mode.innerText = "light";
      } else {
        mode.innerText = "dark";
      }
    });

    $searchInput.addEventListener("keyup", e => {
      if (e.keyCode === 13) {
        onSearch(e.target.value);
      }
    });

    console.log("SearchInput created.", this);
  }

  render() {}
}

 

나의 경우에는 검색창 옆에 다크 토글을 만들려고 했고, 나란히 두기 위해서 따로 div 태그를 추가하여 박스를 만들어 flex로 display를 설정했음.

- 라이트 모드

- 다크 모드