[Day 13] ol + auto increment + blockquote + footer

CSS Styling

• ordered list

  • list-style: none;
    • ul 의 경우에는 이렇게 해도 되지만, ol은 접근성 차원에서 이렇게 스타일을 없애면 안된다.
    • ol의 경우에는 overflow: hidden; 으로 감춰야 한다.

• 요소 다중 선택 & auto increment

  • counter-increment: number; & counter(number);

    .favorite-list li {
        counter-increment: number;
    }
    .favorite-list li::before {
        content: counter(number);
    }
    

• flex

  • flex-container 내부의 flex-item은 block 요소 처럼 작동한다.

• transform

  • layout 배치를 transform을 이용해서도 할 수 있다.

    transform: translateY(50%);	// y축의 50%에 위치시킨다.
    

HTML5 Markup

• 인용문 Markup
  • <blockquote> : block 단위로
  • <q> : inline 단위로
    • cite=”url” 속성을 추가해서 출처를 남길 수 있다.
    • agent style 상에서 가상요소 “ “ (double quote)가 들어가 있다.
• <footer>
  • <main>의 경우에는 페이지에 하나만 나올 수 있지만, header나 footer는 영역별로 나올 수 있다.
  • 출처를 남기는 용도로도 사용할 수 있다.
  • footer에는 heading level(h1, h2, h3 …)이 나오지 않는다.
  • 주소의 경우에는 <address> 태그를 사용한다.
    • <address> 는 다른 곳이 아닌 오직 footer 에서만 사용한다. (semantic 차원)
  • 저작권(copyright)의 경우에는 주로 <small> 태그를 사용한다.