HTML요소는 "인라인" 요소와 "블록 레벨" 요소로 구분된다.
Inline Elements
컨텐츠의 크기만큼만 공간을 차지하고 줄바꿈을 하지 않는다.
가로세로의 크기를 임의로 지정할수 없고, 그 크기는 오로지 컨텐츠에 의해서 결정된다.
대표적인 inline요소로는 <span>이 있다.
Block level Elements
다른 여러 요소들이 배치된 페이지에서 새로운 줄에 위치하면서, 가로 크기가 부모 요소의 100%를 차지한다.
가로세로 크기를 지정할수 있고, 가로 크기를 부모 요소의 크기보다 작게 설정할 경우, 그 나머지 부분을 margin으로 채워져 해당 요소의 크기는 그대로 한줄을 차지한다.
대표적인 block요소는 <div>, <p>등이 있다.
Inline-block
block과 inline의 속성을 섞어놓은 것이다.
- block처럼 가로세로 크기를 설정할 수 있다.
- 줄바꿈을 하지 않는다.
- 크기를 지정하지 않으면 inline과 같이 컨텐츠만큼 크기를 차지한다.
왜?를 생각하며 개발하기, 다양한 프로젝트를 경험하는 것 또한 중요하지만 내가 사용하는 기술이 어떤 배경과 이유에서 만들어진 건지, 코드를 작성할 때에도 이게 최선의 방법인지를 끊임없이 질문하고 고민하자. 이 과정은 앞으로 개발자로 커리어를 쌓아 나갈 때 중요한 발판이 될 것이다.