반응형 웹사이트2

반응형 웹사이트 작성하기 전 알게 된 정보

일단 반응형 웹사이트를 하려면 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위나 %(퍼센트)를 사용해야 한다.

• font-size: 1vw; /뷰포트 너비의 100분의 1/
• font-size: 1vh; /뷰포트 높이 100분의 1/
• font-size: ivmin; /뷰포트 높이와 너비 중 작은 쪽의 100분의 1/
• font-size: 1vmax; /뷰포트 높이와 너비 중 큰 쪽의 100분의 1/

• position: absolute; 를 사용하면 다른 요소들과 겹치지 않고 원하는 위치에 배치할 수 있지만 절대위치를 지정해 다른 요소들의 위치 변화에 영향은 받지 않는다.
• 저 속성을 사용하면 해당요소는 블럭요소가 되고, 따라서 "width" 속성과 "height"속성이 지정되어 있지 않으면 부모요소의 크기를 따르게 된다.

05_화면구현 포토폴리오 (05/16)

조건

• 아래의 한솥도시락 웹페이지 포트폴리오 예시처럼 본인이 선정한 반응형 웹의 이미지 소스를 요소검사로 다운받아 index.html를 포함하여 총2개~5개 사이의 개수로 페이지를 제작하여 프론트엔드 반응형 웹사이트 포트폴리오로 완성하세요.
  1) 해당 페이지를 데스크탑, 타블렛, 모바일에서 보았을 때 레이아웃이 틀어지지 않아야 합니다.
  2) 디바이스에 따라 반응하여 변하는 컨텐츠나 레이아웃 부분이 3군데 이상, 컨텐츠에 애니메이션 되거나 transition 혹은 이미지가 변하는 부분이 1군데 이상 있어야 합니다.

평가문항

• nav,footer태그의 구조를 알맞게 구성하였으며 디바이스 사이즈에 따라 반응하는 네비게이션을 설계하고 제작
  - 네비게이션을 만들 때 관련 태그로 알맞게 만들고 디바이스 사이즈에 따라 네비의 스타일이 변해야 한다.
• 네비를 포함하여 상품의 링크 태그를 만들었고 마우스를 호버하면 글자의 색이 변하는 등 활성화되며, 클릭했을 때 원하는 컨텐츠로의 이동이 동작
• favicon을 만들고 웹페이지에 제목을 작성했으며, 웹의 tab영역에서 잘 동작하는가?
• 웹의 로고나 타이틀을 잘 활용
  • 메뉴별 컨텐츠의 레이아웃이 알맞게 코딩되었으며 디바이스 사이즈에 맞게 레이아웃이 변하는 부분이 3군데 이상 있는 경우
• 컨텐츠에 마우스 호버시 애니메이션 되거나 transition 혹은 이미지가 변하는 부분이 있고 잘 동작하는가? (10점)

예시

모바일 디바이스에서 보았을시 예시

데스크탑 디바이스(컴퓨터)에서 보았을 시 예시

내가 구현한 메인페이지

모바일로 보았을 때

내가 구현한 서브페이지

모바일로 보았을 때