멀티미디어웹페이지제작과제물

목차

1. CSS
2. 자바 스크립트
3. Semantics
4. Offline&Storage
5. Device Access
6. Web Socket
7. Video & Audio
8. 3D, Graphics & Effects
9. Geo-Location
10. Styling Effects

본문내용

CSS
-HTML5 관련 기술들중에 대표적인 것으로 CSS3가 있다. HTML 태그를 이용하여 웹 문서를 설계하고 변경하는 데에는 많은 제약이 따른다. 문서의 전체적인 구조와 틀은 태그로 정의할 수 있지만 화면에 표현되는 다양한 스타일은 정의할 수 없기 때문이다.
스타일 시트(STYLE SHEETS)는 이런 문제점을 보완하고 웹 문서에 다양한 레이아웃과 장식을 하기 위하여 사용한다.
CSS3는 스타일 시트 표준안으로, 웹 문서에 글꼴, 색상, 정렬과 각 요소의 배치 방법 등과 같은 디자인 요소를 적용하는 데 사용된다. CSS3는 선택자, 속성, 속성값으로 구성된다.
▶선택자(Selector) : 스타일 시트를 적용할 대상을 지정한다.
▶속성(Property) : 어떤 속성을 적용할지 선택한다.
▶속성값(Value) : 속성에 어떤 값을 반영할지 선택한다.

<중 략>

▶애니메이션
animation-name : @keyframes 애니메이션의 이름을 지정한다.
animation-duration : 애니매이션의 지속 시간을 초 단위로 설정한다.
animation-timing-function : 애니메이션의 시작과 끝 타이밍을 지정한다. 예를 들어 빠르게 시작해서 느리게 끝나는 애니메이션을 만들 수 있다.
animation-delay : 애니메이션 시작을 지연시키는 시간을 초 단위로 설정한다.
animation-iteration-count : 애니메이션이 반복 재생되는 횟수를 설정한다. infinite로 설정하면 무한 반복된다.
animation-direction : 애니메이션의 방향을 설정한다.
animation-fill-mode : 애니메이션을 재생하고 있지 않을 때 속성값을 설정한다.
animation-play-state : 애니메이션 재생 상태를 설정할 수 있다.

박스모델은 웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용하는 개념이다.
▶content : 실제 내용이 표현되는 곳
▶padding : 콘텐츠와 테두리 사이의 여백
▶border : 박스의 테두리 두께
▶margin : 테두리와 박스의 최종 경계 사이의 여백

참고자료

· e-그린 원격 평생 교육원 -컴퓨터 그래픽1 학습교안 자료-
· e-그린 원격 평생 교육원 -웹 디자인 학습교안 자료-
· e-그린 원격 평생 교육원 -멀티미디어 웹페이지 제작 학습교안 자료-
· e-그린 원격 평생 교육원 -인터넷 프로그래밍 학습교안 자료-
· 맛있는 디자인 포토샵&일러스트레이터 cc2021 -한빛미디어출판사 2021년 2월 17일 출간 빨간고래,윤이사라 지음-
· Photoshop10년 사용할 수 있는 테크닉 사전 -길벗출판사 2017년 1월25일 초판 발행 후지모토 케이 지음-
· 차세대 웹 프로그래밍 HTML5+CSS3+JavaScript –한빛아카데미 2019년 8월 2일 발행 홍성용 지음-
· Do it! HTML5+CSS3 웹 표준의 정석 –이지스퍼블리싱 출판 2020년 1월 28일 개정판발행 고경희 지음-
· https://www.opentutorials.org/course/3083 -생활코딩 web강의 동영상-
· https://www.youtube.com/watch?v=vgrd5sY_gFo -유튜브 Do it! HTML5+CSS3 웹 표준의 정석 동영상 강의-
· https://www.youtube.com/channel/UCBH3pRrWYB4mZLApy-ZCfLw -판다코딩 동영상 강의-
· https://namu.wiki/w/HTML5 -나무위키-
· https://itwiki.kr/w/HTML5 -IT위키-
· http://wiki.hash.kr/index.php/HTML5 -해시넷-
· https://ko.wikipedia.org/wiki/HTML5 -위키백과-