본문 바로가기

HTML5 & CSS355

[HTML5 & CSS3] 오디오 & 비디오 재생하기 ▶ 오디오 & 비디오 재생하기 * 태그 - 오디오 파일 삽입하기 HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 태그를 사용한다. 기본형) 속성 설명 autoplay 오디오를 자동 재생한다. controls 웹 화면에 컨트롤 막대를 표시한다. 컨트롤 막대에는 재생/멈춤, 진행 바, 볼륨 등이 표시된다. loop 오디오를 반복 재생한다. muted 오디오를 재생해 진행하지만 소리는 끈다. preload 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해 준비해 둔다. * 태그 - 비디오 파일 삽입하기 기본형) * 태그 - 여러 미디어 파일 한꺼번에 지정하기 사용자들의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 ogv .. 2021. 2. 14.

[HTML5 & CSS3] 웹과 멀티미디어 ▶ 웹과 멀티미디어 * 속성 설명 data 외부 파일의 경로를 지정한다. type 포함시킨 내용의 유형을 지정한다. name 다른 요소들과 구분할 수 있는 이름을 지정한다. width 포함시킨 내용의 너비 값을 지정한다. height 포함시킨 내용의 높이 값을 지정한다. - 태그 - 외부 파일 삽입하기 주로 태그를 지원하지 않는 이전 브라우저에서 사용된다. 기본형) *멀티미디어의 웹 표준화 종류 확장자 설명 비디오 mp4 고화질 영상을 지원해 많은 사이트에서 사용되고 있다. 라이선스가 있지만 웹에서 사용할 경우에는 무료로 사용할 수 있다. webm 화질이 우수하고 무료로 제공되어 최근 많이 사용하고 있다. ogv 화질은 다른 비디오 유형보다 떨어지지만 무료라는 장점 때문에 webm 형.. 2021. 2. 14.

[HTML5 & CSS3] IE8 이하 버전에서는 어떻게 하나요? ▶ IE8 이하 버전에서는 어떻게 사용하나요? *IE8 이하에서 시맨틱 태그를 사용하려면? 1. CSS에서 블록 레벨로 정의하기 시맨틱 태그를 인식하지 못하는 브라우저에서는 밑에 소스를 입력해 자신만의 영역을 가질 수 있는 블록 레벨 태그로 바꾸어 주어야 한다. 2. 시맨틱 태그 직접 정의하기 밑에처럼 자바스크립트를 이용해 태그들을 만들어 주어야 한다. 하지만 어렵다는 것이 단점. 3. HTML5 Shiv 사용하기 (가장 일반적인 것) 태그 사이에 태그를 직접 정의하는 과정을 자바스크립트 파일로 만들어 사용할 수 있도록 만든 HTML5 shiv를 사용하는 것. 인터넷에서 다운받은 후 소스 안에 링크해 사용한다. *브라우저 사이의 차이를 메꾸어 주는 폴리필(pollyfill) .. 2021. 2. 13.

[HTML5 & CSS3] HTML5와 시맨틱 태그 ▶ 시맨틱 태그란 ? 시맨틱이란 '의미가 통하는'이라는 뜻이며 시맨틱 태그란 태그만 보고도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그를 말한다. *왜 시맨틱 태그로 레이아웃을 만들어야 할까? - 가독성 ▶ 시맨틱 태그 종류 * 태그 - 머리말 지정하기 주로 태그를 사용해 검색 창을 넣거나 태그를 사용해 사이트 메뉴를 넣는다. * 태그 - 문서를 연결하는 내비게이션 링크 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타낸다. 사용하는 위치의 영향을 받지 않아 나 태그 또는 태그 안에 포함시킬 수도 있고 독립해 사용할 수도 있다. 그리고 문서 안에 여러 개의 태그를 사용할 경우, ID를 따로 지정해 주면 스타일 시트에서 각 내비게이션에 맞게 스.. 2021. 2. 13.

[HTML5 & CSS3] 표 스타일 *caption-side 속성 - 표 제목 위치 정하기 기본형) caption-side : top / bottom 속성 값 설명 top 캡션을 표의 윗부분에 표시한다. bottom 캡션을 표의 아랫부분에 표시한다. *border 속성 - 표 테두리 스타일 결정하기 *border-collapse 속성 - 테두리 통합, 분리하기 기본형) border-collapse : collapse / separate 속성 값 설명 collapse 테두리를 하나로 합쳐 표시한다. separate 테두리를 따로 표시한다. *border-spacing 속성 - 인접한 셀 테두리 사이 거리 지정하기 기본형) border-spacing : 속성 값 설명 px이나 em 등 크기와 단위.. 2021. 2. 13.

[HTML5 & CSS3] 다단으로 편집하기 *column-width - 단의 너비 고정하고 다단 구성하기 기본형) column-width : / auto 속성 값 설명 단 너비를 직접 지정한다. auto 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동 계산된다. *column-count 속성 - 단의 개수 고정하고 다단 구성하기 기본형) column-count : / auto 속성 값 설명 콘텐츠가 들어갈 단의 개수를 지정한다. 0보다 큰 수를 사용한다. auto 단의 너비(column-width) 같은 다른 속성에 따라 단의 개수가 자동 계산된다. *column-gap 속성 - 단과 단 사이 여백 지정하기 기본형) column-gap : / normal 속성 값 설명 단과 단 사이의 .. 2021. 2. 13.

이전 1 2 3 4 5 6 7 8 ··· 10 다음

티스토리툴바