반응형 웹페이지 만들기

 

 

  이번에 학습했던 styled-components를 실습하기 위해서 오픈소스 figma를 구해서 정적 웹페이지를 구현했다. 물론 기능은 아직 생략되어 있고, 단순히 뷰만 보이는 목업 상태이다. 내가 진행하면서 조금 골치아팠던 것이 레이아웃 관련된 문제였다. 페이지를 줄이고 늘리는 것에 대한 적절한 사이즈가 필요했기 때문이다. 그래서 나는 반응형 웹페이지를 한번 구현해보기로 했고, 간단히 styled-components의 global style에 미디어 쿼리를 사용했다. 반응형 웹페이지의 개념은 https://velog.io/@pyo-sh/React-Responsive 블로그를 참조했다. 감사드린다. 해당 구현 코드와 간단한 결과에 대한 화면은 https://github.com/seonghyeon-Chi/web1 나의 github에서 확인할 수 있다.

  반응형 웹이란 태블릿, PC, 모바일 등 다양한 해상도로 접근할 때 동일한 서비스를 제공하기 위한 웹을 말한다. 각 해상도에 따라서 레이아웃과 스타일 변화를 주는 것이다.

  CSS 2.1부터 미디어 타입으로 단말기 종류에 따라서 다른 스타일을 적용시키는 것이 가능해졌다. 그러나 기기의 특성을 정확하게 판단하기 어려워 많이 사용되지 않았다. CSS 3는 미디어 타입을 개선하여 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장했는데, 이를 미디어 쿼리라고 한다.

 

@media only screen and (min-width: 400px) { ... }

 

•   only |  not

1. only: 뒤의 조건에서 만
2. not: 뒤의 조건을 제외한

• 미디어 타입

1. all: 모든 미디어 타입
2. aural: 음성 합성 장치
3. braile: 점자 표시 장치
4. handheld: 점자 표시 장치
5. print: 인쇄 용도
6. projection: 프로젝터
7. screen: 컴퓨터 스크린
8. tty: 디스플레이 능력이 한정된 털렉스, 터미널, 수동 이동 장치 등 고정 된 글자를 사용하는 미디어
9. tv: 음성과 영상이 동시 출력되는 장치
10. embrossed: 페이지에 인쇄된 점자 표시 장치

• 속성

1. width: 웹 페이지의 가로 길이
2. height: 웹 페이지의 세로 길이
3. device-width: 단말기의 가로 길이
4. device-height: 단말기의 세로 길이
5. orientation: width와 height를 구해 width > height 일 경우 landscape, height > width 일 경우 protrait
6. aspect-ratio: width / height 비율
7. device-aspect-raio: 단말기의 물리적인 화면 비율
8. color-index: 단말기에서 사용하는 최대 색상 수
9. monochrom: 흑백 컬러만을 사용하는 단말기에서 흰생과 검은색 사이의 단계
10. resolution: 지원하는 해상도를 판단
11. color: 단말기에서 사용하는 최대 색상 수의 비트 수

 

  위의 미디어 쿼리를 styled-components의 global style에 적용했다.

const GlobalStyle = createGlobalStyle`
  @media screen and (max-width:1799px) {
  /* 데스크탑 */
    * {
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
      font-size: 16px;
    }
  }

  @media screen and (max-width:1199px) {
  /* 타블렛 가로 */
    * {
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
      font-size: 12px;

    }
  }
  @media screen and (max-width:899px) {
  /* 모바일 가로, 타블렛 세로 */
  * {
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
      font-size: 8px;

    }
  }

  @media screen and (max-width:599px) {
  /* 모바일 세로 */
  * {
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
      font-size: 4px;

    }
  }
  body {
    font-family: 'Poppins';
    /* background-color: #111; */
    font-weight: 100;
    line-height: 1.5;
    color: #222;
    word-break: keep-all;
    word-wrap: break-word;
    margin: 0px;
    padding: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smooting: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  header {
    background-image: url(${backgroundImage});
    background-repeat: no-repeat;
    background-size: 100%;
    min-height: 55.375em;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    isolation: isolate;
    border-radius: 0px 0px 4em 4em;
  }
  footer {
    background: #f9f9f9;
    min-height: 25.25em;
  }
`

export default GlobalStyle;

보이는데로 루트의 스타일의 폰트만 조절하고 나머지 모든 레이아웃 폰트, 사이즈 등은 em사이즈로 설정하여 width의 크기만큼 동적으로 변하도록 만들었다.