객체를 만들 때 사용.
시작과 끝 태그가 쌍(아닌 것도 존재)
부모 자식 관계가 있음
태그로 만들어진 객체
태그에 정보를 추가할 때 사용
<!--여기에 작성-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>이것이 HTML 기본 구조임.
vs code에서 느낌표 + 탭을 누르면 간편하게 만들 수 있다.
lang 속성에는 사용하는 언어를 적는다.
HTML은 크게 <head>와 <body>로 나눠진다.
| 태그 | 설명 |
|---|---|
| h1~h6 | 제목을 나타내는 태그 |
| 태그 | 설명 |
|---|---|
| p | 단락을 나타냄 |
| br | 줄바꿈 |
| hr | 수평선 |
| 태그 | 설명 |
|---|---|
| b | 굴은 글자 |
| i | 기울어진 글자 |
| small | 작은 글자 |
| sub | 아래첨자 |
| sup | 윗첨자 |
| ins | 밑줄 글자 |
| del | 취소선 글자 |
| 태그 | 설명 |
|---|---|
| a | 페이지 내에서 다른 위치로 이동할 때 |
-
페이지 내 이동
목적지 요소의 id 속성에 id 값 설정
a 태그의 href 속성값으로 목적지 요소의 id 값 넣기 -
다른 페이지로 이동
a 태그의 href 속성에 가고 싶은 페이지 경로/주소 넣기
| 태그 | 설명 |
|---|---|
| ul | 순서가 없는 목록 |
| ol | 순서가 있는 목록 |
| li | ul, ol 내부의 아이템 만들 때 |
table 태그 안에 아래와 같은 태그들이 존재
| 태그 | 설명 |
|---|---|
| caption | 표 제목 |
| thead | 표 헤더 |
| tbody | 표 몸체 |
| tfoot | 표 푸터 |
| tr | 행 생성 |
| th | 표 제목 셀 생성(tr 태그 안에서) |
| td | 표의 데이터 셀 생성(tr 태그 안에서) |
th, td 태그의 속성
rowspan : 행의 크기를 지정(행 병합)
colspan : 열의 크기 지정(열 병합)
- inline : 옆으로 나열(a태그, 글자 형태 관련 태그...)
- block : 위에서 아래로 쌓임(제목 태그, p태그...)
| 태그 | 설명 |
|---|---|
| div | block 형식 공간 생성 |
| span | inline 형식 공간 생성 |
| semantic 구조 태그 | 의미적 분할 |
시맨틱 태그표
| 태그 | 설명 |
|---|---|
| header | 헤더 영역 |
| nav | 내비게이션 영역 |
| aside | 사이드에 위치하는 공간 |
| section | 중심 내용을 감싸는 공간 |
| article | 주요 글이 위치하는 공간 |
| footer | 푸터 영억 |
img 태그 사용
| 속성 | 설명 |
|---|---|
| src | 이미지 주소 지정 |
| alt | 이미지 로드 실패 시 나오는 글자 지정 |
| width | 너비 지정 |
| height | 높이 지정 |
audio 태그 사용
| 속성 | 설명 |
|---|---|
| src | 음악파일 주소 지정 |
| preload | 음악을 재생하기 전에 모두 불러올지 지정 |
| autoplay | 자동 재생 여부 |
| loop | 반복 재생 여부 지정 |
| controls | 음악 재생 도구 출력 여부 |
source 태그
브라우저마다 지원하는 파일 종류가 다른 문제를 해결하기 위한 태그
video 태그 사용
| 속성 | 설명 |
|---|---|
| src | 동영상 파일 주소 지정 |
| poster | 동영상이 준비중일 떄 띄울 이미지(썸네일) |
| preload | 비디오 재생 전에 모두 불러올지 여부 |
| autoplay | 자동 재생 여부 지정 |
| loop | 반복 재생 여부 |
| controls | 동영상 재생 도구 출력 여부 |
| width | 동영상 너비 지정 |
| hegiht | 동영상 높이 지정 |
video 태그에서도 source 태그 사용 가능
입력 양식을 만들기 위한 태그
form 내부에 많은 입력 태그를 배치하여 작성
| 속성 | 설명 |
|---|---|
| action | 입력 데이터 전달 위치 지정 |
| method | 입력 데이터 전달 방식 지정 |
사용자로부터 정보를 입력받는 기능을 수행함
| 속성 | 설명 |
|---|---|
| type | 입력 양식의 종류 결정 |
| name | 서버로 양식 전송 시, 각 입력항목 구분을 위한 이름 |
| placeholder | 값을 입력하지 않았을 때 안내 글 |
| disabled | 입력 양식 비활성화 |
| readonly | 입력 양식에 쓸 수 없고 읽을 수만 있게 |
| value | 입력 양식의 값 |
| 속성 | 설명 |
|---|---|
| button | 버튼 |
| checkbox | 체크박스 |
| file | 파일 입력 양식 |
| hidden | 보이지 않는 양식 |
| image | 이미지 형태 생성 |
| password | 비밀번호 입력 양식 |
| radio | 라디오 버튼 |
| reset | 초기화 |
| submit | 제출 |
| text | 텍스트 제출 양식 |
| 이메일 양식 | |
| tel | 전화번호 입력 양식 |
| number | 숫자 입력 양식 |
| date | 날짜 입력 양식 |
여러줄의 텍스트 입력 받음
| 속성 | 설명 |
|---|---|
| cols | 한 라인에 입력되는 글자 수 지정 |
| rows | 라인 수 지정 |
| name | input 태그의 name 속성과 동일 |
| placeholder | '' |
| disabled | '' |
select 태그와 함께 사용되는 태그
| 태그 | 설명 |
|---|---|
| select | 선택 양식 생성 |
| optgroup | 옵션 그룹화 |
| option | 선택할 수 있는 옵션 생성 |
select 태그의 속성
| 속성 | 설명 |
|---|---|
| name | input 태그 name과 동일 |
| multiple | 여러 옵션 선택 가능 |
| disabled | input 태그 disabled와 동일 |
입력 양식에 설명을 넣기 위해 사용
| 속성 | 설명 |
|---|---|
| for | label과 연결할 입력 양식 태그 설정 |
fieldset : 입력 양식들을 그룹으로 묶음
legend : 태그는 필드셋에 대한 설명 제공
끝