[별별 태그 이야기] 우리가 몰랐던 HTML 태그의 숨겨진 이야기 - (1)

0. 도입

안녕하세요! 오늘은 'HTML 태그의 숨겨진 이야기'라는 주제로 찾아왔습니다!

'HTML 태그의 숨겨진 이야기'는 시리즈로 연재(?)를 해보려고 해요!

이 시리즈에서는 우리가 평소 알지 못했던

• HTML 태그들의 약자라든지
• 어? 이거 왜 이런 이름을 가지게 되었을까? 라든지
• 아니 이런 태그도 있어?

하는 것들을 알아보려고 합니다.

사실 알고보면 우리가 모르는 이야기들이 가득한 HTML 태그들! 함께 만나 보시죠!

1. <a href="#">하이퍼텍스트</a>

제일 첫번째 주자는 a 태그 입니다.

닝겐 A : "좋아. a 태그를 써서 링크를 걸 수 있는건 알겠어. 근데 도대체 'a'가 뭐의 약자지? 무슨 뜻이지?"

사실 링크가 걸리니까 'link'를 사용하는게 더 적합해 보이는 이 친구!

근데 사실 'link'는 'css'파일을 불러 올 때 사용하니깐요!

그러면 도대체 뭐의 약자일까요!

그건 바로 '닻'을 뜻하는 'Anchor'의 약자입니다!

a 태그를 이용해서 링크에 닻을 내릴 수 있는거죠!

닻을 내려서 그 주소에 정박하는 뭐 그런걸 생각하고 만들었나 봅니다.

근데!!!

a 태그를 사용하면 한가지 의문점이 더 생깁니다.

닝겐 A : "href??? 헐프? 허르프? 도대체 뭐하는 놈이야?"

href는 a 태그를 연결할 링크의 주소를 입력하는 부분입니다.

근데 정말로 뭐의 약자인지 아는 사람이 많이 없습니다. (궁금해 하는것 같지도 않구요;;;)

그래서 제가 준비 했습니다!!

href는 바로바로! 'Hypertext REFerence'의 약자 입니다. (참 더럽게도 만들어 놨다;;;)

어쩌면 우리가 a 태그로 거는 링크를 '하이퍼링크'라고 부르는 것도 여기에서 나온 것일지도 모릅니다.

2. <img src="/images/test.jpg" alt="테스트 이미지!!!">

다음 타자는 img 태그 입니다.

닝겐 B : "'img'는 뭐, 'image'랑 생긴게 너무 흡사해서 image라는걸 알겠는데, src랑 alt는 뭐지??"

그렇습니다. img 태그는 이미지를 삽입할 수 있는 태그입니다.

우리는 src에 이미지의 주소를 입력하고, 만약에 이미지가 없을 경우에 표시될 텍스트를 alt에 표시하게 됩니다.

img 태그의 속성들은 그래도 좀 직관적인 약자를 가지고 있습니다.

src는 이미지의 근본(?)이라는 뜻인, 'source'의 약자이고,

alt는 이미지가 없을 때 이미지를 대체한다는 뜻인 'alternate'의 약자 입니다.

3. <attr title="마우스 올리면 뜨는 메세지">핡</attr>

우리가 웹 개발을 할 때 자주 사용하는 태그는 한정적입니다. 사실은 우리가 모르는 태그들이 엄청 많은데도 말이죠!!

사실, HTML5 이전의 버전에서 사용하던 태그들이 많이 없어지고, CSS3로 대체되는 바람에 많이 줄긴 줄었죠.

그래도 아직까지 작동하면서도 우리가 잘 몰랐던 이 친구!

바로 attr 태그입니다.

attr 태그는 속성을 뜻하는 'Attribute'의 약자입니다.

이 attr 태그로 감싸져 있는 속성에 마우스를 올리면! 잠시뒤, title에 있는 글자가 표시되게 됩니다!

(저는 이 태그를 발견하고 너무 신기했던 나머지 소리를 질렀습니다!)

<attr 태그를 이미지에 적용한 모습>

attr 태그는 인라인 속성이기 때문에 문자열이나, 링크 등에 다양하게 활용할 수 있습니다!

attr 태그 말고도 비슷한 기능을 수행하는 태그가 있습니다.

바로 abbr 태그인데요,

문법과 사용방법은 attr 태그와 정확하게 일치 합니다. 하지만 크롬 브라우저에서 abbr 태그를 조회하면 글자에 밑줄이 생기게 됩니다.

<abbr 태그는 밑에 밑줄이 생겨요!>

팝업이나 alert로 정보를 주에는 뭔가 사소하고, 특정 기능들의 단축키들을 사람들에게 전달 할 때 유용하게 사용할 수 있을 듯 합니다.

4. 

우리는 가끔 HTML 문서에 수학 공식들을 표기해야 하기도 합니다.

sup이랑 sub 태그는 그 중에서도 윗첨자와 아랫첨자를 담당해 줍니다!

sup 태그는 'super subscript'(슈퍼 첨자)의 약자,

sub 태그는 'subscript'(첨자)의 약자입니다.

이렇게 사용합니다!

<sub, sup 태그의 활용>

5. <blockquote>인용구</blockquote><q>인용구</q>

다음은, 인용구를 사용할 때 쓰는 blockquote 태그입니다!

blockquote와 q 모두 인용구를 쓸때 사용합니다.

차이가 있다면, blockquote는 블록 속성의 태그이고, q는 인라인 속성의 태그라는 것이죠.

인용구 태그는 주로 블로그에서 또는, 논문 등에서 다른 사람의 글과 말을 가져올 때 많이 사용합니다. 바로 이렇게 말이죠.

이게 바로 blockquote 태그죠!!

<blockquote와 q 태그를 사용한 모습>

근데 사실 위에 사진에서 볼 수 있듯이, blockquote 태그는 기본적으로 안쪽으로 조금 들여쓰기 되는거 외에는 별다른 차이가 없어서 스타일링을 해줘야 깐지가 납니다.

q 태그 같은 경우는 그냥 텍스트에 "" 표시가 됩니다.

마무리

우리가 평소에 많이 사용했지만, 잘 알지 못했던! HTML 태그들의 숨겨진 속 이야기에 대해서 조금 알아 봤습니다!

각각의 태그가 무슨 약자 인지는 

HTML 약어집 : http://www.terms.co.kr/HTMLacronyms.htm

사이트에도 잘 나와있습니다.

다음에도 더 재밌는 HTML 태그 이야기들로 돌아 오겠습니다! 감사합니다!