IT
-
CSS 배워보기 'CSS3의 개요'IT/CSS 2020. 5. 4. 19:57
CSS3의 개요 1. CSS란? CSS는 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이며, CSS를 적용하면 웹 페이지의 한 가지 요소만 변경해도 전체 페이지의 내용이 한꺼번에 변경할 수 있다. 그리고 기존 태그로 콘텐츠를 보여주는 방식을 재정의 하여 HTML의 기능을 개선하는 별도의 스타일시트 언어이다. 2. CSS의 장점 CSS의 장점으로는 작은 용량, 이해하기 쉬운 구조, Table 코딩에 비해 보통 50%정도 코드 절약이 가능하며, 디자인과 웹 구조의 완벽한 분리가 가능하다. 또한 웹 표준에 맞는 사이트 제작을 할 수 있다. 3. CSS의 동작 방식 ① 방문자가 주소창에 주소를 입력하거나 링크를 클릭하여 웹 페이지 열기 ② 서버는 HTML 파일과 연결되거나 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..