TIL 02 | HTML 기본 Tags

1. 제목과 문단 (Heading & Paragraph)

• <h1>~<h6>: 제목 및 중요도에 따라 사용( h7은 없음, 숫자가 클수록 소제목 )

• <p>: 해당 주제에 관련된 내용을 서술할 때 사용

2. 강조 (Emphasis)

• <strong>: 강조(bold), 실제로 의미를 강조하는 내용 (웹 접근성 측면에서 적절한 사용)

• <b>: 강조(bold), 단순히 텍스트만 굵게 표시

• <em>: 기울임체(italic), strong과 마찬가지로 실제 의미를 강조

• <i>: 기울임체(italic), 단순히 텍스트만 기울임 표시

3. 링크 (Anchor)

• <a>: 페이지 이동 링크 생성, 페이지 내 특정 섹션으로도 이동 가능

• href = "#": 링크 주소를 나타내는 필수 속성값 (hypertext reference)

<a href = "https://www.naver.com">네이버</a> -> 네이버 메인페이지로 이동
<a href = "#hello">홈페이지</a> -> 페이지 내 "#hello" 선택자를 가진 섹션으로 이동

네이버 -> 네이버 메인페이지로 이동
홈페이지 -> 페이지 내 "#hello" 선택자를 가진 섹션으로 이동

4. 이미지 (Image)

• <img>: 이미지 삽입

• src = "#": 이미지 주소 or 이미지 경로를 가리키는 속성값

• alt = "#": 대체텍스트 속성값, 즉 이미지가 정상적으로 보이지 않을 때 대체로 표기됨

<img src = "이미지 주소 or 이미지 경로(디렉토리)", alt = "대체텍스트"> </a> 

5. 리스트 (List)

• <ul>: 순서가 중요하지 않은 목록(unordered list)

• <ol>: 순서가 중요한 목록(ordered list)

• <li>: 항목을 나타내는 자식 요소로, <ul>, <ol> 태그 내 <li> 태그 이외에 어떠한 태그도 자식요소로 올 수 없음

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>
<ol>
  <li>항목 </li>
  <li>항목 </li>
</ol>

• 항목 1
• 항목 2

1. 항목
2. 항목

6. 정의 리스트(Description List)

• 용어를 정의할 때 주로 사용

• key-value로 정보를 제공하고자 할 때 사용

• <dl>: description list (key값에 해당함)

• <dt>: discription term, 용어

• <dd>: discription data, 용어에 대한 설명, 설명이 많을 시 2개 이상 사용도 가능

<dl>
  <dt>학습<dt/>
  <dd>배워서 익히는 일<dd/>
  <dd>심리적, 행동적 경험을 쌓음으로써 행동의 양택라 변화 및 발전하는 일<dd/>
</dl>

학습
배워서 익히는 일
심리적, 행동적 경험을 쌓음으로써 행동의 양택라 변화 및 발전하는 일

7. Div & Span

• <div> : block level

• span: inline container

• inline과 block 에 대한 비교 및 이해가 필요함. 때문에 CSS Box 부분을 복습할 때 다시 언급하겠음

8. 표 (Table)

• <table>: table 요소들을 담는 태그

• <tr>: table row

• <th>, table header

• <td>, table data

• <thead>, <tbody>, <tfoot> 사용시, 브라우저에 정확한 정보를 전달할 수 있음

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>이름</th>
          <th>개발 분야</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>hong</td>
          <td>홍길동</td>
          <td>프론트엔드</td>
        </tr>
        <tr>
          <td>jeon</td>
          <td>전우치</td>
          <td>백엔드</td>
        </tr>
      </tbody>
    </table>

ID	이름	개발 분야
hong	홍길동	프론트엔드
jeon	전우치	백엔드

9. 기타(Etc)

• <abbr>: abbreviation(약자), 마우스를 해당 컨텐츠에 갖다댈 시 약어에 대한 풀네임이 나옴

<abbr title="Hyper Text Markup language">HTML</abbr>

HTML

• <br>: break point, 즉 텍스트 간 임의로 줄바꿈을 하고자 할 때 사용

<p> 안녕하세요, <br/> 홍길동입니다.</p>

안녕하세요,
홍길동입니다.

• <hr>: horizontal rule, 가로선을 삽입할 때 사용

<p> 안녕하세요, 홍길동입니다.</p>
<hr/>
<p> 안녕하세요, 전우치입니다.</p>

안녕하세요, 홍길동입니다.

---

안녕하세요, 전우치입니다.

10. 마무리

이번 시간에는 마크업을 할 때 주로 사용되는 태그들을 나름 정리해보았다. 다음 시간에는 form 태그에 대해서 작성해보고자 한다!