반응형 정보

2050 단어 HTMLCSS

소개



당연합니다만, PC로 web 사이트를 열람할 때는 화면이 스마트폰보다 큽니다.

그리고 스마트 폰으로 웹 사이트를 볼 때는 PC보다 작습니다.

이러한 다양한 디바이스의 크기에 대응해, 열람하기 쉬운 디자인의 웹 사이트를 작성하는 방법이 있습니다.

반응형 웹 디자인



화면 폭에 따라 외형이 달라지도록 WEB 사이트나 어플리케이션의 디자인을 설계하는 것입니다.

작성한 HTML을 화면의 크기에 따라 CSS를 바꿀 수 있습니다.



웹 사이트를 반응형화하기 위해서는 아래의 단계가 필요합니다.
  • 표시 영역 설정
  • 화면 크기에 따라 이미지처럼 CSS를 전환합니다
  • 각 화면 크기에 적용되는 CSS를 설명합니다.

    반응형 대응을 위해서는 화면폭이 다른 기기에 대해 웹사이트의 표시 영역을 설정해야 합니다.

    이 표시 영역을 viewport라고 합니다.

    viewport의 지정을 하지 않으면, 스마트폰으로 표시했을 때에, PC 사이트의 레이아웃을 그대로 스마트폰의 화면내에 들어가도록 축소해 표시되므로, 문자가 작아져 매우 보기 어려워져 버립니다.

    화면 크기를 전환하는 방법



    「화면 폭이 500px가 되었을 때만, h1 태그의 font-size를 5px로 하고 싶다」 경우는 이하와 같이 기술합니다.
    @media (max-width: 500px) {
  h1 {
    font-size: 5px;
  }
}

    미디어 검색어 @media (max-width/min-width: 〇〇〇px) { }

    미디어 쿼리는 표시된 화면 너비에 따라 적용할 스타일을 전환하는 기능입니다.

    브레이크 포인트

    중단점은 미디어 쿼리에 의해 정의된 스타일 적용의 분기점을 의미합니다.

    @media (max-width: 500px){ }의 경우 500px가 중단점이 됩니다.

    브레이크포인트의 값을 몇 pixel로 하는지, 그리고 몇 개소 브레이크포인트를 두는지는 제작하는 웹사이트의 요건에 따라 달라집니다.
    • Deno: 사용 시작 방법
    커밋 시 코드 형식을 자동화하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage