HTML,CSS, JS/HTML

[HTML] 3. 이미지 출력하기

Song hyun 2024. 4. 14. 15:11
728x90
반응형

 

[HTML] 3. 이미지 출력하기

 

​

(1)<img>태그: 이미지를 출력할 때 필요한 태그. (<img src=”” alt=””>)

(2) src 속성: “어떤 이미지를 출력할 것인가”를 정하는 속성. 이미지의 위치(폴더), 제목을 입력한다.

(3) alt 속성: 이미지가 지정된 위치에 존재하지 않거나 출력할 수 없을 때, 이미지 대신 출력될 글을 입력하는 속성. (alt=”~”)

​

​

 
 

(좌) 아래의 코드로 출력된 이미지. (우) 이미지 파일이 출력되지 않은 화면.

이 때 이미지 대신 alt로 설정해둔 문구가 표시된다.

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--img 태그와 src, alt 속성을 사용해 이미지를 출력한다.-->
    <!--src 속성으로는 "어떤 이미지를 출력할 것인가"-->
    <!--alt 속성으로는 웹 브라우저에서 제대로 된 이미지를 출력하지 못했을 때,
    대신 출력될 문장을 지정한다.-->
    <h2>맛있는 청송 사과가 한 알에 천 원!</h2>
    <img src="ck-cm270027748-l-700x467.jpg" alt="맛있는 청송 사과">
</body>
</html>
728x90
반응형