HTML 이미지
-이미지는 <img>태그로 삽입된다.
-<img>태그는 끝태그가 없고 속성만 가질 수 있다.
1 | <img src="URL"> | cs |
- src속성은 이미지의 URL을 지정한다.
- URL에 파일의 주소를 입력해줘야한다.
alt Attribute
-이미지가 어떠한 오류로 인해 볼 수 없을때 대신 보여지는 텍스트를 삽입한다.
1 | <img src="examples/Mypiceture.jpg" alt="NOPE"> | cs |
참고
alt속성이 없으면 웹페이지가 제대로 검증할 수 없다.
Image Size
-style 속성을 사용하여 폭과 높이를 설정할 수 있다.
1 | <img src="examples/SW.jpg" alt="SW logo" style="width:300px; height:300px;"> | cs |
-style 속성대신 width와 height 속성으로 지정할 수 있다.
-width와 height 속성은 픽셀로 정의된다.
1 | <img src="examples/SW.jpg" alt="SW logo" width="300" height="300px"> | cs |
참고
이미지의 width와 height를 지정하지 않으면 이미지가 로드되는 동안 페이지가 깜빡일 수 있다.
Image <style> or <width&height>
-style 속성을 사용하여 폭과 높이를 설정할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <body> <style> /* 페이지(sheet)의 모든 이미지의 폭을 30%로 설정한다.*/ img{ width : 30%; } </style> <p> <h3>Size with width and height</h3><br> <img src="examples/SW.jpg" alt="SW logo" width="200" height="200px"> </p> <br> <p> <h3>Size with style</h3><br> <img src="examples/SW.jpg" alt="SW logo" style="width:200px; height:200px;"> </p> </body> </html> | cs |
- style을 사용하면 페이지(sheet)의 이미지 사이즈를 무시하고 삽입할 수 있다.
Image border
-border 속성을 이용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있다.
1 2 | <img src="examples/SW.jpg" alt="SW logo" style="width:200px; height:200px; border:3px solid black"> | cs |
Image Link
-이미지에 링크를 넣을 수 있다.
-<img>태그를 <a>태그 안에 넣으면 된다.
1 2 3 | <a href="https://beinmy.tistory.com/" title="Go to my blog"> <img src="examples/SW.jpg" alt="SW logo" style="width:200px; height:200px;border:0;"> </a> | cs |
- border:0 은 Internet Explorer 9 이전의 브라우저가 링크걸린 이미지의 테두리를 표시하는 것을 방지한다.
- 이미지를 누르게 되면 설정된 URL로 접속된다.
Image Map
-<map>태그를 이용한다.
-이미지의 일부만 지정하여 클릭할 수 있게 한다.
-shape엔 default, rect, circle, poly의 value값을 설정할 수 있다.
1 2 3 4 5 6 | <img src="examples/SW.jpg" alt="SW logo" usemap="#SW" style="width:200px; height:200px;"> <map name="SW"> <area shape="rect" coords="20,50,180,180" alt="Chung-Ang University" href="https://www.cau.ac.kr/index.do"> </map> </p> | cs |
- <map name>은 <img>의 usemap속성과 관계되며, 같은 name으로 연결하면 이미지와 맵사이의 관계가 설정된다.
- <map>은 이미지의 클릭 가능한 영역을 지정하는 <area>태그를 포함한다.
- 이미지를 꾹 누르면 coords에 입력한 정사각형 모양의 범위가 뜬다.
- 이미지를 누르게 되면 설정된 URL로 접속된다.
Picture
-<picture>요소는 브라우저의 크기에 따라 가장 적합한 이미지를 선택하여 내보낸다.
-따라서 각각 다른 이미지 소스를 가리키는 다수의 <source>요소를 포함하고 있다.
1 2 3 4 5 | <picture> <source media="(min-width: 1300px)" srcset="공학도.jpg"> <source media="(min-width: 800px)" srcset="cau100th.png"> <img src="examples/SW.jpg" alt="SW logo" usemap="#SW" style="width:auto;"> </picture> | cs |
- 폭이 1300px 이상이면 공학도.jpg를 내보낸다.
- 폭이 800px 이상이면 cau100th.png를 내보낸다.
- 아무것도 해당하지 않을때, img태그안에 있는 SW.jpg를 내보낸다.
움직이는 애니메이션
.gif 확장자의 애니메이션 그림도 넣을 수 있다.