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

2024년 04월 14일

Song hyun
작성자
2024.04.14.: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

'HTML,CSS, JS > HTML' 카테고리의 다른 글

[HTML] 6. 폼 관련 태그 (0)	2024.04.22
[HTML] 5. 표(테이블) 만들기 (0)	2024.04.15
[HTML] 4. 링크 삽입하기 (0)	2024.04.15
[HTML] 2. HTML 기본 태그 (0)	2024.04.14
[HTML] 1. 기초 CS 지식 (0)	2024.04.14

다음 글이 없습니다.

이전 글이 없습니다.

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

'HTML,CSS, JS > HTML' 카테고리의 다른 글

티스토리툴바