[HTML] 이미지를 나타내는 태그(img)

[HTML] 이미지를 나타내는 태그(img)Web_Frontend/HTML & CSS2021. 11. 4. 14:08@Yanako

Table of Contents

1. 이미지를 나타내는 태그

웹사이트에서 이미지를 출력해주는 태그

1) img(image) 태그 : 이미지 출력을 위한 태그

- 별도의 종료 태그 없음

2) src(source) : 이미지 파일의 경로 표시 / img 태그 필수속성

- 사이트 파일 내에 위치한 이미지 파일의 경로

- 원격지에 위치한 파일

<body>
    <p><img src="/htmlcss_lecture_03/03강/테스트 사진.jpg"></p>
    <p><img src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png"></p>
</body>

3) img 태그 기타 속성

(1) alt(alternate) 속성 : 이미지 파일이 없을 시 교체(대신)하여 출력할 문구

(2) width 속성 : 너비(가로 길이)

    <p><img src="http://www.sba.seoul.kr/kr/images/header/Navi_dr.png"></p>
    <p><img src="http://www.sba.seoul.kr/kr/images/header/Navi_dr1.png" alt="꿈 Story"></p>
    <p><img src="테스트 사진.jpg" alt="꿈 Story" width="500"></p>

(3) highth 속성 : 높이(세로 길이)

(4) border 속성 : 경계선 설정(사각형 모양) 및 굵기

(5) alt 속성 : 그림 설명(그림 위에 포인터 위치시 풍선 도움말)

(6) (2)~(5) + align, hspace, vspace : 요새는 사용하지 않음. 디자인적 부분은 CSS에서 설정.

저작자표시

'Web_Frontend > HTML & CSS' 카테고리의 다른 글

[HTML] 폼 태그(form) (0)	2021.11.18
[HTML] 동영상을 출력하는 태그(video) (0)	2021.11.18
[HTML] 소리를 출력하는 태그(audio) (0)	2021.11.04
[HTML] 표를 나타내는 태그(table) (0)	2021.11.03
[HTML] 리스트(ul,ol,li, dl,dt,dd) 태그 (0)	2021.10.29

@Yanako :: Yana's coding story였는데요, 우당탕탕 개발일지가 맞는것같

야나의 코딩 일기장 :) #코딩블로그 #기술블로그 #코딩 #조금씩,꾸준히

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!