[웹 개발] HTML 태그 (1)

제목 태그

제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그입니다.

태그 이름은 heading을 줄여서 h로 쓰며, 제목의 레벨에 따라서 <h1>~<h6>까지 있습니다.

보통 <h1>은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며, 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 됩니다.

하지만 현재 웹 페이지의 내용은 제목과 본문 식의 문서 형태보다는 주로 이미지나 그림처럼 시각적인 형태로 표현되고 있어서 제목 태그를 <h6>까지 쓰는 경우는 거의 없습니다.

 

제목 태그를 사용하면, 일반 텍스트보다 더 강조되는 스타일이 적용되는데 이는 브라우저가

기본적으로 제목 태그에 제공하는 스타일입니다.

제목이라는 의미에 맞게 기본적으로 좀 더 굵고 크게 표현이 됩니다.

 

단락 태그

단락(paragraph) 태그는 paragraph를 줄여서 p로 씁니다.

 

개행

<p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 됩니다.

그럼 <p> 내부에서 임의로 개행을 하려면 어떻게 해야 할까요?

HTML 문법 중 공백 시간에 배운 대로, html은 한 칸 이상의 공백 및 개행을 무시하기 때문에

실제 코드창에 개행을 하더라도 화면에 나타나지는 않습니다.

따라서 개행을 위해 쓰이는 태그가 바로 <br>입니다. (linebreak 를 줄여서 br 이라고 합니다.)

<br>은 닫기 태그와 내용이 존재하지 않는 빈 태그입니다.

개행하고자 하는 곳에서 <br>을 선언하면 개행이 됩니다.

이처럼 <p>를 이용하면 태그 자체에서 자연스럽게 개행이 되지만, <p> 내부에서 강제로 개행을

하기 위해서는 <br>을 이용해야 합니다.

 

텍스트 표현 태그

웹 표준화가 대두하면서 웹 문서의 구조와 표현을 분리하였습니다.

그 과정에서 많은 표현용 태그들이 사라졌고, 지금은 표현용 태그가 얼마 남지 않았습니다.

그 중 <b>, <i>, <u>, <s>에 대해 살펴보도록 하겠습니다.

• <b> : bold 태그는 글자를 굵게 표현하는 태그입니다.
• <i> : italic 태그는 글자를 기울여서 표현하는 태그입니다.
• <u> : underline 태그는 글자의 밑줄을 표현하는 태그입니다.
• <s> : strike 태그는 글자의 중간선을 표현하는 태그입니다. (예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.)

위 태그들은 의미가 없는 표현용 태그이기 때문에 사용하실 때는 각별히 주의를 하셔야 합니다.

 

단, HTML5 버전에서는 <i> 태그가 단순 표현용 태그에서 의미를 가지는 태그로 변경되었습니다.
특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용됩니다.

 

<a>

<a>(anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불립니다.

<a href="https://deious.tistory.com/" target="_blank">티스토리</a>

href 속성

링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다.

href 속성의 값은 링크의 목적지가 되는 URL입니다.

 

target 속성

target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성입니다.

속성값으로는 _self, _blank, _parent, _top이 있습니다.

_self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작합니다.

_blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성입니다.

 

기타 속성

<a>에는 이 외에도 많은 속성이 있습니다.

아래 링크를 참고해 다루지 않은 나머지 속성을 직접 공부하기를 권장합니다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

(참고로 속성 이름 옆 html5 레이블로 표시된 것은 html5 버전이 나오면서 새로 생긴 속성이라는 뜻입니다. 

Obsolete attributes로 표시된 부분은 폐기된 속성들이므로 보지 않으셔도 됩니다.)

 

내부링크

<a>를 통해 만들어진 링크가 꼭 외부 페이지로만 이동하는 것은 아닙니다.

<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 합니다.

내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자

하는 요소의 id 속성값을 적으면 됩니다.

 

보통 페이지에 내용이 많아 스크롤이 길어질 경우, 빠르게 화면 최상단으로 이동하고자 할 때

내부 링크를 주로 사용합니다.

웹페이지에서 화면 하단에 있는 'top' 또는 '맨 위로 이동하기' 버튼이 이에 해당합니다.