1. 제목 태그 (HEADING)
<h1>~<h6>까지 제목을 표현.<p>: 단락을 나누는 paragraph 태그 / 단락별로 자연스러운 개행<br>: line break / 개행(enter 효과),<p>태그 내부에서 강제 개행할때 필요함
2. 텍스트 관련 태그들 (B,I,U,S)
<b>: 글자를 굵게 표현<i>: 글자를 이탤릭체로 표현 → HTML5에서는 특정이유(기술적인 용어,외국어 문구, 소설속 인물의 생각 등) 다른 글자와 구분하기 위해 사용<u>: 글자에 밑줄<s>: 글자에 중간선
3. 앵커 태그 (ANCHOR)
<a href="http://www.google.com/">구글</a>- href : 링크의 목적지가 되는 URL을 지정
- target : 링크된 리소스를 어디에 표시할 것인가?
- _self : 현재 화면에 외부 링크가 표시됨
- _blank : 새 화면에 외부 링크가 표시됨.
- 다른 곳에 id를 넣어준 경우, 내부링크의 경우 "#id"
4. 의미없이 요소를 묶기 위한 태그 (CONTAINER)
<div>
<span>google</span> better than naver!
</div><div>: block-level (<p>태그와 비슷)<span>: inline-level (b,i,u,s 태그와 비슷)
5. 리스트 태그 (ul,ol,dl)
-
<ul>: unordered. 순서가 없는 리스트 -
<ol>: ordered. 순서가 있는 리스트 -
<dl>: description. 용어를 설명하는 리스트
-<dt>는 용어를 구분 /<dd>는 용어의 정의 -
리스트 중첩 시에는
<ol>이나<dl>태그의 경우 자식태그로<li>만 올 수 있음. -
<li>안에는 다른 태그들도 자식으로 올 수 있음
6. 이미지 태그 (IMAGE)
<!-- 상대경로 -->
<img src="./example.gif" alt="슬기">
<!-- 절대경로 -->
<img src="C:/Desktop/study/html/example.gif" alt="슬기">- src : 이미지 경로를 지정
- alt : 이미지의 대체 텍스트를 입력
- width / height : 이미지의 크기를 지정. 둘중 하나만 값을 줄인다면 비율에 맞게 조정해줌
- ./는 현재경로, ../은 상위경로, folder/는 하위 폴더로 이동.
확장자
- gif : 256색으로 제한적, 용량이 작고 애니메이션과 투명 이미지가 가능.
- jpg : 높은 압축률과 자연스러운 색상 표현이 가능, 사진이나 일반적인 그림에 사용.
- png : jpg와 비교했을 때, 이미지 손실이 없고 투명과 반투명 모두 지원한다.
7. 표 태그 (TABLE)
데이터 표를 나타내는 태그
<!-- 1행 2열짜리 테이블 -->
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>-
<caption>: 표의 제목, 가장 상위에 선언 -
<thead>: 제목 행을 그룹,<td>태그 대신에<th>태그를 사용 -
<tfoot>: 바닥 행을 그룹, [HTML5.2 기준<tfoot>은<tbody>뒤에 위치해야 한다.] -
<tbody>: 본문 행을 그룹 -
colspan: 셀을 가로방향으로 병합 -
rowspan: 셀을 세로방향으로 병합 -
<th>요소에 scope="row"나 "col"을 선언함으로써 해당 칸이 행이나 열의 맨 앞 또는 위에 위치함을 설명할 수 있다. -
<colgroup>요소는 표의 열을 묶는 그룹을 정의한다. 첫번째 자식은<col>요소.
<colgroup>
<col>
<col span="2" class="과일">
<col span="2" class="채소">
</colgroup>8. 폼 관련 요소 (FORM)
INPUT 요소
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="file">
<input type="submit">
<input type="reset">
<input type="button">
<input type="image">- text와 password에서 칸 안에 글자가 나오게 하려면 placeholder=""를 넣으면 된다.
- radio에서 name 속성을 사용해야 중복 체크를 피할 수 있다.
- checkbox의 경우 중복이 디폴트값이다.
- radio와 checkbox에서 checked 속성을 사용하면 기본적으로 체크된 상태로 나온다.
- submit은 값을 전송해준다. value 속성으로 이름을 바꿀 수 있다.
- reset은 값을 초기화해준다. value 속성으로 이름을 바꿀 수 있다.
- button의 경우 기본적으로는 아무 동작을 하지 않는다. 개발자가 커스텀해서 사용해야 함.
- image의 경우 submit과 같이 값을 전송하는 동작을 하는데, 버튼을 이미지로 만들 수 있다.
SELECT 요소
<select>
<option></option>
...
</select>- 위의 checked 기능과 마찬가지로 option에서는 selected 속성이 있다.
TEXTAREA 요소
<textarea cols="30" rows="10">
</textarea>- 박스 크기를 조정할때 col 과 row 속성을 사용한다.
- placeholder 속성도 사용이 가능하다.
BUTTON 요소
<button type="...">
...
</button>- 각 버튼은 input 타입의 submit, reset, button과 모두 같은 기능을 가진 버튼이다.
- 빈 태그가 아니며 내용을 안에 직접 넣을 수 있으므로 자유로운 스타일 표현이 가능하다.
LABEL 요소
-폼 컨트롤과 연결 시켜주기 위함으로 웹 접근성 향상에 도움이 된다.
<label for="user_id">이름</label>
<input type="text" id="user_id">- input id의 user_id과 label for의 user_id을 연결시켜준다.
- input의 radio나 checkbox의 경우 각 요소들에 label을 연결해줘야 한다.
FIELDSET, LEGEND 요소
<fieldset>
<legend> 기본 정보 </legend>
...
</fieldset><fieldset>: 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용<legend>: 폼 요소의 제목으로<fieldset>요소 내부에 작성
FORM 요소
-폼 데이터를 그룹화하여 서버에 전송한다.
<form action="..." method="...">
...
</form>- action : 폼 데이터를 처리하기 위한 서버의 주소
- method : 데이터를 전송하는 방식을 지정 (get, post)
- get : url에 입력한 정보가 붙어서 전송됨. 민감한 정보를 다룰때는 쓰면 안된다.
- post : 정보가 붙지 않고 전송됨. 회원가입, 로그인 정보같은 경우 post를 사용하자.
~ing