들어가기 전에

이번 실습은 PC버전을 기준으로 하여 TABLET PC의 해상도와 MOBILE 기기의 해상도에 반응하는 웹페이지를 만들어 보겠습니다.

반응형 웹은 PC, Tablet, Mobile 의 환경을 모두 하나의 소스(css)안에서 동작을 해야 하기 때문에 각각의 가이드를 따로 확인하는 것보다는 각각의 디자인이 어떤식으로 변화가 되어야 해야 하는지에 대해서 생각을 해야 합니다.

제작 가이드  

주요 기능 

• PC, Tablet, Mobile 에 따라 반응되는 사이트

스타일 정보

• PC
  • header: 배경색 pink, 폰트 14 / #fff
  • content: 최대 가로길이 900px, 리스트 간격 10px, 리스트 폰트 14px / #000
  • footer: 배경색 #ccc, 폰트 14 / #000
• Tablet
  • header: 배경색 lightseagreen, 로고폰트 40 / #fff, 메뉴폰트 25 / #fff
  • content: 리스트 간격 8px, 리스트 폰트 14px / #fff
  • footer: 배경색 lightcoral, 폰트 14 / #000
• Mobile
  • header: 배경색 lightseagreen, 로고폰트 40 / #fff
  • header GNB: 배경색 lightslategray, 폰트 25 / #fff
  • content: 리스트 간격 8px, 리스트 폰트 14px / #fff
  • footer: 배경색 lightcoral, 폰트 14 / #000

주요 태그 및 속성 

• HTML
  • div, header, footer, nav, section
    
• CSS
  
  • 미디어 쿼리의 특성 (논리연산자 이용하기)