기본 태그들

• 태그를 열었으면 </태그명>으로 닫아야한다.(<img>와 같은 예외 태그도 있다.)
• 특정 태그는 안에 속성(href="", src="")을 넣기도 한다.
• 용도에 맞는 태그를 사용해야 한다. → 웹표준에 맞는 웹을 만들기 위해

---

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

• ① <h1~h6> : heading은 제목을 지정하기 위해 사용된다.
  중요도에 따라 사용(중요할수록 h1에 가깝게)
• ② <p> : <p>태그는 단락을 표시하는 태그이다.

✏️ 입력
<h1>너구리</h1>
<h2>특징</h2>
  <p>몸길이는 45~70cm정도이고 꼬리길이는 12~18cm, 몸무게는 7kg정도로 작다.</p>
  <p>털색은 전체적으로 갈색과 검정색이 섞여있고, 얼굴에는 눈 주변의 털이 검다. 꼬리에는 무늬가 없다. 앞발가락이 4개이다.</p>

<h1>라쿤</h1>
<h2>특징</h2>
  <p>너구리 정도의 크기이며 몸길이는 40~70cm정도에 꼬리는 20~40cm정도이다. 몸무게는 3.5~9kg 정도이다.</p>
  <p>털색은 전체적으로 짙은 회색빛이며 눈 주변은 검은색으로 너구리와 닮았다.</p>
  <p>너구리에 비해 꼬리털은 덜 풍성하고, 꼬리에는 고리무니가 있다. 앞발가락이 5개이다.</p>

💻 출력

---

2. 링크(Anchor)

• <a>태그의 a는 "anchor"의 약자로, 문장 안에 어떤 단어를 링크로 만들기 위해 사용된다.
  ① 웹 URL <a href="주소">
  ② 페이지 내 이동 (id값 사용)
  ③ 메일쓰기 <a href="mailto:메일주소">
  ④ 전화걸기 <a href="tel:전화번호">
• a링크의 속성으로 target="_blank"을 적으면 새로운 창에서 링크가 열린다.

✏️ 입력
<a href="연결될링크"> 클릭시연결된링크로이동합니다. </a>

💻 출력

---

3. 강조(Emphasis)

• ① <em>
• ② <strong>

em과 strong 둘의 차이는? 그냥 쓰고싶은거 쓰면 된다.

---

4. 이미지(Images)

• <img>는 문서에 이미지를 삽입할 때 사용된다.
  ① src : 절대경로 or 상대경로여야 하며, 브라우저에게 이미지 파일의 위치 및 파일명을 알려준다.
  ② alt : 이미지의 텍스트 설명이며, 필수속성은 아니지만 스크린리더가 alt의 값을 읽어서 접근성에서 매우 유용하다. 또, 네트워크오류와 같은 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신해서 보여준다.

✏️ 입력
<img src="https://cdn.pixabay.com/photo/2018/10/01/09/21/pets-3715733_960_720.jpg(이미지경로)" alt="귀여운동물들(이미지텍스트설명)" />

---

5. 목록(List)

① <ol>(Ordered List) : 순서가 중요한 목록
② <ul>(Unordered List) : 순서가 중요하지 않은 목록
👩‍💻 참고) ul과 ol의 자식요소는 무조건 li만 가능하다.

✏️ 입력
<ul>
  <li>리스트1</li> <!-- li : list item -->
  <li>리스트2</li>
</ul>
<ol>
  <li>리스트1</li>
  <li>리스트2</li>
</ol>

💻 출력

---

6. 정의리스트(Description List)

① 용어를 정의할 때
② key-value로 정보를 제공할 때 { key : value }

✏️ 입력
<dl>
  <dt>key값</dt> <!-- dt : description term -->
  <dd> <!-- dd : description data -->
    key값에대한설명
  </dd>
</dl>

---

7. 인용(Quotations)

① <blockquote>
② <q> : <blockquote>와 달리 문장 내에 인용문이 들어갈 때 사용 (" "가 생김)

✏️ 입력
<blockquote cite="인용된곳링크">
  인용내용
  <cite>출처주소</cite> <!-- 인용된곳의출처 -->
  <p>
    Lorem ipsum <q>인용되는문장</q>dolor sit amet.
  </p>
</blockquote>

💻 출력

---

8. <div> & <span>

• 둘 다 아무런 의미가 없음
• CSS스타일링할 때 요소를 묶기 위해 사용한다. → 필요한 순간이 아니면 많이 사용하지 말자!

① <div>
② <span> : inline-block단위로 묶을 때