“두 명의 엄마와 두 명의 딸이 함께 낚시를 갔다. 시간이 흘러 총 3 마리의 물고기를 낚았고, 집으로 갈 때 각자 물고기를 한 마리씩 가져갔다. 어떻게 된 것일까?”
HTML 이 구조를 다룬다면 CSS 는 스타일을 다루고 있습니다. 뼈대를 구성하는 HTML 을 꾸며주는 것이 바로 CSS 라는 건데요. CSS 를 잘 다루기 위해서 우리가 알아야 하는 것이 HTML의 족보(?!)입니다.
갑자기 무슨 족보냐고 할 수 있지만, 실제로 parent(부모), child(자식), sibling(형제자매), descendant(자손) 라는 표현을 사용하고 있으니 족보라고 봐도 무리가 없을 것 같네요.
HTML 은 여러 개의 태그를 겹쳐서 구조를 표현합니다. 중첩이 된다는 말인데요. 이 때, 태그 간에는 상하관계가 발생하게 되죠. 이 상하관계를 HTML 에서는 parent 와 child 의 관계라고 표현합니다.
<body>
<div> // 전체를 감싸주는 div
<div> // 1번 div
<span></span>
<button><button>
</div>
<div> // 2번 div
<ul>
<li></li> // 1번 li
<li></li> // 2번 li
</ul>
</div>
</div>
</body>위와 같은 아주 간단한 HTML 의 구조가 있다고 가정해보겠습니다. 전체를 감싸주는 div 안에 2 개의 div 가 나뉘어 배치되었습니다.
1 번 div 는 span 과 button 를 하위 태그로 두고 있습니다. 이 때, 1번 div 는 span 과 button 의 parent 가 되고, 반대로 span 과 button 은 1번 div 의 child 가됩니다.
2번 div는 ul 과 다시 그 하위에 2 개의 li 를 가지고 있네요. 이 경우 2번 div 는 ul 의 parent 이고, ul 은 child 가 됩니다. 마찬가지로 ul 과 li 사이에도 parent 와 child 관계가 성립하는 것이죠.
sibling (형제) 관계를 살펴볼까요? span 과 button, 2 개의 li, 그리고 1번 div 와 2번 div 는 서로 sibling 관계에 있습니다. 번호를 붙인 2 개의 div 는 서로 멀리 떨어져있지만, 구조적으로 상위에 하나의 div 를 부모로 갖기 때문에 sibling 의 관계가 되는 것이죠.
이쯤 되면 descendant (자손)의 관계는 금방 눈치를 채실 수 있을 것 같습니다. 하위의 모든 태그는 자손이 되기 때문이죠. 모든 태그는 전체를 감싸는 div 와 비교해 descendant 가 됩니다. 그 외에도 각각의 관계에 따라 더 많은 descendant 관계가 성립할 수 있겠죠.
parent, child, sibling, descendant, 이 4 개의 관계를 길게 적은 이유는, 이것을 이해해야 CSS 를 적절히 활용할 수 있기 때문입니다. 특히 오늘은 flex 에 대해 적어보려고 하는데요.
CSS 의 display 속성 중 flex 라는 것이 있습니다. CSS Flexible Box Layout 이라고 불리는 그것입니다. 태그나 아이디, 클래스 등의 CSS 스타일을 설정할 때,
display: flex;의 형태로 사용하게 되는데요.
flex 를 이용해 요소들을 정렬하고 싶은 경우, display: flex; 는 부모 요소에 적용해야 합니다. 부모 요소에 적용을 해야 자식 관계에 있는 요소들이 flex 의 적용을 받기 때문입니다.
display: flex 와 함께 쓸 수 있는 justify-content, align-items 같은 경우도 부모 요소에 적용해야 합니다 . 무언가를 정렬하고 싶을 때 부모 자식 관계를 알아야 하는 이유가 여기에 있는 것이죠.
flex: 0 1 auto; // grow, shrink, basis의 순으로 원하는 값을 넣어 사용반대로 자식 관계에서는 flex 속성을 사용할 수 있습니다. 부모가 display: flex; 일 때, 플렉스 아이템의 크기를 키우거나 줄이는 방법을 설정할 수 있죠. flex 는 flex: 0 1 auto; 라는 기본값을 가지고 있고, 각각의 값은 grow, shrink, basis 입니다.
부모와 자식 관계를 이해하고 적절하게 사용해야 CSS 를 이용해 내가 원하는 레이아웃을 만들 수 있습니다. 부모와 자식 관계를 이해하고 나니 CSS 가 그래도 조금은 쉽게 느껴지네요. 하지만 CSS 의 늪은 여전히 우리 앞에 있으니 방심하지 않고 계속 공부를 열심히 이어나가야겠습니다.
