자신의 일은 스스로하자

[HTML] #6 HTML 이미지 태그 [광주인공지능학원] 본문

HTML, CSS

[HTML] #6 HTML 이미지 태그 [광주인공지능학원]

힐파르 사막 삼계탕 2021. 7. 12. 03:49
728x90

 

이미지 태그

HTML은 img태그를 사용해 이미지를 넣습니다. img태그에서 가장 중요한 것은 속성입니다.

 

 

img 태그 속성

 

<src>

-> 이미지의 경로 지정

<alt>

->이미지가 없을 때 나오는 글자 지정

<width>

-> 이미지의 너비 지정

<height>

-> 이미지의 높이 지정

<body> 
    <img src="/test/img/cat.jpg">
</body>

위 코드를 실행시키면 아래 사진처럼 고양이 그림이 출력된 것을 볼 수 있습니다.

 

 

 

하지만 출력된 이미지가 원하는 크기가 아닐 수 있습니다. 

<body> 
    <img src="/test/img/cat.jpg" width="150" height="150">
</body>

width, height 속성을 사용해 원하는 크기로 변경할 수 있습니다.

 

img 태그사용 시 src경로와 이미지 이름을 확인 후 출력해주세요. 사진을 찾기 쉽게 아래 사진처럼 실행파일 안에 img파일을 만들었습니다. 

 

 

 

<body> 
    <img src="" alt="고양이가 없다..." width="200">
</body>

위 코드처럼 src경로가 없는 상태로 출력하게 되면 아래처럼 이미지가 없을 떄 실행되는 alt속성의 글이 출력됩니다.

 

 

스마트인재개발원에서 진행된 수업입니다.

http://www.smhrd.or.kr

 

스마트인재개발원

4차산업혁명시대를 선도하는 빅데이터, 인공지능, 사물인터넷 전문 '0원' 취업연계교육기관

www.smhrd.or.kr

 

728x90
저작자표시 비영리 변경금지

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

[HTML] #8_1 입력 양식 태그 / form태그 속성 [광주인공지능학원]  (0) 2021.07.26
[HTML] #7 오디오 태그 [광주인공지능학원]  (0) 2021.07.26
[HTML] #5 HTML 테이블 태그 [광주인공지능학원]  (0) 2021.07.12
[HTML] #4 HTML 목록 태그 [스마트인재개발원]  (0) 2021.07.05
[HTML] #3_2 HTML 글자 태그 [스마트인재개발원]  (0) 2021.07.05
'HTML, CSS' Related Articles more