반응형 [목차] HTML5 1. HTML5 기초1.1 HTML 개념 및 구조1.2 HTML 태그 종류1.3 자주 사용하는 HTML 태그1.4 간단한 실습(태그를 이용한 간단한 문서 제작) 2. HTML5 상세2.1 HTML 레이아웃(Semantic Tag)2.2 HTML 텍스트요소(p, pre, code)2.3 HTML 목록(ul, ol, li)2.4 HTML 양식(form, label, input, button)2.5 HTML 표(table, thead, tbody, th, tr, td)2.6 HTML 멀티미디어(img, video, audio, canvas, source)2.7 HTML 임베딩2.8 HTML 스크립트 2024. 8. 7. [HTML] 요약 HTML 구성 - : 문서 형식 정의(DTD)는 현재 문서가 HTML5 문서임을 명시. 문서의 최상위에 위치하고 대소문자 구별하지 않음- : HTML 문서의 루트(root) 요소를 정의. 웹 페이지를 구성하는 모든 요소들을 포함. 모든 요소는 html 요소의 자식 요소여야 함- : HTML 문서의 메타데이터(metadata)를 정의. - 메타데이터(metadata): HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미 - 메타데이터는 , , , , , 태그 등을 이용하여 표현 - 메타데이터 이외의 화면에 표시되는 요소를 포함해서는 안 됨- : 웹 브라우저를 통해 보이는 내용(content) 부분HTML.. 2024. 8. 2. [HTML] 그래픽 Canvas와 SVG 비교작업 환경에 따른 비교- 화면이 작거나, 픽셀 수가 많을 경우(>10k): canvas 추천- 화면이 크거나, 픽셀 수가 적을 경우(작업 종류에 따른 비교-복잡하고 고성능의 애니메이션(animation) 작업이나 동영상 조작의 작업: canvas 추천- 고품질의 문서 작업이나 정적 이미지의 조작 작업: svg 추천Canvas와 SVG의 차이점CanvasSVG픽셀(pixel) 기반모양(shape) 기반단일 HTML 요소DOM의 일부분이 되는 다중 그래픽 요소스크립트(script)를 통해서만 수정할 수 있음.스크립트(script) 및 CSS를 통해서도 수정할 수 있음.그래픽이 주작업인 게임에 적합함.렌더링 영역이 넓은 응용 프로그램(application)에 적합함.Canvas- ca.. 2024. 8. 2. [HTML] 이미지/멀티미디어 이미지(Image)- 이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미- 이미지 종류: JPEG 이미지, GIF 이미지, PNG 이미지- : 이미지 삽입속성설명src이미지 파일 경로alt이미지 파일이 없을 경우 표시되는 문장width이미지의 너비 (CSS에서 지정하는 것이 일반적)height이미지의 높이 (CSS에서 지정하는 것이 일반적)이미지 맵 만들기- HTML에서는 태그를 이용하여 이미지 맵을 제작- 이미지 맵은 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미- 태그의 usemap 속성과 태그의 name 속성을 연결하면 이미지와 맵사이의 관계가 설정됨- 태그는 하나 이상의 태그를 가지며 태그가 바로 버튼과 같은 역할을 함 멀티미디어 파일 형식-.. 2024. 8. 2. [HTML] 폼(양식) 폼- - - input 2024. 8. 2. [HTML] 링크/목록/표 링크- hyperlink는 문서에서 문서로 연결을 의미. HTML에서 link는 hyperlink를 의미- : 하이퍼링크를 의미- href: 이동하고자 하는 파일의 위치나 url 경로절대 URL웹사이트 URL (href=”http://www.example.com/default.html”)상대 URL자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”)fragment identifier페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”)메일mailto:scripthref=”javascript:alert(‘Hello’);”- target: 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정_blank링크로 연결된 문서를 새 창이나 새 탭에서 오픈._self링.. 2024. 8. 2. [HTML] HTML5 텍스트 요소 제목- ~ : 제목을 표시본문- : 단락을 표시. 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미. 태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현- : break line을 사용하여 줄 나누기- : 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현- : 수평 가로 구분선 표시. 단란을 나누거나 내용상의 구분을 표현글자 형식- : 텍스트를 굵게 표현- : 텍스트를 굵게 표현. 중요하다는 의미 포함- : 이탤릭체 표현- : 이탤릭체 표현. 중요하다는 의미 포함- : small text를 표시- : 하이라이팅 효과 표현- : 삭제 효과. 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과- : 삽입 효과. 텍스트 밑에 가.. 2024. 8. 2. [HTML] Semantic Tag Semantic Tag- Semantic 요소는 div나 span과 달리 자체로 의미를 가지고 있는 요소HTML5에 추가된 의미 요소header헤더를 정의. 헤더는 도입부에 해당하는 콘텐츠(content)를 가지고 있는 부분을 의미nav내비게이션을 의미. HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의main주요 콘텐츠를 정의aside페이지 부분 이외의 콘텐츠 정의. 주로 사이드에 공간에 위치section본문의 여러 내용을 포함하는 공간을 의미. 제목을 가지고 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미article독립적인 하나의 기사 부분을 정의figure, figcaptionfigure는 그래픽과 비디오 등의 독립적인 콘텐츠를 정의할 떄 사용. figcaption은 figu.. 2024. 8. 2. [HTML] Head Tag Head Tag- : 메타데이터를 포함하기 위한 요소. 메타데이터 이외의 요소를 포함해서는 안 됨- : 문서의 제목을 정의. 브라우저 탭에 표시문서 제목- - : 외부 리소스와의 연계 정보 정의. HTML과 외부 CSS 파일 연계에 사용- - : description, keywords, author 등 메타데이터 정의. 브라우저, 검색엔진에 사용. charset은 브라우저가 사용할 문자셋 정의 +) 버전별 문자셋 정의 +) 문자셋 종류1. ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있습니다.2. ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원합니다.3. ISO-8859-1 : 256개.. 2024. 8. 2. [HTML] HTML5 기본 문법 요소 구성- HTML5 요소는 시작 태그, 종료 태그 그리고 태그 사이의 내용으로 구성content- Tag: 태그 이름. 소문자를 추천- attr: 속성명- value: 속성값. 큰 따옴표로 감싸기를 추천- content: 내용빈 요소- 빈 요소의 경우 내용과 종료 태그가 없음: br, hr, img, input, link, meta요소의 속성- HTML5 속성은 요소의 성질, 특징을 정의하는 명세. 요소에 추가적 정보를 제공. 시작 태그에 위치하며 이름과 값의 쌍으로 존재id유일한 식별자(id)를 요소에 지정. 중복 지정이 불가class스타일시트에 정의된 class를 요소에 지정. 중복 지정이 가능hiddencss의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않음background배경을.. 2024. 8. 2. 이전 1 2 다음 반응형
