CSS Reference - 개발자 도구 CSS 기본 기능

CSS Reference

Select an element

• 원하는 요소에서 우클릭 후 > Inspect
• 개발자 도구에서 요소 선택
• Command+Shift+C (Mac) 또는 Control+Shift+C (Windows, Linux) 후 원하는 요소 선택
• 개발자 도구의 DOM Tree에서 원하는 요소 선택
• 개발자 도구 Console 에서 document.querySelector('p') 입력 > 콘솔 결과에서 우클릭 후 Reveal in Elements panel 클릭

View CSS

View the external stylesheet where a rule is defined

Styles 팬에서, CSS규칙 옆의 link를 클릭하면 외부 스타일 시트를 볼 수 있음. 만약, 스타일 시트가 minify 되어 있다면, minified file 보는 법을 참조

View only the CSS that's actually applied to an element

1. 요소 선택
2. Elements 패널의 Computed 탭에 가면 선택 요소에 실제 적용되는 css규칙만 확인할 수 있음.

• 상속된 css를 모두 확인하려면 Show All 체크박스를 클릭

View CSS properties in alphabetical order

Computed탭을 이용

View inherited CSS properties

Computed의 Show All 체크박스를 선택

View an element's box model

Styles 탭 제일 하단에 Box Model 다이어그램을 통해 확인 가능하고, 조정 원하는 값을 더블클릭하고 변경 가능

Search and filter an element's CSS

Styles 과 Computed의 Filter 텍스트 박스를 통해 원하는 css규칙 검색 또는 필터링 가능

Toggle a pseudo-class

1. 요소 선택
2. Elements 패널의 Styles 탭으로 이동
3. :hov 클릭
4. 원하는 가상 선택자 클릭

View a page in print mode

1. Command Menu를 열고
2. Rendering을 타이핑하고 Show Rendering를 선택
3. Emulate CSS Media 드랍다운 상자에서, print를 선택

View used and unused CSS with the Coverage tab

1. 개발자 도구를 열고 > Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, Chrome OS)
2. coverage을 타이핑하고 Show Coverage를 클릭하면 Coverage 탭이 생김
3. Start Instrumenting Coverage And Reload Page 를 클릭. 페이지를 다시 읽어오면 브라우저가 읽어오는 각 파일의css 또는 javascript 정보가 얼마나 많이 이용되는지 요약 정보를 제공함. 녹색은 사용하는 css를 붉은색은 사용하지 않는 css를 나타냄.
4. 표시되는 각 파일을 클릭하면 줄바꿈이 된 상세정보 확인 가능

Force print preview mode

Force DevTools Into Print Preview Mode.

Change CSS

Add a CSS declaration to an element

Add an inline declaration

1. 요소 선택
2. Styles팬에서, element.style 중괄호 사이를 선택.
3. 원하는 속성명과 값을 입력
4. DOM Tree에서 style 속성이 적용된 것을 확인

Add a declaration to a style rule

1. 요소 선택
2. Styles 팬에서, 원하는 추가를 원하는 곳을 선택.
3. 속성명과 값을 입력

Change a declaration name or value

더블클릭에서 속성명과 값을 바꿀 수 있음.

Change declaration values with keyboard shortcuts

• 0.1단위 증가 : Option+Up (Mac) / Alt+Up (Windows, Linux)
• 10단위 증가 : Shift+Up
• 100단위 증가 : Shift+Command+Up (Mac) / Shift+Page Up (Windows, Linux)

Add a class to an element

1. DOM Tree에서 요소 선택
2. .cls 클릭
3. Add New Class 텍스트 상자에 클래스 이름 입력

Toggle a class

1. DOM Tree에서 요소 선택
2. Add New Class 아래에 요소에 적용되는 모든 클래스 표시
3. 체크박스를 토글

Add a style rule

1. 요소를 선택
2. New Style Rule 를 클릭 > element.style 아래에 새로운 규칙이 추가.

Toggle a declaration

Change colors with the Color Picker

1. 요소선택
2. Styles 탭에서, 변경을 원하는 color 또는 background-color 선언을 찾는다. color 또는 background-color 값 옆에 색을 미리보여주는 네모 박스를 찾는다.
3. 색 미리보기 네모를 클릭하면 Color Picker가 활성화된다.

Change angle value with the Angle Clock

1. 요소 선택
2. Styles 탭에서, 변경을 원하는transform 또는 background 선언을 찾는다. 각도 값 옆에 Angle Preview 박스를 클릭한다.
3. Angle Clock 미리보기를
4. Angle Clock 을 클릭 또는 스크롤해서 값을 조정한다.

출처 :크롬 개발자도구 공식 가이드