웨일 Whale 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기

웨일 Whale 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기

 

환경: Chrome

 

다른 사이트의 제작 기법을 보고 싶다면 HTML 과 Javascript, CSS 소스를 볼 수 있어야 합니다. 웨일(Whale) 브라우저는 웹페이지 소스를 분석하는데 도움을 주는 개발자 도구를 제공하고 있습니다. 개발자 도구는 단순히 소스만 보여주는 것이 아니라 화면을 분석하는데 필요한 여러 기능들을 지원합니다. 다른 어떤 개발툴보다 뛰어나기 때문에 웹 페이지 분석할 때 항상 개발자 도구를 사용하고 있습니다. "크로미움" 을 기반으로 만들었기 때문에 크롬의 개발자도구와 인터페이스가 동일합니다. 그래서 크롬을 사용해본 경험이 있다면 아래 설명을 보시지 않아도 됩니다.

 

◎ 웹 페이지 소스 보기

 

▼ 간단하게 소스를 확인하는 방법은 다른 브라우저와 동일합니다. 웹 페이지에서 오른쪽 마우스를 누르면 나타나는 페이지 소스 보기 메뉴를 이용하는 것입니다. 바로 실행하는 단축키는 Ctrl + U 입니다. 오른쪽 마우스를 클릭했는데도 다른 메뉴가 나타난다면 단축키를 이용하세요.

 

▼ 페이지 소스보기 이후에는 HTML 소스가 있는 새로운 탭이 나타납니다. 단, 오른쪽 마우스를 누르면 나타나는 빠른 실행 메뉴 보기가 차단된 사이트는 나타나지 않습니다. 이런 경우에는 브라우저에서 제공하는 개발자 도구를 이용해야 합니다. 

 

◎ 개발자 도구로 소스 분석하기

 

▼ 두 번째는 개발자 도구를 통해서 확인하는 방법입니다. 주로 소스를 분석하기 위한 도구로 오른쪽 상단에 더보기 > 기타 > 고급 기능 > 개발자 도구 메뉴를 클릭해서 창을 띄울 수 있습니다. 단축키는 Ctrl + Shift + I 혹은 F12 입니다. 

 

▼ F12 단축키를 눌러 개발자 도구를 띄우면 화면 하단이나 양 옆으로 브라우저 내에 창이 나타납니다. 위치는 사용자가 정할 수 있으며, 새로운 창으로 띄울 수도 있습니다. 소스는 Elements 탭에서 볼 수 있습니다. 

 

▼ 개발자 도구의 창 위치 조절이나 새 창으로 띄우는 옵션은 오른쪽 상단 더보기 하위에 4개의 메뉴입니다. 

 

▼ Elements 탭에서 오른쪽 영역의 창에는 디자인 소스인 CSS 코드를 보여줍니다. 특정 태그에 적용된 디자인 코드로 상단 파일 링크를 클릭하면 실제 소스 파일로 이동할 수 있습니다. 

 

▼ CSS 소스가 들어간 실제 파일의 내용을 보고 싶다면 Sources 탭으로 이동해야 합니다. 

 

◎ 사용자가 원하는 특정 위치의 소스 보기

 

▼ 개발자 도구의 유용한 기능 중 하나는 사용자가 특정 웹 페이지 영역의 소스를 마우스 클릭 한번으로 찾아볼 수 있다는 것입니다. 개발자 도구 왼쪽 상단 끝에 화살표 아이콘을 클릭해서 파란색으로 전환합니다. 

 

▼ 다음 웹 페이지의 특정 영역에서 소스를 보고 싶은 곳이 있다면 마우스로 클릭합니다. 개발자 도구에서는 화면에서 마우스로 선택한 영역의 소스로 이동한 후 사용자가 구분하기 쉽도록 회색으로 블록 처리합니다.