<한 권으로 끝내는 HTML + CSS 웹 디자인 입문, 위키북스> p.78~80 발췌
기본 구조와 head 내부에 사용하는 태그
태그 | 용도 | |
html | HTML 문서 자체를 나타낸다. HTML 문서의 시작이 되는 요소이다. | |
head | HTML 문서의 헤더 부분이다. 브라우저에는 출력되지 않는다. 내부에 검색 엔진을 위한 설명, CSS 파일의 링크, 페이지 제목 등을 작성한다. | |
meta | 언어와 설명 등 페이지 정보를 작성한다. | |
title | 페이지의 제목이다. 이 부분이 브라우저의 탭과 북마크에 페이지의 제목으로 출력된다. | |
link | 참조할 외부 파일이다. 주로 CSS 파일을 읽어 들일 때 사용한다. | |
body | HTML 문서의 콘텐츠 부분이다. body 태그 내부에 작성된 요소는 브라우저에 출력된다. |
콘텐츠를 사용하는 태그
태그 | 용도 | |
h1 ~ h6 | 제목(heading) 글자를 출력한다. h1이 가능 크고, h6가 가장 작다. | |
p | 본문의 문단을 생성한다. | |
img | 이미지를 출력한다. scr 속성으로 출력하고 싶은 이미지를 지정한다. | |
a | 링크를 생성한다. 링크 대상은 href 속성으로 지정한다. | |
ul | 순서 없는 목록을 나타낸다. | |
ol | 순서 있는 목록을 나타낸다. | |
li | 목록의 항목을 나타낸다. | |
br | 줄바꿈을 한다. | |
strong | 중요한 항목을 만들 때 사용한다. 일반적으로 두꺼운 글자로 출력된다. | |
blockquote | 인용문을 나타낸다. | |
small | 저작권 또는 법적 설명을 나타낸다. | |
span | 의미 없는 인라인 요소를 만들 때 사용한다. CSS로 일부분만 장식할 때 사용한다. | |
audio | 음악 데이터를 출력할 때 사용한다. | |
video | 동영상 데이터를 출력할 때 사용한다. | |
script | 스크립트 데이터를 넣거나 참조할 때 사용한다. 일반적으로 자바스크립트를 사용한다. |
표에 사용하는 태그
태그 | 용도 | |
table | 표를 나타내는 태그이다. 표 전체를 감싼다. | |
tr | 표의 한 줄(열)을 감싼다. | |
th | 표의 제목 셀을 만든다. | |
td | 표의 한 행으로 데이터 셀을 만든다. |
콘텐츠에 사용하는 태그
태그 | 용도 | |
form | 입력 양식을 만든다. | |
<input type="text"> | 한 줄 텍스트 입력란 | |
<input type="radio"> | 라디오 버튼. 선택 항목 중에 하나만 선택할 수 있다. | |
<input type="checkbox"> | 체크 박스. 여러 개의 항목을 선택할 수 있다. | |
<input type="submit"> |
전송 버튼 | |
select | 선택 박스 | |
option | 선택 박스 선택 항목을 만든다. | |
textarea | 여려 줄 텍스트 입력란을 만든다. | |
label | 입력 양식의 레이블이다. 입력 양식과 연결해서 사용한다. ex) <label for="textbox">입력</label> |
그룹 구분 전용 블록 요소
태그 | 용도 | |
header | 페이지 상부에 있는 요소이다. 주로 로고, 페이지 제목, 메인 내비게이션 메뉴를 감싼다. | |
nav | 메인 내비게이션 메뉴 | |
article | 페이지 내부의 기사가 되는 부분이다. 해당 부분만 보아도 독립된 페이지로 만들 수 있는 내용을 감싼다. | |
section | 하나의 테마를 가진 그룹 | |
main |
페이지의 메인 콘텐츠 부분 | |
aside | 본문이 아닌 추가 정보, 메인 콘텐츠와 연관성이 낮은 정보에 사용한다. | |
footer | 페이지 하부에 있는 요소, 일반적으로 저작권 또는 SNS 링크 등을 포함한다. | |
div | 의미를 갖지 않는 블록 요소 |
'HTML + CSS + JavaScript' 카테고리의 다른 글
프런트 엔드 강의 교안 (1) (0) | 2022.07.25 |
---|---|
블로그에 자바스크립트 적용 (0) | 2022.07.22 |
블로그에 스타일시트 적용 (0) | 2022.07.22 |
블로그 레이아웃 구성 (0) | 2022.07.22 |
[CSS] 자주 사용하는 CSS 속성 목록 (0) | 2022.07.22 |
댓글