HTML

컨테이너

• span
  => span 요소를 사용하여 이미지를 삽입할 수도 있다

CSS

성능 최적화를 위해 cascading을 최소화하자
=> 시맨틱보다 중요한 것은 접근성과, 사용성

grid

auto flow 설정

명시적으로 배치되지 않은 아이템들을 자동으로 배치되도록 설정한다.

• grid-auto-flow: row(기본값) | column | dense
  => dense: 배치 후 남은 공간을 밀집한 형태로 채워준다

grid-item 정렬

행(열)축 정렬
=> 부모 요소에 justify(align)-items 속성을 준다.

• justify(align)-items: start | center | end | stretch(기본값)
  => grid-item에도 grid를 주고 justify(align)-items속성을 부여하면 content의 배치를 조정할 수 있다

grid-item-track 정렬

컨테이너의 크기보다 그리드 아이템 트랙이 작을 때 사용한다.

• justify(align)-content: start | center | end | stretch | space-around( between | evenly )

grid-item 개별 정렬

grid-item에 justify(align)-self속성을 부여한다.

• justify(align)-self: start | center | end | stretch

템플릿 영역을 사용한 배치

• grid-area
  => 이름을 정의할 때 숫자는 사용할 수 없다

sprite 기법

여러 이미지를 한 파일에 삽입해서 좌표값으로 추출하는 방법
=> 여러 이미지를 각각의 파일로 하여 불러오는 것보다 사용성 측면에서 좋다

선택자

속성 선택자

• [속성*="값"]
  => 지정한 속성과 값이 포함된 모든 요소를 선택한다

웹접근성

접근성은 모두를 위한 것

• aria-hidden에 true값을 줘서 screenreader로 읽히지 않게 하고, aria-lable로 대신 읽힐 텍스트를 지정한다

ETC

aspect-ratio

=> 값으로 비율을 주면 요소의 크기가 비율대로 조정된다