안녕하세요 르쉐입니다. 요즘 원래의 카테고리에는 글을 못올리고 뜬금없이 IT로 돌아와서 참 기분이 묘합니다. 요즘은 IT를 배우는 분들이 많으셔서 블로그에서도 참 인기가 높은 분야중에 하나인듯 합니다.
저도 미비하지만, 과정을 공부하고 있기에 이 카테고리는 제가 공부하는 html을 복습하고 글을 올릴겸 공부,정보 카테고리로 사용을 하려고 합니다.
이번에는 html에서 이미지 태그 <img />에 관해서 주의하면 좋은점과, 어떻게 사용하는지 간단하게 짚어보려고 합니다.
참고로, 앞으로도 계속 쓸 예정이지만, 되도록이면 웹표준에 맞는것을 쓰려고 합니다.
html 이미지 태그
기본 이해
넹 보도록 하겠습니다.
기본적으로 <img /> 즉 이미지 태그는 '홀'태그 입니다.
<p></p> p태그나 <div></div> div태그 처럼 닫는 태그가 따로 없습니다.
참고로 저 꺽쇠 <> 안에 / 슬래시를 꼭 넣어야 하냐...
아닙니다. /슬래시를 꼭 넣지 않아도 태그는 제 기능을 합니다.
하지만 html에서 / 슬래시를 넣지 않으면 잘못된 문법 입니다.
그리고 당연하지만, 잘못된 문법은 좋지않습니다. 어찌되었건 문법상의 오류 이니까요.
그러니 이미지 태그를 넣을때는 꼭 / 를 넣어주는것을 습관화 하는게 좋습니다.
사용방법
사용 방법은 이렇습니다.
<img src="파일명.jpg(png등)" alt="부연설명" title="사진제목" />
기본 틀 입니다. 당연히 src는 꼭 붙여 주어야 합니다.
이미지를 어디서 가져오는지 경로등을 지정해 주기위해서 src라는 속성이 붙습니다.
파일명.jpg는 말그대로 파일명 입니다.
자신이 사용하는 편집기와 같은 폴더에 이미지 파일이 들어있다면, 그 파일의 이름만
붙여넣어도 이미지가 바로 송출이 됩니다. 만약 한폴더 위에있다면 파일명 앞에 ../를 붙여주면 됩니다.
참고로 사진은 파일로 된것 말고도 다른 홈페이지 에서도 가져 올수 있습니다.
<img="www,아무대나,com.jpg" /> 등으로도 입력이 가능 합니다.
alt
그러면 이제 파일명 하는것은 알겠고, alt가 있습니다.
alt는 부연설명을 해주는 속성입니다.
alt또한 /처럼 없어도 상관은 없습니다.
태그의 작동에 영향을 미치지는 않습니다.
하지만, 웹에서는 alt 속성이 있는 것을 선호 합니다.
검색기라던지 등등에서! 웹표준을 좋아하기 때문에 alt를 꼭 붙이는것을
권장 합니다.
그리고 alt는 웹 접근성을 높여줍니다.
그리고 만약에라도 개발자가 html을 볼때
한눈에 판단하기도 쉽고, 제대로 사진이 나오지 않더라고 부연설명을 보고 알 수 있기에
접근성,표준성을 높이기 위해서 사용하는것이 좋습니다.
title
타이틀은 말 그대로 파일의 제목입니다.
이미지에 마우스 커서를 갖다가 대면, title에 입력한 글자대로 보여지게 됩니다. (위의 당근에 보시면 마우스 커서가 위치한곳에 '당근'이라고 쓰여 있습니다.
title도 이미지에 맞게 잘 써주는것이 좋습니다.
엉뚱한걸 써서 좋을점은 없으니까요.
추가로, 이미지 태그또한 속성값으로 height="600px" 이런식으로 크기를 조절할 수 있지만,
태그의 외형, 스타일 변화는 css로 하는게 표준이고, 표준법에 더 좋기에, 굳이 여기서
쓰지는 않았습니다.
댓글