공부함/FE
[html] img 태그
솔헬레나
2023. 9. 25. 10:57
[ img 태그 ]
- 이미지 추가
<img src="이미지URL">
- 이미지 크기 조절
너비/높이 단위 : px, pt, em, %
<img
src="이미지URL"
style="width:가로길이px; height:세로길이px;"
/ >
- 이미지 정렬 ( 위치 )
위치 : left / right / display: block; margin: 0 auto;
<img
src="이미지URL"
style="float: 위치; width:100px; height:100px;"
/ >
- 이미지 여백추가
<img
src="이미지URL"
style="float: left; margin-right: 오른쪽여백크기; margin-bottom: 왼쪽여백크기; width:100px; height:100px;"
/ >
- 이미지 아래에 글자가 나오게 하기
<img src="이미지URL"/ >
<div style="clear: both;"></div>
- css로 지정하여 공통적용
<style type="text/css">.
imgView {
float: left;
width: 70%;
height: auto;
margin-left: 10px; margin-right: 10px; margin-bottom: 10px;
border: 5px double #35353555;
}
</style>
<html>
<img class="imgView" src="이미지 URL" />
</html>
보고배움
https://ojji.wayful.com/2019/07/HTML-tag-how-to-align-and-float-image.html