[UX/UI] HTML - 링크와 이미지

링크

<!-- 1. 새 창에서 열기 -->
<a href="https://know-one-by-one.tistory.com/13">하나씩 알아가는 블로그</a>

<!-- 2. 새 탭에서 열기 -->
<a href="https://know-one-by-one.tistory.com/13" target="_blank">하나씩 알아가는 블로그(새탭)</a>

<!-- 3. 이미지 미리보기 -->
<a href="img/sample.jpg">이미지</a>

<!-- 4. 이미지 다운로드하기 -->
<a href="img/sample.jpg" download>이미지 다운로드(IE 제외)</a>

<!-- 5. mailto는 Outlook 과 같은 메일관련 툴로 연결되어 바로 메일을 보낼 수 있게됩니다. -->
<a href="mailto:webmaster@gmail.com">webmaster@gmail.com</a>

 

이미지

<!-- 1. 일반적인 그림 -->
<img src="img/sample.jpg" alt="샘플 이미지">

<!-- 2. 글이 많이 들어간 그림 -->
<style>
.desc{
    width : 이미지 너비;                         /* div의 너비를 이미지의 너비와 맞추기 */
    height : 이미지 높이;                        /* div의 높이를 이미지의 높이와 맞추기 */
    background: url(img/longTextSample.jpg);    /* 배경을 넣고싶은 이미지로 하기 */
    text-indent: -9999em;                       /* 글을 화면에서 밀어내기 */
}
</style>
<div class="desc">
    이미지에 대한 설명을 작성한다.
    작성된 설명은 css를 통해서 보이지 않지만
    style을 통해서 밀어내기만 했기 때문에 텍스트가 살아있어서 
    더 나은 웹 접근성을 확보할 수 있다.
</div>

 

이미지 맵

img의 usemap 값은 map의 id 속성을 참조하여 앞에 #을 붙여서 넣어줍니다.

area의 coords 옵션에서의 좌표를 알아내기 위해서는 다음 절차를 따라야 합니다.

1. 해당하는 이미지를 포토샵으로 불러옵니다.

2. Window > info 메뉴를 클릭한 후 각 좌표를 알아냅니다.

3. 해당 좌표를 적어둡니다.

4. area의 태그에 coords 속성에 입력 후 테스트를 해 봅니다.

 

아래의 예제는 링크를 분할하여 주는것을 목적으로 작성하였습니다.

하지만, 각각의 영역에 따라 이벤트를 다르게 부여할 수도 있고, 스타일을 다르게 부여할 수도 있습니다.

<!-- 이미지의 영역을 분할하여 각 영역마다 다른 링크를 주고싶은 경우 -->
<img src="img/map.png" usemap="#map" alt="">
<map name="map" id="map">
    <!-- coords : 포토샵 Window - info 에서 확인 -->
    <area shape="rect" coords="좌상X, 좌상Y, 우하X, 우하Y" href="http://naver.com" alt="네이버로 이동">
    <area shape="circle" coords="중심X, 중심Y, 반지름R" href="http://daum.net" alt="다음으로 이동">
    <area shape="poly" coords="X1, Y1, X2, Y2 ... Xn, Yn" href="http://nate.com" alt="네이트로 이동">
</map>

 

출처 : know-one-by-one.tistory.com/24