[HTML/CSS]03.글자 태그 Vol.2

Posted by ArteLog RATTLE
2017.04.30 10:00 IT/HTML&CSS

 앞에서 '글자 태그' 포스팅에 이어 오늘은 '앵커 태그'와 '글자 형태 태그'에 대해서 알아보도록 하겠습니다. 특히 '앵커 태그'는 링크와 관련 있는 중요한 태그이기 때문에 필수적으로 습득해야할 태그 중 하나입니다. HTML에서 가장 중요한 단어인 H가 의미하는 하이퍼텍스트입니다. 하이퍼텍스트는 사용자의 선택에 따라 특정한 정보와 관련된 부분으로 이동할 수 있게 조직화된 문서를 의미합니다. 그 이유 중 하나인 '앵커 태그'에 대해서 알아보도록 하겠습니다.

① 앵커 태그


 앵커 태그는 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 태그입니다. 연결 태그라고도 부릅니다.


 태그 이름 

 설명 

a

 앵커 태그(연결 태그)


예를 들어볼까요? 


 '티스토리'라는 글자에 http://www.tistory.com 이라는 주소를 연결해보겠습니다. 티스토리 글쓰기 HTML 버전으로 들어가셔서 다음과 같이 코딩합니다.


<a href="http://www.tistory.com">티스토리</a>


 그리고 난 후 티스토리 글쓰기 HTML 버전해제를 하시면 다음과 같이 '티스토리' 글자에 http://www.tistory.com 주소가 링크가 입혀지는 것을 확인할 수 있습니다. 



 조금 심도 있게 들어가보겠습니다. 이번에는 굉장히 자주 사용되는 '빈 링크'는 어떻게 코딩할까요? 쉽습니다. href 속성에 #만 삽입하면 됩니다. 위에 코딩을 빌려보겠습니다.


<a href="#">티스토리</a>


 티스토리라는 글자에 하이퍼링크 기능을 제거한 빈 링크를 설정하면



 링크는 걸려있지만 아무곳에도 이동하지 않습니다. 하이퍼링크 기능을 제거해도 웹 표준을 따르면 a 태그에 href 속성을 반드시 입력해야하기 때문에 #을 입력하는 것입니다.


 그럼 티스토리 글쓰기에도 '앵커 태그' 기능이 있을까요? 일단 '티스토리'라는 글자를 쓰고난 다음 '티스토리' 글자를 드래그한 후



티스토리 글쓰기 상단 메뉴에 'URL'을 클릭합니다.




 ▲ 그리고 "http://www.tistory.com"을 삽입하고 클릭 시 '새 창'을 체크하고 '확인'을 클릭합니다. 그리고 난 후 티스토리 글쓰기 HTML 버전에서 확인해보면 


<a href="http://www.tistory.com" target="_blank" class="tx-link">티스토리</a>


 이렇게 코딩이 되어 있는 것을 확인할 수 있습니다.  즉, 티스토리 글쓰기 상단 메뉴 'URL'도 '앵커 태그'로 정의되어 있는 것입니다. 여기서 재미있는 점은 위에서 설정한 클릭 시 '새 창'의 코드는 "target="_blank" 라고 적혀있는 것입니다. target 요소 중 하나인 _blank는 '새 창'을 의미합니다. 반대로 '현재창'의 target 요소는 '_top'입니다. 



② 글자 형태 태그

 이는 텍스트의 물리적 스타일 태그인데요. 태그를 정리해보면


 태그 이름 

 설명 

b

굵은 글자 태그

i

기울어진 글자 태그(이태릭체)

 small

표준보다 작은 글자 태그

big

표준보다 큰 글자 태그

 sub

아래에 달라 붙는 글자 태그(아래첨자)

sup

 위에 달라 붙는 글자 태그(윗첨자)

 ins

 밑줄 글자 태그

 del

 가운데 줄이 그어진 글자 태그

 u

 밑줄 태그

 strike

  취소선 태그

 tt

  타이핑체 태그


한번 살펴볼까요? 모두 다 한 문장씩 써보도록 하겠습니다.


<b>ArteLog Blog에 오신 것을 환영합니다</b><br/>

<i>ArteLog Blog에 오신 것을 환영합니다</i><br/>

<small>ArteLog Blog에 오신 것을 환영합니다</small><br/>

<big>ArteLog Blog에 오신 것을 환영합니다</big><br/>

<sub>ArteLog Blog에 오신 것을 환영합니다</sub><br/>

<sup>ArteLog Blog에 오신 것을 환영합니다</sup><br/>

<ins>ArteLog Blog에 오신 것을 환영합니다</ins><br/>

<del>ArteLog Blog에 오신 것을 환영합니다</del><br/>

<u>ArteLog Blog에 오신 것을 환영합니다</u><br/>

<strike>ArteLog Blog에 오신 것을 환영합니다</strike><br/>

<tt>ArteLog Blog에 오신 것을 환영합니다</tt>


이 역시 티스토리 글쓰기 HTML 버전에서 확인해보면


ArteLog Blog에 오신 것을 환영합니다

ArteLog Blog에 오신 것을 환영합니다
ArteLog Blog에 오신 것을 환영합니다
ArteLog Blog에 오신 것을 환영합니다
ArteLog Blog에 오신 것을 환영합니다
ArteLog Blog에 오신 것을 환영합니다

ArteLog Blog에 오신 것을 환영합니다
ArteLog Blog에 오신 것을 환영합니다
ArteLog Blog에 오신 것을 환영합니다
ArteLog Blog에 오신 것을 환영합니다
ArteLog Blog에 오신 것을 환영합니다


 이렇게 출력되는 것을 확인할 수 있습니다. 중복적으로 strike와 del, u와 ins은 같은 역할을 하고 있네요. 이 역시 티스토리 블로그 글쓰기 상단 메뉴에 몇가지 설정되어 있는 것을 볼 수 있습니다. 이 포스팅에서 글자 형태 태그는 실제로 스타일시트(CSS)에서 처리하므로 현대에는 잘 사용하지 않는 점 참고하시길 바랍니다. 이상 '글자 태그' 포스팅에 대해서 마치도록 하겠습니다. 감사합니다:D



관련글


[HTML/CSS]01.HTML 구조 태그

[HTML/CSS]02.글자 태그 Vol.1


'IT > HTML&CSS' 카테고리의 다른 글

[HTML/CSS]03.글자 태그 Vol.2  (0) 2017.04.30
[HTML/CSS]02.글자 태그 Vol.1  (0) 2017.04.29
[HTML/CSS]01.HTML 구조 태그  (0) 2017.04.26
이 댓글을 비밀 댓글로