퀴즈로 풀어보는 CSS z-index 속성의 3가지 포인트

웹 페이지가 다이나믹해지고 요소들의 배치가 자유로워지면, 때때로 서로의 위치가 겹치는 요소들이 생기기 마련입니다. 이 때 어느 것을 위에 표시할 것인가를 제어하는 CSS 속성이 다름 아닌 z-index입니다. 그만큼 자주 접하게 되는 속성입니다만, 한편으로는 오해하기 쉬운 몇가지 특징을 가진 속성이기도 합니다.

이번 포스팅에서는 z-index에 대한 중요한 포인트를 3가지 퀴즈를 통해 알아봅니다. (이 질문은 제가 신입 개발자들을 교육할 때 실제로 사용하고 있는 질문이기도 합니다.) 이 3가지 질문에 대해 정확하게 답을 하고 원리를 설명하실 수 있다면, 실무에서 만나는 대부분의 상황에서는 z-index 속성을 사용하는 데에는 큰 문제가 없으실 것입니다.

z-index의 정확한 사양에 대해서는 CSS Specification의 9.9.1 Specifying the stack level: the ‘z-index’ property 항목에서 다루고 있습니다. 좀더 자세한 정보가 필요하실 때에 함께 읽어보시기 바랍니다.

Continue reading

CSS display 속성을 이해하기 위한 6가지 포인트

CSS의 display는 많은 다양한 상황에서 익숙하게 사용되는 속성입니다. 그러나 익숙한 데에는 언제나 함정이 있습니다. 실제로 display 속성을 사용하다보면 잘 알려지지 않은 특징들을 만나게 되는데, 이를 미리알고 대처하지 못하여 예상치 못한 곳에서 시간과 노력을 허비하는 상황을 만나게 됩니다.

이번 포스팅에서는 display 속성에 대해 6가지 포인트로 정리하였습니다. 이 포스팅은 display 속성에 대한 중요한 내용을 발췌하여 정리한 것이지만, 모든 것을 망라하고 있지는 않습니다. 부족한 부분에 대해서는 공식표준인 CSS 2.1 Specification 가운데 9.2.4 The ‘display’ property 항목을 참조하여 주시기 바랍니다.

Continue reading