Css in depth와 Debugging Css 후기

CSS는 디자이너를 위한 언어라고 생각하고 있다. 처음에 CSS를 배울 때도, 계속 공부하고 있는 지금도 이 생각은 변하지 않고 있다. 이 생각에는 여러 이유가 있는데, 가장 큰 이유는 아래 두 가지이다.

1. CSS는 화면을 그리기 위한 언어이다.
2. 디자이너가 개발자와 효율적으로 소통하기 위해 배워야 하는 여러 툴 중에 가장 가성비가 좋다.

하지만 이런 생각에도 불구하고 지금까지 CSS를 깊게 이해하지 못하고 있었다. 무엇인지 아는 것과 사용할 줄 아는 것과 제대로 아는 것은 매우 다르다고 들었는데, 사용할 줄 아는 상태에서 계속 머물러 있었다.

그래도 언젠가 궁금증을 해소하기 위해 평소에 정확히 알지 못하고 경험적으로 썼던 것들을 리스트업해놓았고, 그 목록은 다음과 같다. 나와 비슷한 궁금증이 있는 사람이라면 마지막에 추천하는 두 책에서 궁금증을 해결할 수 있을 것이다.

1. 선택자 명시도 (https://developer.mozilla.org/ko/docs/Web/CSS/Specificity, https://specifishity.com/)

2. Device Pixel Ratio와 Physical Resolution, Logical Resolution

(ppi가 다른 스크린에 CSS는 어떻게 같은 코드로 같은 사이즈의 이미지를 그리는가?)

3. Margin collapsing

(Margin collapsing을 만든 이유와 일어나는 경우)

4. Lobotomized Owls( * + *)을 정확히 언제, 어떻게 사용해야 하는가? (https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/)

5. 상속이 되는 속성과 상속이 되지 않는 속성

6. calc()를 활용한 완전한 반응형 디자인

7. Media Query의 @supports

8. Visual regression test (https://github.com/garris/BackstopJS)

9. floating 레이아웃과 clear fix 핵 (clear fix핵을 써야 하는 정확한 이유)

10. position과 left의 브라우저 렌더링 속도 (left 대신에 transform을 써야 하는 이유)

11. 같은 클래스를 붙여서 여러 번 쓰는 이유

(!important를 대신한 선택자 명시도 높이기)

12. inline-block과 overflow가 같이 있을 때 생기는 vertical-align 이슈 해결책

외에도 CSS를 쓰면서 더 많은 궁금증이 있었지만, 두 책에서 위 질문에 관련된 답을 얻을 수 있었다.

Css in depth by Keith J. Grant

Debugging CSS by Ahmad Shadeed

끝으로 Guru들이 쓴 책을 볼 때마다 그들이 작은 궁금증을 놓치지 않고 집요하게 파고든다는 생각을 한다. 또 마땅히 그렇게 해야만 깊은 이해도를 얻을 수 있다는 생각도 해본다. 2020년도에 읽었던 여러 책 중 가장 추천할 만한 두 책이다.