0524 / image 요소

* image

  - background-image : 기본형이 패턴처리

  - background-size : contain; -> 이미지를 모두 보이게 / cover; -> 이미지를 완전히 감싸게

    x수치 auto : 가로 (x수치)의 크기기준으로, 높이 크기는 자동설정

    y수치 auto : 세로 (y수치)의 크기기준으로, 가로 크기는 자동설정

    (단, 구형브라우저에서는 적용 x)

  - background-position :

    x좌표 (권장x) : left || center || right

    y좌표 (권장x) : top || center || bottom

    좌표 : %, px, em, rem, vw, vh 등 단위를 사용!!!

    !!!! *** 반드시 해당하는 이미지가 움직인다 *** !!!!

 

-----------------------------------------------------------------------------------------

- image.html 코드

  <div id="wrap">

    <h1><a href="./all_contents.html">웹기초</a></h1>

 

    <div class="part">

      <h2>이미지 요소 사용하기</h2>

      <div class="img_cover">

        <img src="../img/icon/vs_code.png" alt="visual studio cod app" />

        <br />

        <span>vs_code</span>

      </div>

 

     <figure class="img_cover">

       <figcaption><abbr title="visual studio code">vs code</abbr></figcaption>

       <img src="../img/icon/vs_code.png" alt="visual studio code app" />

     </figure>

    </div>

 

    <!-- ============================================================ -->

    <div class="part clearfix">

      <h2>background-image 사용하기</h2>

      <!-- <span class="sample">임시로 span요소를 만들어 체크</span> -->

 

      <div class="bgi bg_01">

        <h3>이미지-반복없음-이미지크기</h3>

      </div>

      <div class="bgi bg_02">

        <h3>이미지-가로반복</h3>

      </div>

      <div class="bgi bg_03">

        <h3>이미지-세로반복</h3>

      </div>

      <div class="bgi bg_04">

        <h3>이미지크기 변경</h3>

      </div>

      <div class="bgi bg_05">

        <h3>이미지위치 변경</h3>

      </div>

      <div class="bgi bg_06">

        <h3>이미지위치</h3>

      </div>

 

    </div>

   <!-- ============================================================ -->

    

   <div class="part">

     <h3>multi image 불러오기</h3>

      <ul class="test_place clearfix">

        <!-- x, y -->

        <li><a href="#"><span class="blind">1, 1</span></a></li>

        <li><a href="#"><span class="blind">3, 4</span></a></li>

        <li><a href="#"><span class="blind">7, 3</span></a></li>

      </ul>

   </div>

    <div class="part">

      <p>

        <!-- abbreviation : 약어를 담는 요소 =========================== -->

        <abbr title="hyper text markup language">html</abbr>,

        <abbr title="cascading style sheets">css</abbr>,

        <abbr title="javascript">js</abbr>

      </p>

    </div>

 

  </div>