[HTML] 자주 쓰이는 태그 정리

텍스트 태그

- 문단 <p></p>

- 제목 <h1></h1>, <h2></h2>, ... , <h6></h6>

- 숫자 1일 때 가장 크고 6일 때 가장 작다.

- 수평선 <hr>

- 줄바꿈 <br>

---

텍스트 꾸미기

<b>진하게</b><br> 
<strong>중요한</strong><br> 
<em>강조</em><br> 
<i>이탤릭으로 강조</i><br> 
<b><i>진하게 이탤릭으로 강조</i><br> 
<del>삭제</del><br> 
<ins>추가</ins><br> 
보통문자의 <sup>윗첨자</sup><br> 
보통문자의 <sub>아래첨자</sub><br> 
<mark>하이라이팅</mark>

---

태그의 구분

- 블록 레벨 요소: 자신이 속한 영역의 너비를 모두 차지하여 블록을 형성한다.

- <h1>, <h2>, <p>, ...

- 인라인 요소: 자기가 필요한 만큼의 공간만 차지한다.

- <strong>, <em>, <mark>, ...

---

이미지 표시하기

<img src="표지할 이미지 파일" alt="이미지 설명" width="너비값" height="높이값">

- 단일 태그

- alt는 alternative의 약자로 대체 텍스트 역할을 한다. 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다. alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능하다. (음성인식기가 이미지 대신 이를 활용)

- 너비와 높이는 단위 없이 정수값만 픽셀(px) 단위로 적용

---

컨테이너 태그

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그. 콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 사용

- <div></div> : 블록 레벨 컨테이너

- <span></span> : 인라인 컨테이너

전역 속성 (Global attributes)

모든 HTML 태그에서 공통으로 사용할 수 있는 속성

- id : 요소에 고유한 이름을 부여하는 식별자 역할 속성

- class : 요소를 그룹별로 묶을 수 있는 식별자 역할 속성

- style : 요소에 적용할 CSS 스타일을 선언하는 속성

- title : 요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁 제공

---

링크(anchor) 만들기

<a href = "URL" target = "출력할 탭"> 텍스트 혹은 이미지 </a>

- target 속성 값

• _blank : 새로운 브라우저 탭 생성
• _self : 현재 탭 (default)
• _parent : 부모 탭
• _top : 최상위 브라우저 탭
• 윈도우이름 : 해당 이름의 탭

- href에는 웹문서의 주소 뿐 아니라 전화번호나 메일 주소 등을 지정할 수도 있다.

• href = “tel: 000-0000-0000” → 전화 걸기
• href = “mailto: honggildong” → 메일 쓰기

* 파일 다운로드 링크 만들기 - download 속성

<a href = "photo.png" download>사진 다운로드</a>

---

목록 표시하기

- 중첩 리스트

• 순서 없는 목록 : <ul></ul>
• 순서 있는 목록: <ol></ol>
• 항목 태그 : <li></li>

- 정의 목록 : <dl></dl>

• 용어 : <dt>
• 설명 : <dd>

→ 모두 블록 레벨 요소를 만드는 태그

---

입력 요소 만들기

- input : 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤

- 인라인 요소, 단일 태그

- type 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다. 사용 가능한 type은 20여가지이며, 기본값은 text이다. type 값이 달라짐에 따라 적용할 수 있는 추가 속성의 종류도 조금씩 차이를 보인다.

- name 식별자는 각각의 입력 항목에 대한 이름이다.

사용자 ID : <input type = "text" name = "id" size = "15"><br> 
비밀번호 : <input type = "password" name = "pw" size = "15"> 
<input type = "submit" name = "finish" value = "완료">

input 외 입력 요소들

- select : 다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴이다. 메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시한다. input과 마찬가지로 name을 지정할 수 있으며, 각각의 option에는 value 속성을 지정할 수 있다. value는 실제로 처리될 값을 나타낸다.

<select name = "cafe"> 
	<option value = "starbucks">스타벅스</option> 
	<option value = "coffeebean">커피빈</option> 
	<option value = "ediya">이디야</option> 
    <option value = "pascucci">파스꾸찌</option> 
</select>

* multiple 속성 : 여러 개를 선택할 수 있도록(Ctrl + 클릭) 펼쳐진 메뉴가 나타난다.

- textarea : 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소이다. textarea 역시 name을 추가하여 구별할 수 있다.

<textarea name = "letter" rows = "6" cols = "10">기본적으로 쓰여 있는 텍스트</textarea>

---

form 태그

입력 요소를 감싸며, 입력값을 서버로 보내기 위해 사용하는 태그

<form name = "fo" action = "example.php" method = "POST">
	<input type = "text" placeholder = "아이디">
	<br>
	<input type = "text" placeholder = "비밀번호">
	<br>
	<input type = "submit" value = "로그인">
</form>

- action : 입력값을 전송할 서버의 url

- method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지 (GET or POST)

• GET : 서버에 요청을 보내어 응답을 받아낸다. 서버로부터 정보를 ‘가져오겠다’는 성격의 요청
• POST : 서버에 요청을 보내어 작업을 수행한다. 서버에 있는 데이터를 추가/수정/삭제한 후에 응답을 받아낸다. 서버의 정보를 ‘조작하겠다’는 성격의 요청이다.