[HTML/CSS] - 실습4

HTML&CSS 강의

공지사항, 자료실 UI

is로 시작하는 클래스는 동적인 클래스
날짜를 표기하는 곳에 time태그로!
aria를 활용하여 h2의 id값과 더보기 링크의 aria-describedby를 서로 연결시켜주면 더 웹접근성이 올라감

마크업

<div class="board">
  <section class="notice">
    <h2 class="a11y-hidden" id="noticeHeading">공지사항</h2>
    <button type="button" class="tab">공지사항</button>
    <ul class="notice-list">
      <li>
        <a class="icon-dot-circled" href="#">HTML의 모든 것을 알려주마 샘플 활용법</a>
        <time datetime="2021-08-16T15:45:30">2021.08.16</time>
      </li>
      <li>
        <a class="icon-dot-circled" href="#">W3C 사이트 리뉴얼 및 공지사항</a>
        <time datetime="2021-08-16T15:45:30">2021.08.16</time>
      </li>
      <li>
        <a class="icon-dot-circled" href="#">KWCAG 2.1 소식</a>
        <time datetime="2021-08-16T15:45:30">2021.08.16</time>
      </li>
      <li>
        <a class="icon-dot-circled" href="#">서버 점검으로 인한 사이트 이용안내 입니다.</a>
        <time datetime="2021-08-16T15:45:30">2021.08.16</time>
      </li>
      <li>
        <a class="icon-dot-circled" href="#">여러분들이 생각하는 웹 접근성에 대해 이야기를 나누어 봅시다.</a>
        <time datetime="2021-08-16T15:45:30">2021.08.16</time>
      </li>
    </ul>
    <a class="more" href="#" aria-labelledby="noticeHeading"><span class="icon icon-plus" aria-hidden="true"></span>더보기</a>
  </section>
  <section class="pds">
    <h2 class="a11y-hidden" id="pdsHeading">자료실</h2>
    <button type="button" class="tab">자료실</button>
    <ul class="pds-list">
      <li>
        <a class="icon-dot-circled" href="#">디자인 사이트 링크 모음</a>
        <time datetime="2021-09-30T15:45:30">2021.09.30</time>
      </li>
      <li>
        <a class="icon-dot-circled" href="#">웹 접근성 관련 자료 모음</a>
        <time datetime="2021-09-30T15:45:30">2021.09.30</time>
      </li>
      <li>
        <a class="icon-dot-circled" href="#">예제 샘플 응용해보기</a>
        <time datetime="2021-09-30T15:45:30">2021.09.30</time>
      </li>
      <li>
        <a class="icon-dot-circled" href="#">웹 접근성 향상을위한 국가 표준 기술 가이드라인</a>
        <time datetime="2021-09-30T15:45:30">2021.09.30</time>
      </li>
      <li>
        <a class="icon-dot-circled" href="#">로얄티 프리 이미지 자료</a>
        <time datetime="2021-09-30T15:45:30">2021.09.30</time>
      </li>
    </ul>
    <a class="more" href="#" aria-labelledby="pdsHeading"><span class="icon icon-plus" aria-hidden="true"></span>더보기</a>
  </section>
</div>

.board {
    margin-top: 20px;
    position: relative;
}

.board ul, .board .more {
    display: none;
}

.is-active ul, .is-active .more{
    display: block !important;
}

.board .tab {
    position: absolute;
    top: 0;
    background: #ccc linear-gradient(to bottom, #ccc, #eee);
    color: #666;
    padding: 5px 10px;
    border: 1px solid #aaa;
    border-radius: 5px 5px 0 0;
    font-size:0.875rem;
}

.is-active .tab {
    background: #fff !important;
    color: #e85b2c !important;
    border-color: #e85b2c #e85b2c #fff #e85b2c;
}

.notice .tab {
    left: 0;
}

.pds .tab{
    left: 69px;
}

.board ul {
    padding: 35px 0 0 0;
    list-style: none;
    margin: 0;
}

.board li {
    margin-top: 10px;
    font-size: 0.875rem;
    display: flex;
}

.board ul a {
    flex-grow: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.board time {

}

.board .more {
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 8px;
}

.more .icon-plus {
    color: hsla(110, 70%, 30%, 1);
}

말줄임: text-overflow, overflow, white-space 세 속성을 사용해야 표현 가능!

오늘 공부할 것들

• Aria 예제
• Sass