링크
오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재한다.
이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 <a>태그로 표현!
문법
<a href="링크주소">HTML 링크</a>
<a>태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시한다.
<a>태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있다.
|
1
2
3
4
5
|
<a href="/html/intro">
<h2>이 링크를 클릭해 보세요!</h2>
</a>
|
cs |
line3 클릭하면 "/html/intro"로 이동
target 속성
예제)
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<h2><a href="/html/intro" target="_blank">blank</a></h2>
<h2><a href="/html/intro" target="_self">self</a></h2>
<h2><a href="/html/intro" target="_parent">parent</a></h2>
<h2><a href="/html/intro" target="_top">top</a></h2>
<h2><a href="/html/intro" target="myframe">myframe</a></h2>
<iframe name="myframe" style="width:50%; height: 330px"></iframe>
|
cs |
링크의 상태(state)
이런식으로 쓴다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<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>
|
cs |
이미지
HTML 문서에 이미지를 삽입할 때는 <img>태그를 사용한다.
<img>태그는 종료 태그가 없는, 빈 태그(empty tag)이다.
|
1
|
<img src="url">
|
cs |
src속성은 이미지의 URL(웹 주소)를 지정.
|
1
|
<img src="이미지주소" alt="대체문자열">
|
cs |
alt속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있다.
이미지의 크기(width , height) 설정
HTML에서는 style 속성을 사용하여 이미지의 크기를 설정할 수 있다.
또한 width 속성과 height 속성을 이용하여, 이미지의 너비와 높이를 각각 픽셀(pixel)단위로 설정 할 수도 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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>
<img src="/examples/images/img_flag.png" alt="html size" width="250" height="150">
<img src="/examples/images/img_flag.png" alt="style size" style="width:300px; height:214px">
</body>
</html>
|
cs |
이미지 테두리(border) 설정
border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정 할 수 있다.
|
1
2
3
|
<img src="/examples/images/img_flag.png" alt="이미지 테두리"
style="width:320px; height:214px; border: 3px solid black">
|
cs |
이미지에 링크(link)설정
이미지에 <a>태그를 이용하여 링크를 설정할 수 있다.
|
1
2
3
4
5
|
<a href="/html/intro" target="_blank">
<img src="/examples/images/img_flag.png" alt="flag" style="width:320px; height:214px">
</a>
|
cs |
이미지를 클릭하면 <a>태그에 있는 사이트로 이동
'HTML' 카테고리의 다른 글
| HTML 블록과 인라인 (0) | 2020.04.05 |
|---|---|
| HTML 리스트,테이블 (0) | 2020.04.05 |
| HTML 스타일(색,글꼴,배경) (0) | 2020.04.03 |
| HTML텍스트 요소 (0) | 2020.04.03 |
| HTML기초,요소 (0) | 2020.04.03 |
