Style Css의 하이퍼 링크 활용하기
최근에 많은 사이트들이 페이지롤링을 통하여 화면의 첫페이지에서 모든것을 설명하는 이벤트페이지 형태가 많이 보인다. 하이퍼 링크를 이용해 간단하게 설명해 보겠습니다.
|
1
2
3
|
<a href="#div01">링크01</a>
----------------------------------------
<div class="table01" id="div01">#1</div>
|
cs |
간단한 하이퍼 링크를 활용하여 페이지에서 지정된 ID로 #네이밍을 이용하여 링크로 이동할수 있습니다. 이름 속성은 HTML5에서 지원되지 않는 점을 참고하시기 바랍니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
</head>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<style>
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
div {
position: relative;
}
.table01 {
background-color: #0CF;
width: 100%;
height: 400px;
}
.table02 {
background-color: #099;
width: 100%;
height: 400px;
}
.table03 {
background-color: #0C3;
width: 100%;
height: 400px;
}
.table04 {
background-color: #063;
width: 100%;
height: 400px;
}
.table05 {
background-color: #9C0;
width: 100%;
height: 400px;
}
.table06 {
background-color: #CC0;
width: 100%;
height: 400px;
}
</style>
|
cs |
<body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<h3>
<a href="#div01">링크01</a>
<a href="#div02">링크02</a>
<a href="#div03">링크03</a>
<a href="#div04">링크04</a>
<a href="#div05">링크05</a>
<a href="#div06">링크06</a>
</h3>
<div class="table01" id="div01">#1</div>
<div class="table02" id="div02">#2</div>
<div class="table03" id="div03">#3</div>
<div class="table04" id="div04">#4</div>
<div class="table05" id="div05">#5</div>
<div class="table06" id="div06">#6</div>
|
cs |
</body>
</html>
-------------------------- 참 고 -------------------------
지정된 제목의 이메일 주소로 링크하십시오 (메일이 설치되어있는 경우에만 작동합니다.)
<a href="mailto:cssstyle@naver.com">email link!</a>
자바 스크립트에 연결 : 알러창
<a href="javascript:alert('안녕하세요! 홈페이지를 찾아주셔서 감사합니다.');">링크클릭</a>
[홈페이지만들기/Html_css&css3] - CSS 링크의 color와 background-color
[홈페이지만들기/Html_css&css3] - CSS style 컬러 기본설정
[홈페이지만들기/Html_css&css3] - vertical-align와 text-align CSS 활용하여 정렬하기
[홈페이지만들기/Html_css&css3] - html 순서 및 목록 만들기
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| css 그라데이션 표현과 응용 css background (2) | 2017.11.23 |
|---|---|
| CSS 배경(컬러) color 및 image(이미지) 기울이기 (0) | 2017.11.03 |
| html icon 아이콘 적용하기 (0) | 2017.11.01 |
| html 주석(comment) (0) | 2017.10.11 |
| CSS 글꼴 Font 속성 (0) | 2017.09.27 |
