프론트엔드 및 모바일
HTML·CSS 개발자 도구
프론트엔드 마크업과 스타일은 시각적인 면과 구조적인 면에서 동시에 무너집니다. 정리 안 된 코드, 기억으로 쓰기 어려운 레이아웃, 명시도가 다투는 선택자, 직접 만들어야 할 이징 곡선 같은 것입니다.
CSS 정리와 검사, HTML 포맷터와 검사기, JavaScript / TypeScript 포맷터가 구문 오류를 짚어 줍니다. CSS Grid / Flex 레이아웃 생성은 그려서 코드를 얻고, CSS 명시도 계산기는 :is()와 :where()까지 반영해 점수를 비교합니다.
도구 12개
HTML / CSS Dev Tools 도구 FAQ
:is()가 예상과 다르게 CSS 명시도에 반영되는 이유는?
:is()는 인자 중 가장 명시도가 높은 것을 가져가지만 :where()는 항상 0으로 계산됩니다. CSS 명시도 계산기가 둘의 반영 방식을 정확히 보여줍니다.
디자인을 CSS Grid나 Flexbox 레이아웃으로 어떻게 옮기나요?
속성을 기억에 의존해 쓰는 대신 CSS Grid / Flex 레이아웃 생성으로 레이아웃을 그린 뒤 생성된 HTML과 CSS를 복사하면 값을 손으로 맞추는 것보다 빠릅니다.
커스텀 CSS 이징 곡선을 만드는 가장 쉬운 방법은?
cubic-bezier() 함수는 곡선을 보지 않고는 가늠하기 어려운 숫자 네 개로 정의됩니다. cubic-bezier 생성기가 핸들을 드래그해 곡선을 만들고 미리 보여줍니다.