6 스마트폰 레이아웃

6.1 스마트폰 개요 개요 스마트폰 웹 페이지가 대부분 애플리케이션의 형태로 진화하고 있다. 점점 스마트폰 애플리케이션인지 웹 페이지인지 구분하기 힘들어 지 고 있다.

6.1 스마트폰 개요 모든 그림에서 왼쪽이 모바일 웹 페이지이고 오른쪽이 네이티브 애플 리케이션이다. ※네이티브 애플리케이션: 운영체제 제작 업체에서 제공하는 SDK를 사용 해 만든 애플리케이션을 네이티브 애플리케이션이라고 부른다.

6.1 스마트폰 개요 다음 그림은 스타일시트를 제거한 페이스북 애플리케이션이다. 이렇게 네이티브 애플리케이션과 HTML5를 함께 사용해 만든 애플리 케이션을 하이브리드 애플리케이션이라고 부른다. 하이브리드 애플리케이션으로 만들면 HTML5를 사용해 한 번만 개발 하여 모든 운영체제에서 실행할 수 있다는 장점이 있다.

6.1 스마트폰 개요 게임을 제외한 대부분의 애플리케이션은 하이브리드 애플리케이션으 로 제작 가능하다. 또한 하이브리드 애플리케이션을 제작할 수 있는 다양한 프레임워크 도 있다. 다음 프로그램도 왼쪽은 웹 페이지, 오른쪽은 하이브리드 애 플리케이션이다.

6.2 모바일 웹 개발 주의사항 모바일 웹을 개발할 때는 일반 웹 페이지를 개발할 때보다 주의할 점이 많다. overflow 속성을 사용해 스크롤을 넣을 수 없다. 대부분의 스마트폰 웹 브라우저는 overflow 속성에 scroll 속성을 적용 할 수 없다. 상태 선택자를 사용할 때 주의해야 한다. 스마트폰은 터치를 사용하므로 화면을 누르는 순간 곧바로 클릭이 적 용된다. 따라서 hover 선택자와 active 선택자를 사용할 때에 주의가 필요한다. 동위 선택자에 제한이 있다. 대부분의 스마트폰 웹 브라우저는 동위 선택자(~)를 지원하지 않는다.

6.2 모바일 웹 개발 주의사항 안드로이드 2, 3버전의 웹 브라우저는 대부분 CSS3 그레이디언트를 적용하지 못한다. 안드로이드는 디바이스 별로 웹 브라우저가 다를 수 있다. 따라서 다양한 디바이스에서 테스트해야 한다.

6.3 뷰포트 meta 태그 meta 태그는 웹 브라우저에 특별한 정보를 제공하는 HTML 태그이다. 뷰포트 meta 태그

6.3 뷰포트 meta 태그 뷰포트 meta 태그에는 다음과 같은 속성을 입력한다. 일부 모바일 브라우저에서는 target-densitydpi 속성을 지원하지 않으 므로 주의한다.

6.3 뷰포트 meta 태그 추가적으로 뷰포트 meta 태그와 관련된 내용은 안드로이드와 아이폰 의 meta 태그 설명을 참조한다. 안드로이드 http://developer.android.com/guide/webapps/targeting.html 아이폰 http://developer.apple.com/library/safari/#documentation/appleapplications /reference/safarihtmlref/Articles/MetaTags.html

6.3 뷰포트 meta 태그 뷰포트 meta 태그를 사용하지 않으면 모바일 장치의 너비는 생각하지 않고 일반 웹 페이지 해상도로 표시한다.

6.4 초기화 이번 장에서는 다음과 같은 모바일 웹 페이지를 만든다. 다음과 같이 폴더를 구성한다.

6.4 초기화 초기화 다음과 같은 초기화 코드를 사용해 웹 페이지를 초기화한다.

6.5 헤더 구조 작성 헤더 구조 다음과 같이 body 태그를 구성한다.

6.5 헤더 구조 작성 그레이디언트 적용 대부분의 안드로이드 운영체제에서 그레이디언트가 적용 안되므로 다 음과 같은 배경 이미지를 사용한다. Header_background.png 파일은 높이 45픽셀, 너비 1픽셀의 이미지로 위에서 아래로 그레이디언트가 적용되어 있다.

6.5 헤더 구조 작성 따라서 배경 이미지를 적용하면 다음과 같은 그레이디언트가 생성된 다.

6.5 헤더 구조 작성 요소 위치 지정 이어서 다음과 같은 코드를 사용해 요소의 위치를 지정한다.

6.5 헤더 구조 작성

6.6 스프라이트 이미지 스프라이트 이미지 스프라이트 이미지는 다음 그림처럼 이미지를 여러 개 뭉쳐놓은 것을 의미한다. 스프라이트 이미지는 다음 그림처럼 이미지를 여러 개 뭉쳐놓은 것을 의미한다. 이미지를 한 개의 파일에 뭉쳐놓으면서 웹 페이지 요청 시간을 줄이고 쉽게 관리할 수 있다. 예제와 함께 제공되는 다음 이미지를 스프라이트 이미지로 만든다.

6.6 스프라이트 이미지 CSS Sprites Generator 다양한 프로그램을 사용해 스프라이트 이미지를 만들 수 있다. 다음 웹 페이지에서 이미지를 넣으면 스프라이트 이미지와 사용 방법 을 얻을 수 있다.

6.6 스프라이트 이미지 스프라이트 이미지 사용 다음과 같은 코드를 사용해 스프라이트 이미지를 적용한다.

6.7 토글 목록 구성 토글 목록 다음과 같이 body 태그를 구성한다.

6.7 토글 목록 구성 5장의 예제와 마찬가지로 다음 스타일을 적용한다. 코드를 실행하고 label 태그를 클릭하면 목록이 토글된다.

6.7 토글 목록 구성 다음과 같은 스타일을 적용해 목록을 꾸민다.

6.8 내비게이션 구성(1) 내비게이션 구성(1) body 태그를 다음과 같이 구성한다. #top_gnb 태그를 다음과 같이 구성한다.

6.8 내비게이션 구성(1) #top_gnb 태그에 다음과 같은 스타일을 적용한다.

6.8 내비게이션 구성(1) 내비게이션 요소와 비율 내비게이션 목록의 요소 개수에 따라 다음과 같은 너비 비율을 사용한 다.

6.9 내비게이션 구성(2) 내비게이션 구성(2) body 태그를 다음과 같이 구성한다. #bottom_gnb 태그는 다음과 같이 구성한다.

6.9 내비게이션 구성(2) 다음과 같은 스타일을 적용한다. 이러한 방식을 사용하면 별도로 너비를 지정하지 않아도 된다. display: table: table 태그와 같은 레이아웃을 갖는다. display: table-cell: td 태그와 같은 레이아웃을 갖는다. 이러한 방식을 사용하면 별도로 너비를 지정하지 않아도 된다.

6.9 내비게이션 구성(2) 최종적으로 #bottom_gnb 태그에는 다음 스타일을 적용한다.

6.9 내비게이션 구성(2)

6.10 본문 구성 본문 body 태그를 다음과 같이 구성한다.

6.10 본문 구성 #main_section 태그는 다음과 같이 구성한다. 다음과 같은 스타일을 적용한다.

6.10 본문 구성 코드를 실행하면 다음과 같은 본문이 구성된다.

6.11 푸터 구성 푸터 다음과 같이 body 태그를 구성한다.

6.11 푸터 구성 푸터에는 다음 스타일을 적용한다.

6.12 정리 완성 최종적으로 다음과 같은 예제가 완성된다.

6.12 정리 이번 예제에서는 다음과 같은 내용을 배웠다. 뷰포트 meta 태그 이미지를 사용한 그레이디언트 적용 스프라이트 이미지 overflow 속성과 float 속성을 사용한 목록 구성 display 속성의 table 키워드를 사용한 목록 구성 ::before 선택자를 사용한 수직 선 생성

6.13 전체화면 전체 화면 웹 브라우저의 높이를 꽉 채우는 화면을 만들고 싶을 때는 html 태그 와 body 태그의 height 속성을 100%로 설정한다.

6.13 전체화면 주의 사항 다음과 같이 위치 정보 확인 메시지로 인해 웹 브라우저의 높이가 강 제로 축소되는 경우도 있다. 이러한 경우에는 자바스크립트를 사용해 처리한다.

6.14 글자 감추기 스마트폰과 같은 작은 기기에서는 글자가 잘릴 수 있다. 이러한 경우에는 일반적으로 다음과 같이 생략 기호로 표시한다. 글자를 생략할 때는 다음과 같은 ellipsis 클래스를 사용한다.

6.14 글자 감추기