김은옥9 [HTML 5 반응형 웹디자인_2015.03.27] 9. 반응형 웹프로젝트 [ 들어가면서...] ㅇ 프로젝트 구조 - [WebContent] : html 파일 - [WebContent]-[js]: 자바스크립트 파일 - [WebContent]-[css]: CSS파일 - [WebContent]-[img]: 이미지파일(png) - [WebContent]-[video]: 동영상 파일 - [WebContent]-[audio]: 오디오 파일 ㅇ 반응형 비디오 삽입 - making iframe video content work in a responsive web design : , - using the to FitVids(FitVids jQuery plugin) . 구글 콘텐츠 전송 네트워크 사용 . fitvids.js파일을 [js]폴더에 저장 후 . 비디오가 있는 영역에 제이쿼리 사용 -.. 2015. 4. 1. [HTML 5 반응형 웹디자인_2015.03.27] 8. CSS3 [ 들어가면서...] ㅇ CSS3로 할 수 있는 것들 - 코드 몇 줄로 작업처리 둥근모서리, 배경 그레이디언트, 텍스트 새도, 박스 새도, 사용자정의 글꼴 - 자바스크립트의 일부 기능 대체 - 호버 상태 애니메이션 처리 [ CSS3 실습 ] ㅇ CSS3 규칙 - 스타일시트를 구성하는 규칙집합(rule set or rule)은 selector와 선언 블록{ }으로 구성 - selector : 태그명, id속성 값("#"), class속성(".") 값 h1{ } - 선언 블록{ } : 선언(속성+값, 콜론(:)으로 구분) 기술 / 선언과 선언 사이는 세미콜론(;)으로 구분 h1{ color: green; font-size: 20px; } ㅇ 벤더 프리픽스 - CSS3모듈 표준 규격을 미승인(W3C) -> 브.. 2015. 4. 1. [HTML 5 반응형 웹디자인_2015.03.27] 7. 웹폼 [ HTML5에서 웹폼 구성 ] ㅇ .... type으로 구분 - 모든 폼 태그는 사이에 위치 - ,와 같은 폼태그에 태그를 붙임 이름 ㅇ 태그를 사용해 관련된 태그를 그룹화 취미 낮잠 TV시청 취미 낮잠 TV시청 ㅇ 태그의 기존 타입 :텍스트 필드 : 패스워드 필드 : 체크박스 : 라디오 버튼 : 파일 선택기 :[submit]버튼 :[reset]버튼 :[button]버튼 ㅇ 태그에 추가된 타입 :이메일 필드 :URL필드 :전화번호 필드 :숫자 필드, ▲/▼눌러 선택 :숫자 필드, 슬라이드 막대를 사용해 숫자 선택 :날짜 선택 필드 :시간 선택 필드 :검색 필드 : 색상선택 ㅇ 폼태그에서 새로 추가된 속성 list, max, min, pattern, placeholder(입력도우미, input 칸에 예시.. 2015. 4. 1. [HTML 5 반응형 웹디자인_2015.03.27] 6. 반응형 웹디자인을 위한 HTML5 [ 들어가면서...] ㅇ 참고사이트 - www.w3chools.com ㅇ HTML5 보일러 플레이트 사용 .... 모방은 벤치마킹... 좋은 거 ㅋㅋ - 필수적인 CSS 및 미디어쿼리 제공 - http://html5boilerplate.com/ get a custom build 다운(initializr-verekia-4.0.zip) *v5.0.0.이 풀버전 - copy해 와서 코딩 - 새로운 project 만들기 - 새 project에 initializr(initializa 압축풀면) 폴더 내의 폴더와 화일을 복사 ------> 반응형 사이트의 템플릿 페이지를 얻어낼 수 있음. * HTML5 보일러 플레이트 다운로드 http://html5boilerplate.com/ [Get a custom build].. 2015. 3. 31. [HTML 5 반응형 웹디자인_2015.03.26] 5. 유동형 레이아웃 [ 들어가면서... ] ㅇ 미디어쿼리의 한계 - 고정적인 디자인 폭은 다음 단계의 폭까지 매끄럽게 표현되지 않음 - 콘텐트 짤림 - 고정된 픽셀기반의 레이아웃을 유동적인 비례형 레이아웃으로 변경 필요 : px -> % [ 유동형 레이아웃 ] .... 화면의 크기에 따라 적절히 배분되는 레이아웃 ㅇ 고정 레이아웃을 비례형 레이아웃으로 수정 1) 고정크기(px)를 비례형(%)으로 변환하기 위한 공식 타깃 / 컨텍스트 = 결과 2) 작성단계 - 1단계 : 가장 바깥 태그를 비율로 설정 id속성 값이 wrapper의 비율 960px -> 96%로 변환 : 1단계 - 컨텍스트(960px) 설정 - 2단계 : #wrapper의 하위태그인 id속성값이 header, footer, navigation를 비율로 설정 9.. 2015. 3. 31. [HTML 5 반응형 웹디자인_2015.03.26] 4. 미디어 쿼리 [ 들어가면서...] ㅇ 미디어쿼리 - 화면의 크기에 반응하는 페이지 배치 => 화면의 크기에 반응하는 디자인에 필요 - CSS3 모듈 중 하나 - device의 display 능력에 따라 CSS3 스타일 지정 - CSS 파일내의 가장 마지막에 기술 ㅇ CSS파일의 작성 순서 1. 공통사항을 작성 2. 특정태그에만 적용하는 사항을 작성 3. 미디어쿼리를 작성 - 특정태그가 화면크기에따라 달라지는 부분을 작성 [ 미디어 퀴리 구문 작성 위치 ] ㅇ CSS파일(.css)에 @media로 기술 화면의 크기에 따라 자연스럽게 흐르듯이 배치 -> 화면의 크기에 따라 한줄에 배치되는 메뉴의 수의 달라짐, 다음줄로 나머지 메뉴가 마저 배치됨 * float 사용 ① float 지정 - float : 방향(left/ri.. 2015. 3. 31. [HTML 5 반응형 웹디자인_2015.03.25] 3. 반응형 웹의 개요 [ 들어가면서...] ㅇ HTML5 웹페이지 기술방식 - HTML5 : 를 사용해 영역을 구분하고, 자바스크립트가 담당하던 처리의 일부를 HTML태그의 속성에서 처리, 한글 인코딩utf-8 - CSS3 : 화면에 HTML의 태그를 표현 및 자바스크립트가 담당하던 처리의 일부를 담당 - JavaScript : 처리나 서버에 페이지요청 + HTML5, CSS에서 처리할 수 없는 기능등을 담당, 캔버스(Canvas)에서 사용하면 게임의 작성도 가능. [ 반응형 웹] (1) 반응형 디자인 예시 http://eclipse.org/ ... 배치 변경... 유동형 레이아웃 사용...확대, 축소... 미디어쿼리 + 유동형 레이아웃 사용 (2) 반응형 웹사이트를 참고하기 좋은 사이트 http://mediaqueri.es.. 2015. 3. 31. [HTML 5 반응형 웹디자인_2015.03.25] 2. 작업 환경 설정 [ 들어가면서...용어 짚어보기 ] ㅇ 미디어 쿼리 - device에 따라 전체적인 layout 구성이나 size가 유동적으로 반응하는 것을 말한다. - 유동형 레이아웃 .... 비례형 레이아웃 : 과거에는 %로 조정했으나 pixel로.... 다시 현대에는 %로 적용 유동형 이미지, 유동형 그리드... 논란이 많은 부분이라고... 교재 저자도 설명을 아끼는... 나랑 상관은 없음 ㅇ HTML5 특징 - 시맨틱 : 예를 들면 태그와 태그로.... 코딩을 위해 선택된 태그만 봐도 뒤에는 구문이 오고 뒤에는 숫자가 오겠구나 하는 의미를 추론할 수 있도록 코딩하는 것을 말한다. - WAI-ARIA : 웹접근성 (Web Accessibility Initiative - Accessible Rich Internet .. 2015. 3. 31. [HTML 5 반응형 웹디자인_2015.03.25] 1. 오리엔테이션 e-book만 다운 받아놓고 해야지 해야지 하던 HTML5 교육을 이제 시작하게 되었다. 서울시 인재개발원 HTML5로 구현하는 반응형웹사이트.... 3일 교육으로 만족스럽지는 않겠지만 항상 그렇지만 기본적인 것만 배우고 나머지는 본인의 노력.... 노력....이 관건이라능 나에게는 새로운 분야라 미리 예습도 하고 기대가 크다. 웹프로그래밍 입문은 미리 읽었고 모던 웹디자인은 교육 중에 읽어 나갈 계획... 교육 교재는 반응형 웹디자인(HTML5와 CCS로 작성하는) 거금 3마넌짜리... 책 표지도 산뜻하고... 외국저자라 군더더기 없는 깔끔한 내용편집이 눈에 띈다. http://book.naver.com/bookdb/book_detail.nhn?bid=7013962 이해를 돕기 위한 전반적인 개괄 설명.. 2015. 3. 31. 이전 1 다음 728x90
