웹페이지 HTML 구조 한눈에 보는 꼼수

Wonkook Lee·2021년 8월 28일
118

Tricks

목록 보기
1/1
post-thumbnail

웹페이지 HTML 구조 한눈에 보는 꼼수


이 페이지 어떻게 만들었지?

HTML은 쉬우면서도 어렵다. 맥락에 맞게 군더더기 없이 시맨틱 태그를 잘 활용해서 작성해야 한다. HTML 작성을 잘 한다는 것은 마치 탄탄한 글을 쓰는 것과 같다.

마음에 드는 페이지가 있고, 레이아웃을 참고하고 싶은데 각 컴포넌츠를 몇 Depth까지 구현했는지 개발자 도구 Elements 탭에서 일일히 들여다본적이 있는가? 그렇다면 당신은 나와 같다.

웹 페이지 클론 코딩할때 가끔 써먹었던 나의 꼼수를 아래에 소개한다.




모든 HTML 구조 한 눈에 보기

원리라고 하기에도 별 것 없어서 팁 대신 꼼수라는 단어를 사용했다. 그저 모든 태그 요소를 DOM으로 조작하여 테두리를 넣어주는 방법이다. 복잡한 페이지의 각 요소별 영역 구획과 hierarchy를 눈으로 확인하기 쉬워진다.

각 요소별로 색상을 다르게 해서 볼 수도 있다. 같은 방법으로 마켓 컬리의 구조도 바꿔보겠다.




하는 방법

크롬을 사용한다면 보고 싶은 웹 페이지에 들어가서 개발자 도구를 열고, Console 탭에서 아래 코드를 붙여 넣어주면 된다. 웹 페이지에서 레이아웃 잡을때 흔하게 사용되는 태그들을 입력했고, 추가 하거나 빼고 싶은 태그가 있다면 첨삭해서 사용하면 된다.

document.querySelector('*').style.boxSizing = 'border-box';
document.querySelectorAll('div').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('span').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('ul').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('li').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('dd').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('dl').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('dd').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('section').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('h1').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('a').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('img').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('form').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('button').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('header').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('footer').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('input').forEach(e => e.style.border = "1px solid dodgerblue");
document.querySelectorAll('p').forEach(e => e.style.border = "1px solid dodgerblue");



@phw3071 님께서 올려주신 개선된 코드

['div', 'span', 'ul', 'li', 'dd', 'dl', 'section', 'h1', 'a', 'img', 'form', 'button', 'header', 'footer', 'input', 'p'].forEach(e => {
    document.querySelectorAll(e).forEach(element => {
        element.style.outline = "1px solid dodgerblue"
    })
})

phw3071님께서 개선된 코드를 작성해주셔서 소개해드립니다.
border를 사용하면 레이아웃이 깨지는데 반해 (특히 그리드형 레이아웃) outlinebox model의 변화 없이 영역을 확인할 수 있어 더 없이 좋은 선택이 될 것 같습니다.

기여해주신 phw3071님께 감사드립니다.




글과 그림 ⓒ Wonkook Lee

🙏🏻 잘못된 정보가 있다면 지적해주세요

profile
© 가치 지향 프론트엔드 개발자

29개의 댓글

comment-user-thumbnail
2021년 8월 29일

Wonkook Lee님이 작성하신 코드를 제 마음대로 조금 수정해봤어요!

['div', 'span', 'ul', 'li', 'dd', 'dl', 'section', 'h1', 'a', 'img', 'form', 'button', 'header', 'footer', 'input', 'p'].forEach(e => {
    document.querySelectorAll(e).forEach(element => {
        element.style.outline = "1px solid dodgerblue"
    })
})

github gist

변경사항

  • 코드 중복를 제거해서 코드를 단축했어요! (중복 제거는 개발자의 기본 소양!)
  • 중복 태그 제거! (dd 태그가 중복으로 되어 있더라고요)
  • border를 outline으로 변경!
    • border는 크기를 차지하기도 하고, 테두리로 사용하는 경우도 많아서 레이아웃이 조금씩 바뀌더라고요, outline은 크기를 차지하지도 않고, border에 비해서 많이 사용되지도 않아서 outline으로 바꿔봤습니다 :)
2개의 답글
comment-user-thumbnail
2021년 9월 2일

와 진짜 아이디어! 완전 좋네요 잘 쓰겠습니다!

1개의 답글
comment-user-thumbnail
2021년 9월 3일

이런게 정말 팁이라고 생각합니다. 팁 너무 감사합니다.

1개의 답글
comment-user-thumbnail
2021년 9월 3일

클론 코딩할떄 엄청난 꿀팁군요 감사합니다 !!

1개의 답글
comment-user-thumbnail
2021년 9월 3일

이런게 팁이지 ㅋㅋ

1개의 답글
comment-user-thumbnail
2021년 9월 3일

웹 사이트 들이 그만큼 시멘틱을 잘 지키고 있다는 얘기도 되겠네요!
좋은 정보 공유 감사합니다

1개의 답글
comment-user-thumbnail
2021년 9월 6일

좋은 정보 감사합니다! 잘활용할게요:)

1개의 답글
comment-user-thumbnail
2021년 9월 7일

와 이거 진정한 꿀팁이네요 감사합니다 :) 이렇게 또 하나 배워갑니다

1개의 답글
comment-user-thumbnail
2021년 9월 7일

꿀팁 감사합니다!!

1개의 답글
comment-user-thumbnail
2021년 9월 7일

글 재밌게 봤습니다. 좋은 아이디어인 거 같아서 크롬 익스텐션을 만들어봤어요 :)))

1개의 답글
comment-user-thumbnail
2021년 9월 7일

감사합니다

1개의 답글
comment-user-thumbnail
2021년 9월 7일

크롬 개발자 도구 => Element 탭에서 Styles => +버튼(New Style Rules) 눌러서 아래 스타일을 추가하는 방법도 있습니다

 * { outline : 1px soild blue }
1개의 답글