TIL 23.03.16

오늘은  반응형 웹에 대해서 공부하였다.

 

반응형 웹이란?

여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여, 크기에 따라 레이아웃이 변하는 웹 사이트를 의미

 

 

미디어 쿼리

미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는 구문

미디어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을 적용 가능

media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

--예제
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

 

 

실습 예시

 

 

import styled from "styled-components";
import "../App.css";
const BREAK_POINT_TABLET = 768;
const BREAK_POINT_PC = 1200;
const MainArea = styled.div`
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQax6rmz_WKtNg2LTxSDYodb3uo_Apj4KcbDQ&usqp=CAU");
  background-repeat: repeat;
  max-height: 864px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: 128px 0px 0 0px;

  div.text {
    width: 1200px;
    margin: 0 auto;
    .large_screen {
      display: none;
    }
    .small_screen {
      display: block;
    }
    p {
      position: relative;
      top: 60px;
      width: 100%;
      height: auto;
      color: black;
      font-weight: 600;
      font-size: 60px;
      letter-spacing: 6px;
      line-height: 1.4;
    }
  }

  // 태블릿 : 1200px ~ 768px :: 768px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_TABLET}px) {
    background-image: url("https://item.kakaocdn.net/do/1d495862f49c38232ca8b6cc6a9679a08f324a0b9c48f77dbce3a43bd11ce785");
    background-repeat: no-repeat;
    background-color: skyblue;
    background-position: right;

    div.text {
      p {
        color: white;
      }
      .large_screen {
        display: block;
      }
      .small_screen {
        display: none;
      }
    }
  }
  // PC : 1200px 이상 :: 1200px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_PC}px) {
    background-color: antiquewhite;
  }
`;

const Render = () => {
  return (
    <>
      <MainArea>
        <div className="text">
          <div className="small_screen">
            <p>군침이</p>
            <p>싹</p>
          </div>

          <div className="large_screen">
            <p>작은화면으로</p>
            <p>줄여보세요</p>
          </div>
        </div>
      </MainArea>
    </>
  );
};

export default Render;

미디어 쿼리를 사용하여서, 크기별로 각기 다른 배경색, 배경사진을 구현하였고,

크기 별로 다른 텍스트가 나오도록 기본적으로 2가지 div 요소를 작성한 뒤,

display 속성을 주어서 한가지 div 요소만 보이도록 설정해 주었다.

 

 

장난 삼아 만들어보긴 했는데, 나름? 반응형이다.