새롭게 알게 된 HTML 태그

출처 : http://tcpschool.com/html/html_basic_images

 

<pre>

<pre> 줄을 나누고 싶어서 이렇게 줄을 나눠봤습니다.   과연     그대로     출력이     될까요? </pre>

 

줄을 나누고 싶어서

이렇게 줄을 나눠봤습니다.

 

과연     그대로     출력이     될까요?

<p> 태그를 사용할 경우 띄어쓰기, 엔터 등이 작성 내용 그대로 표현되지 않는다.

<pre> 태그는 내용 그대로 표현된다.

---

<hr>

<hr>
<p>내용</p>
<hr>

 

---

내용

---

---

<mark>

 

<p><mark>"이 부분"</mark>만 하이라이팅하고 싶어요.</p>

"이 부분"만 하이라이팅하고 싶어요.

---

 

<abbr>

<abbr title="HyperText Markup Language 5">HTML5</abbr>

HTML5

---

엔티티(Entity)

HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부른다.

이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석한다.

따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 한다.

&엔티티이름; 또는 &#엔티티숫자;

---

<a> 태그 target 속성

 

<a>태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시한다.

_blank	링크로 연결된 문서를 새 창이나 새 탭에서 오픈.
_self	링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정)
_parent	링크로 연결된 문서를 부모 프레임(frame)에서 오픈.
_top	링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈.
프레임(frame) 이름	링크로 연결된 문서를 지정된 프레임(frame)에서 오픈.

---

링크의 상태(state)

HTML 링크의 상태는 다음과 같이 네 가지로 구분할 수 있습니다.

링크의 상태설명

link	아직 한 번도 방문한 적이 없는 상태 (기본설정)
visited	한 번이라도 방문한 적이 있는 상태
hover	링크 위에 마우스를 올려놓은 상태
active	링크를 마우스로 누르고 있는 상태

 

웹 브라우저에서 링크가 연결되어 있는 텍스트의 색상은 다음과 같습니다.

 

- 기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경됩니다.

- visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경됩니다.

- active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경됩니다.

 

예제

<style>

    a:link    { color: teal; }

    a:visited { color: maroon; text-decoration: none }

    a:hover   { color: yellow; text-decoration: none }

    a:active  { color: red; text-decoration: none }

</style>

 

---

페이지 책갈피

<a>태그의 name 속성을 이용하면 간단한 책갈피를 만들 수 있습니다.

우선 책갈피를 통해 가고 싶은 위치에 <a>태그를 만들고 name 속성을 작성합니다.

그다음에 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 됩니다.

예제

<a href="#bookmark"><p>제목 3으로 갑시다!!!</p></a>

...

<h2><a name="bookmark"></a>제목 3</h2>

 

---

이미지 맵 만들기

HTML에서는 <map>태그를 이용하여 이미지 맵(image map)을 제작할 수 있습니다.

이미지 맵(image map)이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미합니다.