본문 바로가기
잡기

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

by FloralPig 2015. 3. 31.
반응형

 [ 들어가면서...]

ㅇ 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>

 

 

 
728x90
반응형