← 기능 섹션으로 돌아가기
Free

CSS 검사기

CSS Inspector는 마우스를 올리는 것만으로 모든 요소의 전체 CSS 속성을 볼 수 있는 강력한 개발자 도구입니다. 클릭하여 스타일을 고정하고, 직접 편집하고, 변경 사항이 페이지에 즉시 반영되는 것을 확인하세요.

레이아웃 문제를 해결하든 마음에 드는 웹사이트를 연구하든, CSS Inspector는 깨끗한 플로팅 패널에서 필요한 모든 것을 제공합니다. 브라우저 DevTools를 열지 않고도 쉽게 검사할 수 있습니다.

라이브 미리보기
example.com/landing-page CSS Inspector: ON
Hover any element to inspect its CSS
Sign Up Now
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS Properties Locked
<button> .cta-primary
BOX MODEL
margin: 0
padding: 12 24
180 × 48
Typography
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Spacing
displayinline-flex
padding12px 24px
border-radius8px
Appearance
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copy All CSS Edit
주요 기능

실시간 속성 보기

요소 위에 마우스를 올리면 글꼴, 크기, 색상, 간격 등을 즉시 볼 수 있습니다.

클릭하여 고정

요소를 클릭하여 패널을 고정하고 사라지지 않게 하여 상세한 검사가 가능합니다.

라이브 스타일 편집

값을 더블 클릭하여 직접 변경할 수 있습니다. 편집 내용은 페이지에 즉시 반영됩니다.

원클릭 복사

개별 속성 또는 전체 디자인 스타일 블록을 클릭 한 번으로 클립보드에 복사할 수 있습니다.

박스 모델 시각화

마진, 보더, 패딩 값을 시각적으로 확인하세요.

요소 크기 및 위치

페이지 상의 요소 너비, 높이 및 위치를 표시합니다.

검사 가능한 항목

CSS Inspector는 40개 이상의 속성을 보여줍니다:

타이포그래피

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

박스 모델

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

레이아웃

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

배경

  • background-color
  • background-image
  • background-size
  • background-position

효과

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
주요 활용 사례

레이아웃 문제 해결

정렬되지 않은 요소를 정밀하게 검사합니다.

기존 디자인 학습

즐겨 찾는 웹사이트의 스타일을 연구합니다.

빠른 디자인 실험

코드를 작성하기 전에 변경 사항을 테스트합니다.

클라이언트 리뷰

회의 중에 실시간 변경 사항을 보여줍니다.

스타일 추출

새 요소에 대한 CSS 코드를 쉽게 얻을 수 있습니다.

사용법
1

CSS Inspector 활성화

DevSuite Pro 도구 모음에서 CSS Inspector 아이콘을 클릭합니다.

2

마우스 올려서 검사

커서를 요소 위로 이동하여 속성을 확인합니다.

3

클릭하여 고정

요소를 클릭하여 패널을 고정합니다.

4

스타일 편집

값을 더블 클릭하여 조정합니다.

5

복사 및 사용

업데이트된 코드를 복사하여 프로젝트에서 사용하세요.

시작할 준비가 되셨나요? CSS 검사기?

DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.

Chrome에 추가 Edge에 추가 Firefox에 추가