✅ h1~h6 태그

▲ 제목을 나타내는 태그
▲ 글씨 크기를 위해 h태그 사용하지 말기
▲ 페이지당 h1태그는 하나만 사용하는 것이 좋다 -> 목차

✅ br 줄바꿈 태그

<pre>태그 내에서는 말고는 개행이 불가능하다. <br>태그를 사용하여 줄바꿈 할 수 있다.

<p>
      hello<br/>
      world<br/>
      2021<br/>
      09<br/>
      27<br/>
      monday.
</p>

✅ hr 태그

수평선(가로줄)태그/빈 요소

<h1>hr태그 - 수평선(가로줄)/빈요소</h1>
<hr/>

✅ pre 태그

▲ <pre></pre>안에서는 공백이 적용됨
▲ 블록요소

<pre>
      / ^__^
      /(00)
</pre>

✅ Entity - html에서 특수문자를 표현하기 위한

<pre>
      &lt; = <
      &gt; = >  
      &quot; = "
      &apos; = '
      &amp; = &
      &nbsp; = (스페이싱) 
</pre>

html에서 <, >, ", ', &, 빈 문자(스페이스) 같은 특수문자를 그대로 쓰면 브라우저에 나타나지 않는다. HTML에서 준수하는 위와 같은 규칙으로 특수문자를 나타낼 수 있다.

✅ b/strong - 굵은 글씨 효과

▲ <b> : 요악의 키워드, 리뷰의 제품명
▲ <strong>: 높은 중요도, 긴급상황

✅ i/em - 기울임 글씨 효과

▲ <i> : 구분해야하는 부분(앞뒤가 톤이 다르게 읽혀야하는 부분에 사용,등장인물)
▲ <em>: 강조해야하는 부분(단지 강조)

✅ div 태그

▲ 순수컨테이너로 아무것도 표현하지 않음(블록요소)
▲ 전역속성
▲ 의미가 있을때 사용하면 안돼, 의미가 없을때에만 사용

<h1>div태그 : container -> 순수컨테이너로 아무것도 표현하지 않음/블록</h1>
    <!-- 전역속성 -->
    <!-- 의미가 있을때 사용하면 안돼, 의미가 없을때에만 사용 -->
    <span style="border: 1px solid black">Lorem ipsum</span>
    <span style="border: 1px solid black">Lorem ipsum</span>
    <div style="border: 1px solid black">Lorem ipsum</div>
    <span style="border: 1px solid black">Lorem ipsum</span>

✅ span 태그

▲ 순수컨테이너로 아무것도 표현하지 않음(인라인요소)

<h1>span태그 : container -> 순수컨테이너로 인라인 요소</h1>
    <span style="border: 1px solid black">Lorem ipsum</span>
    <span style="border: 1px solid black">Lorem ipsum</span>
    <span style="border: 1px solid black">Lorem ipsum</span>

✅ a 태그

▲ 하이퍼링크
▲ <a>안에는 텍스트뿐만 아니라, 문단/이미지도 넣을 수 있음
▲ 경로에는 절대/상대경로가 있음

✅ 절대경로와 상대경로

▲ [절대경로] : 현재 위치와 상관 없음, 그 절대값 위치로 이동

<a href="https://developer.mozilla.org/ko/">Mozilla</a>

▲ [상대경로] : 현재 위치를 기준으로

<a href="another/index.html">상대경로</a>

✅ 시맨틱 웹

▲ 의미가 있는 태그
▲ 요소의 의미를 고려하여 구조를 설계하고 코드 작성
▲ <header>, <nav>, <aside>, <main>, <section>, <footer>등이 있음
▲ header내에 또 다른 header, footer내에 또다른 footer 못 넣어

✅ Ordered List(ol)

▲ 순서가 있는 리스트
▲ type속성을 통해 숫자,문자 등으로 순서를 표기할 것을 선택할 수 있음

<!-- ol에는 type 속성을 가지고 있음 -->
<!-- ol과 ul은 중첩해서 사용가능 -->
<h2>ol : ordered list</h2>
    <ol type="A">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>

✅ Unorderd List(ul)

▲ 순서가 없는 리스트

<h2>ul : unordered list</h2>
    <ul>
      <li>Milk</li>
      <li>
        Cheese
        <ul>
          <li>Blue cheese</li>
          <li>Feta</li>
        </ul>
      </li>
    </ul>

✅ List Item(li)

▲ li는 <ol>과 <ul> 내에서 사용됨
▲ li는 <li> 에 value 속성을 사용하여 사용자 임의대로 순서를 바꿀 수 있음

<h2>li : list item</h2>
    <ol>
      <li>AAA</li>
      <li value="5">BBB</li>
      <li>CCC</li>
    </ol>
    <!-- li에는 value라는 속성을 가질 수 있어 -->

✅ table

▲ 표를 작성하는 태그
▲ thead/tbody/tfoot을 사용하면 형제로 tr사용 못함
▲ thead안에 tr 선언하기
▲ <th> : 표의 제목
▲ <tr> : 표의 행
▲ <td> : 표의 셀

<h1>table태그</h1>
    <table>
      <tr>
        <th scope="col">나라이름</th>
        <th scope="col">수도</th>
        <th scope="col">인구</th>
      </tr>
      <tr>
        <th scope="row">한국</th>
        <td>서울</td>
        <td>5100만</td>
      </tr>
      <tr>
        <th scope="row">미국</th>
        <td>워싱턴</td>
        <td>3억</td>
      </tr>
      <tr>
        <th scope="row">태국</th>
        <td>방콕</td>
        <td>6900만</td>
      </tr>
      <tr>
        <th colspan="2">합계</th>
        <td>4억 2000만</td>
      </tr>
    </table>
    <!-- colspan은 열을 합치는 것 -->

✅ cation

<h1>cation태그 : table태그에서 사용하기 위한</h1>
    <!-- table태그 요소의 첫번째 자식으로 들어가야해. 즉 맨 앞에 써!-->
    <table>
      <caption>
        이번달 지출내역
      </caption>
      <thead>
        <tr>
          <th scope="col">품목</th>
          <th scope="col">지출</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th colspan="2">식재료</th>
        </tr>
        <tr>
          <th scope="row">대파</th>
          <td>3000</td>
        </tr>
        <tr>
          <th scope="row">달걀</th>
          <td>4000</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <th colspan="2">기타 품목</th>
        </tr>
        <tr>
          <th scope="row">고양이간식</th>
          <td>3000</td>
        </tr>
        <tr>
          <th scope="row">종이봉투</th>
          <td>4000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">Totals</th>
          <td>30000</td>
        </tr>
      </tfoot>
    </table>

✅ image 포맷

▲ [jpeg] : 정적 이미지
▲ [png] : 투명도 적용 가능, jpeg보다 화질 좋음
▲ [svg] :벡터 이미지, 주로 아이콘이나 다이어그램에 사용

✅ 반응형 이미지

▲ srcset : 너비서술자(w),밀도서술자(x)

▲ sizes : min-width와 max-width를 통해
원래 이미지 사이즈에서 넘어가지 않게 함

✅ video

[속성]
▲ controls : 재생버튼, 음량 버튼 패널 나타남
▲ autoplay : 자동재생/but 사운드있는 비디오는 멈춤
▲ muted : 음소거 속성
▲ poster : 비디오 썸네일
▲ width/height 가능

✅ iframe(인라인 요소)

주로 웹페이지 내에 지도를 넣을 때 사용

✅ Form

<h1>form : 사용자가 입력할 수 있는 장치를 만들어주는/대화형 컨트롤</h1>
    <form action="이 form을 보낼 주소" method="GET/POST">
      <input type="text" name="test" />
      <button type="submit">제출</button>
    </form>
    <!-- GET : 사용자가 입력한 데이터가 주소창에 보여짐, 주로 검색에 사용 -> 보안관련된거에는 사용하면 안됨 -->
    <!-- POST : 데이터가 보이지 않음, 회원가입 로그인 등에 사용 -->

✅ Fieldset

<h1>fieldset</h1>
    <form action="이 form을 보낼 주소" method="GET">
      <fieldset>
        <legend>예시1</legend>
        <div>
          <label for="foodname">음식이름 :</label>
          <input type="text" name="food" id="foodname" disabled />
        </div>
      </fieldset>
      <!-- disabled붙이면 입력불가능 -->
      <!-- disabled는 아예 input창을 비활성화 시키는거, 입력도 전송도 안됨-->
      <!-- readonly는 읽기 전용, 입력만 안되고 전송은 됨 -->

      <!-- disabled는 fieldset 속성으로도 사용가능 그러면 그 fieldset에 있는 모든 입력창 입력불가능  -->
      <fieldset>
        <legend>예시2</legend>
        <div>
          <label for="color">색깔 :</label>
          <input
            type="text"
            name="color"
            id="color"
            placeholder="초록"
            autocomplete="off"
            required
          />
        </div>
      </fieldset>
      <button type="submit">제출</button>
    </form>
    <!-- legend는 fieldset내에 첫번째 자식으로 와야함 -->
    <!-- input type이 password라도 입력할땐 마스킹처리되지만, GET방식으로 넘기면 입력한 비밀번호 다 보임 -->
    <!-- placeholder는 힌트라고 생각하면 됨 예시 -->
    <!-- autocomplete는 자동완성기능임 on/off값으로 주면됨 -->
    <!-- required는 boolean값으로 필수로 입력해야하는 의미 -->

✅ 그 외 자주 사용하는 form요소

 <h1>자주 사용하는 form 요소들</h1>
    <form action="" method="GET">
      <div>
        <label
          >TIME :
          <input type="time" name="time" />
        </label>
      </div>
      <div>
        <label
          >MONTH :
          <input type="month" name="month" />
        </label>
      </div>
      <div>
        <label
          >DATE :
          <input type="date" name="date" />
        </label>
      </div>
      <div>
        <label
          >NUMBER :
          <input type="number" name="number" />
        </label>
      </div>
      <div>
        <label
          >RANGE :
          <input type="range" name="range" />
        </label>
      </div>
      <div>
        <label
          >CHECKBOX :
          <input type="checkbox" name="check1" />
          <input type="checkbox" name="check2" />
          <input type="checkbox" name="check3" checked />
        </label>
      </div>
      <div>
        <label
          >RADIO :
          <input type="radio" name="radiobtn" value="r1" />
          <input type="radio" name="radiobtn" value="r2" />
          <input type="radio" name="radiobtn" value="r3" checked />
        </label>
      </div>
      <!-- <button type="submit">제출</button> -->
      <!-- 버튼 말고 input으로도 제출가능 -->
      <input type="submit" value="제출하기" />
      <!-- 문구 바꾸고싶으면 value를 통해 바꾸기 -->
      <input type="reset" />
    </form>

    <!-- input마다 name을 지정해줘야지만 어떤 데이터인지 구분이 가능하다 name은 중요함 -->

✅ select

▲ drop-down menu
▲ <option> : 후보
▲ option에 selected속성 넣으면 defalt값이 됨
▲ option에 value값이 없으면 안에 내부 내용을 value값으로 사용하니, value값에 빈 문자열 넣고 사용하기
▲ 서버로 보낼 땐 name값과 선택되 value값이 같이 넘어감
▲ 서버로 보낼 땐 name값과 선택되 value값이 같이 넘어감

 <h1>select</h1>
    <!-- select drop-down menu -->
    <form action="" method="GET">
      <label for="movie">좋아하는 영화: </label>
      <select name="movie" id="movie" required>
        <option value="">--please choose--</option>
        <optgroup label="애니메이션">
          <option value="토이">토이스토리</option>
          <option value="주토피아" selected>주토피아</option>
          <option value="인사이드아웃">인사이드아웃</option>
        </optgroup>
        <optgroup label="sf">
          <option>인터스텔라</option>
          <option>아이언맨</option>
        </optgroup>
      </select>
      <input type="submit" />
    </form>

✅ datalist

<h1>datalist</h1>
    <form action="" method="GET">
      <label for="movie">좋아하는 영화: </label>
      <input type="text" id="movie" name="movie" list="movie-list" />

      <datalist id="movie-list">
        <option>토이스토리</option>
        <option>주토피아</option>
        <option>인사이드아웃</option>
      </datalist>

      <input type="submit" />
    </form>

✅ select와 datalist의 차이점

▲ <select> : 수정 불가능
▲ <datalist> : 수정 가능하며, 키워드만 입력해도 그에 맞는 목록을 보여줌 -> 추천목록

✅ textarea

▲ <input> 은 한 줄만 입력받을 수 있지만, textarea는 여러줄을 입력받을 수 있음
▲ 빈 요소가 아닌 자식요소를 가질 수 있음
▲ cols와 rows 속성으로 크기를 조절할 수 있음

<form action="" method="GET">
      <label for="comment">댓글 :</label>
      <textarea name="comment" id="comment" cols="30" rows="10"> </textarea>

      <input type="submit" />
    </form>