IT/HTML
-
HTML5 학습하기 ‘HTML5 시맨틱 태그 4 - 입력’IT/HTML 2020. 4. 30. 07:47
HTML5 학습하기 ‘HTML5 시맨틱 태그 4 - 입력’ 1. HTML5 시맨틱 태그 - 입력 (1) 시맨틱 태그 시맨틱 태그란 태그 이름만 보고도 역할을 짐작할 수 있는 태그를 의미한다. 시맨틱 태그를 사용하면 검색 엔진에서 쉽게 웹 문서 내용을 검색할 수 있고, 소스 내부 구조 파악이 용이하다. HTML4 마크업의 경우 아무 의미 없는 태그 사용으로 문서 구조의 파악이 어려움이 있는 반면, HTML5 마크업의 경우 새로운 시맨틱 태그 사용하여 태그만 보고도 문서 구조 파악이 용이하다. HTML5에서 등장하는 시맨틱 태그는 , , , , , 등 있다. ① - 웹 페이지의 헤더를 만들 때 사용(주로 로고 영역) ② - 웹 페이지의 메뉴를 만들 때 사용하고, 일반적으로 내부에 과 을 많이 사용 ③ - 여..
-
HTML5 학습하기 ‘HTML5 시맨틱 태그 3 - 오디오’IT/HTML 2020. 4. 29. 07:38
HTML5 학습하기 ‘HTML5 시맨틱 태그 3 - 오디오’ 1. HTML5 시맨틱 태그 - 오디오 1) 오디오 태그 (1) 태그 태그는 HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때 사용하는 태그이다. ① HTML5에서 추가 되었다. ② 여러 가지 속성들을 사용하여 사용자의 요구에 맞게 오디오 표현이 가능하다 ③ 여러 개의 오디오 소스를 포함할 수 있다. (2) 태그 속성 ① Src : 비디오 파일의 경로지정 ② Controls : 비디오 재생 도구를 출력할지 지정 ③ Autoplay : 비디오를 자동 재생할지 지정 ④ Loop : 비디오를 반복할지 지정 ⑤ Preload : 음악을 재생하기 전에 모두 불러올지 지정 2) 오디오 태그를 활용한 HTML5 시맨틱 태그 실습 예제 오디오 삽입 예제
-
HTML5 학습하기 ‘HTML5 시맨틱 태그 2 - 비디오’IT/HTML 2020. 4. 28. 07:30
HTML5 시맨틱 태그 2 - 비디오 1. HTML5 시맨틱 태그 - 비디오 1) 비디오 태그 (1) 태그 태그는 HTML5에서 손쉽게 웹 문서에 비디오 파일을 삽입할 때 사용하는 태그이다. ① 여러 가지 속성들을 사용하여 사용자의 요구에 맞게 비디오 표현 가능하다 ② PC, Mobile 모두 가능하다 ③ 익스플로러8 이하 버전에서 인식 못 한다. (2) 속성 ① Src : 비디오 파일의 경로지정 ② Width : 비디오의 너비 지정 ③ Height : 비디오의 높이 지정 ④ Muted : 음소거 ⑤ Controls : 비디오 재생 도구를 출력할지 지정 ⑥ Autoplay : 비디오를 자동 재생할지 지정 ⑦ Loop : 비디오를 반복할지 지정 ⑧ Preload : 비디오를 재생하기 전에 모두 불러올지 지..
-
HTML5 학습하기 ‘HTML5 시맨틱 태그 1 - 이미지’IT/HTML 2020. 4. 27. 07:49
HTML5 학습하기 ‘HTML5 시맨틱 태그 1 - 이미지’ 1. HTML5 시맨틱 태그 - 이미지 1) 웹 문서와 이미지 ① 이미지는 몇 가지 정해진 파일 형식만 사용할 수 있다. ② 다른 형식의 이미지 파일을 사용하려면 사용 가능한 이미지 파일로 변환이 필요하다. ③ 웹 페이지에서 사용할 수 있는 몇 가지의 파일 형식만 사용 가능하다 (1) GIF GIF : Graphic Interchange Form의 약어이다. JPG나 PNG 형식에 비해 파일 크기가 작지만 표시할 수 있는 색상 수가 최대 256가지이며, 웹 페이지에서 아이콘이나 불릿 등 작은 이미지에 주로 사용한다. 그리고 투명한 배경이나 움직이는 이미지를 만들 수 있다. (2) JPG/JPEG JPEG : Joint Photographic E..
-
HTML5 학습하기 ‘HTML5 기본 구조 및 문법의 기초’IT/HTML 2020. 4. 25. 09:34
HTML5 기본 구조 및 문법의 기초 HTML5 엘리먼트와 시맨틱 태그에 대해서 알아보도록 하겠습니다. 1. HTML5 엘리먼트 1) HTML5 엘리먼트의 정의 HTML 문서의 구성요소 중 하나로 시작태그와 종료태그로 이루어진 모든 명령어들을 의미한다. 2) 엘리먼트 구문의 특징 ① 하나의 HTML 엘리먼트는 시작 엘리먼트로 시작하고, 종료 엘리먼트로 끝난다. ② 일부 HTML 엘리먼트는 빈 콘텐츠를 가질 수 있다. ③ 빈 엘리먼트는 시작태그로 종료 된다. ④ 대부분의 엘리먼트는 속성을 가진다. ⑤ 대부분의 엘리먼트는 중첩이 가능하다. 3) 엘리먼트와 태그 (1) 엘리먼트 HTML을 문서 형식으로 구성할 때 의미를 표현하는 약속된 단어들이다. 예 : p엘리먼트는 paragraph(문단)에서 img 엘리먼..