[HTML 5 반응형 웹디자인_2015.03.25] 3. 반응형 웹의 개요

 [ 들어가면서...]

ㅇ HTML5 웹페이지 기술방식

    - HTML5 : <section>를 사용해 영역을 구분하고, 자바스크립트가 담당하던 처리의 일부를 HTML태그의 속성에서 처리, 한글 인코딩utf-8

           - CSS3 : 화면에 HTML의 태그를 표현 및 자바스크립트가 담당하던 처리의 일부를 담당

           - JavaScript : 처리나 서버에 페이지요청 + HTML5, CSS에서 처리할 수 없는 기능등을 담당, 캔버스(Canvas)에서 사용하면 게임의 작성도 가능.

 

 [ 반응형 웹]

(1) 반응형 디자인 예시
  http://eclipse.org/  ... 배치 변경... 유동형 레이아웃 사용...확대, 축소... 미디어쿼리 + 유동형 레이아웃 사용

 

(2) 반응형 웹사이트를 참고하기 좋은 사이트
  http://mediaqueri.es/

 

(3) HTML 웹페이지에서 구조적인 설계
  <div></div> : 영역을 가짐 <- Ajax
  <input type='text' id='idx'  name='idx'/>        **** "id" : 태그에 유일한 id 부여

                                                                 ****  모바일 DBMS : sql lite에선 "ids" 사용 안함

 

 - 영역을 <div>로 코딩하지만 header, footer, sidevar, content 구분이 안됨.   인식 어려움.... so "id"사용
 

예시)페이지를 구조화할때(html4와 html5)       html4                                                              html5 .... 의미있는 semantic tag  <div id=header>                                        ------>  <header>  <div>  ---> <div id='navigation'>                ------>     <nav id='navigation'>    <ul>      <li><a>동양화</a></li>      <li><a>TV시청</a></li>    </ul>  </div> *** <a> 링크, 버튼표출 기능 *** 페이지 : 화면으로 표출되는 것  html 프로그램이라고 하지 않음... *** tag / element(요소)   .... 구분해서 생각할 필요없음.    <div>   div:순수한 태그의 이름 ㅋㅋ 교재에 충실.... 밑줄 그으며 학습했다.  오랫만... *** navigation : header의 메뉴 버튼에 사용. *** 스크린 : window(창) *** 뷰포트 : document(내용이 보이는 영역)

 

* 강력한 <a>태그

<a>태그 내에 여러 태그를 넣을 수 있음

<div>

  <ul>

      <li><a herf="#">버튼</a></li>