css33 [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.26] 4. 미디어 쿼리 [ 들어가면서...] ㅇ 미디어쿼리 - 화면의 크기에 반응하는 페이지 배치 => 화면의 크기에 반응하는 디자인에 필요 - CSS3 모듈 중 하나 - device의 display 능력에 따라 CSS3 스타일 지정 - CSS 파일내의 가장 마지막에 기술 ㅇ CSS파일의 작성 순서 1. 공통사항을 작성 2. 특정태그에만 적용하는 사항을 작성 3. 미디어쿼리를 작성 - 특정태그가 화면크기에따라 달라지는 부분을 작성 [ 미디어 퀴리 구문 작성 위치 ] ㅇ CSS파일(.css)에 @media로 기술 화면의 크기에 따라 자연스럽게 흐르듯이 배치 -> 화면의 크기에 따라 한줄에 배치되는 메뉴의 수의 달라짐, 다음줄로 나머지 메뉴가 마저 배치됨 * float 사용 ① float 지정 - float : 방향(left/ri.. 2015. 3. 31. 이전 1 다음 728x90
