[HTML/CSS] 영역 구분하기(div태그), 하이퍼링크 (a태그)

이번 포스트에서는 HTML 에서 영역을 구분하는 방법과, 현재 문서에서 다른 문서로 바로 접근할 수 있는 하이퍼링크를 거는 방법을 알아보려고 한다.

HTML 의 ‘HT(Hyper Text)’ 는 현재 문서에서 다른 문서로 바로 접근할 수 있는 텍스트를 뜻한다.

영역 구분하기

<div>

division의 줄임말인 div 태그는 HTML 에서 영역을 구분하는 역할을 한다. 이런 div 태그는 주로 레이아웃 구조틀을 만들고 HTML 요소들의 컨테이너가 되어 css 스타일을 블록 단위로 입히는 등의 역할을 한다. div 는 block-level 요소이고, block-level 요소의 특징을 제외하고 다른 기능은 없다. 그러나 화면을 구성하기 위해 레이아웃을 짜면 영역 구분이 많은 경우에 필요하고, 또 특정 블록만 스타일을 지정하기 위해서 많이 사용하므로 사용빈도가 굉장히 높다. (block-level 요소에 대해 잘 모르시는 분은 아래 HTML로 텍스트 표현하기1 링크를 참고바랍니다.)

• block-level 요소이고, block-level 요소의 특징을 제외하고 특별한 기능은 없다.
• 주로 레이아웃 구조틀을 만들 때 사용한다.
• 주로 블록 단위로 스타일을 입힐 때 사용한다.
• 위의 경우들이 아니더라도 영역을 구분할 때 사용할 수 있다.

<!-- div 태그 css 기본값 -->
div {
  display: block;
}

[HTML/CSS] HTML로 텍스트 표현하기1 — Block-level Elements

그런데 위 링크에서 살펴봤듯이, p 태그도 div 태그처럼 block-level 요소이기 때문에 영역을 구분할 수 있다. 그럼 p 태그와 div 태그의 차이는 뭘까?

<!-- div 태그 css 기본값 -->
div {
  display: block;
}

<p> , <div> 차이

두 태그의 차이점을 보기 위해 두 태그의 css 기본값을 비교해보자.

<!-- p 태그 css 기본값 -->
p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}
<!-- div 태그 css 기본값 -->
div {
  display: block;
}

div 태그는 block-level 요소 외에 다른 특징이 없지만, p 태그는 마진이 들어가 있는 것을 볼 수 있다. 마진은 block-level 요소로부터 바깥쪽 영역의 여백을 뜻하는데, 이 여백에 관한 건 본 포스트에서 자세히 다루지는 않는다. p 태그는 div 태그와 달리 기본적으로 여백을 갖는다는 것을 알아두자.

두 태그의 중요한 다른 점이 하나 더 있다. p 태그는 paragraph 의 앞글자를 따온 태그로, 문단, 즉 텍스트에 초점이 맞춰져있다. 그래서 웹 표준에 의하면 p 태그는 block-level 요소임에도 불구하고, p태그 및 div 태그를 포함한 다른 모든 block-level 요소를 포함할 수 없다. (https://www.w3.org/TR/html401/struct/text.html#h-9.3.1)

그러나 div 태그는 다른 모든 block-level 요소를 포함할 수 있다. 를 보면, p 태그가 div 태그를 포함할 때 안쪽 div 태그의 스타일은 잘 적용됐지만, 바깥쪽 p 태그에 스타일이 적용되지 않았다. 반대로 div 태그가 p 태그를 포함할 때에는 두 태그에 스타일이 잘 적용된 것을 볼 수 있다.

Ex1. p 태그는 block-level 요소를 포함할 수 없다.

따라서 두 태그의 사용 목적은 뚜렷하게 분리되는 편이다. p 태그는 텍스트 및 인라인 요소만을 포함하는 단락을 표현할 때 사용하고, 그 이외에 레이아웃 구분이나 스타일을 지정할 블록을 표현할 때는 div 를 사용하면 된다.

하이퍼링크

하이퍼링크는 한 문서 내에서 클릭이나 터치를 통해 다른 문서로 바로 접근할 수 있는 기능을 말한다. Html 에서 a 태그를 통해 하이퍼링크를 구현할 수 있다.

<a>

a 태그의 a 는 닻을 뜻하는 anchor 의 앞글자를 따온 태그로, 사용자가 한 문서에서 다른 문서로 바로 이동할 수 있는 하이퍼링크 기능을 담당한다. href 라는 속성은 클릭이나 터치를 통해 바로 이동할 문서의 url을 입력하면 된다. target 속성은 이동할 다른 문서가 현재 창에서 열릴 것인지, 새로운 창에서 열릴 것인지 등 어디에서 열릴 것인지 위치를 명시한다.

Fig1. a 태그 속성

Fig2. a 태그 속성 예시

html 속성의 자세한 내용이 궁금하다면 아래 링크를 참조하자.

HTML a tag

<!-- a 태그 css 기본값 -->
a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: (internal value);
}

a 링크의 기본 스타일은 다음과 같은 경우로 달라진다.

• link : 사용자가 이동할 다른 문서를 방문한 적이 없을 때
• visited : 사용자가 이동할 다른 문서를 방문한 적이 있을 때
• active : 사용자가 하이퍼링크를 클릭 중에 있을 때 (클릭하고 클릭을 떼지 않았을 때)
• hover : 사용자가 하이퍼링크 위에 마우스 포인터를 올렸을 때

hover 속성은 기본 스타일에 포함되지 않지만, 함께 다루는 것이 나중에 헷갈리지 않을 것 같아 기재하였다.

Reference

1. [W3School] “HTML tutorial” — https://www.w3schools.com/html/default.asp
2. [W3School] “HTML tags” — https://www.w3schools.com/tags/default.asp
3. 고경희, 2019, HTML + CSS3 웹표준의 정석, 이지스퍼블리싱
4. [dasima] “div vs span vs p 차이는 블록 요소와 포함 유무” — https://dasima.xyz/div-vs-span-vs-p-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%B8%94%EB%A1%9D-%EC%9A%94%EC%86%8C%EC%99%80-%ED%8F%AC%ED%95%A8-%EC%9C%A0%EB%AC%B4/
5. [StackOverFlow] “Nesting block level elements inside the <p> tag… right or wrong?” — https://stackoverflow.com/questions/4291467/nesting-block-level-elements-inside-the-p-tag-right-or-wrong
6. [Wikipedia] “Hyperlink” — https://en.wikipedia.org/wiki/Hyperlink