반응형 웹

반응형 <-> 적응형

반응형
특정 웹사이트를 만들고 css를 통해 모바일에서도 정상적으로 보일 수 있게하는 것
css에 미디어쿼리를 사용
최근 트렌드이지만
모든 페이지가 반응형으로 만들어야하는 것은 아님

내용이 많을때는 적응형이 나을때도 있다.

가운데 위치(1024~1280정도)를 잡고
남는 부분을 필요없는 디자인으로 채움

import styled from '@emotion/styled'

const Wrapper=styled.div`
    width: 1000px;
    height: 1000px;
    background-color: red;

    // 태블릿 사이즈
    @media (min-width: 768px) and (max-width: 991px){
        width: 500px;
        height: 500px;
        background-color: green;
    }

    // 모바일 사이즈
    @media (max-width: 767px) {
        width: 100px;
        height: 100px;
        background-color: blue;
        display: none;  // 모바일에서는 상자 나타나지 않음
    }
`


export default function ResponsiveDesignPage(){

    return(
        <Wrapper>상자</Wrapper>
    )
}

브라우저 창의 크기에따라
사용 기기에 따라 크기 다르게 사용해야함

출처:부트스트랩

전체 사이즈를 줄이는 것도 있고,
보통은 세로는 스크롤로 그냥 두고 가로 길이를 반응형으로 줄임

모바일마다 가로 사이즈 다 다른데?
-> 픽셀이 아닌 % 로 값을 줌

폰트 사이즈 한번에 변경하는 방법
px이 말고 rem으로 값 주기
px to rem 검색하면 환산해서 알수있음

em은 부모태그에 의존 부모태그의 사이즈에 맞게 크기를 결정
잘 안씀