HTML – 웹 개발자 도구

이번 시간에는 웹개발자 도구라고 하는 것에 대해서 알아보겠습니다 웹 개발자 도구라고 하는 것은 우리가 웹 개발을 하는 것에 있어서 필요한 여러 가지 분석작업 또는 실시간으로 무언가를 수정해서 테스팅하는 이런 작업들을 도와주는 도구인데요

최근에 출시된 브라우저들에는 기본적으로 각자 나름대로 웹개발자 도구를 탑재하고 있고 이런 도구들은 기본적으로 이전에 firefox 의 plugin 중에 하나였던 firebug라고 하는 아주 전설적인 개발 툴 도구가 있습니다 그거 영향을 받았기 때문에 사용방법은 대체로 비슷비슷합니다 이번 시간에 제가 다룰 것은 그 중에서 크롬 웹브라우저에 탑재되어 있는 개발자 도구라는 것을 살펴볼 거구요 그 중에서도 html과 관련된 부분만 살펴볼겁니다 하지만 여러분이 더 많은 정보가 필요하시면 뭐 javascript css 이런거에서도 사용할 수 있는 내용들이 필요하시면 요기 제가 링크를 걸어놓은 크롬개발자도구 수업 바로가기로 찾아가시면 수업이 있으니까요 그걸 참조하시면 되겠습니다 자 크롬에서 개발자 도구를 실행할 때는 여러 가지 방법이 있는데 그 중에서 제일 간편한 것은 여러분이 분석하고 싶은 웹페이지 상에서 그 태그에 해당되는 부분이 있잖아요 예를 들면 요기를 분석하고 싶다 그럼 여기에다가 마우스 포인트를 올려놓고 그리고 오른쪽 클릭을 하시면 보시는 것처럼 '검사'라고 하는 것이 있습니다 요걸 누르시면 보시는 것처럼 새로운 창이 뜨면서 지금 제가 선택한 웹개발자도구 라는 이 부분이 있죠 바로 이 영역에 해당되는 html 코드가 자동으로 선택이 됩니다 만약에 제가 여기 있는 html이라고 되어 있는 부분에서 오른쪽 클릭하고 검사를 누르면 보시는 것처럼 아래쪽에는 여기 있는 html이라고 하는 저 문서를 감싸고 있는 a tag를 자동으로 선택해주는 것을 볼 수 가 있죠 자 그래서 여러분이 어떤 웹사이트에 방문했을 때 그 웹사이트에 html 코드가 보고 싶은 경우가 있단 말이에요

학습적인 용도일 수도 있고 아니면 다운로드를 막아놓은 이미지를 다운로드 하고 싶다거나 고런 경우엔 이제 여러분들이 html 코드를 보시면 그런 것들을 할 수가 있는데 그때 사용할 수 있는 기능이 바로 이런 기능입니다 여러분이 만든 사이트가 아니라도 보시는 것처럼 html코드를 볼 수 가 있어요 물론 이런 방법도 있습니다 대부분의 웹브라우저는 이렇게 웹페이지에서 오른쪽 클릭을 하시면 보시는 것처럼 '페이지소스 보기' 라고 하는 항목이 있거든요 이걸 누르시면 보시는 것처럼 현재 웹 페이지에 있는 모든 html 코드를 여러분들이 볼 수 있는 기능을 브라우저들은 다 제공하고 있으니까요 여러분들도 이런 기능들을 잘 활용하셨으면 좋겠구요 자 이 웹개발자도구를 사용하면 어떤 걸 할 수 있냐면 보시는 것처럼 html을 볼 수 있는 것은 물론이고 그리고 어떤 html에 태그, 예를 들면 요기 있는 html이라는 태그가 검사를 해서 왜 이런 모양으로 생겼는지 이런 것들을 여러분이 알아내는 것은 상당히 까다롭거든요

그런데 보시는 것처럼 요 태그를 선택하면 오른쪽 부분에 우린 물론 css를 배우지 않았습니다만 어떠한css 의 코드가 적용이 되서 그 코드의 영향을 받아서 이런 모양을 나타내고 있는지를 보여주는 화면이 바로 오른쪽에 있는 styles 탭 부분입니다 그리고 여기에 보시면 이렇게 조그많게 toggle Device mode 라고 되어있죠 toggle은 스위치를 누르면 켜지고, 다시 누르면 꺼지는 스위치들을 뜻하구요 디바이스는 장치라는 뜻이죠 그래서 여기있는 toggle을 누르면 이런게 생기죠 다시 누르면 없어지구요 눌렀을때 이렇게 생긴 화면이 뜨는데 이 화면이 뭔지를 좀 살펴보면 이거는 뭐냐면 여러분이 지금 웹사이트에 접속한 브라우저가 Desktop 환경이면 데스크탑 환경에 해당되는 웹 페이지를 여러분이 만들기에는 좋을 겁니다 그런데 오늘날에는 굉장히 다양한 크기의 화면을 그 장치들이 가지고 있잖아요 스마트폰부터 시작해서 태블릿이 있을 수 있고 대형 tv 도 있을 수 있죠 그런 경우에 대응하는 것이 싶지가 않아요

웹사이트를 구축하는 과정에서 그렇다고 우리가 스마트폰에서 개발할 순 없잖아요 그래서 다양한 화면 크기를 시뮬레이션 해 주는 그런 도구입니다 여기 보시면 디바이스라고 되어 있는 부분이 iPad라고 되어 있는데요 ipad를 선택하시면 여러분의 웹사이트가 ipad에서는 이렇게 보인다 라는 그런 뜻이에요 그리고 이것을 눌러서 예를 들면 뭐가 있을까요 스마트폰을 한번 선택해 볼까요 아이폰 6를 누르면 보시는 것처럼 아이폰 6에서는 이런 화면으로 보이게 된다 이런 뜻이에요 그래서 여러분이 이렇게 터치를 하시면 확대도 되고 모바일 디바이스처럼 이런 기능들을 제공하는 것이 '디바이스 모드'라고 합니다 요 위에 있는 이것을 랜드스케이프로 바꾸면 보시는 것처럼 세로로 디바이스가 뒤집힌 것처럼 화면에 보이구요

이런 여러가지 기능들을 제공하고 있습니다 이걸 끄고 싶으면 이걸 다시 누르시면 요걸 다시 누르시면 꺼집니다 자 한 가지만 더 설명드리면 네트워크라고 되어 있는 부분 보이시죠 네트워크라고 하는 것은 여러분의 웹브라우저는 웹서버에 설치되어 있는 html을 웹 서버로부터 받아서 화면에 표시해주는 장치입니다 여러분의 웹 브라우저와 웹 서버가 서로 주고받는 여러가지 데이터들을 경우에 따라선 여러분들이 체크해야 할 필요가 생길 수 있습니다 그때 사용하는 도구가 바로 여기 있는 네트워크 탭 밑에 있는 도구인데요 자 예를 들어서 여러분이 어떤 html 파일이 있는데 그 파일 안에 보시는 것처럼 img 태그를 통해서 이미지를 웹페이지에 삽입했다 그러면 웹 브라우저는 어떻게 동작하냐면 일단 여기에 있는 imghtml 이라는 파일을 다운로드 받아서 거기에 포함돼 있는 html 코드를 해석해서 웹페이지를 만들어줄 겁니다

img라고 하는 이름의 태그를 만나면 웹 브라우저는 어떻게 동작하냐면 imgjpg 라고 하는이미지를 여러분들 몰래~ 조용히 웹 서버에 접속해서 다운로드 받습니다 그리고 그것을 여기 있는 img 태그가 위치하고 있는 그곳에 다운로드 받은 이미지를 표시해주는 방식으로 웹브라우저가 동작한다는거죠 즉, 다운로드 받는 과정을 여러분들 몰래하기 때문에 만약 여러분이 만드는 웹페이지가 굉장피 많은 파일들을 다운로드 받는다면 그건 img 태그가 될 수도 있고 iframe일 수도 있고 또는 자바 스크립트와 css 파일 같은 거일 수도 있어요 우리는 배우지 않았지만 그런 경우에 무엇이 누락됐는지 또는 무엇이 지연되서 또는 다운로드가 늦어져서 웹페이지가 화면에 표시되는 것이 느려지고 있는지 이런 것들은 분석하는 것이 대단히 까다롭습니다 그때 우리를 도와줄 수 있는 도구가 바로 네트워크 도구인데요 자, 제가 방금 보셨던 img

html 파일 (이거죠) 이것을 열면서 네트워크 탭에 어떤 변화가 생기는지 한 번 볼게요 첫번째, imghtml이 나오죠 이건 imghtml을 다운로드 받았다는 것이고, 내용은 이것이라는 뜻이구요 그 다음 여기있는 img sic 라는 부분으로 인해서 바로 두번째 다운로드를 시작하는데 그것은 이 프리뷰로 보면 이렇게 생긴 이미지다 하는 것을 보여주는 화면이죠 자, 이렇게 해서 크롬이 가지고 있는 웹 개발자도구에 대한 간단한 사용법을 알아봤는데요 요건 이제 html 에 국한된 얘기들만 제가 간단하게 소개해드린 것이고 여러분들이 더 많은 내용이 필요하시면 여기 있는 링크를 찾아 보시면 됩니다

그래서 이런 도구들이 여러분들이 처음부터 필요한 건 아닙니다 하지만 웹 사이트를 구축하는 과정에서 웹이라는 것은 정말 빠른 속도로 커지고 복잡해집니다 그럼 그렇게 복잡해진 상황에서 발생하는 문제들을 여러분들이 찾아내고, 복잡해진 코드를 단순화시키고 이런 것들은 굉장히 중요한 것들이에요 왜냐하면 인간은 감당할 수 있는 것만큼만 감당할 수 있기 때문이죠 이런 도구들을 사용하면, 우리가 감당할 수 있는 것들이 훨씬 더 커지고 여러분들은 더욱 복잡한 웹페이지 또는 복잡한 웹사이트에 도전할 수 있게 되기 때문에 이런 도구들의 사용법 이런 도구들로 뭐가 있는지 이런 것들을 알아가는 것을 게을리하시면 안될 것 같아요 네, 이렇게 해서 웹 개발자 도구에 대한 수업을 마치겠습니다

디자인 HTML소스편집

HTML소스에 접근하고 편집할 수 있습니다 1

디자인-HTML에디터를 클릭하면 편집이 가능합니다 디자인화면에서도 편집이 가능합니다 디자인-디자인환경(PC)를 클릭합니다 2 EYE EDITOR를 클릭하면 해당 페이지의 HTML소스를 편집할 수 있습니다

3 EYE DESIGN에서 편집하고자 하는 페이지를 찾아서 마우스 오른쪽 버튼을 클릭하면 HTML소스 편집를 편집할 수 있습니다 3가지 모두 EYE EDITOR화면으로 접속되며, 다양한 기능을 이용할 수 있습니다 왼쪽영역에서는 원하는 디렉토리로 이동하거나, 파일을 선택하여 HTML소스를 확인할 수 있습니다 상단의 버튼을 이용하거나, 마우스 오른쪽 버튼을 이용하여 폴더와 파일을 추가/편집/삭제/업로드 할 수 있습니다

해당 페이지의 원본소스를 확인할 수 있습니다 여러 파일을 열어볼 수 있고, 열린소스는 탭으로 관리할 수 있습니다 또한 보고 있는 탭의 소스만 저장하거나, 모든 탭의 소스를 한번에 저장할 수 있습니다