크롬 브라우저에서 개발자 도구를 열면 다음과 같은 메뉴가 나오게 되는데 그중 화살표 이미지를 누르면 페이지의 요소를 선택해서 검사할 수 있다.
이런 식으로 각 요소들이 어떤 방식으로 구성됐는지 검사 할 수 있는 기능이다.
Elements는 html의 구조를 보여준다.
Styles는 어떤 css가 적용이 됐는지 볼 수 있고
적용된 css의 체크 표시를 통해서 css를 적용하거나 없애거나 할 수도 있다.
또 CSS를 수정해서 웹페이지의 레이아웃을 수정해볼 수도 있다.
Computed에서는 현재 레이아웃의 여백 등을 볼 수 있다.
'CSS > css 기초' 카테고리의 다른 글
| CSS 기초 공부(12) - background-clip (0) | 2025.03.11 |
|---|---|
| CSS 심화 공부(1) - Float CSS, Clear CSS (0) | 2025.03.11 |
| CSS 기초 공부(11) - input 태그 (1) | 2025.03.11 |
| CSS 기초 공부(10) - 이미지 (0) | 2025.03.11 |
| CSS 기초 공부(9) - 텍스트 스타일 (0) | 2025.03.11 |