IT기타

웹페이지의 태그 분석 방법

emilyyoo 2025. 3. 17. 20:52
728x90

렌더링된 웹페이지의 태그를 분석하고 선택자를 만드는 방법

1. 웹페이지의 태그 분석 방법

웹페이지에서 원하는 요소를 찾기 위해 HTML 구조를 분석하는 방법은 다음과 같다.

(1) 개발자 도구 사용

  1. Chrome(또는 Edge, Firefox)에서 웹사이트 열기
  2. F12 또는 Ctrl + Shift + I (Mac은 Cmd + Option + I) 키를 눌러 개발자 도구 열기
  3. Elements 탭에서 원하는 요소 찾기
    • Ctrl + Shift + C (Cmd + Shift + C for Mac)를 누른 후, 마우스를 웹페이지 요소 위에 올리면 해당 태그가 하이라이트됨
  4. 해당 태그의 HTML 구조 확인
    • 예시:
      html : 
      <div class="product">
      <h2 id="title">상품 제목</h2>
      <p class="price">$100</p> </div>

(2) JavaScript로 태그 확인

콘솔에서 직접 태그를 확인할 수도 있다.

javascript : 
console.log(document.querySelector("h2")); // 첫 번째 h2 태그 출력
console.log(document.querySelector(".price")); // 클래스가 'price'인 요소 출력 console.log(document.querySelector("#title")); // ID가 'title'인 요소 출력

2. CSS 선택자 만드는 방법

선택자는 HTML 요소를 찾을 때 사용되며, 여러 가지 방법이 있어.

(1) 기본 선택자

선택자 유형예시설명
태그 선택자 div, p, h1 특정 태그를 선택
클래스 선택자 .price class="price"인 요소 선택
ID 선택자 #title id="title"인 요소 선택

(2) 계층 선택자

선택자예시설명
자식 선택자 (>) .product > h2 .product 안에 있는 h2 태그 (직계 자식)
후손 선택자 (띄어쓰기) .product h2 .product 내부의 모든 h2 (직계 X, 포함 관계)

(3) 속성 선택자

선택자예시설명
특정 속성 포함 input[type="text"] type="text"인 input 태그
속성 값 포함 a[href*="google"] href 속성에 "google"이 포함된 a 태그

(4) 가상 클래스 & 가상 요소

선택자예시설명
첫 번째 요소 p:first-child 부모 안에서 첫 번째 p 태그
마지막 요소 p:last-child 부모 안에서 마지막 p 태그
특정 순서 li:nth-child(2) 두 번째 li 요소
특정 패턴 li:nth-child(odd) 홀수 번째 li 요소

3. 선택자 예제

웹페이지에 다음과 같은 HTML이 있다고 가정해 보자.

<div class="container">
  <ul class="menu">
     <li class="item">홈</li>
     <li class="item active">상품</li>
     <li class="item">문의</li>
  </ul>
</div>

 

이때, 선택자를 만드는 방법:

  • .menu → ul 태그 중에서 class="menu"를 가진 요소
  • .menu .item → .menu 내부에 있는 모든 .item
  • .menu .item.active → .menu 내부에서 class="item active"를 가진 요소
  • .menu li:first-child → menu 내부에서 첫 번째 li
  • .menu li:last-child → menu 내부에서 마지막 li
  • .menu li:nth-child(2) → menu 내부에서 두 번째 li

 

 

4. input[type="text"] 가 여러개 있는데 하나만 특정하려면, 여러속성의 조합을 해야 내가 선택할 객체가 유일해져서 그것만 선택되는 상황. 즉 여러 속성을 조합해서 유일한 요소를 선택하는 문법은 아래와 같다.

 

4-1. CSS 선택자로 여러 속성 조합하여 요소 선택하기

✅ 방법: querySelector()에서 속성을 조합해서 선택가능.

 

javascript :
const inputElement = document.querySelector('input[type="text"][aria-label="cl"]');
console.log(inputElement);

설명

  • input[type="text"][aria-label="cl"] → type="text"이면서 aria-label="cl"인 요소를 선택
  • 속성을 여러 개 조합할 수 있음
  • querySelector()는 첫 번째로 찾은 요소만 반환함

4-2. 여러 개의 요소를 가져오려면?

✅ 방법: querySelectorAll()을 사용하면 모든 요소를 가져올 수 있음.

 
javascript :
const inputs = document.querySelectorAll('input[type="text"][aria-label="cl"]');
inputs.forEach(input => console.log(input));
  • querySelectorAll() → 조건을 만족하는 모든 요소를 NodeList로 반환
  • forEach()로 순회하면서 개별 요소 출력 가능

4-3. 특정 속성이 있는 input만 객체로 변환하기

✅ 방법: 선택한 input의 속성을 객체로 변환하는 코드와 결합

 
javascript :
const attributes = Object.fromEntries( [...document.querySelector('input[type="text"][aria-label="cl"]').attributes] .map(attr => [attr.name, attr.value]) );
console.log(attributes);

 

💡 위 코드가 하는 일

  • querySelector('input[type="text"][aria-label="cl"]') → 특정 속성 조합으로 유일한 요소 선택
  • .attributes → 모든 속성 가져오기
  • map()과 Object.fromEntries() → 객체로 변환

📌 정리

✅ 여러 속성을 조합해서 특정 input을 선택하는 문법

 
javascript :
document.querySelector('input[type="text"][aria-label="cl"]')

 

✅ 선택한 input의 속성을 객체로 변환

 
javascript :
Object.fromEntries([...document.querySelector('input[type="text"][aria-label="cl"]').attributes].map(attr => [attr.name, attr.value]));

 

 

 

728x90