DAY_3

태그 심화

• 컨텐츠
  1. 제목 태그 <h1> ~ <h6>
  2. 문단 태그 <p>
  3. 서식 태그 <b/strong>, <i/em>, <u>, <s/del>
  4. 링크 이동 <a>
  5. 멀티미디어
  6. 리스트
  7. 표 <table>
  8. 외부 컨텐츠 <iframe>

• 양식 태그
  1. <form>
  2. <label>

컨텐츠

1. 제목 태그 <h1> (블록 레벨 요소)

• 문서 획 제목을 나타냄(Heading)
• h1 태그는 페이지 내에서 "한 번만" 사용되어야 하며 구획의 순서가 지켜져야 한다.

<h1>
	<h2>
    	<h3> 이런 느낌으로?</h3>
    </h2>
</h1>

2. 문단 태그 <p>

• 문서에서 하나의 문단(paragraph)을 나타냄
• block 레벨 요소

3. 서식 태그

<b / strong>

• 글씨의 두께 조절 가능
• <b>는 의미를 가지지 않고 단순히 굵은 글씨(bold)로 바꿈
• <strong>은 '강조'의 의미를 가짐

<i / em>

• 글씨의 기울기 조절
• 위와 마찬가지로 <em>은 강조의 의미를 가짐

<u>

• 글씨에 밑줄을 긋고 주석을 가지는 단어임을 나타냄
  • 단순히 밑줄만 긋는 용도엔 그냥 <span>에 텍스트 효과를 넣자

<s / del>

• 취소선
• <s>는 단순 시각적 취소선만 표현
• <del>은 문서에서 제거된 텍스트로, <ins>와 함께 추가된 텍스트도 표현 가능함.

<del> 삭제 내용 </del><ins> 삽입 내용 </ins>

4. 링크 이동 <a>

• 클릭하면 페이지를 이동할 수 있는 링크 요소 생성
  • href= 속성으로 이동하고자 하는 파일 혹은 URL 작성
  • target= 속성으로 이동할 링크를 새 창(_blank)에 띄울지,
    현재 창(_self)에 띄울 지 선택 가능

5. 멀티미디어

<img>

• 문서 내 이미지 삽입
  • src= 속성으로 이미지 경로를 작성
  • alt= 속성으로 이미지 로딩 문제시, 대체 텍스트 제공

<img src="./img.png" alt="logo img" />

<figure>

• 하나의 독립적 컨텐츠로 분리하고, 그에 대한 설명을 넣을 수 있음
  (다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 블럭 등)

<!-- MDN 공식 -->
<figure>
  <img
    src="https://developer.mozilla.org/static/img/favicon144.png"
    alt="A robotic monster over the letters MDN." />
</figure>

<!-- Image with a caption -->
<figure>
  <img
    src="https://developer.mozilla.org/static/img/favicon144.png"
    alt="A robotic monster over the letters MDN." />
  <figcaption>MDN Logo</figcaption>
</figure>

<video>

• 문서 내 영상 첨부
  • 이미지처럼 src=로 파일의 경로를, poster=로 재생 전 출력되는 포스터를 설정
  • <source> 태그로 여러 타입(확장자) 비디오 제공 가능

<audio>

• 문서 내 목소리 첨부 가능, 비디오 태그와 겹치는 것이 많음
  • controls= 속성으로 재생/정지 기능이 있는 컨트롤러를 띄움

<svg>

• 그래픽으로 만들어진 이미지
• 픽셀로 이루어진 일반 이미지와는 다르게, 자체 코드로 이루어짐
  • 그래서 해상도 영향을 받지 않고, 크기도 자주 바뀌는 아이콘 등에 사용
• 코드로 이루어졌기에 JS의 기능을 넣는 것도 가능

6. 리스트

<ul / ol>

• <li> 태그를 자식으로 가지며 데이터를 리스트 형식으로 표현
• 숫자로 정렬된 <ol>과 정렬되지 않은 <ul>로 나뉨

<dl>

• 설명 목록 태그
• 하위 자손으로 <dt>, <dd>를 가지며 <dt>의 키워드를 <dd>로 설명하는 방식
• 주로 용어 사전이나 키 - 값 쌍 목록을 표시(dictionary?)

<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

7. <table>

• 표를 만드는 태그
  • <tr> 태그로 행을 구분(row)
  • <td> 태그로 열을 생성(cell)
  • <th> : 열 제목 태그
  • <thead> : 제목 그룹 태그, 열 제목의 행을 넣음
  • <tbody> : 표 본문 요소 태그
  • <tfoot> : 표 바닥글 태그 요소
  • <caption> : 표에 대한 설명

8. <iframe>

• 현재 문서 안에 다른 HTML 페이지 삽입 가능
  • src= 속성에서 원하는 문서 혹은 URL 추출
• 외부 페이지를 불러오는 것이기 때문에, 그에 영향을 받을 수 있음

---

양식 태그

1. <form>

• 정보 제출 태그
  • 정보를 입력하고 선택하는 <input> , <selectbox>, <textarea> 등을 가짐
  • 정보 제출을 위한 button 보유
  • action 속성으로 제출 시 페이지 이동, method 속성으로 제출 시 처리 방식 등을 결정

2. <label>

• <input> , <selectbox>, <textarea>의 설명을 작성할 수 있는 태그
• for= 속성을 사용하여 연결하고자 하는 태그의 id를 지정하면 연결됨.

<div class="preference">
  <label for="cheese">Do you like cheese?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

• 태그 안에 input을 넣으면 자동으로 연결되는 형식도 존재

<label>Do you like peas?
  <input type="checkbox" name="peas" />
</label>

❗ id는 절대로 중복되어서는 안된다.

<input>

• 사용자에게 데이터를 입력 받을 수 있는 대화형 태그
  • type 속성에 따라 받을 수 있는 값의 유형이 달라짐 (기본값은 text)
  • value 속성으로 기본 내용 입력 가능

<select>

• 선택 가능한옵션 메뉴를 제공하는 태그
  • <option> 태그로 정의 가능
• 첫번째로 설정한 option은 이름이 된다.
• value 속성을 선언하지 않은 경우 option 태그의 컨텐츠가 기본값이 된다.

<textarea>

• 한 줄짜리인 input과 다르게, 여러 줄을 입력할 수 있는 태그
  • cols / rows 속성으로 기본 높이, 너비 설정 가능

<button>

• 클릭 가능한 버튼 태그로 <form> 내부 어디서든 사용 가능
  • type을 reset으로 설정하면 입력 양식 초기화
  • submit은 입력값을 제출, 이게 기본 타입
  • button은 태그 내 컨텐츠에서 태그의 입력이 가능하나, 블록 레벨 태그는 사용하면 안됨.