220707

div#wrap {

            padding: 20px;

            width: 700px;

            border: 2px solid #000;

            background-color: #f2fae2;

        margin: 0 auto;}

        /* figure 피규어: 이미지 또는 특정 대상의 제목이나 보조설명에 사용 */

        figure {border: 1px solid #f00;

        display: inline-block;

    /* 블록레벨요소의 기능을 유지한채 화면에서 나타나는 결과만 인라인요소로 표현함 */

    }

    /* figcaption 픽캡션 : 실제 제목, 설명에 해당하는 텍스트를 기재함 */

        figcaption {

            text-align: right;

            border: 1px solid #f80;

            color: #888;}

 

<link rel="stylesheet" href="../style/style.css">  

CSS에 만든 스타일을 가지고 온다.

 

 

 <figure> 피규어: 이미지 또는 특정 대상의 제목이나 보조설명에 사용

 

        <!-- seattle_video.html -->

 

        <a href="view/detail.html?no=1" title="Text">

                                                     <!-- title 속성 : tool tip 툴팁, 안내 멘트  -->

           

 <img src="images/thumb/seattle_video 150x100.jpg" alt="시애틀 아이팟 비디오">

</a>

 

 <figcaption>seattle_video 150x100</figcaption> 픽캡션 : 실제 제목, 설명에 해당하는 텍스트를 기재함

 

</figure>