HTML5
- HTML5 문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식을 HTML5로 지정.
- 실제적인 HTML document은 2행부터 시작되는데 <html>과 </html> 사이에 기술한다.
- <head>와 </head> 사이에는 document title, 외부 파일의 참조, 메타데이터의 설정 등이 위치하며 이 정보들은 브라우저에 표시되지 않는다.
- 웹브라우저에 출력되는 모든 요소는 <body>와 </body> 사이에 위치한다.
HTML5의 기본 문법
1-1. 요소
- HTML 요소는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 content로 구성된다.
1-2. 빈 요소
- content를 가질 수 없는 요소를 빈 요소라 한다. 아래의 예와 같이 빈 요소는 content가 없으며 어트리뷰트(Attribute)만을 가질 수 있다. ex) <meta charset="utf-8">
2. 어트리뷰트
- 요소의 성질, 특징을 정의하는 명세이다. 어트리뷰트는 요소에 추가적 정보(예를 들어 이미지 파일의 경로, 크기 등)를 제공한다. 어트리뷰트는 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.
ex) name=”value”
2-1. 글로벌 어트리뷰트
- 모든 HTML 요소가 공통으로 사용할 수 있는 어트리뷰트다.
id : 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다.
class : 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
hidden : css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
lang : 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
style : 요소에 인라인 스타일을 지정한다.
tabindex : 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
title : 요소에 관한 제목을 지정한다.
시맨틱 요소와 검색 엔진
- 시맨틱 요소: 검색 엔진이 HTML 코드만으로 의미를 인지할 때 해석하는 것.
- non-semantic 요소: div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다
- semantic 요소: form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,
tag Description
header : 헤더를 의미한다
nav : 내비게이션을 의미한다
aside : 사이드에 위치하는 공간을 의미한다
section : 본문의 여러 내용(article)을 포함하는 공간을 의미한다
article : 분문의 주내용이 들어가는 공간을 의미한다
footer : 푸터를 의미한다
웹페이지의 구성하는 기본 태그
1. 문서 형식 정의 tag
- 문서 형식 정의 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다.
2. html tag
- html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 <!DOCTYPE>는 예외이다.
3-1. head tag
- title 요소는 문서의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시된다.
3-2. style tag
- style 요소에는 HTML 문서를 위한 style 정보를 정의한다.
3-3. link tag
- link 요소에는 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계해 사용.
3-4. script tag
- script 요소에는 client-side JavaScript를 정의한다.
3-5. meta tag
- meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
4. body tag
- HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다. 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.
텍스트 관련 태그
1. 제목 (Headings) 태그: 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다. h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 크다.
2. 글자 형태 (Text Formatting) 태그
2-1. b: bold체를 지정한다. 제목 태그와 같이 의미론적(Semantic) 중요성의 의미는 없다.
2-2. strong: b tag와 동일하게 bold체를 지정한다. 하지만 의미론적(Semantic) 중요성의 의미를 가짐
2-3. I: Italic체를 지정한다. 의미론적 중요석의 의미는 없다.
2-4. em: emphasized text를 지정한다. i tag와 동일하게 Italic체로 표현된다. 의미론적 중요성의 의미를 갖는다.
2-5. small: small text를 지정한다.
2-6. mark: highlighted text를 지정한다.
2-7. del: deleted (removed) text를 지정한다.
2-8. ins: inserted (added) text를 지정한다.
2-9. sub / sup: sub 태그는 아래에 쓰인 text를 sup 태그는 superscripted text를 지정한다.
3. 본문 태그
3-1. p: 단락을 지정한다.
3-2. br
- br tag는 (강제)(강제) 개행을 지정한다. br tag는 빈 요소(empty element)로 종료 태그가 없다.
- HTML에서는 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시된다. 1개 이상의 연속된 줄 바꿈(enter)도(enter)도 1개의 공백으로 표시된다.
3-3. pre: 형식화된(preformatted) text를 지정한다.
3-4. hr: 수평 줄을 삽입한다.
3-5. q: 짧은 인용문을 지정한다.
3-6. blockquote: 긴 인용문 블록을 지정한다. 브라우저는 blockquote 요소를 들여쓰기한다..
HTML의 핵심 개념인 Hyperlink
HyperTex: 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능.
1. href 어트리뷰트
- 이동하고자 하는 파일의 위치를 값으로 받는다.
1-1. 디렉터리: 파일과 다른 디렉터리를 갖는 파일 시스템 내의 존재물로서 폴더라고도 불린다.
1-2. 파일 경로: 파일 시스템에서 파일의 위치를 나타내는 방법이다. 상세 경로와 절대 경로가 있다.
2. target 어트리뷰트: 링크를 클릭했을 때 윈도우를 어떻게 오픈할지를 지정한다.
_self : 링크를 클릭했을 때 연결 문서를 현재 윈도우에서 오픈한다 (기본값)
_blank : 링크를 클릭했을 때 연결 문서를 새로운 윈도우나 탭에서 오픈한다
목록(List)와 표(Table) 형식 표현을 위한 태그
1. 목록
1-1. 순서 없는 목록: ul
1-2. 순서 있는 목록: ol
- start 어트리뷰트로 리스트의 시작 값을 지정할 수 있다.
1-3. 중첩 목록
- 목록 태그는 내비게이션 메뉴를 만들 때 자주 사용된다.
2. 테이블: 표를 만들 때 사용하는 태그
table : 표를 감싸는 태그
tr : 표 내부의 행 (table row)
th :행 내부의 제목 셀 (table heading)
td : 행 내부의 일반 셀 (table data)
- 테이블 태그의 어트리뷰트
border : 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.)
rowspan : 해당 셀이 점유하는 행의 수 지정
colspan : 해당 셀이 점유하는 열의 수 지정
이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그
1. 이미지: 웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다.
src : 이미지 파일 경로
alt : 이미지 파일이 없을 경우 표시되는 문장
width : 이미지의 너비 (CSS에서 지정하는 것이 일반적)
height :이미지의 높이 (CSS에서 지정하는 것이 일반적)
2. 미디어
2-1. audio
src : 음악 파일 경로
preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay : 음악 파일을 자동의 재생 개시할 것인지 지정
loop : 음악을 반복할 것인지 지정
controls : 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다
2-2. 비디오
src : 동영상 파일 경로
poster : 동영상 준비 중에 표시될 이미지 파일 경로
preload : 재생 전에 동영상 파일을 모두 불러올 것인지 지정
autoplay : 동영상 파일을 자동의 재생 개시할 것인지 지정
loop : 동영상을 반복할 것인지 지정
controls : 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 다름
width : 동영상의 너비를 지정
height : 동영상의 높이를 지정
type: 이 속성을 입력하지 않으면 웹브라우저가 다운로드한 후 재생 가능한 파일인지 확인하는 작업이 필요하므로 지정하는 것이 좋다. ex) type ="video/mp4"
사용자와의 커뮤니케이션을 위한 폼 태그
1. form: 사용자가 입력한 데이터를 수집하기 위해 사용되며 입력 양식 태그를 포함할 수 있다.
2. input
- form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.
- 서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로 하여key=value의 형태로 전송된다.
3. select
- 복수개의 리스트에서 복수개의 아이템을 선택할 때 사용한다.
- 서버에 전송되는 데이터는 select 요소의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로 하여key=value의 형태로 전송된다.
select : select form 생성
option : option 생성
optgroup : option을 그룹화한다
4. textarea: 여러 줄의 글자를 입력할 때 사용한다.
5. button
- 클릭할 수 있는 버튼을 생성한다.
- <input type="button">과 유사하지만 input 태그는 빈 태그인 반면 button 태그는 그렇지 않다. 따라서 button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
- type 어트리뷰트는 반드시 지정하는 것이 바람직하며 어트리뷰트 값으로button, reset, submit를 지정할 수 있다.
- input 태그와 달리 콘텐츠로 문자열은 물론 HTML 요소를 받을 수도 있다는 장점이 있다.
6. fieldset / legend
- fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용한다. legend 태그는 fieldset 태그 내에서 사용돼야 하며 그룹화된 fieldset의 제목을 정의한다.
7. 특수 문자 및 기호
-  : 공백
- <: <
- >: >
- &: &
href 속성
href: 이동할 위치를 나타냄
- 특정 웹 파일에 연결하기 : 절대/상대 경로
절대 경로: 최초 시작 위치(최상위 폴더, 웹사이트 도메인)로부터의 경로
상대 경로: 현재 위치로부터의 경로 ( ./ : 현재 위치로부터 ../ : 현재 위치의 상단 폴더)
- 웹 페이지 내부로 이동하기: 아이디 경로
하이퍼텍스트를 클릭하면 웹 페이지 내부의 특정 위치로 이동
이동하고자 하는 내부 위치는 “#id속성값”으로 표시함
이동 위치의 id가 “myHeader"라면 href속성을 ”#myHeader"로 표시함
- 이메일 보내기: 메일 경로
href 속성값을 “mailto:<이메일 주소>” 설정함
ex) href="mailto:lieujin1@daum.net"
테이블 태그
- thead: 제목으로 구성된 행. 표에서 한번만 사용 가능
- tbody: 표의 본문에 해당하는 영역. 여러 번 선언 가능
- tfoot: 표를 요약하는 셀로 구성된 행. 표에서 한번만 선언 가능. 태그 위치에 상관없이 언제나 하단에 표시됨.
'대학교 2학년 1학기 > 웹프로그래밍' 카테고리의 다른 글
| jQuery 라이브러리 간단 정리 (0) | 2022.06.23 |
|---|---|
| 자바스크립트 기본 문법 정리 (0) | 2022.06.23 |
| HTML, CSS 간단 요약 (0) | 2022.05.20 |