7. 의미 없는 태그, 앵커 태그

이번 포스팅에서는 웹 퍼블리싱 작업에서 사용 빈도가 높은 태그들에 대해서 알아보겠는데요.

그 주인공은 의미가 없는 태그인 <div>, <span>, 그리고 앵커 태그인 <a>입니다.

 

1. 의미 없는 태그란?

앞선 포스팅에서 시멘틱 마크업을 얘기할 때, 태그를 사용하면서 의미에 맞게 사용해야 한다고 말씀드렸었는데요.

대부분의 태그들은 각자의 의미를 지니고 있지만, 의미가 없는 태그도 존재합니다.

의미 없는 태그는 말 그대로 태그 자체에 아무 의미가 없으며, 스타일을 주기 위해 사용하거나 다른 태그들을 묶는 데 사용합니다.

의미 없는 태그에서 가장 많이 사용되는 태그는 <div>, <span>입니다.

2. <div>, <span>

<div> 태그는 블록 레벨 태그이며, <span> 태그는 인라인 레벨 태그입니다.

따라서, 사용 방법에 따라 <div> 태그와 <span> 태그를 활용하시면 됩니다.

<div> 태그와 <span> 태그는 아무 의미가 없기 때문에, 웹 브라우저에서도 별도의 기본 스타일을 적용하고 있지 않는 점 참고해 주세요.

의미 없는 태그의 대표적인 예시로는 <div> 태그를 통하여 하위 요소들을 묶거나, <span> 태그를 사용하여 스타일링을 하는 법 등이 있습니다.

예시에 사용된 class나 style은 추후 포스팅에서 다룰 예정이니 이런 식으로 활용한다는 정도만 눈으로 보시면 될 것 같습니다.

 

[<div> 태그 활용 예시]

 

<div class="title_area">
    <h2>소제목</h2>
    <p>내용</p>
</div>
<div class="title_area">
    <h2>소제목</h2>
    <p>내용</p>
</div>

 

[<span> 태그 활용 예시]

 

<div>
    <span style="color=red;">빨강</span>
    <span style="color=blue;">파랑</span>
</div>

 

3. 앵커 태그

앵커 태그는 링크 기능을 제공하는 태그로, 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 시점을 이동시킬 수 있는 좌표 역할을 하고 있습니다.

앵커 태그는 대표적인 속성으로 href, target, rel을 가질 수 있으며, 링크 생성을 위해서는 반드시 href(hypertext reference) 속성이 필요합니다.

href 속성은 <a> 태그가 가리키는 URL을 뜻하는데요.

해당 속성을 사용하여 다른 페이지로 연결하거나, 페이지 내 이동, 이메일, 전화 등에 활용할 수 있습니다.

 

[다른 페이지로 연결]

다른 웹 사이트로 연결할 때에는 위의 예시처럼 href의 값으로 해당 사이트의 URL을 입력하고, 다른 HTML 페이지로 이동할 때에는 아래 예시처럼 href의 값으로 상대 경로를 사용하여 연결합니다.

 

<a href="https://nitnal.tistory.com/">웹퍼블리셔의 세계에서 살아남기</a>
<a href="../home.html">home</a>

 

[페이지 내 이동]

페이지 내에서 특정 위치로 이동하기 위해서는 이동하고자 하는 태그에 id 값을 입력하고, href 값으로 id 선택자인 "#"과 id 값을 입력하면 됩니다.

 

<div id="top">
    <h1>여기가 top 영역입니다.</h1>
<div>

<a href="#top">go top</a>

 

[이메일 보내기]

이메일을 보내기 위해서는 href 값으로 "mailto:"를 입력하고, 보내려는 이메일 주소를 입력하면 됩니다.

 

<a href="mailto:nainal@email.com">닛날에게 메일 보내기</a>

 

[전화 걸기]

전화 걸기를 사용하기 위해서는 href 값으로 "tel:"을 입력하고, 전화번호를 입력하면 됩니다.

전화 걸기의 경우 해당 웹 브라우저를 보고 있는 장치에 따라 동작이 바뀔 수 있는데요.

휴대폰으로 클릭하면 번호를 자동으로 입력하게 되지만, PC로 클릭하는 경우 전화 앱이나 프로그램으로 동작할 수 있습니다.

 

<a href="tel:01055557777">닛날에게 전화 걸기</a>

 

이번 포스팅에서 소개한 태그들은 사용 빈도수가 높은 태그들이니, 잘 숙지하고 넘어가시는 것을 권해드립니다.

 

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)