Web Design   웹 디자인

(2022-01-16)

반응형 웹 디자인

1.  디자인웹 문서를 `내용(content)`, `구조(layout/structure) 및 표현(presentation)`,
     `동작(behavior)` 으로 분리하여 디자인/설계하는 것


2.  디자인 분리 例

  ㅇ 표현 및 구조의 분리 (CSSHTML)
     - 구조는 HTML에 의해, 표현은 별도의 CSS 에 의함

  ㅇ 행동 및 구조의 분리 (JavascriptHTML)
     - 행동은 별도 자바스크립트 에 의해, 구조는 HTML에 의함 

  ㅇ 행동 및 표현의 분리 (JavascriptCSS)
     - 행동 및 표현을 별도의 자바스크립트CSS 에 의함


3. 반응형  디자인 (RWD, Responsive Web Design)

  ㅇ 단일  사이트에, PC,스마트폰,태블릿,TV 등 서로다른 장치들이 접속할 때, 
     - 장치 마다 다른 디스플레이,환경에 따라,
     - 화면 크기 등이 자동으로 변하게끔 하여, 최적화웹페이지를 만들 수 있는 기법을 말함

  ㅇ 감지된 미디어 타입, 화면 크기 등에 따라, 스타일 시트를 다르게 적용할 수 있게 해 줌

  ㅇ 필요 기술
     - 화면 크기를 감지하고 정확하게 제어,변환하는 기술
     - 환경 변화를 감지하는 기술 등

  ㅇ 주요 개념 넷
     - 가변 그리드 (Fluid Grid, Fluid Layout, Flexible Layout, Flexible Grid)
        . 기존의 픽셀(px) 위주의 고정 표현 방식에서, 퍼센트(%)에 의한 가변 표현 방식을 사용   
     - 미디어 쿼리 (Media Query)
        . 현재 사용 중인, 입출력 미디어의 유형,특성에 대한 쿼리 및 그에따른 스타일 지정
     - 뷰포트 (Viewport)
        . 웹브라우저 상에 사용자에게 실제 보이는 화면 크기를 제어 가능하게 하는 기술
     - 플렉시블 박스 (Flexible Box)
        . 화면의 구조 설계를 쉽게 하기 위해, 가변적인 박스를 만들어내는 기술

  ㅇ 반응형  디자인을 위해 새겨둘 점
     - 요소들을 각각 또는 그룹으로 배치할 것
     - ... 편집중 ...


[웹 디자인] 1. 웹 디자인 2. 스타일 시트
[CSS]
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   전기전자공학
  5.   방송/멀티미디어/정보이론
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   웹기술
            1. 웹 이란?
            2. 하이퍼텍스트
        1.   웹 구성
        2.   HTTP
        3.   웹 페이지
          1.   마크업 언어
          2.   DOM,BOM
          3.   웹 기능 요소
          4.   웹 디자인
                1. 웹 디자인
                2. 스타일 시트
            1.   CSS
        4.   웹 식별
        5.   웹 서비스
        6.   차세대 웹
        7.   웹기술 기타일반
      9.   인터넷 응용
      10.   인터넷 기타
      11.   패킷교환(PSN)
      12.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공학일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

 
        최근수정     요약목록     참고문헌