[HTML] img 태그
2024. 10. 4. 20:52ㆍHTML
웹 사이트를 제작할 때 이미지를 삽입해야 할 일이 꽤나 많을 것이다.
그래서 오늘은 이미지 태그에 대해서 한 번 알아보자.
<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>
사진을 굳이 저장해서 img삽입을 하지 않고,
웹 사이트에 있는 사진의 경로를 가져와 출력하는 것도 가능하다.
<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>
>> 결과
이미지의 경로에는 웹 경로도 지정가능함
이렇게 수지의 사진을 대문짝 만하게 띄울 수 있다.
<웹에서 이미지 경로 알아내기>
1. 해당 사진을 우클릭
2. 이미지 경로 클릭
3. img 태그의 src란에 경로 붙여넣기
html을 접한지 얼마 되지 않아서 아직 아리송한 부분이 많지만 재미는 있는 것 같다.
여러가지 태그들에 대한 공부가 필요해 보인다.
'HTML' 카테고리의 다른 글
| [HTML] 농협 사이트 만들어 보기 (0) | 2024.10.05 |
|---|---|
| [HTML] display (0) | 2024.10.05 |
| [HTML] a / input Tag (0) | 2024.10.04 |
| [HTML] table (0) | 2024.10.04 |