본문 바로가기
웹표준

HTML5 예제 : 이미지와 설명텍스트 코딩

by 샷타이거 2013. 1. 23.

HTML5 예제 : 이미지와 설명텍스트 코딩

간단한 이미지와 설명이 되있는사이트를  html5로 코딩해보자

실험할 사이트는 Pinterest이다 http://pinterest.com/

사이트중 이걸 코딩 해보도록한다.

첫번째로 원래 있던걸 보자 .<div>가 너무 많이쓰이다보니 뭐가뭔지 햇갈 린다. html5에서는 우리가 익숙하지않아서 그렇지 좀더 명확화 할수있다.


Awesome cat description.

25 likes 2 comments 100 repins

Profile picture of me

Me onto here

1. 첫번째로 <article><nav> , <aside> 를 사용한방법이다


2. 이번엔 굳이 <nav>를 고집하지않고, <aside> 만이용한것이다


3. <figure>를 이용해서 더구체화 한방법이다. figure 엘리먼트는 그림,사진,일러 코드리스트등과 같이 캡션을 할때 사용한다.

25 likes 2 comments 100 repins

Profile picture of me

Me onto here

이외에도 여러방법이 있다. 확실한 코딩이라고 정해진것은 없다. <article>이 다소 혼동올수도 있으니 부모 element로 <section>을사용하는것도 좋은 방법이다.  다만 적어도 조건을 만족한다는 가정하에 무엇이 가장적합한지 선택해서하는것이 코딩의 정석이다.

댓글