[Day 12] figure + article + button + IR기법 + Sprite 이미지

HTML5 Markup

• <figure> : caption을 가질만한 콘텐츠를 grouping 하기 위한 태그
  • <figcaption> : figcaption이 img tag의 alt 속성을 대체할 수 있다. 따라서 alt=”” 으로 공백으로 두어도 되지만 SEO 관점에서 alt에 대체 텍스트를 작성하면 이미지 노출 확률이 높아진다.
  • aria-labelledby = “figcaption#id” 로 연결하면 해당 id를 갖는 캡션과 label로 연결되어서 접근성을 높일 수 있다.
  • title 속성을 활용해도 대체 텍스트로 쓸 수 있다.
• <article> : 하나의 완결된 정보로서 RSS 피드로 보낼 만큼의 가치를 갖는 내용
  • <section>과 매우 비슷하다. 하지만 section은 하나의 장과 절로 이루어진 영역의 의미가 더 크다.
• <a> , <button> … : interactive contents model
  • <a> 안에 또 다른 <a>는 나올 수 없다. (인터랙티브 모델 안에 또 다른 인터랙티브 모델 나올 수 없다.)
• <strong>, <em> : 해당 영역의 강조를 위해 사용하는 태그(semantic)
• <b>, <i> : 주변 콘텐츠와 구분하기 위한 태그(디자인 상 강조, 기울임꼴)
  • 현재 시점의 웹에서 <i>는 icon을 사용하는 태그라는 의미가 더 크다.

CSS Styling

• text-align: justify;

  • 양쪽 정렬

• IR 기법 (Image-Replacement)

  • background-url 을 활용해 제목과 같은 텍스트를 이미지로 대체하고 텍스트를 감춘다.

    <style>
      .logo {
        box-sizing: border-box;
        position: relative;      
        width: 290px;
        height: 195px;
        padding-top: 20px;
        text-align: center;
        font-size: 12px;
      }
      .logo::after {
        content: "";
        background: url("../images/title.png");
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    

• Sprite 이미지

  • 배경 이미지 하나에 여러 가지 이미지를 합쳐 놓고, 백그라운드 상에서 위치만 조정해서 여러 이미지를 사용하는 것처럼 보이게 한다.

    <div class="btn">
      <span class="btn-prev">이전</span>
      <span class="btn-next">다음</span>
    </div>
    

    <style>
      .btn {
        background: yellow;
      }
      .btn span {
        width: 20px;
        text-indent: 20px;
        white-space: nowrap;
        overflow: hidden;
        height: 19px;
        display: inline-block;
        background-image: url("../css/images/backpage_forwardpage.png");
      }
      .btn-prev {      
        background-position: 0 0;
      }
      .btn-next {
        background-position: -40px 0;
      }
    </style>