티스토리 뷰

HTML

Anchor (링크) & Image

baegofda_ 2021. 8. 16. 18:37

* Anchor (링크)

  • Attribute
    1. href : #, #none, URL, 파일명, ID 값(페이지내 이동), mailto:molly.daleo3o@gmail.com (메일주소), tel:전화번호 
    2. target : _blank (새탭으로 열기)
  • href의 경우엔 무조건 써줘야한다.

 


* Image

  • Attribute
    1. src : 이미지 소스의 주소
    2. alt : 이미지에 대한 text
  • alt의 경우엔 이미지를 로드 못할 경우 대신 보여주기도 하지만 시각적으로 불편하신 분들을 위함이기도 하다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>이미지</h1>
        <img
            src="data:image/jpeg;base64,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"
            alt="크림히어로즈 루루"
        />
    </body>
</html>

이미지 경로가 유효할 경우


이미지를 로드하지 못할경우 alt 텍스트가 표시된다.

 시각적으로 불편하신 분들은 스크린 리더라는것을 통해 웹페이지를 이용하게 되는데 alt에 기재되어있는 텍스트가 음성으로 들리게 된다.

웹의 핵심철학인 접근성을 잊지 말고 꼭 알맞은 텍스트를 기재한다.

 

'HTML' 카테고리의 다른 글

Form - input & label  (0) 2021.08.16
Form 태그란?  (0) 2021.08.16
blockquote & q (인용)  (0) 2021.07.05
div & span (부제: 박스안에 컨텐츠를 담아보자)  (0) 2021.07.05
Description List (정의 리스트) & dfn  (0) 2021.07.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/06   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
글 보관함