고양이 사진 검색 사이트1 :: 개요, Responsive web

순수 HTML, CSS, JS를 이용해서 웹 프론트앤드 작업을 하는 과제이다. Vanila JS로 하는 이 작업은 무언가 React와 많이 닮아있다.

 

JS의 객체지향적 특성을 활용해 컴포넌트를 구성한다. 생성된 하나의 객체가 컴포넌트가 된다. 하나의 Class를 하나의 파일로 관리한다.

객체들은 HTML/DOM이 그렇듯 트리 구조로 관리된다. 하나의 Class에서 생성자로 자식 컴포넌트의 생성자를 호출하는 방식으로 생성체인을 관리한다. 생성된 자식 컴포넌트는 부모 컴포넌트의 상태로 관리된다.

 

Class의 멤버변수는 해당 컴포넌트가 관리하는 상태가 된다. 상태는 지역적으로 관리되지만, 자식 컴포넌트로 전해줄수도 있다. 따라서 전역적으로 관리해야하는 데이터는 루트 컴포넌트에서 관리한다.

Responsive Web

CSS의 미디어 쿼리를 사용해 반응형 웹을 만들 수 있다.

Media Query

 미디어 쿼리는 기기의 타입(스크린, 프린트)이나 인자(화질 혹은 viewport의 너비)에 따라서 CSS속성을 적용하고 싶을 때 사용한다.

 

이전에는 PC의 모니터 화면만을 고려해 화면을 구상했다. 그리고 PC에 랜더링되는 웹 페이지는 브라우저를 거쳐 크기가 조정되어 랜더링 되지만, 모바일 기기는 고정된 사이즈로 컨텐츠가 랜더링 되기 때문에 컨텐츠의 크기나 전체적인 레이아웃을 모바일 기기의 화면 크기에 맞추어서 설계해야 한다.

 

특정 조건이 충족되었을 때 적용되는 스타일은 CSS의 @media를 통해 설정할 수 있다.

반응형 웹은 특히 Grid형태로 구성된 데이터를 표현할 때 사용된다. viewport의 너비에 따라 한 row에 포함되는 데이터의 개수를 다르게 한다. 따라서 미디어 쿼리의 문법을 살펴보기 이전에 Grid형식의 Display를 어떻게 설정하는지를 알아보자.

.SearchResult {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  grid-gap: 10px;
}

Grid Display

데이터를 그리드로 표현하고 싶다면 display속성에 grid라는 값을 지정해주면 된다.

flex와 grid의 차이점은 flex가 행 또는 열 방향의 1차원 레이아웃 시스템인 반면 grid는 가로, 세로 2차원의 레이아웃 시스템이라는 점이다.

 

grid의 형태는 grid-template-rows 혹은 grid-template-columns를 통해 지정할 수 있다. 

grid-template-columns의 경우에는 컬럼들 간의 비율을 지정한다. 만약 데이터를 4개의 컬럼 그리고 같은 비율의 크기로 표현하고 싶다면 grid-template-columns: 1fr 1fr 1fr 1fr과 같이 지정하면 된다. repeat 함수를 통해 repeat(4, 1fr)으로도 표현이 가능하다.

여기서 한 요소의 최소크기는 250px로 화면의 크기가 이보다 더 작아지면 page overflow가 발생한다.

---

이제 media query에 대한 설정을 해보자. 주어진 조건은 아래와 같다.

유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.
992px 이하: 3개
768px 이하: 2개
576px 이하: 1개

조건을 충족하는 미디어 쿼리 코드는 아래와 같다.

@media screen and (max-width: 992px) {
  .SearchResult {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    grid-gap: 10px;
  }
}

@media 키워드 다음으로 css를 적용할 조건을 지정한다. 이 경우에는 screen 형태의 992px까지는 3개의 요소를 반복해 grid로 표현한다는 코드를 작성해준다.