HTML5 img 엘리먼트(eleement)

HTML5 img 엘리먼트(eleement)

html5에서 변경된 속성이 있다. 이전에서 사용하던 모든속석은 아래에와 같다.

<img src="" title="" alt="" width="" height="" usemap="" 
ismap="" hspace="" longdesc="" name="" vspace="" />

폐지 ,대체, css로 하도록 권유되는 것들을 제외하면 아래와같다.

<img src="" title="" alt="" width="" height="" 
usemap="" ismap=""  />

속성 엘리먼트

alt엘리먼트는 이미지가보이지않을때 대신 대체 해서 보여줄 엘리먼트이다.

<img src="game.jpg" alt="게임" />

굳이 alt 속성에 일일이 다할필요는없다 다음예제를 보자

<div>
<img src="game_01" alt="게임" />
<img src="game_02" alt="" />
<img src="game_03" alt="" />
</div>

div엘리먼트 안에 하나의 의미의 그림이 있다. 이런경우는 첫번째 img엘리먼트에만 입력해주면된다.

alt에 하이퍼링크의 유무에따른 코딩

<ul>
<li><a href="#"><img src="menu.jpg" alt="" />메뉴</a></li>
<li><a href="#"><img src="board.jpg" alt="" />게시판</a></li>
<li><a href="#"><img src="visit.jpg" alt="" />방명록</a></li>
</ul>

<ul>
<li><a href="#"><img src="menu.jpg" alt="메뉴" /></a></li>
<li><a href="#"><img src="board.jpg" alt="게시판" /></a></li>
<li><a href="#"><img src="visit.jpg" alt="방명록" /></a></li>
</ul>

첫번쩨는 링크에 별도텍스트를 작성한 경우이다. 두번째는 텍스트에링크가걸린경우이다 이런경우는 이미지가 보이지않을때를 생각해서 alt속성을 작성해야한다.

서술형

아주큰 이미지를 사용하고 중심으로 설명할때 있다 이럴때는
이어지는 문장으로 설명하는 것을 alt에 입력한다

<p><img src="worldcup.jpg" alt="국제축구연맹이 4년마다 
한번씩 개최하는 세계선수권대회이다." /></p>

요약하면 이미지가 안보일때 영향을 끼치는지여부에 따라 alt속성에 작성하냐 안하냐가요점이 된다.