내가 가장 좋아하는 CSS hack

Donghoon Song
Sep 6 · 3 min read
Photo by Pankaj Patel on Unsplash

이 글은 Gajus Kuizinas의 My favorite CSS hack을 번역한 글입니다. 모든 저작권과 권리는 Gajus에게 있습니다.
This article is a translated version of Gajus Kuizinas’s article: My favorite CSS hack. All rights goes back to him.
Link of the original article : https://dev.to/gajus/my-favorite-css-hack-32g3

제가 5년동안 복사 붙여넣기하며 써왔던 CSS snippet이 있습니다.

저는 이것을 처음에 2014년도에 Quora에 (What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don’t know about?) 라는 제목으로 공유를 했고 지금까지도 upvoting알림을 받고 있습니다.

하지만 도대체 소름 끼치는 snippet이 무엇을 해줄까요?

이 snippet은 당신이 레이아웃 작업을 할 때 사용하도록 만들었습니다.

예를 들어,

위와 같은 페이지를 작업한다고 합시다. 문제는 페이지에 있는 각각의 요소들이 뚜렷한 뒷배경을 갖고 있지 않거나, 사진이 아니라면, 당신은 저 요소들이 레이아웃에 잘 들어맞는지 확인하기 힘듭니다. 거의 대부분의 텍스트 노드들, 투명도를 갖고 있는 사진들 등등이 있겠지요.

위의 CSS를 적용하면 아래와 같은 화면을 볼 수 있습니다.

Node들이 depth별로 다른 색깔을 갖게 되기 때문에 페이지에 있는 요소들 각각의 사이즈, 패딩과 마진을 쉽게 확인할 수 있습니다. 정말 유용하게 쓰일 수 있겠죠?

Donghoon Song

Written by

사진찍는 웹개발자

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade