[웹코딩의기초] 모든 태그에는 뜻이 있다 (4) 특수 태그

이번에는 문자를 꾸며주는 인라인 태그들과 약간의 특수성을 가진 태그들에 대해 알아봅시다.

*인라인이 뭔데? 라고 생각 하시는 분들은 먼저 이쪽☞[웹코딩의 기초] inline? block? 요소가 가지는 기본속성 - display

 

 

<span>

<div>의 인라인 버전이라고 생각하시면 좋습니다. 어떤 작은 구간을 나누는데 사용합니다.

블록요소인 <div>와는 달리 어떤 문장의 일부만 색상을 변경한다던지 등의 역할을 할 수 있습니다.

스타일을 지정하기 전까지는 아무런 변화도 나타나지 않습니다.

 

 

<i>

원래는 글꼴을 이탤릭(기울임)체로 만들기 위해 존재하던 태그였습니다만 모든 태그에는 단순히 문자를 꾸미는것을 넘어 어떠한 의미가 필요하기 때문에 의미가 부여된 태그중에 하나입니다. 'idiomatic text element' 라고 명명되어있으며 문장의 일부가 외국어라던지 생각이라던지 어떤 용어(어쩌면 익숙하지 않은)를 쓸때 등 나머지와 달라 구분이 필요할 때 사용합니다.

대표적으로 윙가르디움 레비오우사 같은 주문을 외우는 구절같은 것을 쓸때 사용할 수 있겠네요.

좀더 강조를 위한 내용이 있다면 <i>보다는 <em>을 사용할것을 권장합니다.

i<이기 때문에 아이콘을 사용할때도 많이 쓰이고 있는데 그다지 적절한 사용법은 아니라고 합니다(이미 널리 쓰이고 있기도 하고 어떻게 해석하냐에 따라 그렇게 쓸수도 있다고 생각하는 쪽도 많기 때문에 아직도 꽤 이슈가 되고있는 내용입니다)

 

<em>

'emphasis'의 약자입니다. <i>와는 스타일적으로 둘다 기울임을 주고 어떻게 보면 굉장히 비슷하지만 다른 의미를 가집니다. 구분이 필요하지만 외국어라서 등의 이유가 아닌 톤에 강조가 필요할때 사용합니다.

그것은 절대 해서는 안될 일이었어. 같은 식으로 사용할 수 있을 것 같습니다. 차이가 느껴지나요?

 

 

<b>

마찬가지로 원래는 단순히 볼드(굵은글씨)체로 만들기 위해 존재하던 태그였습니다만 나중에 의미가 부여된 케이스중 하나입니다. 'bring attention to element' 라고 되어있으며 말그대로 어떤 문자에 주의를 끌기 위해 사용된다고 합니다.

강조란 어떤 부분을 특별히 강하게 주장하거나 두드러지게 한다는 의미를 가진다. 같은 느낌이 되겠습니다.

특별히 중요한 내용은 <b> 보다는 <strong>을 사용하는 것을 권장합니다.

 

<strong>

이것도 <b>와 비슷하지만 단순히 주의를 끌기보다는 특별히 중요한 내용을 강조하기 위해 사용합니다. <b>와 마찬가지로 기본적으로 굵은 글씨체로 표시됩니다.

절대 먹이를 주지 마시오. 같은 내용을 강조하는데 사용할 수 있다고 볼수 있겠네요

 

 

* 이 외에도 이렇게 강조하거나 어떤 의미를 부여하는 태그는 정말 다양하지만 실질적으로 우리가 에디터를 사용해서 문서를 작성할때는 이것들을 서로 구분해서 쓰는게 상당히 어렵기 때문에 스타일이 중복되는 태그는 하나로 묶여서 사용되고있긴 합니다. 하지만 직접 코드를 짤 때는 이렇게 잘 구분해서 사용하는것이 좋습니다.

 

 

<u>

이것도 역시 단순히 밑줄을 위해 존재하던 태그였지만 의미가 부여된 태그입니다. 'unarticulated annotation' 이라고 하며 주석 등이 필요한 내용에 사용합니다. 기본적으로 밑줄로 표시됩니다.

이 요소는 철자오루 등에 사용할수도 있습니다.

 

 

<s>

<strike>로도 사용되던 요소이지만 현재는 <s>만 사용합니다. 이제 더이상 관계 없거나 정확하지 않은 내용에 취소선을 긋는데 사용합니다. 그냥 적당히 써도 되지 않을까... 당연히 목적에 맞게 사용하는것이 중요합니다. 나□위키에서 자주 볼 수 있습니다.

 

 

<h1> ~ <h6>

헤딩(헤드라인)을 나타내는 태그들입니다. 1단계부터 6단계까지 있으며 h뒤의 숫자가 작을수록 중요도가 높습니다. 기본스타일로 굵은글씨로 표현되며 각 단계별로 폰트 사이즈가 정해져있습니다. 다른 h요소는 한 페이지에 여러번 사용되어도 괜찮지만 <h1>은 한 페이지당 단 하나씩만 사용하는것을 권장하며 보통은 홈페이지 제목을 넣는데 사용합니다. (그외 타이틀이 될만한 것은 h2부터 시작하는 편)

 

 

여기까지 <span>을 제외한 위 요소들은 기본적으로 텍스트를 꾸며주는 속성을 가지고 있지만 단순하게 텍스트를 꾸미기 위해서만 사용해서는 안되며 (그러니까 아무 이유 없이 기울인 글꼴이 예뻐서 같은 느낌으로 사용하면 안된다는 뜻입니다) 꾸미기를 위해서는 다른 태그로 감싼 뒤 css로 스타일링을 해줘야 합니다. 

 

 

 

<a>

'anchor'의 약자입니다. href 속성을 필수로 요하며 링크를 반드시 포함해야 합니다.

<a href="주소">링크</a> 와 같은 형식으로 쓰입니다.

이해가 쉽도록 '링크'라고 하고 있고 아래서도 링크라고 쓸 예정이지만 링크라고 해서 반드시 어떤 다른 페이지로 이동해야 하는것은 아니며 같은 페이지의 어떤 지정된 포인트로 이동하는 식으로도 사용이 가능합니다(이에 대해서는 조만간 적어보려고 합니다)

이런 특수성을 제외하고도 조금 특이한 속성을 가지고 있는데 <a> 태그는 인라인 요소인데 원래는 인라인 요소 안에 블록요소가 위치하면 안되지만 <a> 태그는 이런것이 가능합니다(정확히는 가능하게 되었습니다). 옛날에는 링크가 텍스트나 이미지에만 걸리는 편이었지만 이제는 어떤 영역 전체(옛날이라면 이미지 한개로 만들어졌을수도 있을)에 링크를 주어야 하는 경우도 생기기 때문에 이런 변화가 생겼다고 합니다.

<a> 태그가 아닌요소에 링크를 거는것은 일부 브라우저에서 지원이 안되기도 하고 <a>가 아닌 태그에 링크가 있는지 읽어내기 어렵기도 하기 때문에 되도록 모든 링크는 <a> 태그를 사용하는것이 권장됩니다. (<button>태그를 사용할수도 있지만 이건 링크와는 엄연히 다른 역할을 하기 때문에 제외합니다)

 

 

<button>

클릭가능한 버튼을 나타내며 <a> 태그와는 달리 링크가 필요 없습니다. 폼에 연동해서 가장 많이 쓰이지만 버튼이 필요한 곳이면 어디든 사용할 수 있습니다. (눌렀을때 아무 작동을 하지 않는다면 필요하다고 할 수 없겠죠)

 

 

<img>

이미지소스를 출력하는데 사용합니다. src와 alt 요소는 필수입니다.

<img src="이미지링크" alt="대체텍스트"> 와 같이 사용합니다.

대체텍스트는 이미지가 로딩되지 않을때, 혹은 이미지를 로드하지 않을 때(데이터 절약 등의 이유로) 이미지에 대한 설명을 적는 부분입니다.

이 요소는 인라인요소같이 한줄에 들어오지만 블록요소처럼 높이와 너비값을 가질 수 있습니다(이미지니까요) 이런 요소를 inline-block 요소라고 합니다.(이에 대해서도 조만간 쓸 예정입니다)

 

 

<blockquote>와 <q>

<blockquote>는 'block quotation'를 줄인 말로 인용구를 표현할때 사용합니다. 블록요소라서 blockquote고 줄바꿈이 필요 없는 짧은 문장의 인용은 <q>(quotation)로 합니다. 기본스타일로 <q>는 큰따옴표로 내용을 감싸고 <blockquote>는 전체 들여쓰기(좌측여백이라고 하는쪽이 더 맞을것 같네요)를 줍니다

 

 

<p>

'pharagraph', 즉 문단을 나타내는데 사용하는 태그입니다. 반드시 문장으로 이루어진 문단만을 감싸야하는것은 아니고 연관있는 컨텐츠(이미지라던지)를 묶는데 사용할 수 있습니다. 기본 스타일로 위아래 여백을 가집니다.

특수성을 가진 태그로 분류한 이유는 이 태그는 블록요소이지만 <p> 태그 안에는 다른 블록요소가 들어갈 수 없습니다.

이유는 <p> 태그는 종료태그(</p>)로 닫지 않아도 다른 블록요소가 아래 위치하면(혹은 html 문서가 끝난다면) 자동으로 태그를 닫도록 되어있기 때문입니다. 

<p>내용 
	<div>어떤 다른 내용</div>
</p>

만약 이렇게 쓴다고 해도 결과물은

<p>내용</p>
<div>어떤 다른 내용</div>

이렇게 나오게 됩니다

 

 

 

 

그리고 마지막으로 이 아래로는 더이상 쓰이지 않는, 써서는 안되는 태그들입니다. 이 태그들을 사용하는곳이 있다면 다른 태그로 교체해야 합니다. 대표적으로 많이 쓰였던 태그에 대해서만 간단히 적습니다.

위에서도 잠깐 언급했고 이 글 시리즈를 관통하는 내용이기도 한데 아래 태그들이 더이상 쓰이지 않는 이유는 의미가 불분명하거나 꾸미기 위한 것 이상의 어떤 의미를 가지지 않기 때문입니다.

사실 사용한다고 해서 웹사이트에 치명적인 오류가 생기거나 뭐 그런 일은 발생하지 않지만.. 전문적으로 가고싶다면 절대 사용하지 않기를 바랍니다.

 

 

<font>

과거에 폰트를 스타일링 하기 위해 사용되었던 태그입니다. 적절한 태그로 감싸고 스타일을 지정하도록 합니다. 폰트 관련 스타일로는 font-family,font-size,color 등이 있습니다

 

<nobr>

글이 길어져도 줄바꿈이 되지 않도록 하는 태그였습니다만 이 외에는 의미가 없기 때문에 더이상 사용하지 않습니다.

적절한 태그로 감싸고 스타일을 지정합니다. 이에 해당하는 스타일은 white-space: nowrap; 입니다.

 

<center>

모든 태그를 무조건 가운데정렬 시켜주는 마법의 태그지만 가운데정렬을 한다는것 외에는 아무 의미가 없기 때문에 사용하지 않습니다. 블록요소 안의 텍스트 등 인라인요소의 정렬은 text-align: center;로 정렬하고 div같은 블록요소를 화면 가운데로 정렬하는 방법은 여러가지가 있습니다만 보통은 margin: 00px auto; 를 사용합니다.(다른 스타일에 따라 적용되지 않을 수 있습니다.) 00에는 상하여백을 주는 숫자를 넣습니다(위아래 여백을 다르게 하고싶다면 margin: 상단여백px auto 하단여백px; 로 작성합니다)

 

<blink>,<marquee>

역시 꾸미기만을 위한 태그로 더이상 사용하지 않습니다. 자바스크립트나 더 가볍게는 css 애니메이션을 통해 구현할 수 있습니다.

 

<frame>,<frameset>,<noframes>

과거에 홈페이지 레이아웃을 구성하기 위해 영역을 나누던, 혹은 프레임이 없는 구성에 사용하던 태그입니다. 이 태그는 사실 의미가 없다기보다는 기능적인 면에서 단점이 크기 때문에 더이상 사용되지 않습니다. <iframe>을 대체제라고 하기는 약간 무리가 있고 현재는 실질적으로 <header>, <main>, <footer>, 그리고 <div>나 ,<section> 등등 영역을 나누는 태그를 사용하여 제작합니다.

 

 

 

이 외에도 정말로 아주 많은 태그들이 있고 사실 추가로 다루고 싶은 것 중에 양식(폼)을 구성하는 태그들이 있지만 이건 의미는 직관적인 편이고 구성이나 쓰는 방법이 더 중요하기 때문에 조금 더 나중에 다루도록 하겠습니다.

 

 

이 시리즈는 여기서 마무리하고 모든 태그에 대해서는 developer.mozilla.org/ko/docs/Web/HTML/Element 이곳에서 확인할 수 있습니다(더이상 사용되지 않는 태그는 맨 아래) 분류가 나눠져있고 알파벳 순서대로 쓰여져있기 때문에 빠르게 확인하기 좋습니다. 한국어로 번역이 어느정도 되어있지만 영어가 되는 분들은 상단바 중에 View in English 버튼을 눌러 영문으로 확인하시는게 좀 더 이해하기 좋을 수도 있습니다.

당연하지만 이 태그들을 전부 쓰게될 확률은 거의 0에 가깝기 때문에 전부 외우지 않으셔도 됩니다. 다만 태그를 사용할때, 혹은 어떤 태그를 보았을때 이게 어떤 의미로 쓰이더라? 하고 다시 찾아볼수 있을 정도로만 생각 해주세요(일부러 외우지 않더라도 많이 쓰는 태그는 자연스럽게 기억하게 됩니다).