HTML5 CSS3 - 스마트폰 레이아웃, 하이브리드 앱

 개요

스마트폰 웹 페이지가 대부분 애플리케이션의 형태로 진화하고 있다.

점점 스마트폰 애플리케이션인지 웹 페이지인지 구분하기 힘들어 지 고 있다.

​

 모든 그림에서 왼쪽이 모바일 웹 페이지이고 오른쪽이 네이티브 애플 리케이션이다.

• ※네이티브 애플리케이션: 운영체제 제작 업체에서 제공하는 SDK를 사용 해 만든 애플리케이션을 네이티브 애플리케이션이라고 부른다.

 다음 그림은 스타일시트를 제거한 페이스북 애플리케이션이다.

 이렇게 네이티브 애플리케이션과 HTML5를 함께 사용해 만든 애플리 케이션을 하이브리드 애플리케이션이라고 부른다.

​

​

 하이브리드 애플리케이션으로 만들면 HTML5를 사용해 한 번만 개발 하여 모든 운영체제에서 실행할 수 있다는 장점이 있다.

​

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

​

​

​

​

모바일 웹 개발 주의사항

​

 모바일 웹을 개발할 때는 일반 웹 페이지를 개발할 때보다 주의할 점이 많다.

​

 overflow 속성을 사용해 스크롤을 넣을 수 없다.

대부분의 스마트폰 웹 브라우저는 overflow 속성에 scroll 속성을 적용 할 수 없다.

​

 상태 선택자를 사용할 때 주의해야 한다.

스마트폰은 터치를 사용하므로 화면을 누르는 순간 곧바로 클릭이 적 용된다. 따라서 hover 선택자와 active 선택자를 사용할 때에 주의가 필요한다.

​

 동위 선택자에 제한이 있다.

대부분의 스마트폰 웹 브라우저는 동위 선택자(~)를 지원하지 않는다.

​

​

 안드로이드 2, 3버전의 웹 브라우저는 대부분 CSS3 그레 이디언트를 적용하지 못한다.

안드로이드 2, 3 버전의 웹 브라우저는 CSS3 그레이디언트를 지원하 지 않는다.

​

 안드로이드는 디바이스 별로 웹 브라우저가 다를 수 있다.

따라서 다양한 디바이스에서 테스트해야 한다.

​

​

뷰포트 meta 태그

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

 뷰포트 meta 태그

모바일 웹 페이지는 화면에 대한 특별한 정보를 제공하려고 뷰포트 meta 태그를 사용한다.

뷰포트 meta 태그는 브라우저의 화면 설정과 관련된 정보를 제공한다.

네이버 모바일 페이지는 다음과 같은 뷰포트 meta 태그를 사용한다.

​

​

 뷰포트 meta 태그에는 다음과 같은 속성을 입력한다.

​

 일부 모바일 브라우저에서는 target-densitydpi 속성을 지원하지 않으 므로 주의한다.

​

​

​

 추가적으로 뷰포트 meta 태그와 관련된 내용은 안드로이드와 아이폰 의 meta 태그 설명을 참조한다.

• 안드로이드 http://developer.android.com/guide/webapps/targeting.html

• 아이폰 http://developer.apple.com/library/safari/#documentation/appleapplications

/reference/safarihtmlref/Articles/MetaTags.html

​

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

​

​

 이번 장에서는 다음과 같은 모바일 웹 페이지를 만든다.

​

​

 다음과 같이 폴더를 구성한다.

​

​

 초기화

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

​

​

 헤더 구조

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

​

 그레이디언트 적용

대부분의 안드로이드 운영체제에서 그레이디언트가 적용 안되므로 다 음과 같은 배경 이미지를 사용한다.

​

​

​

​

 Header_background.png 파일은 높이 45픽셀, 너비 1픽셀의 이미지로 위에서 아래로 그레이디언트가 적용되어 있다.

​

​

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

​

​

 요소 위치 지정

이어서 다음과 같은 코드를 사용해 요소의 위치를 지정한다.

​

​

스프라이트 이미지

 스프라이트 이미지는 다음 그림처럼 이미지를 여러 개 뭉쳐놓은 것을 의미한다.

 이미지를 한 개의 파일에 뭉쳐놓으면서 웹 페이지 요청 시간을 줄이고 쉽게 관리할 수 있다.

​

​

​

 예제와 함께 제공되는 다음 이미지를 스프라이트 이미지로 만든다

​

 CSS Sprites Generator

다양한 프로그램을 사용해 스프라이트 이미지를 만들 수 있다.

무료로 제공되는 웹 스프라이트 생성기로 CSS Sprites Generator가 있 다.

다음 웹 페이지에서 이미지를 넣으면 스프라이트 이미지와 사용 방법 을 얻을 수 있다.

​

​

 스프라이트 이미지 사용

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

 토글 목록

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

​

​

 5장의 예제와 마찬가지로 다음 스타일을 적용한다.

​

​

​

​

 코드를 실행하고 label 태그를 클릭하면 목록이 토글된다.

 다음과 같은 스타일을 적용해 목록을 꾸민다.

​

​

 내비게이션 구성(1)

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

​

​

​

​

​

#top_gnb 태그를 다음과 같이 구성한다.

​

 #top_gnb 태그에 다음과 같은 스타일을 적용한다.

 내비게이션 요소와 비율

내비게이션 목록의 요소 개수에 따라 다음과 같은 너비 비율을 사용한 다.

​

 내비게이션 구성(2)

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

​

​

​

​

 #bottom_gnb 태그는 다음과 같이 구성한다.

 다음과 같은 스타일을 적용한다.

• display: table: table 태그와 같은 레이아웃을 갖는다.

• display: table-cell: td 태그와 같은 레이아웃을 갖는다.

​

​

 이러한 방식을 사용하면 별도로 너비를 지정하지 않아도 된다

 최종적으로 #bottom_gnb 태그에는 다음 스타일을 적용한다.

​

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

​

 #main_section 태그는 다음과 같이 구성한다.

​

​

​

 다음과 같은 스타일을 적용한다.

​

​

​

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

​

 푸터

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

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

​

​

 완성

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

​

정리

​

이번 예제에서는 다음과 같은 내용을 배웠다.

 뷰포트 meta 태그

 이미지를 사용한 그레이디언트 적용

 스프라이트 이미지

 overflow 속성과 float 속성을 사용한 목록 구성

 display 속성의 table 키워드를 사용한 목록 구성

 ::before 선택자를 사용한 수직 선 생성

​

​

 전체 화면

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

​

​

 주의 사항

다음과 같이 위치 정보 확인 메시지로 인해 웹 브라우저의 높이가 강 제로 축소되는 경우도 있다.

​

 이러한 경우에는 자바스크립트를 사용해 처리한다.

​

 스마트폰과 같은 작은 기기에서는 글자가 잘릴 수 있다.

이러한 경우에는 일반적으로 다음과 같이 생략 기호로 표시한다.

​

​

글자를 생략할 때는 다음과 같은 ellipsis 클래스를 사용한다.

​