html 이미지, 가운데 정렬 링크 반응형 태그

by

웹사이트를 제작하기 위해서 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>
▤ 목차 목차 보이기

Leave a Comment