1. 강조(Emphasis)

• 강조하고 싶은 텍스트에 강조(Emphasis)계열의 태그를 사용한다.

---

1.1 <em>

• Emphasis를 줄인말인 em을 의미한다.
• 강조하고 싶은 텍스트를 감싼다.
• <em>으로 감싼 텍스트는 브라우저에 기울여져 출력된다.

---

1.2 <Strong>

• 강조하고 싶은 내용을 감싼다.
• <strong>으로 감싼 텍스트는 브라우저에 굵은 텍스트로 출력된다.

---

1.3 <em>과 <strong>의 차이

• 차이는 없다! 끌리는 태그 사용하면 된다.👏
• 브라우저에게 강조(Emphasis)계열 태그로 감싼 부분이 중요하다는 메세지를 전달했다는 점이 중요하다.
• 브라우저에 출력되는 스타일은 CSS를 통해 바꿔주면 된다!

---

2. 링크 (Anchor)

• 현 위치에서 다른 위치로 이동하고자 할 때 사용하는 태그.

---

2.1 href 속성(Attribute)

• <a>태그는 사용시 반드시 명시해야 할 Attribute가 있다. 바로 href 속성(Attribute)이다.
• href 는 hypertext reference의 줄임말이다.
  • hypertext는 HTML문서, 웹페이지 정도의 의미로 생각하면 된다.
  • reference의 사전적인 의미는 ‘참조’ 라는 의미를 가진다. 하지만 프로그래밍 세계에서는 ‘주소값’ 이라는 의미를 가지기도 한다.
• <a>태그 자체는 다른 위치로 이동하는 것을 도와주는 태그이다. 그러니 어디로 이동해야 할지를 반드시 알려줘야 하지 않을까?
• 그렇기때문에 <a>태그를 사용할때는 href 속성으로 내가 이동하고자 하는 위치를 반드시 적어줘야 한다.

---

2.2 href 주소값 표기 방법

1. 웹 URL

<a href= "이동하고자 하는 웹 URL">

2. 페이지 내 이동

• 페이지 내에 이동하고자 하는 요소의 id속성 값을 입력한다.

<a href= "페이지 내에서 이동하고자 하는 요소의 id속성 값">

3. 메일 쓰기

• 메일을 보내고 싶은 메일 주소 앞에 mailto: 를 입력한다.

<a href= "mailto:메일 주소">

4. 전화 걸기

• 모바일에서 주로 사용한다.
• 전화를 걸고 싶은 전화번호 앞에 tel: 을 입력한다.

<a href= "tel:전화번호">

---

2.3 target 속성(Attribute)

• <a> 태그가 사용할 수 있는 또 한가지 속성이다.
• target 속성에 _blank 를 값으로 입력하면, target 속성이 사용된 <a> 태그를 브라우저에서 클릭시 새로운 탭에서 URL로 이동하게 된다.

<a href= "URL" target="_blank">

---

3. 이미지 (Image)

• HTML 문서에 이미지를 넣고 싶을 때 사용하는 태그

---

3.1 src 속성(Attribute) / alt 속성(Attribute)

• <image> 태그도 반드시 사용해야하는 속성 두가지가 있다.

---

3.2 src 속성(Attribute)

• source의 약자이다.
• 값으로 원하는 이미지의 상대경로를 적거나, 이미지의 주소값을 입력한다.-

---

3.3 alt 속성(Attribute)

• alternative text 의 약자이다.
• alternative text 는 대체 텍스트를 의미한다.
• 가령 네트워크가 느려서 봐야 할 이미지가 브라우저에 출력되지 않았을 때, 아무것도 보여주지 않거나 엑박만을 띄어주는 것이 아닌 여기 어떤 이미지가 있다는 것을 알려주기 위해 대체 텍스트를 출력해줄 수 있는 속성이 alt 속성이다.
• 웹 브라우저를 사용하는 사용자 중 앞을 보지 못하는 사용자들이 있다. 앞을 보지 못하는 사용자들은 ‘screen reader’ 라는 웹을 읽어주는 도구를 사용하여 웹 브라우저를 사용한다.
• 앞을 보지 못하는 사용자들은 이미지를 볼 수 없기에 alt 속성의 값으로 입력한 텍스트를 통해 ‘screen reader’로 해당 alt 속성이 있는 img 태그가 출력하는 이미지를 파악할 수 있다.