앞서 a태그의 href속성에 아이디 값을 붙여 문서 내에서 특정 장소로 이동하는 것을 만들어 보았다.
외부 문서의 특정 장소로 이동하는 방법은,
href 속성에 외부문서링크와 #아이디명을 붙여서 적는다.
1. 문서 내에서 이동하는 방법 : 링크태그에 아래와 같이 작성한다.
<a href="#aa">A로 가기</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>문서내의 ankor link</title>
<style>
ul{
list-style:none;
margin:10px auto;
width:450px;
}
ul::after{
clear:both;
content:'';
display:block;
}
li{float:left;}
a{
display:block;
width:150px;
padding:20px 0;
background:#cbc0d3;
color:#fff;
text-align:center;
text-decoration:none;
border-right: 1px solid #fff;
box-sizing:border-box;
}
a:hover{
background:#febbbb;
}
ul>li:last-child a{
border-right:none;
}
div{
height:1000px;
padding:50px;
font-size:3.0em;
color:#fff;
margin-bottom:50px;
font-weight: bold;
}
div#aa{background:#ece4db;}
div#bb{background:#fae1dd;}
div#cc{background:#fec89a;}
.goTop{
display:block;
width:50px;
height:50px;
background:#1d3557;
color:#fff;
line-height:50px;
border-radius:50%;
padding:0;
right:50px;
position:fixed;
bottom: 50px;
right:50px;
}
.goTop:hover{
background:#a8dadc;
}
</style>
</head>
<body>
<h1>문서 내에서의 이용</h1>
<ul>
<li><a href="#aa">A로 가기</a></li>
<li><a href="#bb">B로 가기</a></li>
<li><a href="#cc">C로 가기</a></li>
</ul>
<div id="aa">문서의 A</div>
<div id="bb">문서의 B</div>
<div id="cc">문서의 C</div>
<a href="#" class="goTop">Top</a>
</body>
</html>
2. 외부문서의 메뉴에서 다른 문서 내의 링크로 이동 : 외부문서의 메뉴에 링크는 아래와 같이 작성한다 .
<a href="main.html#aa">A로가기</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>외부문서로 앵커링크 이동</title>
<style>
li{list-style:none;}
a{
display:block;
width:200px;
padding:30px;
background:#e63946;
text-align:center;
text-decoration:none;
color:#fff;
font-weight: bold;
margin:20px;
}
a:hover{background:#efd3d7;}
</style>
</head>
<body>
<h1>외부문서의 앵커링크</h2>
<ul>
<li><a href="main.html#aa">메인문서의 A로가기</a></li>
<li><a href="main.html#bb">메인문서의 B로가기</a></li>
<li><a href="main.html#cc">메인문서의 C로가기</a></li>
</ul>
</body>
</html>
위와 같이 작성하면, 메뉴를 누르면 main문서의 해당 아이디로 이동하게 된다.
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| 가시속성 (0) | 2021.01.29 |
|---|---|
| transform, transition 속성 (0) | 2021.01.29 |
| anchor link 1 - 문서 내 이동 (0) | 2021.01.29 |
| html5를 활용한 기초 레이아웃 (0) | 2021.01.29 |
| position 속성 2 - 활용 (0) | 2021.01.27 |
