반응형
.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
문서 외부에서 링크 클릭시 페이지의 해당 위치로 이동한 상태로 브라우저 창이 열리게 된다.
'develop > HTML&CSS' 카테고리의 다른 글
[HTML] 웹 접근성 지침 (0) | 2024.04.11 |
---|---|
[HTML] 검색 엔진 최적화(SEO) (0) | 2024.04.11 |
[HTML] 시맨틱 요소 (section,article,nav,aside) (0) | 2024.04.11 |
[CSS] BEM(Block Element Modifier)구조 (0) | 2024.04.11 |
[HTML] 클래스명, id 네이밍 컨벤션 (0) | 2024.04.11 |