HTML <picture>는 링크를 만들 수 없나요?
본문
안녕하세요.
이미지에 링크 걸기에서 이틀째 막혀서 지쳐가고 있습니다 ㅜㅠ
MDN WEB DOCS에서 HTML과 CSS부분을 정독했는데도 알 수가 없네요.
구글링을 해도 내용도 나오지 않고...ㅜㅠ
<img src>를 사용할 때는 <a href>를 이용해서 묶어주면 간단하게 작동했는데,
<picture>
<source srcset="images/logo.png" width="126px" media="(min-width: 640px)">
<img src="images/logo.png" width="70px">
</picture>
이런 형태에 링크를 적용하려고 하니까
어떻게 해도 링크가 작동을 안 하네요...
main.html 링크를 걸어서 target="main"으로 설정하고 싶은데,
조언 부탁드립니다.
답변 2
onclick이나 a:before를 써보세요.
<picture onclick="window.open('main.html','main')">
<source srcset="images/logo.png" width="126px" media="(min-width: 640px)">
<img src="images/logo.png" width="70px">
</picture>
<style>
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
</style>
<picture>
<source srcset="images/logo.png" width="126px" media="(min-width: 640px)">
<img src="images/logo.png" width="70px">
<a href="main.html" target="main" class=" stretched-link"></a>
</picture>
알려주신 두 번째 방법으로 해결되었습니다!
간단한게 아니었네요;;
체계적으로 공부도 할 겸 MDN WEB DOCS의 HTML과 CSS 부분을 며칠을 정독했는데...
이정도로는 해결될 게 아니었네요...
::after 분명히 보기는 봤는데... 기억이... 가물가물...
뭐 기억나봤자... 어차피 쉬운 부분만 이해되고,
어려운 부분은 이해하지 못하고 읽기만 했기 때문에 해결하지 못했을 겁니다.
세크티님 덕분에 며칠간 꽉 막혔던 가슴이 뻥 뚫렸네요. 감사합니다.
알려주신 코드로 공부해 보겠습니다^^
다시 작동 확인해 보니까,
링크 이미지에서만 작동하는 게 아니라
화면 어디를 눌러도 해당 링크로 넘어가네요.
죄송하지만
어떤 부분에서 문제가 되는 것일지
다시 한번 더 여쭈어 봅니다^^;;
참고로
<head>에 style 내용 추가하고,
<body>의 <picture>~</picture> 부분에서 알려주신 대로 수정했습니다.
다른 이미지들도 같은 방식으로 링크를 연결하면 될 것 같아서
알려주신 내용을 다른 부분들에도 class 값을 넣어 주고 적용했었는데,
혹시 이 부분 때문에 이런 현상이 발생하는가 싶어서
class 이름을 조금 다르게 수정해서 style도 새로 추가해 보기도 했었습니다.
그래도 동일한 증상이 있어서
다른 이미지들에 적용한 것들은 모두 지우고 다시 확인해 보았습니다.
그래도 동일한 증상(화면 어디를 눌러도 링크 연결됨)이 나타납니다.
<picture style="position:relative">
링크로 잡힐 영역의 부모의 position이 static이 아니어야 합니다.
부모에 position: relative;를 추가하니까,
이미지의 하단 5분의 1 부분만 링크가 됩니다.
테이블 안에 있어서 문제일까요?
아래에 있는 3개의 링크가 모두 같은 증상입니다.
이미지의 하단 5분의 1부분만 링크가 연결되어 있습니다.
<body>
<table>
<thead>
<tr>
<th colspan=2 style="padding: 15px 0px;">
<picture style="position: relative;">
<source srcset="images/logo.png" width="96px" media="(min-width: 640px)">
<img src="images/logo.png" width="70px">
<a href="main1.html" target="main" class="stretched-link"></a>
</picture>
<p>수정중</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px 10px;">
<picture style="position: relative;">
<source srcset="images/logo.png" width="96px" media="(min-width: 640px)">
<img src="images/logo.png" width="50">
<a href="main2.html" target="main" class="stretched-link"></a>
</picture>
<br/>수정중
</td>
<td style="padding: 10px 10px;">
<picture style="position: relative;">
<source srcset="images/logo.png" width="96px" media="(min-width: 640px)">
<img src="images/logo.png" width="50">
<a href="main3.html" target="main" class="stretched-link"></a>
</picture>
<br/>수정중
</td>
</tr>
...창피하네요...;; 이게 이렇게 되는 것이었나요;;
<picture>...</picture> 안에서 <a href>를 사용하려니까 안 되었나 봅니다... 전체를 감싸면 될 것을, 이걸로 며칠을 낑낑대다니... ㅎㅎ 헛웃음만 나오네요^^;
덕분에 잘 해결했습니다.
예전에도 신비님께 도움 받았었는데, 오랫만에 봬서 반갑습니다^^ 힘찬 하루 보내세요~
곤주 님드 좋은 하루 되시길 바랍니다.
