티스토리 뷰

Language/JavaScript

[Do it!] 11. 반응형 웹 UI 만들기

구일일구 2024. 2. 19. 16:39
반응형

1. 프로젝트 구성과 HTML 문서 설계하기

프로젝트 구성 요소 알아보기

프로젝트 파일과 폴더 구성 먼저 설계하기

 

HTML 레이아웃과 콘텐츠 구성

반응형 웹을 만들기 위해 문서(HTML)의 레이아웃과 콘텐츠 구성 파악

레이아웃 : 문서의 뼈대를 말함

레이아웃은 모든 문서(HTML)에 반응형 웹 기술을 공통으로 적용할지의 여부에 따라 공통 문서와 비공통 문서로 나눔

헤더, 푸터 부분이 공통 / 나머지는 비공통 문서 => 책 예제에서만

 

2. 공통 UI 만들기

브라우저의 너비 설정하기

반응형 웹은 기기 종류에 따라 최적화된 UI 디자인을 제공해야함

기기마다 너비를 감지하여 <html> 태그의 class값을 각각 'pc', 'tablet', 'mobile' 로 설정해야함

이 값을 중단점이라고 부름

데스크톱은 1009px이상, 태블릿은 801 px 이상 1008 px이하 , 모바일은 800 px 이하로 설정

 

GNB 만들기

GNB(Global Navigation Bar)는 사이트의 메인 메뉴

GNB는 방문자가 직접 사용할 요소가 많음

 

반응형
저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[Do it!] 10. 제이쿼리 플러그인  (0) 2024.02.19
[Do it!] 09. 제이쿼리 비동기 방식 연동 [2.Ajax 관련 메서드]  (0) 2024.02.13
[Do it!] 09. 제이쿼리 비동기 방식 연동 [1.Ajax]  (2) 2024.02.09
[Do it!] 08. 효과와 애니메이션 [2.애니메이션 효과 제어 메서드]  (0) 2024.02.07
[Do it!] 08. 효과와 애니메이션 [1.효과 및 애니메이션 메서드]  (1) 2024.02.05
댓글