웹표준

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

샷타이거 2013. 1. 23. 11:08

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

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

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

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

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



  

    

      Repin
      Like
      Comment
    

    
      My awesome cat
    
  

  
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 엘리먼트는 그림,사진,일러 코드리스트등과 같이 캡션을 할때 사용한다.


  

    
    

      
        My awesome cat
        
Awesome cat description.

      
    

  

  

    25 likes
    2 comments
    100 repins
  

  

    
      Profile picture of me
    
    
Me onto here

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

저작자표시