개발자 도구 뜯어먹기 : Elements

이전 포스팅에서 언급한 것처럼 웹 브라우저의 개발자 도구 중

실제로도 유용하게 사용하고 자주 사용하는 기능을 하나씩 뜯어먹어 볼까 한다.

첫 번째로 Elements 탭에 대한 부분을 알아보자.

---

Elements은?

element는 성분, 요소, 구성이라는 의미를 가지고 있다.

23년도에 나온 디즈니 애니메이션인 엘리멘탈 (elemental)에서 접미사 -al을 빼면 element가 된다.

어쨌든, 단어의 뜻과 개발자 도구의 의미를 대략적으로 결합해 보면

elements 탭이 하는 역할을 이렇게 추측할 수 있다.

 

웹 페이지의 구성 요소를 확인할 수 있는 탭

 

elements 탭은 현재 보는 페이지의 구성 요소를 확인할 수 있게 해주는 탭인데

조금 더 구체적으로 어떻게 알 수 있는지 알아보자.

 

How to use it

네이버 메인화면 개발자 도구 창

elements 탭을 열게 되면 다음과 같은 화면을 볼 수 있다.

브라우저 크기에 따라 다르지만 화면이 꽉 찬 상태에서 절반 정도를 차지하게 개발자 도구를 열면

왼쪽에는 HTML 구조를, 오른쪽에는 CSS 구조를 확인할 수 있다.

 

맨 처음 열게 되면 현재 페이지의 전체 HTML 구조와

현재 페이지 전체에 적용되어 있는 CSS를 확인할 수 있다.

 

하지만 보통 개발자 도구의 elements 탭은 전체 페이지의 구조를 확인하기 위해 사용하진 않는다.

일반적인 상황에서는 특정 요소에 대한 구조 및 스타일을 확인하기 위해서 많이 사용한다.

 

예를 들어, 코드에서는 해당 요소에 특정 스타일을 적용했는데

실제 페이지에서는 특정 스타일이 적용되지 않았다던가

혹은 외부 라이브러리를 사용해서 가져온 요소에 스타일 변경을 위해서

그 요소가 어떤 class 명을 가지고 있는지 확인하기 위해 주로 elements 탭을 사용하곤 한다.

 

그래서 페이지에서 특정 요소를 선택할 수 있는 기능이 elements 탭에 포함되어 있는데

위의 사진에서 빨간색 네모로 표시된 아이콘을 클릭하게 되면

현재 페이지에서 특정 요소를 선택해서 그 요소의 구조와 css를 확인할 수 있다.

물론 전체 html 구조에서 하나씩 열어가며 찾아갈 수도 있지만,

웹이 복잡할수록 시간이 오래 걸리기에 이 방법을 주로 사용하고 있다.

 

728x90

변경, 수정, 삭제

elements 탭에서는 구조 파악 외에도 HTML 요소의 추가, 삭제, 위치 변경 등을 할 수 있고,
CSS의 스타일 변화, 추가, 제거 등을 통해 실제 페이지의 변화를 확인할 수 있다.
실제로도 굉장히 유용한 기능이기도 하다.

 

먼저 HTML은 특정 요소를 선택하게 되면 해당 요소 앞에 점 세 개의 미트볼 버튼이 생기게 되는데

해당 버튼을 클릭하면 특정 요소의 다양한 설정을 확인해 볼 수 있다.

이를 통해 추가, 삭제, 위치 변경 외에도 다양한 설정을 적용해 웹페이지에

어떻게 적용되는지 확인해 볼 수 있다.

 

CSS 역시 특정 요소를 선택하면, 그 요소에 적용된 스타일이 어떤 것이 있는지 확인할 수 있는데

가장 윗부분인 element.style 에 내가 적용해 보고 싶은 스타일을 넣어서 어떻게 변하는지 볼 수 있고,

다른  부분에도 마찬가지고 지금 적용된 스타일을 변경, 삭제가 가능하기에

여러 가지 간단한 테스트를 해보기 좋은 기능이다.

 

물론 실제 코드에 바로 반영되는 것이 아닌 현재 페이지의 뷰에서만 변경이 되는 것이기 때문에

실행된 페이지에서 부담 없이 변경해 보면서 확인이 가능하다.

 

CSS 적용 우선순위

CSS를 작성할 때, 내가 작성한 스타일이 막무가내로 적용되는 것은 아니다.

나름의 규칙을 가진 상태로 적용이 되는데, 이 규칙을 이해하고 있다면 처음 코드를 작성할 때는 물론

나중에 디버깅 할 때도 꽤 도움이 되는 규칙이다.

 

elements 탭의 CSS 구역을 보면 몇 개의 섹션으로 분리되어 있는 것을 볼 수 있는데,

아래에서 위로 올라갈수록 우선순위가 높다고 생각하면 되겠다.

위의 사진에서 파란 영역에 취소선이 그어져 있는 스타일들이 있는데,

동일한 스타일 (예를 들어 line-height)이 우선순위에 따라 우선순위가 가장 높은 스타일이

적용되기에 낮은 우선순위는 지워지게 되는 것이다.

 

이런 CSS의 우선순위가 정해지는 규칙은 다음과 같다.

 

1. !important
2. inline 스타일 (html에서 style 속성에 직접 적용한 것)
3. id
4. class
5. tag

 

CSS의 우선순위는 위와 같은 방식으로 적용되고

동일한 우선순위라면 CSS 파일을 불러온 순서에 따라 달라질 수 있다.

일반적으로 더 나중에 불러온 CSS 파일이 더 우선하다.

 

elements 탭을 사용하다 보면 HTML 보다 CSS를 보기 더 어렵다는 생각이 들 수 있다.

그 이유가 개인적으로는 HTML은 구조가 명확하게 짜여 있는데,

CSS는 우선순위에 따라서 내가 적용한 스타일이 적용이 되지 않을 때가 있어서라고 생각한다.

그럴 때는 CSS 영역에서 Computed 탭을 선택하면 조금은 풀릴 수 있을 수 있다.

 

Computed 탭은 현재 해당 요소에 적용된 스타일을 모두 보여주는 영역인데,

어지럽게 나열된 부분 보다 이 부분이 확인하기에는 상당히 깔끔하다

거기다가 특정 스타일을 클릭하게 되면 이 스타일이 어디서 적용됐는지를 보여주기 때문에

위의 상황처럼 나는 적용했는데 실제 페이지에서 적용되지 않는 상황을

조금은 빠르게 원인을 찾아서 디버깅 할 수 있게 된다.

 

마지막으로 빨간 네모를 친 저 부분을 확인해 보도록 하자.

 

저 부분은 박스 모델이라고 하는데, 선택한 부분의 길이 / padding / border / margin 값을 알아볼 수 있다.

현재 페이지에서 얼마나 공간을 차지하고 있는지 그래서 어떻게 배치하는 것이 좋은지를 생각해 볼 수 있겠다.