2. 개발자가 알면 좋은 디자인(?) 도구 – F12

자세한 사용법은 검색해서 찾아보길 바라고

“개발자가 디자인(CSS)을 알아야 하는 이유”와 관련하여 간단한 사항을 정리한다.

개발자들은 웹 브라우저에서 F12키를 눌러 자바스크립트 디버깅을 많이 쓰고

DOM 탐색기에 대해서는 무심코 넘어가는 경우가 많다.

앞서 언급한 바와 같이 디자인(CSS)는 개발하기 쉽게 해주는 한 방법이 되고

웹 개발에서는 동적으로 HTML 생성을 많이 한다.

제대로 생성되는지, 안 될 경우 쉽게 이유를 파악하고 처리하는 방법을 제공하는 것이 DOM 탐색기이다.

먼저 calendar5.html을 다운받아 실행한다.

이 상태에서 F12키를 누른다.

왼쪽에 보이는 HTML 트리가 DOM 탐색기이고

오른쪽에 보이는 것이 해당 DOM (HTML 태그)에 적용된 스타일(CSS)이 나오게 된다.

HTML은 트리 구조의 계층형으로 구성되는데

태그 옆의 삼각형(▷)을 눌러서 하위(자식) 태그를 볼 수 있다.

다음 그림은 DOM 탐색기에서 1(<div>1</div>)을 선택해서 웹 브라우저에서 1이 선택된 것을 볼 수 있다.

그림 상단의 풍선도움말에 나오듯 옵션이 그렇게 선택되어 있는 상태이다.

왼쪽 옆의 “요소선택”을 하면 웹 브라우저에서 마우스로 선택한 태그가 위 그림처럼 DOM 탐색기에 나타난다.

즉 앞서의 옵션은 DOM 탐색기에서 선택하면 웹브라우저에서 해당하는 태그가

요소 선택은 웹 브라우저에서 태그를 선택하면 DOM 탐색기가 선택되는 방식이다.

다음 그림처럼 요소 선택은 웹 브라우저에서 해당 태그를 선택하고

마우스 오른쪽 버튼을 눌러서 나타나는 컨텍스트 메뉴에서도 실행할 수 있다.

이제 이글의 본론을 이야기 한다.

다음 그림과 같이 태그를 선택하면 DOM 탐색기 오른쪽에 스타일 표시 창에 현재 사용중인 CSS 스타일(Class)이나 직접 입력한 인라인 스타일이 나타난다.

여기서 개발자가 값을 입력해 결과를 바로 확인할 수 있고

잘 모르는 CSS 속성이나 값에 대한 도움을 받을 수 있다.

테스트로 달력의 숫자 정렬을 중앙에서 오른쪽으로 바꾸어 보았다.

CSS 클래스가 calendar 하위에 있는 div (#calendar > div)에 일률적으로 부여되었기 때문에 하나만 수정해도 전체에 적용이 된다.

text-align의 값을 right로 바꾸어 주면 화면에 적용되는 것을 바로 알 수 있다.

이렇게 테스트해 보고 코드를 수정해 주면 된다.

이외에도 그림과 같이 숨겨진 값(hidden 태그)을 확인할 때도 유용하게 사용할 수 있다.

개인적인 경험으로

자바스크립트나 JSP에서 동적으로 HTML을 생성했는데

디자인이 틀어지거나 원하는 데로 되지 않는 경우 이 방법으로 쉽게 원인을 찾고 해결할 수 있었다.

익혀두면 웹 개발에서는 많은 도움이 되니 좀 더 자세한 내용을 찾아보길 바란다.