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..

구체적인 HTML / CSS 용어들을 정리하기 전에 큰 틀을 잡아놓고 가는 게 좋을 것 같아 작성해보는 DOM 이야기. HTML에 대해 찾아보면 다들 돔, 돔 하는데 이상하게 그 말이 와닿지 않았다. 지금까지 자바스크립트를 공부하며 이해한 건, '문서' 자체를 객체로 이해하면 된다는 사실이다. 천천히 살펴보자.  chatGPT에게 DOM이 뭔지 물어봤다.Document Object Model은 웹 문서를 위한 프로그래밍 인터페이스다. 문서의 구조는 트리 객체를 형성하고, 각 객체는 문서의 일부를 나타낸다.  무슨 말일까? 이를 알기 위해서는 웹 페이지(web page)와 웹 문서(web document)를 구분할 필요가 있다. 우선 웹 페이지는 웹 문서를 기반으로 만들어졌다. 현재 브라우저를 통해 보고 ..