표준 준수 방식으로 헤더를 연결하는 방법은 무엇입니까?

Question

다음과 같은 것처럼 보이는 HTML 블록이 있습니다.

<div id="header">
    <h1>title</h1>
    <h2>subtitle</h2>
</div>

CSS 기술을 사용하여 모든 텍스트를 숨기고 이미지로 바꾸고 있습니다. 그러나 전체 블록을 홈페이지에 연결하고 싶습니다. 나는 그것을 포장 할 수 없다 <a> 표준을 준수하지 않기 때문입니다. 그래서 어떻게해야합니까?

---

내 해결책; 에서 영감을 받다 새로운 마을

<div id="header">   
    <h1>title</h1>
    <h2>subtitle</h2>
    <a href="index.html">Home</a>
</div>

#header {
    text-indent: -9999px;
    width: 384px;
    height: 76px;
    background: transparent url(../images/header.png) no-repeat;
    margin: 10px;
    position: relative;
}

#header a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Answer 1

링크 요소를 헤더 DIV 외부에 넣고 절대 포지셔닝을 사용하여 커버하십시오. 또한 링크가 사용자 입력을 수신하는지 확인하기 위해 z-index를 추가하십시오.

<style>
    a.header
    {
        position: absolute;
        display: block;
        width: 100%;
        height: 100px;
        z-index: 1;
    }
</style>

<div id="header">
        <h1>title</h1>
        <h2>subtitle</h2>
</div>

<a href="homepage" class="header"></a>

Answer 2

홈페이지에 연결된 모든 것 위에 완전히 투명한 이미지를 오버레이합니까?