링크(Link)
웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재한다.
이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a>태그로 표현한다.
<a href="링크주소">HTML 링크</a>
<a>태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시한다.
<a>태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있다.
<a href="https://www.google.com/"></a>
target 속성
<a>태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시한다.
target 속성값 | 설명 |
_blank | 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. |
_self | 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) |
_parent | 링크로 연결된 문서를 부모 프레임(frame)에서 오픈. |
_top | 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈. |
프레임(frame) 이름 | 링크로 연결된 문서를 지정된 프레임(frame)에서 오픈. |
<h2><a href="링크주소" target="_blank">blank</a></h2>
<h2><a href="링크주소" target="_self">self</a></h2>
<h2><a href="링크주소" target="_parent">parent</a></h2>
<h2><a href="링크주소" target="_top">top</a></h2>
<h2><a href="링크주소" target="myframe">myframe</a></h2>
<iframe name="myframe" style="width:50%; height: 350px"></iframe>
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>중간 부분으로 간다.</p></a>
...
<h2><a name="bookmark"></a>중간 부분</h2>
<p>중간 부분 단락</p>
이미지(Image)
이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미한다.
웹 페이지에서 주로 사용되는 이미지의 종류
- JPEG 이미지
- GIF 이미지
- PNG 이미지
이미지의 삽입
HTML 문서에 이미지를 삽입할 때는 <img>태그를 사용한다.
<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 다음과 같은 문법으로 사용된다.
<img src="이미지주소" alt="대체문자열">
src 속성은 이미지가 저장된 주소의 URL 주소를 명시한다.
alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있다.
이미지의 크기(width, height) 설정
style 속성을 사용하여 이미지의 크기를 설정할 수 있다.
또한, width 속성과 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수도 있다.
위의 두 가지 방법 모두 HTML5 표준에는 적합한 방법이지만, CSS를 이용한 내부 스타일 시트나 외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지하려면 style 속성을 사용하는 것이 좋다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Images</title>
<style>
img {
width:100%;
border: solid 1px black;
}
</style>
</head>
<body>
<h1>이미지의 크기 설정</h1>
<img src="이미지주소" alt="대체문자열" width="400" height="300">
<img src="이미지주소" alt="대체문자열" style="width:400px; height:300px">
</body>
</html>
이미지의 테두리(border) 설정
border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있다.
<img src="이미지주소" alt="대체문자열"
style="width:400px; height:300px; border: 3px solid black">
이미지에 링크(link) 설정
이미지에 <a>태그를 이용하여 링크를 설정할 수 있다.
<a href="/html/intro">
<img src="이미지주소" alt="대체문자열" style="width:320px; height:214px; border: 1px solid black">
</a>
이미지 맵 만들기
HTML에서는 <map>태그를 이용하여 이미지 맵(image map)을 제작할 수 있다.
이미지 맵(image map)이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미한다.
<img>태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정된다.
<map>태그는 하나 이상의 <area>태그를 가지며, 이 <area>태그가 바로 버튼과 같은 역할을 한다.
<img src="이미지주소" alt="대체문자열" usemap="#exam" style="width:400px; height:300px" />
<map name="exam">
<area shape="rect" coords="90,50,180,130" alt="대체문자열" href="링크주소">
<area shape="rect" coords="210,200,70,130" alt="대체문자열" href="링크주소">
</map>
- shape : rect / circle / poly 세 가지 중 하나를 넣어준다. rect는 사각형, circle은 원형, poly는 다각형 이다.
- coords : 좌표 입니다. 숫자로 이루어진다.
- href : 누르면 이동되는 링크 주소를 넣어주면 된다.
coords
rect
coords(x1, y1, x2, y2)
사각형 형태의 좌표이며 좌측 상단의 x1, y1 값을 먼저 입력하고, 우측 하단의 x2, y2의 좌표값을 coords 에 입력하면 된다. 좌표값은 바로 픽셀의 위치와 동일하다.
circle
coords(x1, y1, r)
원의 중심점 좌표(x1,y1)를 알아야 하며, 이 원의 반지름(r)만 알면된다.
poly
coords(x1, y1, x2, y2, x3, y3) 삼각형
coords(x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6) 다각형
다각형 좌표는 최소한의 도형이 삼각형이고 x1,y1을 시작으로 꼭짓점의 갯수대로 늘어나게 된다. 선분이 많을수록 좌표는 더욱 늘어나게 될 것이다.
※반드시 한 방향으로만 시작되어야 한다. x1, y1 으로 갔다가 갑자기 x4, y4로 작성하시면 안된다. 순서대로 차례대로 좌표값을 입력해줘야 한다.
'Language > HTML' 카테고리의 다른 글
[HTML] HTML 테이블(Table) (0) | 2022.09.16 |
---|---|
[HTML] HTML 리스트(List) (0) | 2022.09.16 |
[HTML] HTML 배경(Background) (0) | 2022.09.16 |
[HTML] HTML 색(Color) 표현 (0) | 2022.09.16 |
[HTML] HTML 스타일(Style) (0) | 2022.09.16 |