이 글은 리베하얀님의 유튜브 강의 "HTML4 기초"와 "HTML5 기초"를 보고 정리한 것입니다.
<title>
특징
1. 현재 위치에 대한 정보를 알려준다.
2. 화면 낭독기가 가장 먼저 읽어주는 요소이다.
팁
* 페이지 마다 title이 따로 있는 것이 좋다(페이지를 이동할 때마다 title 변하도록)
* 사이트명 - 현재 위치보다는 현재 위치 - 사이트명이 사용자 입장에서 더 편하다. (탭이 많을수록)
네이버는 사이트명 현재 위치로 되어있고 카카오는 현재위치 | 사이트명으로 되어있다.
<h1 ~ h6>
특징
1. 제목 (+블록 요소)
2. 인라인 요소와 텍스트만 표현할 수 있다.
3. 계층구조를 준수해야 한다. (h1 -> h2 ->... -> h6 순서대로!)
4. h1요소는 한 페이지에 한 번만 제공해야 한다.
5. 굵은 글씨로 표현된다.
<img>
특징
1. 반드시 src와 alt 속성을 써줘야 한다. (웹 표준, 웹 접근성) <img src="icon.gif" alt="" />
2. 내용이 없는 경우는 빈 대체 텍스트를 제공한다.
3. 대체 텍스트는 이미지가 어떠한 이유로 나오지 않을 때 또는 이미지를 볼 수 없는 사람들을 위한 것이다.
<a>
특징
1. a = Anchor(닻)
2. href = hypertext reference
3. 페이지와 페이지를 연결
4. target 속성으로 페이지 열리는 방식 정할 수 있음.
5. 다른 도메인 연결 시 http://도 써줘야 함.
6. 파란색 밑줄이 기본으로 제공
* #만 제공하는 경우: 스크롤이 제일 위로 간다.
* 내부 링크를 제공하는 경우: 해당 id를 가진 곳으로 이동한다.
* 없는 아이디를 넣는 경우: 반응이 없다. (현재 위치 그대로)
Entity Code
특징
1. 특수 문자를 특별한 코드로 표현한 것이다.
2. html 문법과 특수 문자가 동등하게 제공될 경우 오류를 방지할 수 있다. 예) < 또는 >
* non-breaking space (스페이스 한 칸)
* < less than ( < )
* > greater than ( > )
* · middle dot ( · )
* & ampersand ( & )
* " quotation ( " )
<table>
구성요소
1. caption
- 표의 제목
- 표의 위에 위치하며 텍스트 가운데 정렬
2. summary
- 표의 요약글
- 시각 장애인 전용 속성
- 브라우저에 시각적으로 표현 X
3. colgroup, col
- 열의 그룹
- <caption>요소 다음에 위치함
- 가로 사이즈만 지정 가능
<colgroup>
<col width = "25%">
<col width = "25%">
<col width = "25%">
<col width = "25%">
</colgroup>
4. <thead><tfoot><tbody>
- 행의 그룹
- thead -> tfoot -> tbody 순으로 작성 (시각 장애인을 위해서)
- 모든 행의 그룹을 제공하지 않아도 된다.
- <thead>에는 제목 셀인 <th>만 제공할 수 있고 <tfoot>과 <tbody>는 <th>와 <td> 둘 다 가능하다.
* 열의 합침 colspan
* 행의 합침 rowspan
<li>
순서형과 비순서형이 있다.
순서형
<ol>
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ol>
비순서형
<ul>
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ul>
<dl>, <dt>, <dd>
dl: Defines a description list (정의형 목록 지정)
dt: Defines Terms (용어 정의)
dd: Describes each Term (지정 정의 설명)
특징
1. 낱말 등 특정 단어를 정의할 때 사용한다.
2. 제목 + 내용의 형태로 사용하기도 한다.
<form>
<form action = " " method = " ">
내용
</form>
특징
0. 웹 표준을 위해 action과 method 속성을 꼭 써줘야한다.
1. 사용자 입력을 위한 폼을 만드는 데 사용한다.
2. action: 양식이 제출될 때 폼 데이터를 전송하는 위치를 지정한다.
3. method: 폼 데이터를 전송할 때 사용하는 방법을 지정한다. get은 url에 데이터가 출력되면서 전송되고 post는 http request 본문 내에서 전달된다. -> 회원가입에서는 post를 쓸 것이다.
<input type = " ? ">
? 에 들어갈 수 있는 값들
1. text: 글상자
2. password: 비밀번호 상자
3. radio: 단일 선택 상자
4. check box: 다중 선택 상자
5. file: 첨부 파일
6. image: 이미지 버튼
7. submit: 제출 버튼(거의 submit보다는 a태그를 사용한다.)
8. reset: 초기화(거의 쓰지 x)
9. button
10. hidden: 개발자가 사용한다.
11. textarea: 웹 표준 때문에 사용한다.
<select>
콤보 박스를 만들 때 사용한다.
<select multiple>
<option>내용</option>
<option>내용</option>
<option>내용</option>
</select>
<select>
<optgroup label = "서울">
<option>내용</option>
<option>내용</option>
<option>내용</option>
</optgroup>
<optgroup label = "수원">
<option>내용</option>
<option>내용</option>
<option>내용</option>
</optgroup>
</select>
<label>
input과 함께 쓰이고, 선택을 더 편하게 할 수 있고 내용을 연결시킬 수 있다.
<input type="radio" id="sex">
<label for="sex">여자</label>
-> 여자를 클릭해도 radio선택이 가능하다.
Html4 vs Html5
레이아웃을 짤 때 Html4에서는 class와 id를 사용해 구분을 했지만 Html5에서는 아예 요소가 새롭게 나왔다.
<figure>와 <figcaption>
Html5에서 새로 생겨난 요소이다. 이미지나 멀티미디어를 생성할 때 사용한다.
figcaption은 이미지나 멀티미디어를 설명하기 위한 요소이다.
<picture>
https://www.w3schools.com/tags/tag_picture.asp
HTML picture tag
HTML Tag Example How to use the
www.w3schools.com
web developers는 <picture> 태그를 사용해서 더 유연한 웹 페이지를 만들 수 있다고 한다.
<video> 와 <audio>
<video>
<source src = " ">
</video>
<audio>
<source src = " " type = "audio">
</audio>
속성: controls, autoplay, loop, preload, width, height
추가된 <input type = "?">
1. color
2. date
3. datetime
4. datetime-local
5. month
6. week
7. time
8. email
9. number
10. range
11. search
12. tel
13. url
'WEB🔨 > HTML' 카테고리의 다른 글
| 태그해부학 <img>와 이미지포맷 (0) | 2020.06.11 |
|---|---|
| 태그해부학 <ol>, <ul>, <li> (0) | 2020.06.11 |
| 태그해부학 <p> (0) | 2020.06.11 |
| 태그해부학 <h1> - <h6> (0) | 2020.06.10 |
| 태그해부학 <html>, <head>, <body> (0) | 2020.06.10 |