본문 바로가기

develop/HTML&CSS

[HTML] 문서의 특정부분으로 이동 (a태그 이용)

반응형
.markdown h2 a[aria-hidden=true] {
    height: 1em;
    opacity: 0;
    visibility: hidden;
    margin-left: 8px;
    font-size: .8em;
    transition: all .25s;
}


.header-link {
    width: 22px;
    height: 22px;
    background-image: url(/link.7cd35d148e6e0bec.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}​
<h2>
	<span id="output"></span>
		Output
	<a href="#output" aria-hidden="true" tabindex="-1">
		<span class="header-link"></span>
	</a>
</h2>

 

href="#output" 는 id가 output 인 요소의 위치로 이동하게 해준다.

 

https://webpack.kr/concepts#output

문서 외부에서 링크 클릭시 페이지의 해당 위치로 이동한 상태로 브라우저 창이 열리게 된다.