Lee Junghan

삶은 나를 발견하는 과정이 아니라, 나를 창조하는 과정이다

CSS 관련 분류 전 글들

트렌드

State of CSS

  • Css에 대해 알고 있는 모든 것을 잊어버리세요. 아니면 적어도, 많은 것을 재고할 준비가 되어 있어야 합니다. 저처럼 10년 이상 CSS를 써오셨다면, 2020년의 CSS는 여러분이 익숙했던 것과 전혀 달라 보입니다.

스텍오버 플로우 2020년 기술 설문 조사

2021.02.1 작성 Things You Can Do With CSS Today

  • CSS property: grid-template-rows: masonry
  • The :is Selector
  • Logical CSS Functions For Sizing
  • Specific Responsive Units For Typography
  • Updated Text Decoration Control
  • Scroll Margin
  • Aspect Ratio
  • Content-Visibility And contain-intrinsic-size

가이드 Guide

###

refactoring 리팩토링

특이성 지옥

  • 다음 말이 울림이 있었다 개발자는 종종 자신의 규칙이 지배 할 것이라고 10000% 확신하기 위해 지나치게 구체적인 선택기를 작성 합니다.

CSS 리팩토링: 소개(1부)

  • 2부는 아직 …(2021-08-04)
  • 고품질 CSS 코드를 작성할 수 있는 최고의 도구는 규율, 세부 사항에 대한 관심, 일반적인 CSS 지식 및 기술 입니다

  1. 아키텍처 패턴을 학습합니다.

  2. 연습하고 개선하십시오.

  3. 실수로부터 배우기.

    • 저를 믿으세요. 처음 시작할 때 정말 품질이 좋지 않은 CSS를 작성하게 될 것입니다. 제대로 하려면 몇 번 시도해야 합니다. 잠시 시간을 내어 무엇이 잘못되었는지 생각하고, 약점을 분석하고, 어떻게 다르게 할 수 있었는지 생각하고, 앞으로 같은 실수를 피하도록 노력하십시오.

  • cssstats.com

    • CSS 코드베이스 품질에 대한 유용한 개요를 제공하는 무료 도구

  • Wallace

    • CLI
    • 파일 크기, 규칙 및 선택기 수, 선택기 유형 및 복잡성 등과 관련된 문제를 식별하는 데 사용할 수 있는 다소 기본적이지만 유용한 CSS 통계 및 개요를 제공하는 편리한 도구

  • Wallace 시작회 Web Service

단위

당신은 모를 수도 있는 CSS의 7가지 단위

  • rem
  • vh, vw
  • vmin, vmax
  • ex, ch

CSS 값 과 단위 t

length

pixcel

devicePixelContentBox를 사용하여 완벽하게 픽셀(pixel-perfect) 렌더링하기

  • devicePixelRatio

    const cvs = document.querySelector('#myCanvas')

// 캔버스의 CSS 픽셀 크기를 가져오기
const rectangle = cvs.getBoundingClientRect()

// 실제 픽셀로 변환
cvs.width = rectangle.width * devicePixelRatio
cvs.height = rectangle.height * devicePixelRatio
  • devicePixelContentBox
  • ResizeObserver

CSS 의 한계

CSS가 접근성을 다루기에 충분하지 않은 이유

다음 요소의 한계를 말 한다, 해결 demo 를 제공한다

  • tooltip
  • modal
  • tab
  • carousels
  • dropdown

분류 전

CSS의 오버플로 문제

  • 오버플로 문제란 무엇입니까?
  • 오버플로를 발견하는 방법
  • 일반적인 오버플로 문제
  • 고정 너비 요소 overflow-x:hidden을 Body에 적용하는 것이 좋은 생각입니까?
  • CSS에서 오버플로를 피하는 방법

업데이트:

참고