※ 본 게시물에서는 HTML의 모든 태그를 다루지 않습니다.

🧐HTML이 중요한 이유

• 웹 페이지의 모든 것의 시작은 HTML에서 비롯된다.
• 웹 페이지에 보이는 모든 것들은 기승전 HTML 태그의 결과물

웹 브라우저 환경의 베이스가 되는 HTML

문서의 구조와 정보 위계가 명확하게 보이는 아름다운 HTML 코드를 작성하자!

🔥 Sematic Markup을 작성하자
: 검색 엔진 최적화(Search Engin Optimization)

✍️ 정의 리스트 (Description List)

✔️ 정의 리스트를 사용하는 이유

1. 용어를 정의할 때 사용하는 정의 리스트
2. key-value로 정보를 제공할 때

✔️ Description list tags

1. dl: Description list를 선언
2. dt: key 값
3. dd: value 값
4. dfn: 정의를 강조

<dl>
  <dt>
    <dfn>학습</dfn>
  </dt>
  <dd>
    배워서 익히는 일. 교육학에서는, 지식의 획득, 인식의 발전, 습관의 형성 등을 목표로 하는 의식적 행동을 가리킴.
  </dd>
  <dd>
    심리적·행동적 경험을 쌓음으로써 행동의 잉태가 변화·발전하는 일
  </dd>
</dl>

✍️ 인용 (Quotations)

✔️ Quotations tags

1. blockquote
   <blockquote></blockquote>
2. q
   <q></q>

※ blockquote tag 내부에 cite tag를 사용하여 인용한 곳(출처)을 표시할 수 있다.

<blockquote cite="http://lorem"> // 인용한 곳의 주소 표시
  <q>Though no one can go back and make a brand new start,<br />
    Anyone can start now and make a brand new ending.</q>
  <cite>-Karl barth-</cite>
</blockquote>

✍️ 폼 (Form)

: 사용자로부터 인풋(Input)을 받기 위한 태그

🔥 Syntax Alert 문법주의 🔥

✔️ Form attributes

1. action: 처리할 것의 경로
   action="API 주소"
2. method
   method="GET|POST"

✔️ Form tags

1. input: 입력창, 인풋 필드(Input field)
   ※ type이라는 attribute를 반드시 가져야 한다.
   type에는 text email password url number file radio checkbox등 이 있다.

<input type="text" placeholder="아이디를 입력하세요" minlength="5" maxlength="13" value="lorem" disabled />
<input type="file" accept=".png, .jpg" /> <!-- accept로 인해 .png .jpg 확장자만 업로드 가능하다 -->

※ 구분을 위해 value값을 반드시 명시해준다.
1. radio

<!-- name을 같은 값으로 써줘야 중복체크를 막을 수 있다 -->
<input type="radio" name="subscription" value="subscribed" id="subscribed" />
<label for="subsribed">구독중</label>
<input type="radio" name="subscription" value="unsubscribed" id="unsubscribed" />
<label for="unsubsribed">미구독</label>

2. checkbox

<!-- name을 같은 값으로 써줘야 같은 그룹임을 알 수 있다  -->
<input type="checkbox" name="skills" value="html" id="html" />
<label for="html">HTML</label>
<input type="checkbox" name="skills" value="css" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="skills" value="javascript" id="javascript" />
<label for="javascript">JavaScript</label>

2. label: 폼 양식에 이름을 붙여주는 태그
   ※ 사용성 개선을 위해 for이라는 attribute를 반드시 가져야 한다.

<label for="인풋id">라벨</label>
<input id="인풋id" type="text" />
<label for="인풋id2">라벨</label>
<input id="인풋id2" type="email" />

3. select, option
   ※ select에는 name, option에는 value를 반드시 줘야 한다.

<select name="skill"> <!-- 여러가지 항목을 선택할 때는 select 태그에 multiple이라는 attribute를 준다 -->
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javscript">JavaScript</option>
</select>

4. textarea: 많은 양의 글을 받을 때 사용

<!-- rows, cols를 직접 이용할 수도 있지만 CSS로도 가능하다 -->
<label for="field">자기소개</label>
<textarea id="field" placehorder="자기소개를 입력하세요"></textarea>

5. button
   ※ type을 반드시 입력해 줘야 한다.
   button submit reset

<button type="button">button</button>
<form action="">
  <button type="submit">submit</button>
  <button type="reset">reset</button>
</form>

✍️ 테이블 (Table)

: HTML로 데이터를 담은 표를 만들 때 사용

✔️ 기본 원리

<table>
  <thead> <!-- 브라우저가 마크업을 조금 더 명확하게 알 수 있다 -->
    <tr>
      <th scope="col">테이블 헤더</th>
      <th scope="col">테이블 헤더</td>
      <th scope="col">테이블 헤더</td>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row">테이블 헤더</th>
      <td>테이블 데이터</td>
      <td>테이블 데이터</td>
    </tr>
    <tr>
      <th scope="row">테이블 헤더</th>
      <td>테이블 데이터</td>
      <td>테이블 데이터</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <th scope="row">테이블 헤더</th>
      <td>테이블 데이터</td>
      <td>테이블 데이터</td>
    </tr>
  </tfoot>
</table>

✔️ 심화

• attribute
  rowspan : 행가로 방향의 집합 병합 (세로 병합)
  colspan : 열세로 방향의 집합 병합 (가로 병합)
  scope: th에만 사용 가능한 attribute, th의 성격을 더욱 명확하게 알려준다.

✍️ 미디어 파일 (Media)

1. audio 태그

controls : 재생버튼 등
autoplay : 자동 재생
loop : 무한 반복

<audio src="./lorem" controls autoplay loop></audio>

<!-- audio파일을 지원하지 않는 브라우저를 위해 -->
<audio controls autoplay loop>
  <source src="./lorem.wav" type="audio/wav" />
  <source src="./lorem.mp3" type="audio/mpeg" />
  <source src="./lorem.ogg" type="audio/ogg" />
</audio>

2. video 태그

controls : 재생버튼 등
autoplay : 자동 재생
loop : 무한 반복

<video src="./lorem" controls autoplay loop></video>

<!-- video파일을 지원하지 않는 브라우저를 위해 -->
<video controls autoplay loop>
  <source src="./lorem.mov" type="video/mp4" />
  <source src="./lorem.mp4" type="video/mp4" />
</video>

3. iframe 태그

:또 다른 HTML문서나 Contents를 넣을 때 사용한다.

※ 직접 코드를 작성하는 경우는 거의 없다.

<iframe src="./lorem.io"></iframe>

✍️ 기타 (.etc)

1. abbr 태그

<abbr title="풀네임">약어</abbr>
  
<p>너... 혹시 <abbr title="Attention Deficit Hyperactivity Disorder">ADHD</abbr>니?</p>

2. address 태그

1. (물리적) 주소
2. URL
3. 전화번호
4. email 주소
5. SNS

<address>주소</address>
  
<address>
  <h1>이주환</h1>
  <a href="dev.juhwanlee@gmail.com">dev.juhwanlee@gmail.com</a>
</address>

3. preformatted text, code

<pre>
작성한 그대로
화면에 나옵니다
ㅇㅏㄴㅕㅎㅏㅅㅔㅇ
 ㄴ  ㅇ       ㅛ
</pre>

<pre> <!-- 여백까지 나오게 해주므로 code 태그와 같이 쓰인다 -->
  <code> <!-- 코드를 넣어줄 때 사용 -->
    console.log('hello world');
      let hello = 'hello';
  </code>
</pre>