HTML을 배우면서 가장 헷갈렸던 게 Flexbox 기능이다. float를 통해 이미지를 정렬하는 방법을 배우다가 flexbox를 이용하니 훨씬 편하다는 건 알겠지만... 너무 복잡하다. 기능이 많고, 또 비슷한 명령어인데도 상당히 다른 결과가 종종 나왔다. 앞으로도 계속 헷갈릴 바에 한 번 정리하는 게 마음 편할 것 같다는 생각에 작성하는 글이다. 1. Flex와 flex-direction  Flexbox는 기본적으로 부모 요소와 자식 요소로 나뉜다. display: flex를 지정하면, 해당 요소의 자식 요소들은 Flex Item이 된다. Flex Item의 부모 요소를 Flex Container라 부른다. 가장 간단한 예시부터 살펴보자.  Hello!    결과: 원래대로라면 p 태그는 bloc..

HTML / CSS 를 만지작거리다 보면 자꾸 헷갈리는 게 있는데, display 이 녀석이 가장 심하다. 특히 flex로 지정했을 때 내 마음대로 안 움직여주는 요소들을 보며... 이녀석 꼭 정리하리라 마음먹었다. 사실 HTML / CSS 정리도 얘때문에 나왔다.  This is span element.  결과:  작은 div 박스 안에 간단한 문장이 들어가있다. 현재 태그 뒤에 또 다른 태그를 입력하면 어떻게 될까?  This is span element. This is another span element. 결과: 첫 번째 span태그에 이어서 그대로 옆에 온다. 이렇게 줄바꿈이 존재하지 않고 같은 줄에 배치되는 요소(Element)를 인라인 요소(Inline element)라 한다. Inli..