-
안녕하세요! 시간별로 블로그를 올릴라니 생각보다 시간이 많이 걸리네용 ㅎㅎㅎㅎㅎ
지금 시간에는 이미지 태그에 대해서 배워보겠습니당
1. 이미지 태그란?
1) 이미지를 불러오는 태그. inline-block속성의 대표 태그로 여러 개를 출력하면 이미지가
가로로 출력되고, 이미지 사이에 공백 1칸이 생깁니다.
2) 이미지는 이미 사각형의 형태를 가지고 있기 때문에 너비 높이를 조절할 수 있습니다.
이미지를 불러올때에는 src속성에 이미지 경로를 절대경로나 상대경로로 불러올 수 있습니다.그리고 alt속성을 이용하여 간단한 이미지 설명을 넣어주어야 합니다.(=웹표준 문법)
alt에 쓰여진 값은 화면 낭독기를 통해 시각장애인들에게 해당 이미지를 설명하기도 하고,
이미지 경로가 틀렸을 경우 해당 이미지가 어떤 이미지인지 파악하는 용도로 사용됩니다.
3) width와 height속성을 이용해 이미지의 사이즈를 조절할 수 있는데, 이때 이미지
width와 height의 값은 숫자를 입력하면 되고, px단위일 경우 단위는 생략하고 숫자만 입력할 수 있습니다.
4) px이외의 단위를 입력하고자 하는 경우에는 단위까지 함께 작성해주어야 합니다.
(기본형 예시)
<img src="이미지 경로" alt="이미지 설명"width(가로)="숫자" "height(높이)="숫자"/>
이미지 경로를 태그하는데에는 그래도 어려움은 많이 없는데 주의 사항있습니다!
혹시나 영상에서 보시는거와 같이 경로를 잘못 입력한다면 사진 옆에 위 사진처럼
약간 파일이 찢어진 것 같은 효과로 나타납니다!
*주의사항*
<올바른 이미지 경로>
<img src="./cat.jpg" art="고양이" width="300" height="200"/>
<img src="./cat.jpg" art="고양이"/>
<잘못 된 이미지 경로>
<img src="cat.jpg" art="고양이"/>이 부분들만 잘 지켜주신다면 무리없이 깔끔하게 이미지 경로를 걸어둘 수 있습니다!
어때요?! 저번 블로그보단 그래도 간단하죵! 저는 그나마 이거랑 a태그가 좀 재미있었던 것 같습니당
여러분들 모두 화이팅 하시고 좋은밤 보내시길 바랄게요:)
