21.08.25 노트정리

Web Vitals

Core Web Vitals

사용자 경험을 측정하는 데에는 많은 요인이 있다.
사용자 경험의 일부분은 사이트와 컨텍스트에 한정되어 있지만,
모든 웹 경험에서 중요한 공통 집합인 'Core Web Vitals'가 있다.
이러한 핵심 사용자 경험 요구사항에는 로딩경험, 상호작용, 페이지 콘텐츠의 시각적 안정성 등이 포함됨

LCP(Largest Contentful Paint)

• 인식되는 로드 속도를 측정하는 항목
• 페이지의 주요 콘텐츠가 로드되었을 가능성이 높은 시점에 페이지 로드 타임라인에 점을 표시함

FID(First Input Delay)

• 응답성을 측정하는 항목
• 사용자가 페이지와 처음 상호작용하려고 할 때 느끼는 경험을 정량화 함

CLS(Cumulative Layout Shift)

• 시각적 안정성을 측정하는 항목
• 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정량화 함

---

:focus-visible로 접근성 높이기

절대 아무런 대체재 없이 외곽선을 지우지 마시오

// 포커스, 포커스 비저블, 포커스 위드인 ----------------------------------------------------- /
@mixin focus(){
  &:focus{
    outline: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 2px rgba($primaryBlue, 1);
  }
}

@mixin focusVisible($visible: true){
  @include focus();
  @if $visible{
    &:not(:focus-visible){
      box-shadow: none;
      @content
    }
  }
}

@mixin focusWithin($withIn: true){
  @include focus();
  @if $withIn{
    &:focus-within{
      @content
    }
  }
}

:focus-visible

• 간단하게 디자인과 접근성을 살릴 수 있게 도와주는 의사클래스
• :focus와 달리 키보드로 해당 엘리먼트를 선택해야만 적용됨

:focus-visible {
    outline: 3px solid #aaa;
}

Polyfill

• 아직 :focus-visible을 지원하는 브라우저가 많이 없음
• WICG의 focus visible을 이용하면 지원 범위를 넓힐 수 있음
• 라이브러리만 추가하면 CSS는 상술한 내용과 크게 다르지 않음

.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

:focus-within

• Dropdown 메뉴처럼 마우스를 올려야 표시되는 메뉴도 :focus-within을 이용해 접근성을 높일 수 있음

.dropdown {
    display: none;
}

.dropdown:hover {
    display: block;
}

.dropdown.hover {
    display: block;
}

---

border 말고 shadow

• 모서리 생성 가능

---

grid-area 숫자 단축 속성

• row start / column start / row end / column end

---

custom-selector

@custom-selector :--heading h1 h2 h3 h4 h5 h6;

---

postcss-preset-env

• PostCSS Preset Env를 사용하면 최신 CSS를 대부분의 브라우저가 이해할 수 있는 것으로 변환하여 대상 브라우저 또는 런타임 환경에 따라 필요한 폴리필을 결정할 수 있음

---

sass @for

@for문은 반복문
to를 사용하면 마지막 인덱스는 포함하지 않고
through을 사용하는 경우 마지막 인덱스는 포함됨

@for <variable> from <expression> to <expression> { ... }
@for <variable> from <expression> through <expression> { ... }

SCSS

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

CSS

ul:nth-child(3n + 1) {
  background-color: #004080;
}

ul:nth-child(3n + 2) {
  background-color: #004d99;
}

ul:nth-child(3n + 3) {
  background-color: #0059b3;
}

---

sass @each

@each문은 list의 각 요소 또는 maps의 각 쌍에 대한 스타일을 내보내거나 코드를 쉽게 평가할 수 있음

@each <variable> in <expression> {...}형태로 사용

SCSS

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

CSS

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

---

Maps와 함께 사용

SCSS

SCSS SYNTAX
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

CSS

@charset "UTF-8";
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

---

clamp 함수

clamp(min, prefered, max)

• prefered값이 중요함, 기본 사용값이며 "선호하는 값"이라고 사용하기도 함
• 부모 요소를 기준으로 상대크기, 상대단위값을 사용
• px과 같은 절대 단위를 사용하면 clamp()함수의 기능을 할 수 없음
• 상대 크기로 가변이지만 min값보다는 작아질 수 없고, max값보다는 커질 수 없음

예시

font-size: clamp(1rem, 2.5vw, 2rem);

• 해석하면 2.5vw를 가진 글꼴 크기를 가지며 최소 1rem, 최대 2rem까지 커질 수 있다