Emphasis Tags

텍스트의 강조를 마크업하는 태그

HTML의 Emphasis Tag는 텍스트의 강조를 마크업할 때 사용하는 태그다.

강조태그는 컴퓨터에게 해당 내용을 강조한다는 메세지를 전달하기 위해 사용한다.

Emphasis Tag의 종류는 크게 2가지로 <em>, <strong>를 사용한다.

<em>태그와 <strong>태그의 차이

<em>태그를 사용하면 텍스트가 강조되면서 기울어진다, 반면에 <strong>태그는 강조만 된다.

이는 추후에 css로 변경이 가능하기 때문에 굳이 두 태그를 구별해서 사용할 필요는 없다.

  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
  <em>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</em>
  <!-- <br>태그는 줄바꿈을 하는 태그 -->
  <br>
  <strong>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</strong>

위 코드를 실행하면 아래와 같은 결과가 출력된다.

Anchor Tag

특정 목적지로 이동할 수 있는 하이퍼링크를 마크업하는 태그

HTML의 Anchor Tag는 <a>를 사용하며 href속성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.

<a>안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다.

Anchor Tag를 참조하는 방법

  <!-- 1. 이동하고자 하는 사이트에 주소 직접 입력 -->
  <a href="https://www.naver.com/"> 네이버로 이동 </a>
  <br>
  
  <!-- 2. 이동하고자 하는 HTML문서의 상대경로 -->
  <a href="./move.html"> move.html로 이동 </a>
  <br>
  
  <!-- 3. 페이지내 이동(id값 사용) -->
  <a href="#move"> section태그로 이동 </a>

  
  <section id="move">
    <p> section태그 문단 </p>
  </section>
  
  <!-- 4. 메일쓰기 -->
  <a href="mailto:kmd2504@naver.com">메일쓰기</a>
  <br>
  
  <!-- 5. 전화걸기(모바일에서 사용) -->
  <a href="tel:01084827415"> 전화걸기 </a>

위 코드를 실행하면 아래와 같은 결과가 출력된다.

새 탭으로 페이지를 여는 방법

<!-- target속성에 _blank값 사용 -->
<a href="https://www.naver.com/" target="_blank"> 네이버 열기 </a>

참고 자료

<em> - HTML: Hypertext Markup Language - MDN Web Docs
<strong> - HTML: Hypertext Markup Language - MDN Web Docs
<a> - HTML: Hypertext Markup Language - MDN Web Docs