today_is
[ html 기초 ] img 태그 본문
오늘의 목표
이미지 태그에 대해서 알아보자 !
vscode 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex04.html</title>
<style>
fieldset {
background-color: #555;
font-family: 'Consolas';
font-size: 17px;
color: rgb(0,255,0);
}
</style>
</head>
<body>
<h1>img 태그</h1>
<hr>
<fieldset>
<img src="그림파일경로" alt="대체텍스트" width="너비" height="높이">
</fieldset>
<p> <!--paragraph, 문단을 구분하기 위하여 사용-->
<img src="짱구/짱구.png" alt="짱구">
<br><!--breakline, 문단 구분없이 혹은 문단 내부에서 줄을 바꿀 때 사용(\n)-->
대체텍스트는 그림이 출력되지 않을때, 어떤 요소인지 글자로 알려주기 위해 사용
</p>
<p>
<img src="짱구/코난.png" alt="명탐정코난">
</p>
<h3>img 태그는 글자와 동일하게 취급한다. 그림옆에 그림을 둘 수 있음</h3>
<p>
<img src="짱구/철수.png" width="100px">
<img src="짱구/맹구.png" width="145px">
</p>
<h3>이미지의 너비나 높이를 하나만 지정하면, 비율에 따라 나머지 크기가 설정됨</h3>
<h3>이미지의 너비와 높이를 모두 지정하면, 비율이 무너질 수 있다</h3>
<p>
<img src="짱구/맹구.png" width="145px">
</p>
<h3>이미지도 글자 취급하기 때문에 링크의 대상이 될 수 있다 </h3>
<p>
<a href="https://search.naver.com/search.naver?query=수지&where=image">
<img src="짱구/수지.png" height="150px"></a>
</p>
<h3>img태그의 title속성으로 마우스 올렸을 때 툴팁을 설정할 수 있다</h3>
<p>
<img src="짱구/흰둥이.png" title="귀여운">
</p>
결과
사진을 굳이 저장해서 vscode 에 넣지 않아도
웹사이트에 있는 사진을 출력할 수 있다
<h3>이미지의 경로에는 웹 경로도 지정가능함</h3>
<p>
<img src="https://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2023/07/27/1bf74bcd-c5fa-4e80-8281-0198bc7cf7ba.jpg">
</p>
</body>
</html>
결과 >>
이미지의 경로에는 웹 경로도 지정가능함
