html image

김정훈·2024년 3월 21일

목록 보기

1/13

image

1) `src`속성

이미지 파일 경로
내 컴퓨터의 이미지 파일 경로 정하기
- 절대경로 : "/"시작하는 경로 (유연성이 떨어짐)
- 상대경로 : 현재디렉토리를 기준으로 설정해야한다.(../상위디렉토리 ./현재디렉토리)
- 웹 상의 링크 경로

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        상대경로1<img src="images/logo.png"> 
        <br>
        상대경로2<img src = "../02/logo.webp"> //상위디텍토리로 들어감
        <br>
        절대경로<img src="D:\김정훈\1. 웹표준 기술\03\images\logo.png">
        <br>
        링크경로<img src="https://www.imdak.com/web/upload/wp/167417/logo.toppc.png">

    </body>
</html>

2) `alt`속성

대체문구 (이미지가 보이지 않는 경우 대체하는 문구) - 웹접근성을 증가

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src = "images/logo.png"> //현재이미지 없는 상태
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src = "images/logo.png" alt="로고"> //대체 문구 설정
    </body>
</html>