[Day 05] 웹 접근성 + 박스모델 + Flex + Float + Markup + Position + Cascading

웹 접근성

• WAI(Web Accessibility Initiative)-ARIA (접근성 개선)
  • <div>에 role property를 부여
    • <div role="banner">
    • <div role="navigation">
    • 등등..
  • <div>로 button control을 만들 경우 접근성 저하
    • role=”button” property를 이용해서 text-node를 대체함으로써 접근성 개선할 수 있다.
    • aria-label=”Coca-Cola” 를 이용해서도 role과 마찬가지로 접근성 개선 가능

CSS

• CSS 작업에서 가장 어렵고 중요한게 레이아웃(배치)
  • Box Model, Flex, Float, Position, Grid
• 박스모델
  • 콘텐츠 박스(box-sizing: content-box;)
    • border, padding, margin이 콘텐츠 박스의 사이즈에 다 더해진다.
  • 보더 박스(box-sizing: border-box;)
    • width에 padding이 포함되어서 계산된다.
    • button element는 default가 border-box다.
  • margin collapsing (마진 병합 현상)
    • 마진은 투명한 영역이라서 박스모델 간에 병합되기 때문에 등간격으로 배치할 수 있다.
    • 등간격으로 배치하기 위해서는 padding 보다 margin으로 여백 조정하는게 유리하다.

Flex

• flex-direction
  • row 일 경우 width는 컨텐츠 만큼 차지하고, height가 stretch 된다.
  • column일 경우 width가 stretch 되고, height는 컨텐츠 만큼 차지한다.
• tag 내부의 text
  • Anonymous inline box : item, box로 작동할 수 있다.
• order property
  • order: -1; 속성을 통해 siblings의 순서를 바꿀 수 있다.
  • order 속성의 default는 0;
• CSS 선택자 우선순위
  • class 선택자 < tag 선택자
• align-items, align-self : 둘 다 교차축 정렬
  • align-items : container에서 모든 items에 적용하는 정렬
  • align-self : flex-item에 적용하는 정렬
• flex-basis : width를 결정 (default: auto)
• flex-grow : 확대하는 배율을 정하는 속성 (default: 0)
  • flex-item에 적용하는 속성
• flex-shrink : 축소하는 배율을 정하는 속성 (default: 1)
  • flex-item에 적용하는 속성
• flex-wrap : 줄바꿈 방식을 결정하는 속성 (default: nowrap)
  • nowrap일 경우 내부 item의 배율을 자동으로 줄인다.
    • 이 때 flex-shrink, flex-grow 사용한다.
  • wrap일 경우 다음줄로 넘어간다.

Float

• float: left, right, none; (default: none)
• float: left; : 부모 영역에서 맨 왼쪽으로 float 된다.
• float : 부모 영역에 떠 있는 것을 말한다.
• Flow
  • 마크업 순서대로 배치되는 것을 Normal flow 라고 한다.
  • float를 사용하면 normal flow에서 벗어나서 부모영역 안에 떠 있게 된다.
• float 되면 linebox가 float 된 라인으로 한정된다.
  • normal flow 상태인 item의 inline-box(text-node)는 float에서 차지하고 있는 linebox 바깥으로 밀려난다.
  • item의 크기가 linebox 가용범위를 넘어갈 경우 다음 줄로 넘어가서 떠 있게 된다.
  • linebox가 넘어가고 난 후 이전 linebox에 남아있던 공간은 죽은 공간이 된다.
• clear: both; : float가 left던 right던 해제하고 다음줄로 넘어간다.
  • float linebox의 height 만큼 강제로 마진을 주고 넘어가는 개념
  • block element에만 적용 가능하다. (inline element에는 clear 불가)
  • sibling level element를 만들어 clear를 적용하면 강제로 float linebox의 margin 만큼 부모 element의 높이를 회복한다. (구조를 바꿔야 하기 때문에 추천 X)
    • html 구조 안바꾸고 CSS로 높이 회복하는 방법(1)
      • ::before, ::after - 가상 요소박스를 만드는 접미사 (inline element로 만들어진다.)
      • 부모 요소에 가상 요소박스를 만들고 content 속성으로 내용을 주고 block element로 만든다.
      • 가상 요소박스에 clear: both;를 주고 content 속성의 값만 없앤다.
      • .clearfix::after - 이런 식으로 clearfix 클래스 모듈 만들어 놓고 부모 요소에 clearfix 클래스를 주면 재사용 가능하다.
    • html 구조 안바꾸고 CSS로 높이 회복하는 방법(2)
      • 부모 요소에 overflow: hidden; 을 주면 똑같이 된다. (비추천)

Markup

• 디자인 중심 마크업(테이블 마크업) -> 논리적이지 않다.

• 콘텐츠 중심 마크업 (논리적인 마크업)

  1. 로고(페이지의 대제목이자 얼굴)
  2. 텍스트 링크 모음(로그인 링크가 있기 때문에 논리적으로 먼저 나오는게 좋다.)
  3. 메뉴

• 시맨틱(semantic) 마크업 (의미에 맞는 마크업)

  • 컨텐츠의 의미를 잘 전달할 수 있는 마크업
  1. 로고(페이지의 대제목이자 얼굴) - <h1>
  2. 텍스트 링크 모음(로그인 링크가 있기 때문에 논리적으로 먼저 나오는게 좋다.) - <a> 링크가 여러개 모음이기 때문에 <ul>, <ol>, <dl> 을 사용해서 목록처럼 마크업
  3. 메뉴 - <nav> + <h> + <ul>
     • heading tag는 html 구조상 필요하기 때문에 만들어 놓고 hidden 으로 감춘다.
       • heading tag의 class는 readable-hidden
       • heading tag의 text-node는 ‘‘메인메뉴’’
     • nav tag는 주요 nav 하나에만 적용한다.
       • sub-menu는 <ul>과 <li>를 중첩해서 만든다.

• 네이밍(naming)

  • html 구조상 상속을 받는 태그는 CSS도 같이 적용되기 때문에 CSS 상속을 막기 위해 요소를 만들고 class로 네이밍해서 상속을 차단한다.

• 키보드 포커스

  • tabindex="0" 속성을 활용해 <li> 태그에 키보드 포커스를 줄 수 있다.
    • 0은 normal flow 순서로 흐른다.
  • 키보드 포커스가 default로 들어가 있는 태그
    • <a href="">, <area href="">, <button>, <input>, <select>, <textarea>

Layout CSS

• position (default: static)
  • static : offset 사용 불가
  • relative : 상대 배치 (normal flow를 따라서 흐르지만, 자기가 있던 자리를 기준으로 위치가 정해진다.)
  • absolute : 절대 배치 (normal flow를 벗어난다. 제자리에서 붕 떠있는 개념)
    • width: auto, height: auto 이기 때문에 필요에 따라 설정해줘야 한다.
    • absolute로 설정된 박스는 block element
    • layer가 쌓이는 개념처럼 나중에 마크업 된 요소가 앞으로 나온다.
    • z-index로 layer 순서를 바꿔줄 수 있다.
    • offset 배치의 기준은 자기보다 상위 요소이면서 position: static이 아닌 요소를 기준으로 한다.
      • 주로 relative element를 기준으로 잡고 쓴다.
  • fixed : absolute와 비슷하다. 하지만 기준점은 viewport
  • sticky : relative + fixed
    • 지원되지 않는 브라우저가 많다.
    • cross browsing을 위해 canIuse.com 활용
    • 지원되지 않는 브라우저에서 사용하기 위해서는 Polyfill 을 활용한다.

• Cascading (스타일 겹침)

  • CSS 선택자 우선순위 (점수가 같다면 나중에 선언된 CSS가 점수가 높다. 선택자의 개수가 많을 수록 점수가 합산된다.)

    • Element Selector (Tag Selector): 1점
    • Class Selector : 10점
    • ID Selector : 100점
    • Inline Selector : 1000점
    • !important : 10000000000점 (사용할 때 조심하자)
    • 클래스를 아무리 많이 써도 ID를 못이긴다. (점수를 아무리 더해도 안됨)
    • 동적으로 더해지는 클래스는 !important를 달고 다니는 경우가 있다.

    selector	id	class	element
    p	0	0	1
    .note	0	1	0
    .box	0	1	0