인터넷 html 파일 열기, 크롬 개발자 도구 이용하는 방법.

웹사이트는 운영되고 있는 한, 모든 사람들(접속자)들에게 오픈되어 있는 내용이기도 합니다. 그렇기에 멋진 페이지를 보면, 웹 개발에 흥미가 있는 사람이라면 놓칠 수 없는 부분이기도 합니다. 굳이 개발자가 아니어도 어느정도 흥미가 있다면 들여다 보고 싶어질 수 있습니다.

 

어떻게 하면 html 파일을 열어볼 수 있을까요. 방법은 간단합니다. 이미 많은 개발자들도 활용하고 있는 방법입니다. 사용하는 웹브라우저를 이용하여 해당 페이지의 html, css구조를 파악할 수 있습니다. 또는 html, css 수정을 통해 즉각적으로 반영되는 모습을 확인할 수 있습니다.

 

이런 방법을 이용해 웹 디자인 개발에 활용할 수도 있습니다. 인터넷 html 파일 열기 방법은 다양한 웹브라우저의 개발자 도구로 이용해 볼 수 있지만, 여기서는 크롬 브라우저를 이용하는 방법을 살펴보도록 하겠습니다. 해당 방법은 크게 2가지로 구분될 수 있습니다.

 

 

인터넷 html 파일 열기, 크롬 웹브라우저의 개발자 도구 이용하는 방법.

• 크롬 웹브라우저의 개발자 도구에 접근하는 2가지 방법
  1. 설정 메뉴를 이용하는 방법.
  2. 단축키를 이용하는 방법.

크롬 개발자 도구를 활성화 시키는 방법은 위에서 제시한 두가지 방법으로 정리 될 수 있습니다. 마우스를 이용해 웹브라우저에서 지원하는 설정 메뉴를 이용하는 방법입니다. 다음으로는 해당되는 페이지에서 단축키를 이용하는 방법이 있습니다. 사실, 어떤 프로그램도 두가지의 방법으로 기능을 활성화 시킬 수 있습니다.

 

1. 설정 메뉴를 이용하는 방법.

크롬 웹브라우저를 실행해 원하는 페이지에 접속합니다. 그리고, 브라우저에서 기본적으로 지원하는 기능인 '설정' 메뉴에 접근합니다. 설정 메뉴 중, '도구 더보기'의 메뉴로 마우스를 가져가면 하위 메뉴를 볼 수 있습니다. 여기서, '개발자 도구'를 선택합니다. 오픈된 페이지의 html과 css 요소들을 확인할 수 있습니다.

 

2. 단축키를 이용하여 크롬 개발자 도구를 활성화 하는 방법.

어떤 프로그램이든 단축키는 유용하게 활용되는 부분입니다. 단축키를 잘 사용하면 빠르게 작업을 수행할 수 있으며, 작업 동선을 간소화 할 수 있는 장점이 있습니다. 크롬 개발자 도구 단축키는 다음과 같습니다.

• ctrl + shift + I : 기본적인 크롬 개발자 도구 창을 열 수 있습니다.
• ctrl + shift + c : 개발자 도구를 열고, 페이지에서 요소를 선택할 수 있는 기능을 활성화 합니다.
• f12 : 기본적인 크롬 개발자 도구 화면을 열 수 있습니다.
• 위에서 언급한 방법으로 원하는 페이지의 html, css 구조를 볼 수 있는 개발자 도구 창을 확인할 수 있습니다.

 

tips①!!

개발자 도구를 활용하다보면 답답한 부분이 생길 수 있습니다. 페이지의 전체 화면은 정해져 있는데, 개발자 도구 창이 한쪽에 열리면서 볼 수 있는 영역이 작아지게 됩니다. 이런 경우, 크롬 개발자 도구의 기능을 활용해 볼 수 있습니다. 다시 말해, 개발자 도구 화면의 위치를 변경하는 방법입니다. 기능은 4가지 레이아웃이 있습니다.

• 오른쪽에 배치
• 아래에 배치
• 왼쪽에 배치
• 새창으로 열기

 

- 개발자 도구 화면 위치 기능 사용하는 방법.

위 사진으로 모든 것을 설명할 수 있습니다. 친절하게 간결한 아이콘으로 잘 설명되어 있는 모습을 볼 수 있습니다. 왼쪽부터 새창으로 열기, 왼쪽 배치, 아래 배치, 오른쪽 배치의 설정을 할 수 있습니다. 사용하는 환경에 맞춰 기능을 활용하면 도움이 될 수 있습니다.

 

tips②!!

번외의 내용입니다. 간혹 페이지에 따라 개발자 도구를 막아둔 경우도 있습니다. 이런 경우 굳이 개발자 도구를 이용해 html, css를 보지 말란 운영자의 뜻이 담겨 있습니다. 하지만, 호기심과 학구열이 강하고, 꼭 봐야겠다면 활용해 볼 수 있는 방법입니다. 추천하진 않습니다.

• 별도의 페이지를 준비합니다.
• 크롬 개발자 도구를 활성화 합니다.
• 원하는 페이지의 url을 입력한 후, 접속합니다.
• 이 마저도 막아뒀다면 포기하는 것을 추천합니다.

 

마치며.

많은 것이 오픈되어 있는 인터넷 세상이지만 페이지 운영자의 권리는 존중되어야 합니다. 보지 말라는 의미로 조치를 취해 뒀는데도 불구하고 굳이 보려는 것은 그렇게 좋아보이는 모습은 아닐지 모릅니다. 해당 부분은 사용자의 선택에 따라 달라질 수 있는 부분일 것이며, 그 책임 또한 선택한 당사자가 져야할 부분일 수 있습니다. 서로의 매너를 지키는 선에서 활용한다면 보다 깨끗하고 아름다운 인터넷 환경이 조정되지 않을까 생각합니다.