HTML

요소

텍스트 레벨

• time
  => datetime속성을 부여한다

  => 값에는 yyyy-mm-dd을 준다
  => 시간도 추가할 때에는 T를 추가하고 시간을 추가한다(yyyy-mm-ddThh:mm:ss)

속성

웹 접근성

• aria-lable
  => 요소를 설명할 텍스트가 마땅히 없을 때에만 간단한 텍스트를 값으로 한다
  => 상호작용 요소에만 사용한다
  (비 상호작용 요소에 사용 시, 값이 읽히지 않거나 상호작용 요소로 혼동시킬 수 있다)
  => 시맨틱 요소가 아닌 것에 사용할 경우에는 role 속성을 부여하고 사용한다

data-

사용자 정의 속성

• data-로 시작하는 속성의 이름을 정의하고 값을 부여한다
  => css로 값을 사용할 때에는 attr(data속성)함수를 사용한다

CSS

함수

counter()

=> 자동으로 번호를 매길 때 사용한다

사용법

1. counter-reset
   => counter의 이름 또는 초깃값을 지정한다(초깃값의 기본값은 0)
   => counter-reset: 카운터이름_초깃값
2. counter-increment
   => counter의 증가(감소)값을 지정한다(기본값은 1)
   => counter-increment: 카운터이름_증가(감소)값
3. counter()
   => 해당하는 카운터의 값을 보여준다
   => counter(카운터이름, list-style-type)
4. counters()
   => 중첩된 카운터가 필요할 때 사용
   => counters(카운터이름, 구분할text, list-style-type)

   list-style-type은 생략 가능하며, 기본값은 십진수(decimal) 형태

clamp(최솟값, 기본값, 최댓값)

=> 최소, 기본, 최대의 값을 한번에 설정할 수 있다

텍스트

white-space

공백 문자를 처리하는 법을 지정한다.

값
=> 기본값은 normal

• nowrap
  => 연속된 공백을 무시하고, 줄바꿈이 일어나지 않으며, 부모요소를 넘칠 수 있다
  => text-overflow의 속성에 ellipsis로 값을 주면 말줄임표가 생긴다
• pre
  => 연속된 공백과 줄바꿈이 그대로 적용되고, 부모요소를 넘칠 수 있다
• pre-wrap
  => pre와 동일하나, 부모요소를 넘치지 않는다
• pre-line
  => 줄바꿈만 적용되고, 부모요소를 넘치지 않는다

float

위로 띄워서 자기 부모의 영역 안에서 왼쪽이나 오른쪽으로 배치한다

object-fit

이미지나 비디오 요소의 콘텐츠 크기를 조절해 부모요소에 맞추는 방법을 정한다.

사용법

• object-fit: fill(기본값)
  => 가로/세로의 비를 무시하고 부모 요소에 가득 맞춘다
• object-fit: contain
  => 가로/세로의 비를 유지하면서 세로가 최대한 길어질 때까지 부모 요소에 가득 맞춘다
• object-fit: cover
  => 가로/세로의 비를 유지하면서 가로가 최대한 길어질 때까지 부모 요소에 가득 맞춘다
• object-fit: scale-down
  => contain과 cover 중 크기가 더 작아지는 값을 따른다