반응형
크롬 브라우저를 이용하여 서핑을 하다가 우연히 괜찮은 사이트를 찾았다고 가정한다면 기본적인 프로그래밍에 관심있는 사람이라면 소스코드를 한번 보고 싶을 것이다.
보통은 크롬 페이지 소스를 보기위해서는 크롬 개발자 모드인 F12 에 대해서 알고 있을 것이다. 즉 F12 를 누르게 되면 소스와 디테일한 페이지에 대한 설명들이 나온다. 그럼 다른 방법은 없는 것일까? 크롬 페이지의 소스코드 보는 방법에 대해서 한번 알아보도록 하겠습니다.
| 요약 1. Ctrl + U 2. F12 (개발자 도구) or Ctrl + Shift + I (MAC - Command + Option + I) |
간단 소스 코드 보기 (Ctrl + U)
Ctrl + U 는 가장 간단하게 코드를 보여주는 단축키 입니다.
개발자 도구
크롬 페이지의 특정 위치에서 F12 (개발자 도구) or Ctrl + Shift + I (MAC - Command + Option + I)를 누르면 화면의 우측에 보통 개발자 도구 화면이 나오게 됩니다.
개발자 도구 활용
패널 메뉴 중 가장 많이 사용하는 메뉴들에 대해서 살펴보겠습니다.
| 1. 검사도구(Inspect) : 검사하고 싶은 영역을 선택하게 도와주는 도구 2. 디바이스 모드(Device mode) : 화면을 디바이스별로 확인하도록 도와주는 도구 3. Elements 패널 : 태그를 분석하고 실시간으로 수정할 수 있도록 도와주는 도구 |
012
- 검사도구
검사도구는 웹페이지를 구성하는 Elements를 쉽게 찾을 수 있도록 도와주는 도구입니다. 왼쪽 페이지 뷰에서 원하는 Elements 를 선택합니다. 현재 아래의 화면에서는 "달새는 달만 생각한다"의 문구를 선택하고 있습니다. 선택된 문구의 Elements의 태그 속성들은 오른쪽 화면에서 그 결과를 살펴볼 수 있습니다.
- 디바이스 모드
- Elements 패널
웹페이지에서 어떤 구조(HTML, CSS, ... )로 구성이 되어있는지 살펴보는 패널이며, 선택된 태그의 모든 CSS 가 표시되는 곳인 Styles(오른쪽 상단), 선택한 태그의 최종 CSS가 표시되는 곳인 Computed(오른쪽 상단) 등으로 구성 되어져 있습니다.
Computed는 태그의 부모와 자식 간의 관계나 우선순위 등으로 최종적인 CSS 를 표시해 줍니다.
반응형
'Digital Tools > Chrome' 카테고리의 다른 글
| 크롬(Chrome) 활용(6) - gmail도 수신확인을 할 수 있다? Mailtrack 사용법 (0) | 2021.05.19 |
|---|---|
| 크롬(Chrome) 활용(5) - 크롬 안전 로그아웃 및 공용 PC 주의점 (0) | 2021.05.19 |
| 크롬(Chrome) 활용(4) - 여러 개의 탭이 포함된 창을 닫아 버렸을 때 복구 방법 (0) | 2021.05.19 |
| 크롬(Chrome) 활용(3) - 크롬 탭 그룹 (Tab Groups) (0) | 2021.05.19 |
| 크롬(Chrome) 활용(1) - 크롬화면에서 고갱을 만나다 (0) | 2021.05.07 |