HTML 태그 종류

참고 책 : https://www.yes24.com/Product/Goods/108748709

코딩 자율학습 HTML + CSS + 자바스크립트 - 예스24

---

 

body 태그 안에 써준다.

 

텍스트 작성 태그

1. hn 태그

2. p 태그

3. br 태그

4. blockquote 태그

5. q 태그

6. ins, del 태그

7. sub, sup 태그

 

---

hn 태그

heading의 h와 number의 n

n에는 1부터 6 중 하나의 숫자를 넣어주면 된다.

<h1>글자크기1</h1>
<h2>글자크기2</h2>
<h3>글자크기3</h3>
<h4>글자크기4</h4>
<h5>글자크기5</h5>
<h6>글자크기6</h6>

 

h1태그의 글자가 제일 굵고, 크다

h6으로 갈 수록 글자가 얇아지고, 작아진다.

 

hn 태그는 검색 엔진 최적화를 위해, 제목이나 주제를 잘 써 넣어야 한다.

검색 엔진이 h1 태그부터 단계적으로 태그를 검색하는데, hn태그가 끊기면 그 이후로는 검색하지 않기 때문에 단계적으로 사용해야 한다.

---

p 태그

paragraph를 줄인 것.

본문의 문단을 작성하기 위해 사용한다.

<p>내용</p>

 

---

br 태그

문단의 줄 바꿈을 위해 사용한다

콘텐츠가 없는 문법이다.

<p>
   내용1<br>내용2 
</p>

 

---

blockquote 태그

문단 단위의 인용문을 표시할 때 사용한다.

<blockquote cite="url">문단 단위의 인용문</blockquote>

cite 속성: 출처가 확실한 url을 기입한다.

 

---

q 태그

blockquote 보다는 짧은 인용문을 표시할 때 사용한다.

<q cite="url">짧은 인용문</q>

cite 속성: 출처가 확실한 url을 기입한다.

 

웹사이트에 표시될 때 " "로 나타난다.

---

ins 태그

새로 추가된 텍스트를 나타낼 때 쓴다. 밑줄 생김

del 태그

삭제된 텍스트를 나타낼 때 쓴다. 취소선 생김

<p>
   <ins>추가 콘텐츠</ins>
   <del>삭제 콘텐츠</del>
</p>

 

---

sub 태그

아래 첨자 텍스트를 작성할 때 사용한다.

sup 태그

위 첨자 텍스트를 작성할 때 사용한다.

 

<p>
   <sub>아래 첨자</sub>
   <sup>위 첨자</sup>
</p>

 

---

텍스트 강조 태그

1. strong 태그

2. em 태그

---

strong 태그

strong 태그 안 콘텐츠는 굵은 텍스트로 표시 된다.

중첩이 가능한데, 실제 웹페이지에서는 강조 효과는 동일하고, 구조적으로 더 강조된다는 뜻이다.

<strong>강조할 텍스트</strong>

 

---

em 태그

em 태그 안 콘텐츠는 기울어진 텍스트로 표시된다.

중첩이 가능한데, 실제 웹페이지에서는 강조 효과는 동일하고, 구조적으로 더 강조된다는 뜻이다.

<em>강조할 텍스트</em>

 

 

---

+ strong, em 태그 둘 다 사용

---

그룹 짓기

관련 요소를 그룹으로 묶어 구조(레이아웃)를 깔끔하게 작성할 수 있다.

 

공간 분할 태그

1. div 태그

2. span 태그

---

div 태그

블록 요소와 인라인 요소를 그룹으로 묶을 때 사용

<div></div>

 

https://coding-factory.tistory.com/188

[Html] div 태그 사용법 & 예제

 

---

span 태그

인라인 요소끼리 그룹으로 묶을 때 사용

<span></span>

 

---

목록 만들기

목록을 생성할 때 사용한다.

 

목록 생성 태그

1. ul 태그

2. ol 태그

3. dl 태그

---

ul 태그

unordered list로, 순서가 상관없는 목록을 만들 때 사용.

목록 내용은 li 태그로 사용

<ul>
	<li>목록1</li>
	<li>목록2</li>
</ul>

 

목록 앞에 점이 붙는다.

 

---

ol 태그

ordered list로, 순서가 상관있는 목록을 만들 때 사용.

목록 내용은 li 태그로 사용

<ol>
	<li>목록1</li>
	<li>목록2</li>
</ol>

 

목록 앞에 숫자가 붙는다.

---

dl 태그

description list로, 용어와 용어 설명을 나열한 형태의 목록을 만들 때 사용.

목록 생성 시,

용어에는 dt 태그를 사용(description term)

용어 설명에는 dd 태그를 사용(description details)

<dl>
    <dt>용어1</dt>
    <dd>용어1 설명</dd>
    <dt>용어2</dt>
    <dd>용어2 설명</dd>
</dl>

 

용어 설명 시 들여 쓰기가 된다.

---

링크 태그

a 태그

HTML에서 내부나 외부 링크로 이어준다.

<a href="연결될 경로", taget="링크 연결 방식", title="링크 설명">내용</a>

href 속성: 필수 속성이다. 만약 아직 연결될 대상 경로가 정해지지 않았다면 "#"을 사용한다.

target 속성: 새 창으로 열리는 방식인 "_blank"가 가장 많이 쓰인다.

title 속성: a 태그의 콘텐츠만으로 표현하지 못한 설명을 쓴다.

 

---

이미지 객체 삽입 태그

img 태그

이미지 객체를 삽입할 때 사용한다.

콘텐츠가 없는 문법이다.

<img src="이미지 경로", alt="이미지 설명">

src 속성: 필수 속성으로, 이미지의 경로를 쓴다.

alt 속성: 필수 속성으로, 이미지 객체를 설명할 수 있는 텍스트를 쓴다.

 

---

+이미지를 통한 링크

a 태그의 콘텐츠로 img 태그 넣어준다.

<a href="연결될 경로", target="링크 연결 방식", title="링크 설명"> 
	<img src="이미지 경로", alt="이미지 설명">
</a>

 

---

폼 구성하기

사용자의 정보를 입력 받고, 서버로 전송하기 위한 양식이다.

 

폼 구성 태그

1. form 태그

2. input 태그

3. label 태그

4. fieldset, legend 태그

5. textarea 태그

6. select, option, optgroup 태그

7. button 태그

 

---

form 태그

폼 양식을 의미하는 태그

폼을 구성하는 태그는 모두 form 태그 안에서 작성한다.

<form action="서버 url", method="전송 방식"></form>

action 속성: 입력받은 사용자의 정보를 전송할 서버의 url을 적는다. 아직 정해지지 않았다면 "#"을 적는다.

method 속성: 서버로 보낼 때 전송 방식을 정한다. "post" 방식과 "get" 방식이 있다.

보안이 요구된다면 -> "post"

보안이 요구되지 않는다면 -> "get"

 

---

input 태그

사용자로부터 입력받는 요소를 만들 때 사용한다.

콘텐츠가 없는 문법이다.

<input type="종류", name="이름", value="초기값", placeholder="입력값 힌트">

type 속성: 필수 속성으로, 상호작용 요소의 타입을 정한다.

"text", "password", "tel", "number", "url", "search", "email", "checkbox", "radio", "file", "button", "image", "hidden", "date", "datetime-local", "month", "week", "time", "range", "color", "submit", "reset"

name 속성: 입력 요소의 이름을 작성한다. 서버에서 name 속성으로 입력 요소를 식별할 수 있다.

value 속성: 초기값을 설정해야 하는 경우 사용한다.

placeholder 속성: 입력값에 대한 힌트를 넣어 사용자가 올바른 값을 넣도록 유도한다.

 

https://velog.io/@dongeranguk/input-%ED%83%9C%EA%B7%B8-id%EC%99%80-name%EC%9D%98-%EC%B0%A8%EC%9D%B4

input 태그 id와 name의 차이

 

 

초기값 넣은 텍스트 input(텍스트가 미리 써져 있음)

 

placeholder 넣은 텍스트 input(글을 쓰면 없어짐)

---

label 태그

사용하는 상호작용 요소에 이름을 붙일 수 있다.

스크린 리더기가 label 태그를 이용해 식별하기 때문에 웹 접근성 향상을 위해 사용한다.

 

이름 붙이는 방법1: label 태그 안에 상호작용 요소를 넣어주기

<label>
	콘텐츠
	<input type="text">
</label>

 

 

이름 붙이는 방법2: label 태그의 for 속성과 상호작용 요소의 id 속성을 같게 한다(이것을 많이 사용)

<label for="속성값">콘텐츠</label>
<input type="text", id="속성값">

 

 

이름 붙이는 방법3: 둘 다 사용(label 태그 안에 상호작용 요소 넣고, for 속성과 id 속성 같게 사용)

<label for="속성값">콘텐츠
	<input type="text", id="속성값">
</label>

 

 

숫자 입력 라벨

 

아이디 비밀번호 입력 라벨

 

p 태그를 이용한 아이디와 비밀번호 줄 바꿈

---

fieldset 태그

form 태그 안에서 그룹을 짓는다.

그룹끼리 박스 모양으로 묶인다.

legend 태그

그룹의 이름을 지정할 수 있다.

<fieldset>
	<legend>그룹 이름</legend>
	<!--그룹으로 묶을 상호작용 요소들-->
</fieldset>

 

그룹 짓기

---

textarea 태그

여러 줄의 입력 요소를 받을 때 사용한다.

<textarea>초기값</textarea>

 

긴 텍스트

---

select, optgroup, option 태그

콤보 박스를 만들 수 있다.

<select>
    <optgroup label="그룹 이름">
    	<option value="서버에 전송할 항목값">웹에 표시할 콤보박스 항목값</option>
    </optgroup>
</select>

 

select 태그: 콤보박스 생성

name 속성: 서버에서 지정된 이름으로 식별 가능

id 속성: label 태그 사용시 사용

size 속성: 화면에 보이는 콤보박스 항목 수를 정한다. "숫자" 형태로 작성한다.

multiple 속성: 여러 항목을 고를 수 있다(ctrl을 누르고 항목들 클릭)

<form>
	<label for="속성값">라벨이름</label>
	<select name="이름", id="속성값"></select>
</form>

 

optgroup 태그: 콤보박스끼리 그룹으로 묶기

label 속성: optgroup 태그를 사용할 때 필수로 사용해야 하는 속성으로, 그룹의 이름을 적는다.

 

option 태그: 콤보박스에 항목 추가

value 속성: 서버로 전송할 때 보내질 항목값을 쓴다. 쓰지 않는다면, 콘텐츠에 쓴 텍스트가 전송된다.

selected 속성: selected 속성이 있는 항목이 기본적으로 선택된 상태로 표시된다.

 

한국이 초기값으로 나오도록 설정한 콤보박스

 

optgroup를 이용한 콤보박스

---

button 태그

버튼을 생성

<button type="종류">버튼내용</button>

type 속성:  "submit", "reset", "button"이 있다.

"submit" 서버에 전송

"reset" 초기화

"button" 단순한 버튼