HTML 태그 부시기

스타일영역에서 변경할 수 있기 때문에 태그에 있는 스타일은 크게 신경쓰지 않는다.

⭐️ 비교

<i> 시각적으로만 이탤릭체(기울기) => 스크린리더 X
<em> 강조하는 이탤릭체(기울기) => 스크린리더에서도 강조해서 읽어줌(의미있는강조) O
----
<b> 시작적으로만 볼드체(굵게) => 스크린리더 X
<strong> 정말 중요한 볼드체(굵게) => 스크린리더에서도 강조해서 읽어줌(의미있는강조) O

링크 Anchor (번외 button vs a)

<button> 특정한 액션
<a> 어디론가 이동할 때 (링크)

<a href='주소'>링크</a>
"Attribute"
1. target : _blank (새탭)
2. href : hypertext reference
📌 (웹 URL, 페이지 내 이동, 메일주소, 전화번호)
웹 URL, 상대경로 ./index.html, id 값(#hello), mailto:메일주소, tel:전화번호

이미지 Image

페이지(문서) 내에서 이미지가 관련없고 스타일링 목적이라면 CSS background-Image 사용
(이미지가 없어도 페이지(문서)를 읽고 사용함에 있어 문제가 없다면)
----
페이지(문서) 내에서 이미지가 의미있게 사용될 때는 img태그 사용
<img src="" alt="" /> 
"Attribute"
1. src
2. alt (대체 텍스트) - 스크린리더, 또는 엑박일 경우

리스트 Lists(목록 표현)

⭕️ ul과 ol의 직계자식요소는 무조건 li만 가능
<li><a href=""></a></li>
ul (순서가 중요하지 않음)
ol (순서가 중요)
li (리스트 항목)

정의 리스트 Description List

용어를 정의할 때 사용하는 정의 리스트
key-value로 정보를 제공하고 싶을 때
⭕️ dl의 직계자식요소는 오직 div, dt, dd만 가능하다.
<dl> : description list
<dt> : description term
<dd> : description data
<dl>
	<dt>Ivanselah</dt>
    <dd>열정과 존버로 승리한다.</dd>
</dl>
--
<dl>
	<dt>
    	<dfn>승리</dfn>
    </dt>
    <dd>1. 겨루어서 이김<dd>
    <dd>2. 승리를 거두다<dd>
</dl>
--
<dl>
	<dt>JakeCole</dt>
    <dt>Ivanselah</dt>
    <dd>열정과 존버로 승리한다.</dd>
</dl>
--
<dl>
	<div>
    	<dt>사과</dt>
        <dd>사과 설명</dd>
    </div>
</dl>

출처 Cite

<cite></cite>

인용 Quotations

<blockquote>인용내용(저자인용)</blockquote>
<blockquote cite="출처">행동을 통해 자신의 꿈에 실천의 기회를 주지 않는다면 영원히 기회는 없습니다
  <cite>Ivanselah</cite>
</blockquote>
q(문장내에 들어가는 인용) "" (따옴표 생김)
<p>
  <q>It's not happy news</q> said ivanselah.
</p>

div, span 아무런 의미가 없음(그룹핑할때만 사용)
Form,

input type="radio"
같은 radio그룹끼리
name 을 입력하여 다중 선택이 안되게하며 value 값을 작성하여 어떠한 것이 선택되었는지 확인

<input type="radio" name="sub" value="구독중">
<input type="radio" name="sub" value="미구독중">

input type="checkbox"

<form>
  <input type="checkbox" name="skill" value="html" id="html" />
  <label for="html">HTML</label>
  <input type="checkbox" name="skill" value="javascript" id="javascript" />
  <label for="javascript">Javascript</label>
  <button type="submit">제출</button>
</form>
http://127.0.0.1:5500/src/html/index.html?skill=html&skill=javascript

Select
문법적으로 select 태그안에 name 은 작성해야 한다.
여러개를 선택하고 싶을때는 multiple 이라고 적는다.

<select multiple>...</select>
<form>
  <select name="lang">
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
    <option value="JAVASCRIPT">JAVASCRIPT</option>
  </select>
  <button type="submit">제출</button>
</form>
http://127.0.0.1:5500/src/html/index.html?lang=JAVASCRIPT

Table (번외 table vs CSS)

단순히 table 형식으로 나타내기 위해 <table>을 사용하는 것은 좋지 않음
=> CSS로 Flex, Grid로 만드는 것이 좋음
정말로 행 + 열 데이터를 필요할 때 <table> 을 사용
tr // table row, th // table header, td // table data
thead, tbody 로 묶어주면 브라우저가 좀더 명확하게 알 수 있음
scope="row/col" th 에만 작성할 수 있음(어떤 것의 head 인지 좀더 정확하게 표시)
<table>
  <thead>
    <tr>
      <th scope="col">NO</th>
      <th scope="col">이름</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Ivanselah</td>
    </tr>
  </tbody>
  <tfoot> // 합계 , 총 등을 작성할 때 tfoot로 묶어줌
  </tfoot>
</table>