HTML5 예제 : 이미지와 설명텍스트 코딩
간단한 이미지와 설명이 되있는사이트를 html5로 코딩해보자
실험할 사이트는 Pinterest이다 http://pinterest.com/
사이트중 이걸 코딩 해보도록한다.
첫번째로 원래 있던걸 보자 .<div>가 너무 많이쓰이다보니 뭐가뭔지 햇갈 린다. html5에서는 우리가 익숙하지않아서 그렇지 좀더 명확화 할수있다.
1. 첫번째로 <article>
, <nav>
, <aside>
를 사용한방법이다
Awesome cat description.
2. 이번엔 굳이 <nav>를 고집하지않고
, <aside>
만이용한것이다
Awesome cat description.
3. <figure>를 이용해서 더구체화 한방법이다. figure 엘리먼트는 그림,사진,일러 코드리스트등과 같이 캡션을 할때 사용한다.
25 likes 2 comments 100 repins
이외에도 여러방법이 있다. 확실한 코딩이라고 정해진것은 없다. <article>이 다소 혼동올수도 있으니 부모 element로 <section>을사용하는것도 좋은 방법이다. 다만 적어도 조건을 만족한다는 가정하에 무엇이 가장적합한지 선택해서하는것이 코딩의 정석이다.
댓글