반응형 웹사이트 기초

• 웹 표준
• 웹 접근성
• 반응형
• 검색엔진 최적화

반응형 웹 사이트

• 하나의 웹사이트로 접속하는 기기의 화면의 크기 맞춰 자동으로 레이아웃 및 콘텐츠 구성하는 개발 방법
• 스마트폰의 대중화로 인해 중요성 인식
• 인터넷에 접속되는 기기가 다양해 지면서 더 다양한 스크린에 대응해야하는 이슈 (스마트폰, 랩탑, PC, 워치, 티비, 자동차, 냉장고)

<aside> 💡 반응형 웹사이트는 경험과 많은 노력이 필요하다.

</aside>

반응형 웹 사이트 범위

• 화면 크기

  @media screen and (min-width : 576px){}
  

• 화면 방향

  @media only screen and (orientation : portrait){}
  

• 픽셀 밀도 : 얼마나 고해상도 폰이냐?

  • 고해상도에서 더욱 선명하게

  @media only screen and (device-pixel-ratio:2){}
  @media only screen and (resolution:144dpi){}
  

• 화면 비율 : 화면의 비율

  • TV가 출현하고, 자동차. 이마트 광고

  @media only screen (aspect-ratio:2/3){}
  

• 마우스 포인터

  • 터치환경 or 마우스 환경
  • 마우스 호버, 터치, 띄기 디테일 한 마우스포인터 패턴

  @media only screen and (pointer : coarse) and (any-point : fine) {}
  

• 프린트 장치

  • 화면에 보일때와 프린터 했을때의 화면 다를때 (교육사이트의 학교 교재, 일본 사이트, 공공 사업)
  • pc에서는 마진값이 10인데 프린트 할때는 마진값을 15로 맞춘다.

  @media and screen { background:rgb(230, 230, 230) }
  

• 컬러 & 컬러모드

  • 컬러 화면인지 흑백 화면인지 (접근성 관련된 프로젝트)

  @media only screen and (perfers-color-scheme : dark) {}