웹사이트를 제작하기 위해서 html 이미지 크기, 가운데 정렬, 링크 태그는 중요한 역할을 하게되면 레이아웃 반응형 디자인을 할때에 이미지가 웹브라우저로 폭이 자동 변합니다.
이미지 링크 크기조절
img src=”이미지 경로” : 이미지 경로, height=”높이” : 이미지 크기, alt=”이미지 설명” : 어떤 이미지인지를 설명, title=”이미지 이름” : 마우스를 이미지로 올려놓았을때에 이미지 이름을 나타냅니다.
<body>
<img src="img.jpg" height="500" alt="캠핑 이미지" title="캠핑 이미지">
</body>이미지 가운데정렬
div 태그와 css text를 속성을 사용하여 이미지 가운데 정렬이 가능하며, CSS 속성에 body 안에 있으면 우선순위가 적용이 되어 style 태그 안에 img{} 속성이 있어도 우선적용이 됩니다.
<body>
<div style="text-align: center;">
<img src="img.jpg" height="500" alt="캠핑 이미지" title="캠핑 이미지">
</div>
</body>
style 이미지 중앙정렬
스타일시트(style)를 적용하여 margin 속성에 auto를 주면 자동으로 이미지가 가운데로 정렬이 되며, auto 값으로 좌우 여백을 똑같이 주는것과 같은 원리 입니다.
<html>
<head>
<style>
img{ display: block;
height: auto; }
</style>
</head>
<body>
<img src="img.jpg" height="500" alt="캠핑 이미지" title="캠핑 이미지">
</body>
</html>이미지 반응형 적용
CSS로 max-width 속성을 100% 적용하면 가로폭을 웹브라우저 크기로 조절이 되며, height 속성값을 auto로 지정을 해주게 되면 원본 비율에 맞게 높이가 반응형으로 자동 조절이 됩니다.
<html>
<head>
<style>
img{ max-width: 100%
height: auto: }
</style>
</head>
<body>
<img src="img.jpg" height="500" alt="캠핑 이미지" title="캠핑 이미지">
</body>
</html>이미지 링크걸기
a href=”이미지 주소” : a태그로 이미지를 클릭하였을때 링크로 넘어가게 되며 img src=”이미지 경로” : 이미지를 불러오는 태그입니다.
<BODY>
<a href="이미지주소"><img src="img.jpg" height="500"> </a>
</BODY>
▤ 목차
목차 보이기
