meepin

posts

CSS

May 11, 2025 updated May 11, 2025 csshttpjavascriptrenderingtokens

@ https://www.joshwcomeau.com/css

@ Fundamentals

브라우저가 CSS를 해석하는 방식

  1. 브라우저는 HTML 파일을 파싱하여 DOM 트리 생성
  2. CSS 파일도 동시에 파싱하여 CSSOM(CSS Object Model) 트리 생성
  3. DOM과 CSSOM을 결합하여 Render 트리 생성
  4. 레이아웃 계산 후 렌더링

CSS 문법과 용어

  1. 선택자(Selector)÷

    • 타입(Type) 선택자: h1 { }

    • 클래스(Class) 선택자: .my-class { }

    • ID 선택자: #myid { }

    • 속성(Attribute) 선택자: [disabled] { }

    • 가상(Pseudo) 선택자: :hover, :first-child 등

  2. 속성(Property): color, font-size 등

  3. 값(Value): 키워드, 크기 단위, 색상 등

CSS의 기본

  • 색상 표기법

    • 키워드: red, blue

    • 16진수: #ff0000

    • RGB/RGBA: rgb(255,0,0) / rgba(255,0,0,0.5)

    • HSL/HSLA: hsl(0,100%,50%) / hsla(0,100%,50%,0.5)

  • 단위

    • 절대 단위(px)

      • 고정된 크기를 지정할 때 사용
      • 디자인 시스템에서 기준 크기 정의에 활용
      • 다양한 화면 크기에서 일관된 레이아웃 제공 필요할 때

    • 상대 단위

      • em: 부모 요소의 폰트 크기를 기준으로 상대적 크기 지정

        • 타이포그래피 관련 속성(font-size, line-height, padding 등)에 주로 사용

      • rem: 루트 요소(html)의 폰트 크기를 기준으로 상대적 크기 지정

        • 전체 레이아웃 요소에 주로 사용

      • %: 부모 요소의 크기를 기준으로 백분율로 지정

        • 박스 크기, 여백 등 다양한 용도로 사용

      • vw, vh: 뷰포트 크기를 기준으로 지정

        • 반응형 디자인, 전체 화면 크기에 맞추는 용도

    • calc() 함수

      • 다른 단위들을 연산하여 새로운 값을 만들 때 사용

      • 예) width: calc(100% - 80px);

      • 고정값과 상대값의 혼합 사용 가능

    • 주 사용 기법은 rem과 % 조합

      • 루트 요소(html)에 font-size 기준값(보통 16px) 설정
      • rem으로 레이아웃 크기 지정, %로 유동적인 크기 설정
      • 예) .container { width: 80%; font-size: 1rem; }

  • 타이포그래피

    • font-family: 글꼴 지정

    • font-size: 크기 지정

    • font-weight: 굵기 지정

    • line-height: 줄간격 지정

    • 웹폰트 @font-face

@ Rendering Logic +

상속과 캐스케이드

  1. 상속(Inheritance)

    • 상속 가능한 속성들(color, font 등)

    • 상속 안되는 속성들(margin, padding 등)

    • inherit, initial 키워드로 상속 제어

    • 상속 가능한 속성의 예시

      body {
  color: #333; /* 모든 텍스트는 #333 색상 */
  font-family: Arial; /* 모든 텍스트는 Arial 폰트 */
}

    • 상속 안되는 속성의 예시

      div {
  margin: 10px; /* 자식 요소에 상속되지 않음 */
  padding: 5px; /* 자식 요소에 상속되지 않음 */
}

    • inherit, initial 키워드 활용

      a {
  color: inherit; /* 부모 요소의 color 값을 상속받음 */
}

button {
  padding: initial; /* 기본 패딩 값 적용 */
}

  2. 캐스케이드(Cascade)

    • 동일한 요소에 적용 시 우선순위 결정

    • 중요도 (!important) > 인라인 > ID > 클래스 > 요소

    • 소스 코드 순서 (마지막에 적용)

    • 우선순위에 따른 적용

      p { color: red; } /* 요소 선택자 */
.text { color: blue; } /* 클래스 선택자 */
#intro { color: green; } /* ID 선택자 */
p#intro { color: orange !important; } /* !important 우선순위 최상위 */

      동일한 p#intro 요소에 여러 스타일이 적용되었을 때, !important > 인라인 > ID > 클래스 > 요소 순으로 우선순위가 적용됩니다.

    • 소스 코드 순서

      p { color: red; }
p { color: blue; } /* 마지막에 작성된 스타일이 적용됨 */

      같은 우선순위일 때, 마지막에 작성된 스타일이 적용됩니다.

박스 모델

  • 박스 구성 요소

    • Content > Padding > Border > Margin

  • 박스 사이즈 계산

    • box-sizing: content-box (기본)

    • box-sizing: border-box (패딩,보더 포함)

  • 마진 상쇄(Margin Collapsing)

    • 인접 수직 마진이 하나로 합쳐짐

Flow 레이아웃

  • Normal Flow

    • 인라인, 블록 레벨 요소 배치

  • Float

    • 요소를 좌우로 이동

    • 텍스트 웹 또는 이미지 주변 레이아웃

  • Display

    • inline, block, inline-block 등

    • none으로 요소 숨김

  • Clear

    • Float 해제

@ Rendering Logic ++

절대/상대 위치 지정

  1. position: static (기본값)
  2. position: relative
    • 자기 자신을 기준으로 오프셋
  3. position: absolute
    • 위치 상속 조상 요소를 기준으로 오프셋
  4. position: fixed
    • 뷰포트를 기준으로 고정 위치
  5. position: sticky
    • 스크롤 위치에 따라 relative/fixed 전환

z-index 관리

  • 쌓임 맥락(Stacking Context)

    • 문서 루트, 위치지정 요소 등이 생성

  • z-index 값이 높을수록 위로 쌓임

  • 겹침 현상 피하기

    • 마이너스 z-index 활용

    • 격리된 쌓임 맥락 활용

오버플로우 처리

  • overflow: visible (기본값)

  • overflow: hidden

    • 넘치는 부분 잘라냄

  • overflow: scroll

    • 스크롤바 강제 표시

  • overflow: auto

    • 내용에 따라 스크롤바 자동 표시

  • overflow-x, overflow-y 축 별 제어

@ Modern Component Architecture

CSS 특정성 문제 해결

  1. 선택자 특정성(Specificity) 계산
    • 인라인 > ID > 클래스 > 요소
    • !important를 지양하고 계층적 특정성 활용
  2. CSS 린팅
    • 특정성 제한 규칙 설정
    • 코드 스타일 자동화
  3. CSS 전처리기(Preprocessor)
    • Sass, Less, Stylus 등
    • 네스팅, 믹스인, 함수 등 추가 기능

컴포넌트 라이브러리 구축

  1. 모듈화와 재사용성
    • 단일 책임 원칙 적용
    • 컴포넌트 별 스타일 분리
  2. 디자인 시스템
    • 색상, 타이포그래피, 그리드 등 통일
    • 관련 토큰(Token) 정의
  3. 스타일 가이드
    • 코드 규칙 문서화
    • 컴포넌트 사례 제시

CSS-in-JS

  1. 개념
    • JS 객체/함수로 CSS 정의
    • 동적 스타일링과 조건부 스타일 지원
  2. styled-components
    • 리액트 컴포넌트 기반 CSS 작성
    • props에 따른 동적 스타일링
  3. 장단점
    • 캡슐화, 동적성, 코드 복잡성 등

@ Flexbox

flex 레이아웃 모델 이해

  1. Flex 컨테이너
    • display: flex;
    • flex-direction
      • row - default
      • row-reverse
      • column
      • column-reverse
    • flex-wrap
  2. Flex 항목
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • align-self
      • stretch
    • align-items
      • flex-end
      • flex-start

다양한 flexbox 레이아웃

  1. 네비게이션 바
  2. 반응형 그리드 레이아웃
  3. 이미지 갤러리
  4. 입력 폼 레이아웃
  5. 같은 높이 레이아웃
  6. 중앙 정렬 기법

반응형 디자인

  1. 뷰포트 기반 단위 (vw, vh)
  2. flex-wrap과 order 활용
  3. flex: 숏핸드 속성
  4. flex-basis, flex-grow 조합

@ Responsive And Functional CSS

모바일/태블릿 최적화

  1. 뷰포트 메타태그
  2. 대응 모드(Response Mode)
  3. 미디어 쿼리 활용

동적 CSS 단위

  1. vw, vh 활용
    • 뷰포트 기반 상대 단위
  2. calc() 함수
    • 사칙연산 가능한 단위 합성
  3. min(), max(), clamp()
    • 최소/최대값, 범위 내 값 지정

CSS 변수

  1. :root에 변수 정의
    • --main-color: #333;
  2. var() 함수로 변수 참조
    • color: var(--main-color);
  3. 컴포넌트 prop에 따른 동적 변경
  4. 브라우저 기본값 제공
    • var(--foo, #ccc)

@ Typography And Images

반응형 이미지 최적화

  1. 벡터 이미지(SVG) 활용
  2. 적절한 포맷(WebP 등) 선택
  3. srcset, sizes 속성
    • 다양한 해상도에 맞는 이미지 서빙
  4. <picture> 요소 - 미디어 조건에 따른 이미지 선택

웹폰트 실무

  1. @font-face로 웹폰트 지정
  2. FOUT(Flash Of Unstyled Text) 방지
  3. FOIT(Flash Of Invisible Text) 방지
  4. 서브셋팅, 유니코드 범위 제한
  5. 가변 폰트(Variable Fonts)
    • 다양한 스타일을 하나의 파일로 제공

@ CSS grid

그리드 vs 플렉스박스

  1. 그리드: 2차원 레이아웃
  2. 플렉스박스: 1차원 레이아웃
  3. 목적에 맞게 적절한 선택

그리드 레이아웃 알고리즘

  1. 그리드 컨테이너
    • display: grid;
    • grid-template-rows/columns
    • grid-gap
  2. 그리드 셀
    • grid-row, grid-column 영역 지정
  3. 그리드 영역
    • grid-template-areas
    • grid-area
  4. 배치 제어
    • justify, align 속성

레거시 브라우저 대응

  1. @supports 기능 검사
  2. Fallback 메커니즘
    • Float 기반 레이아웃
  3. Modernizr, Polyfill 활용
  4. CSS Grid 미적용 시 graceful degradation

@ Animation And Interaction

전환과 애니메이션

  1. 전환(Transition)
    • 단일 상태에서 상태 변화
    • transition 속성
  2. 애니메이션 (@keyframes)
    • 여러 상태 애니메이션
    • @keyframes으로 정의
  3. 타이밍 함수
    • ease, linear, steps 등
    • cubic-bezier 직접 정의

애니메이션 디자인

  1. 스토리보드
    • 프레임별 설계
  2. 애니메이션 원칙
    • 시작/중간/끝 포인트
    • 느리게 시작/가속/천천히 종료
  3. 디자이너-개발자 협업

성능 최적화

  1. 위치 변화가 아닌 속성만 애니메이션
  2. will-change로 힌트 제공
  3. GPU 가속화(transform, opacity)
  4. requestAnimationFrame 활용

@ Little Big Details

그래디언트와 효과

  1. 선형 그래디언트
  2. 원형 그래디언트
  3. 박스 섀도우
    • inset, 확산, 퍼짐 등
  4. 클리핑, 마스크
  5. 필터 효과
    • 블러, 그레이스케일, 대비 등

스크롤과 포커스 개선

  1. 부드러운 스크롤

    • scroll-behavior

  2. 스크롤바 커스터마이징

    • scrollbar-* 속성

  3. :focus 아웃라인 스타일

  4. :focus-visible로 포커스 제어

  5. 디테일이 만드는 차이

    1. 마이크로 인터렉션
      • 드롭 섀도우, 오버레이 등 미세한 효과
      • 호버, 클릭 등 작은 상호작용에 주목
    2. 입체감 표현
      • 원근감, 그래디언트 등으로 3차원 느낌 부여
    3. 브라우저 기본 스타일 재정의
      • 기본 콘트롤(체크박스, 버튼 등) 커스텀
    4. 유저 피드백
      • 로딩 스피너, 성공/실패 메시지 등
    5. 일관된 브랜딩
      • 색상, 타이포그래피, 아이콘 등 통일성

CSS +

@ CSS 방법론

OOCSS(Object Oriented CSS)

  • 객체 지향 원칙을 CSS에 적용한 방법론
  • 재사용 가능한 패턴을 "객체"로 정의하고 구조화
  • 컨테이너와 컨텐츠 개념으로 구분하여 스타일링
  • 구조와 스킨 분리를 통한 유지보수성 향상

BEM(Block Element Modifier)

  • 블록(Block), 엘리먼트(Element), 모디파이어(Modifier) 개념을 기반으로 한 네이밍 컨벤션
  • 블록: 독립적인 컴포넌트 영역 (예: header, menu)
  • 엘리먼트: 블록의 구성 요소 (예: header_logo, menu_item)
  • 모디파이어: 블록/엘리먼트의 상태 또는 스타일 변형 (예: menu_item-active)
  • 명시적이고 모듈화된 CSS 구조 제공

SMACSS(Scalable and Modular Architecture for CSS)

  • CSS 코드의 확장성과 모듈화를 주된 목표로 한 방법론
  • 5가지 카테고리로 CSS를 구분
    • Base: 기본 HTML 요소 스타일 (리셋/정규화)
    • Layout: 레이아웃과 관련된 스타일
    • Module: 재사용 가능한 모듈 컴포넌트 스타일
    • State: 상태 관련 스타일 (is-active 등)
    • Theme: 테마별 스타일 (다크 모드 등)
  • 각 카테고리를 분리하여 구조화하고 명명 규칙 제공
  • 모듈화, 재사용성, 확장성 향상을 위한 CSS 구조화 방법론
    • 코드 중복 제거 및 유지보수성 향상
    • 명확한 역할과 경계를 가진 모듈 단위 스타일링
    • 프로젝트 규모가 커질수록 중요성 증대

@ CSS 아키텍처

컴포넌트 기반 개발

  • 컴포넌트 단위로 CSS를 모듈화하는 방식
  • 각 컴포넌트는 독립적인 UI 요소를 나타냄 (예: 버튼, 모달, 내비게이션 등)
  • 컴포넌트 별로 스타일 파일을 분리하여 관리
    • 컴포넌트의 HTML 마크업, CSS, 자바스크립트를 함께 묶음
    • 재사용성과 유지보수성 향상
  • 단일 책임 원칙 (Single Responsibility Principle) 적용
    • 하나의 컴포넌트는 하나의 역할만 가짐
    • 기능 변경 시 해당 컴포넌트만 수정하면 됨

관심사 분리 원칙 (Separation of Concerns)

  • CSS를 구조(structure), skin(레이아웃), 상태(state)로 분리
  • 구조: 컴포넌트의 HTML 마크업
  • 레이아웃: 위치, 크기, 간격 등 배치 관련 스타일
  • 상태: 컴포넌트의 상호작용과 관련된 스타일 (active, focus 등)
  • 각 관심사별로 CSS를 모듈화하여 관리

모듈화 및 스타일 가이드

  • CSS 코드의 모듈화를 통해 재사용성과 확장성 향상
  • 스타일 가이드(Style Guide) 작성
    • 코딩 컨벤션과 모범 사례를 문서화
    • 네이밍 규칙, 파일 구조, 주석 등 규정
    • 컴포넌트 스타일링 예제 제시
  • 프로젝트 전반의 일관성 유지
  • 신규 개발자 온보딩 시간 단축

@ 브라우저 호환성

벤더 프리픽스 사용 전략

  • 벤더 프리픽스(Vendor Prefix)란?
    • 브라우저 벤더사(Chrome, Firefox, Safari 등)가 자사의 실험적 기능에 추가하는 접두사
    • 예시: -webkit-, -moz-, -ms-, -o-
  • 새로운 CSS 기능이 표준화되기 전 단계에서 활용
  • 구형 브라우저 대응을 위해 프리픽스 버전과 표준 버전 모두 작성
    .box {
  -webkit-transform: rotate(30deg); /* Webkit 브라우저용 */
     -moz-transform: rotate(30deg); /* Mozilla 브라우저용 */
       -ms-transform: rotate(30deg); /* 구 Internet Explorer용 */
        -o-transform: rotate(30deg); /* 구 Opera 브라우저용 */
           transform: rotate(30deg); /* 표준 버전 */
}

점진적 향상 기법 (Progressive Enhancement)

  • 기본적으로 모든 브라우저에서 컨텐츠가 접근 가능하도록 개발
  • 최신 브라우저에서는 향상된 레이아웃과 기능을 제공
  • 레거시 브라우저에서도 기본 콘텐츠와 기능은 제공
    • 예시: 모던 CSS 속성은 구형 브라우저에서 무시됨
  • 기본 마크업 > 브라우저 기본 스타일 > CSS 스타일 > JavaScript 기능 순으로 향상
  • 점진적 향상 원칙에 따라 개발하면 크로스브라우징 문제 완화

Polyfill, Postcss 등 도구 활용

  • Polyfill: 구형 브라우저에서 지원하지 않는 최신 기능을 에뮬레이트 하는 코드
    • 예시: CSS3 서브셋을 구현하는 polyfill.io
  • Postcss: 플러그인을 활용해 CSS 변환, 후처리 작업 수행
    • Autoprefixer: 벤더 프리픽스 자동 추가
    • Cssdb: 패턴 기반으로 레거시 브라우저에 맞게 CSS 변환
  • 개발 단계에서 이러한 도구들을 활용하면 크로스브라우징 이슈 해결에 도움

@ CSS 성능 최적화

규칙 최소화 및 중복 제거

  • CSS 규칙(rule)이 많을수록 브라우저가 파싱하고 적용해야 하는 양이 증가
  • 불필요한 규칙은 제거하고 중복된 규칙은 통합
  • CSS 전처리기의 @extend, @mixin 등의 기능으로 중복 제거 가능
  • 작고 모듈화된 CSS 파일을 통해 HTTP 요청 수 최소화

효율적인 셀렉터 작성법

  • 과도한 특정성(Specificity)은 스타일 오버라이드 어렵게 만듦
  • ID 선택자 지양, 클래스 선택자 위주로 사용
  • 불필요한 자식, descendant 선택자 남용 자제
    /* 비효율적인 선택자 */
body div.container ul#nav li a { ... }

/* 효율적인 선택자 */
.nav a { ... }
  • 키 선택자(key selector) 패턴을 활용하여 재사용성 높임
    .nav { ... }
.nav a { ... }
.nav a:hover { ... }

불필요한 페인트/레이아웃 강제 방지

  • 브라우저 렌더링 프로세스 최적화
    1. 스타일 연산 (Recalculate Style)
    2. 레이아웃 (Layout)
    3. 페인트 (Paint)
  • CSS 변화로 인한 레이아웃 재계산, 리페인트 비용이 큼
  • will-change로 렌더링 관련 힌트 제공
    .animated-element {
  will-change: transform; /* 변환 관련 최적화 힌트 */
}
  • GPU 가속화 (transform, opacity 등)로 렌더링 부담 완화
  • 컴포지팅 기법으로 레이어를 분리하여 빠른 렌더링

이처럼 CSS 규칙과 선택자를 최적화하고, 렌더링 프로세스를 고려한 기법을 활용하면 성능이 향상됩니다. 프로젝트 규모가 커질수록 CSS 성능 최적화가 중요해집니다.

@ 최신 CSS 기능

CSS Grid 레이아웃

CSS 변수(Custom Properties)

CSS Houdini

  • 새로운 CSS 기능 확장 방법

Container Queries

  • 컨테이너 기반 반응형 queries