html copy의 7가지 선택지

네이버 메인화면

구글크롬에선 html 코드를 볼수있는 inspect(검사) 기능이 있다.

7가지 선택지

1. Element

선택 대상의 HTML element 하나만 복사를 한다.

 

결과:
<a href="https://search.naver.com/search.naver?where=nexearch&amp;sm=top_brd&amp;fbm=0&amp;ie=utf8&amp;query=2023%EB%85%84+%EA%B3%84%EB%AC%98%EB%85%84" class="special_logo_link" title="2023년 계묘년 토끼해" data-clk="top.spe">
<img src="https://s.pstatic.net/static/www/mobile/edit/20221228/mobile_222744719461.png" width="58" height="60" class="special_img_fold" alt="2023년 계묘년 토끼해">
</a>

 

2. Outer HTML

선택 대상의 HTML element와 함께, 그 안에 포함된 element들도 복사를 해준다.

ex)table이라면 그밑에 tr td 까지, ol이라면 그밑의 li까지 전부 복사를 해준다

 

결과:

<a href="https://search.naver.com/search.naver?where=nexearch&amp;sm=top_brd&amp;fbm=0&amp;ie=utf8&amp;query=2023%EB%85%84+%EA%B3%84%EB%AC%98%EB%85%84" class="special_logo_link" title="2023년 계묘년 토끼해" data-clk="top.spe">
<img src="https://s.pstatic.net/static/www/mobile/edit/20221228/mobile_222744719461.png" width="58" height="60" class="special_img_fold" alt="2023년 계묘년 토끼해">
</a>

 

하위요소가 없어서 element와 똑같은 결과가 나왔다.

 

 

3. JS path

선택 대상을 Java script로 추적 할 수있는 코드를 복사해준다.

-Js path는 java script에서 HTML 문서안의 element들에 접근 및 조작에 사용된다.

 

특정 이벤트를 구현하거나, 내용이나 스타일을바꿀 수도있다.

 

결과:

#header > div.special_bg > div > div.logo_area > h1 > a.special_logo_link

 

 

4. selector

선택 대상의 CSS selector 경로를 복사한다.

 

-CSS slector란 HTML의 element의 style을 번경하기 위해 CSS가 HTML에 접근하는 패턴이다.

복잡하고 겹겹이 쌓여있는HTML elment를 추적하기에 용이하다.

 

결과:
document.querySelector("#header > div.special_bg > div > div.logo_area > h1 > a.special_logo_link")

 

 

5. Styles
선택 대상의 CSS style을 복사한다.

 

결과:
color-scheme: light;
font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif;
font-size: inherit;
line-height: inherit;
color: inherit;
text-decoration: none;
position: absolute;
top: 0;
bottom: 0;
left: 95px;
width: 243px;

 

 

6.XPath

선택대상의 접근하기 경로를 XPath형식으로 복사한다.

XPath란 HTML을 포함하는 XML문서에 있는 element들을 선택하는데에 사용되는 경로를 묘사하는 언어이다.

 

결과:
//*[@id="header"]/div[1]/div/div[1]/h1/a[1]

 

 

7. Full XPath

선택대상의 모든 조상(부모) 까지 포함한 XPath 경로를 복사한다.

파일 주소에서 root까지 복사해주는것과 비슷하다.

 

결과:
/html/body/div[2]/div[2]/div[1]/div/div[1]/h1/a[1]