Hi Hi

'웹 화면 속성'에 해당되는 글 1건

  1. HTML5 프로그래밍의 기초

HTML5 프로그래밍의 기초

 

1. HTTP
웹은 HTTP (HyperText Transfer Protool)라는 프로토콜(통신)에 따라 서버와 클라이언트 간의 통신을 수행한다.
HTTP 통신은 요청-응답을 기본으로 한다. 클라이언트는 서버에 접속하여 필요한 파일을 요청하고, 서버는 이 요청에 대해 응답을 한 후 접속을 끊는다.

2. HTML
HTML은 웹 페이지를 기술하기 위한 마크업(markup) 언어로, HTML 태그를 통해 정보를 구조화한다. 정보의 구조화란, 제목에 해당하는 부분은 어디이며, 어디서부터가 본문인지를 지정하는 것이다.
또한 태그는 다른 태그를 자식 요소를 포함시킬 수 있기 때문에 계층구조로 문장을 표현할 수 있다.

3. CSS
HTML이 문장의 논리 구조를 지정한다면, CSS(Sascading Style Sheets)는 표시 방법을 지정한다.
HTML5에서는 화면 표시와 관련된 부분은 따로 분리하여 CSS가 담당하고, HTML은 원래 목적인 문장의 논리 구조만을 지정하도록 하였다.


4. 자바스크립트
자바스크립트는 스크립트형 프로그래밍 언어다. 자바스크립트를 활용하염 단순히 문자와 그림을 표시하는 것 뿐인 웹에, 움직임이나 사용자와의 대화를 추구할 수 있다.

HTML5 작성법
HTML의 종류와 기본 정의를 나타내는 <DOCTYPE>을 선언한 후, 문자 코드를 지정하고 재목과 내용을 입력한다.
HTML5 부터는 <DOCTYPE>의 선언이 훨씬 간결해졌다.

HTML5의 기본 형태
<!DOCTYPE html >
<html lang="ko">
<head>
<meta charset="utf-8"/>

<title>호환성을 고려한 HTMP5 기본형</title>
<style>
 article,aside,figure,footer,header,hgroup,memu,nav,section {display:block;}
 
</style>
</head>
<body>
 <p>HTML5 기초 프로그래밍</p>
</body>
</html>


스마트폰용 HTML5의 기본 형태
각종 스마트폰의 화면 크기는 확인하여 최적화된 뷰포터를 지정하는 방법에 대해 알아보자.

 기종 화면 크기(픽셀) 
 iPhone 3G/3GS  320 x 480
 iPhone 4G  960 x 640
 iPad  1024 x 768
 삼성 갤럭시 S  480 x 800
 HTC 구글 넥서스원  480 x 800

뷰포트
스마트폰은 기종별로 화면 크기가 다르다. 화면 사이즈를 특별히 고려하지 않아도 적정하게 표시해주는 '뷰포트' 라는 기능이 있기 때문이다. 이는 <META>태그로 뷰포트를 지정하기만 하면 화면은 자동으로 크기가 조절하는 편리한 기능이다.


<!DOCTYPE html >
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device,user-scalable=yes,initial-scale=1.0, maximum-scale=3.0"/>
<title> HTMP5 viewport</title>
<style>
 p{font-size:12px}
</style>
</head>
<body>
 <p>HTML5 기초 프로그래밍</p>
</body>
</html>

뷰포트 지정
표시 화면의 크기, 확대/축소 허용, 초기 표시 배율등 <META> 태그로 지정한다.
<meta name="viewport"
content="속성1= 속성값1, 속성2=속성값2,  ..."/>


  속성  기능 
 width  너비(픽셀 단위) (기본값은 980. device-width를 지정할 수 있다.)
 height  높이(픽셀 단위) (기본값은 980. device-height를 지정할 수 있다.)
 initial-scale  초기 배율 (기본값은 꽉 찬 화면으로 표시)
 minimum-scale  최소 배율 (기본값은 0.25. 범위는 0~10.0)
 macimum-scale  최대 배율 (범위는 0~10.0)
 user-scalable  사용자가 확대/축소 할 수 있는지 여부 (yes/ no 중 선택)


<meta name="viewport" content="width=680 ,user-scalable=yes"/>

// 너비를 680px 로 고정하고, 확대/ 축소를 못하게 한다.


'' 카테고리의 다른 글

HTML5 동영상 재생  (0) 2012.01.14
HTML5 개발툴 소개  (0) 2012.01.11
HTML5 컨버스의 기초  (0) 2012.01.09
HTML5 프로그래밍의 기초  (0) 2012.01.07
HTML5의 새로운기능  (1) 2012.01.05
HTML5 에 새로운 태그 4가지  (0) 2011.10.29