마크업을 직무로 2년간 근무했기에 멘토링에서 필수 독서 목록에 있던 HTML, CSS 관련 책은 깊은 이해와 관계 없이 아는 내용이라 생각하고 뻗어나가는 질문 없이 하루에 HTML 챕터를 전부 읽고 넘어갔다.
꼬리 질문에 등장한 브라우저 동작 원리는 책에 없었지만 동작 원리의 기본이되는 규칙이 정의되어 있다.
브라우저의 동작 원리라는 꼬리 질문에 답하기 위해 브라우저 작동 원리와 HTML 파싱 - DOM Tree 생성, CSS 파싱 - CSSOM Tree 생성 그들의 결합인 렌더트리 구축과정(layout), 렌더 트리 구축 이후 렌더러가 배치하는 과정(batch, reflow), 그리기(paint)과정까지 이해하기까지 2-3일이 걸렸다.
꼬리 질문에서 특히 감회가 새로웠던 것은 브라우저 렌더링 성능 최적화를 공부하는데 예전 서류 통과가 되었던 안랩 면접에서 물어본 이미지 스프라이트(img sprite)가 나온 것이다.
아이콘 변경시 빠르게 반영을 할 수 있어서, 전체 적용 필요없이 스프라이트 이미지 하나만 반영하면 되니까... 등
이런식으로 대답했다. 기본적인 이해 없이 대답하려니 횡설수설했던 경험이 있다. 다른 질문은 잘 대답했다고 생각했고(아닐 것이다.) 그 질문만 생각나서 바로 찾아본 기억이 있다. 반성하는 점은 이미 실무에서 아이콘을 한 데 모아 sprite된 이미지로 사용 중이었는데도 전혀 이해가 없었던 것.
현재 이미지 스프라이트를 하는 이유에 대해 물어본다면,
브라우저 렌더링 성능 최적화와 관련이 있습니다. 여러 아이콘이나 공통 이미지로 자주 쓰이는 이미지를 계속 호출하는 것보다 하나의 이미지, 한 번의 로딩으로 브라우저 속도를 개선을 할 수 있는 장점이 있어 사용됩니다.
라고 말할 수 있다.
이외에도 CSS 선택자 우선순위는 알면서도 그 우선순위가 적용되는 기준을 궁금해하지 않았다.
CSS Specificity 명시도. 점수 매기는 법 등.
!important는 자주 쓰면 안된다고만 알았지 무한대의 점수로 막강한 힘을 가진지도 몰랐다. 그리고 사용자가 지정한 스타일과 브라우저가 지정한 스타일, 작업자가 지정한 스타일 사이에서 !important 우선순위가 다르다는 것. 처음 알게 되었다. 원천소스 우선순위인데 이건 공식 명세에선 못찾았다.
정보처리기사 시험을 공부하면서 만났던 개념들을 외우기만 했었는데 이젠 원리를 배우고 있는 점도. 노드 갯수랑 트리 구조 계산도 배웠었는데 이렇게 쓰이는지 이제야 알게 되었다.
남은 오늘의 공부 시간까지 다시 브라우저 작동원리를 되새김하고 CSS 부분을 공부할 예정이다.
내일은 오프라인 모각코 공간에 처음 가게 된다. 기대되고 새로운 자극을 얻을 수 있을 것이다.
