TIL 221212 flex-basis , flex-shrink , flex-grow / 웹 접근성 탭 마크업

🎆 오늘 한 것

• 수업 들은 거 복습, 정리
• 테일윈드 스터디
• 딥다이브 클로저 읽기

🙄 오늘 하려고 했는데 못한 것

• 리덕스 강의 눈곱만큼 보기
• 알고리즘 강의 문제의 이해까지
• 문제 풀이 한 개

✨ flex-basis / flex-shrink / flex-grow

플렉스 제법 많이 써봤고 이제 익숙하다ㅋ 이러고 있었는데 생각해보니 이 트리오에 대해서는 잘 모른다 여전히...

🎇 flex-basis

flex 아이템의 기본 크기를 설정하는 요소. 컨텐츠가 이 크기보다 크면 자신의 원래 크기를 유지하고, 작다면 설정한 크기만큼 늘어나게 됨!

🎇 flex-shrink

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성!
0보다 큰 값을 넣으면 flex-basis보다 작아질 수 있다는 말이다. 기본값이 1이기 때문에 기본적으로 flex-basis값보다 작아질 수 있었음

0으로 세팅하면 flex-basis보다 작아지지 않고 고정적인 사이즈를 가질 수 있다!

🎇 flex-grow

0보다 큰 값을 넣으면 박스가 커지면서 빈 공간을 채워넣게 됨. 기본값은 0.

여기서 숫자는 비율을 의미함!!

.child1{
  flex-grow: 1;
}
.child2{
  flex-grow: 2;
}
.child3{
  flex-grow: 1;
}

위의 예시로 보면, 100이라는 넓이를 가진 부모 요소를 1:2:1의 비율로 칸을 차지하게 된다는 말

🎇 flex

위의 세 가지를 한 번에 쓸 수 있는 숏핸드 속성

.child {
  flex: 1; /* grow : 1, shrink : 1, basis : 1 */
  flex: 1 1 auto; /* grow : 1, shrink : 1, basis : auto */
  flex: 1 500px; /* grow : 1, shrink : 1, basis : 500px */
}

✨ WAI-ARIA (랜드마크, 탭 마크업)

널리 : WAI-ARIA 바르게 사용하기 4부 - 랜드마크 역할

주요 랜드마크

<div class="board">
   <div class="tab-list" role="tablist ">
     <button
      type="button"
      class="tab is-selected"
      role="tab"
      id="noticeButton"
      aria-controls="notice"
      aria-selected="true"
     >
       공지사항
     </button>
     <button
      type="button"
      class="tab"
      role="tab"
      id="archiveButton"
      aria-controls="archive"
      aria-selected="false"
     >
      자료실
     </button>
   </div>
   <div
      class="notice tab-panel is-selected"
      role="tabpanel"
      id="notice"
      aria-labelledby="noticeButton"
   >
     <ul class="board-list">
        <li>
          <a class="icon-stop" href="/">
              HTML의 모든 것을 알려주마 샘플 활용법
          </a>
          <time datetime="2022-12-21T13:53:45">2022.09.02</time>
        </li>
        <li>
          <a class="icon-stop" href="/">W3C 사이트 리뉴얼 및 공지사항</a>
          <time datetime="2022-12-21T13:53:45">2022.09.02</time>
        </li>
        <li>
          <a class="icon-stop" href="/">KWCAG 2.1 소식</a>
          <time datetime="2022-12-21T13:53:45">2022.09.02</time>
        </li>
        <li>
          <a class="icon-stop" href="/">
            서버 점검으로 인한 사이트 이용안내 입니다.
          </a>
          <time datetime="2022-12-21T13:53:45">2022.09.02</time>
        </li>
        <li>
          <a class="icon-stop" href="/">
            여러분들이 생각하는 웹 접근성에 대해 이야기를 나누어 봅시다.
          </a>
          <time datetime="2022-12-21T13:53:45">2022.09.02</time>
        </li>
     </ul>
      <a
        href="/"
        class="board-more icon-plus"
        aria-labelledby="noticeButton"
      >더보기
     </a>
  </div>

  생략...ㅎㅎ

🎇 div.tab-list

👉 role = 'tablist'

• 탭의 컨테이너 역할을 하는 요소이다 라는 뜻(탭 한 세트를 묶어놓은 요소임으로 이해하면 될 듯)

🎇 tab-list 내부 button

👉 role='tab'

• 이건 탭 패널...!?을 제어하는 역할을 하는 요소이다. 라는 뜻

👉 aria-controls="notice

• id의 이름이 'notice'인 요소를 컨트롤하는 요소이다. 라는 뜻

👉 aria-selected="true"

• aria-selected가 true인 요소는 현재 선택(활성화)되어 있는 요소이다. 라는 뜻

🎇 div.tab-panel

👉 role='tabpanel'

이것은 role이 tab인 요소의 내용물(패널)의 역할을 하는 요소이다. 라는 뜻

👉 aria-labelledby="noticeButton"

• role이 tab인 요소 중 id가 'noticeButton'인 요소와 연결되어 있는 요소이다.

🎆 내일 할 것

• 수업 들은 거 정리하고 복습
• 알고리즘 강좌(볼 수 있을까?)
• 테일윈드 스터디
• 야무님 플렉스

📌 킵해놓을 todo

📚 이번 주 개인 목표

• 미뤄놓은 프로토타입과 클로저 뽀개기
• 타입스크립트 책 보기
• 고급 리덕스 파트 강의 보기
• 알고리즘 문제 해결 접근법 파트 강의 보기(여유있으면 해결 패턴까지)
• 야무님 강의 플렉스/그리드, 반응형 파트

📝 오늘의 일기

강의 듣고 자습시간에 강의 내용 복습하고 회고조에서 노가리 좀 하다가, 테일윈드 스터디 갔다가, 못 먹은 저녁을 뒤늦게 먹고나니 무려 10시 반이었음 허... 별 거 못하고 그냥 딥다이브나 좀 읽었다. 내일도 공부 시간 턱없이 부족할 것 같은데 큰일...🥺 테일윈드 스터디 은근 타격이 크네