안녕하세요~
제 두번째 게시물이 작성되네요
역시나 부족하겠지만 일단 열심히 작성해보겠습니다
그럼 시작~
Block Element
HTML의 요소는 역사적으로 'Block' level Element와 'Inline' level Element로 분류되었다고 합니다.
기본적으로 Block 요소는 부모 요소의 전체 공간을 차지하여 "Block"을 만듭니다.
블록은 <body>안에서만 사용가능합니다!
블록 요소는 언제나 새로운 줄에서 시작되며, Horizontal하게 최대한 늘어나 모든 너비를 차지!
Inline Element
Inline은 새로운 줄을 만들지 않고, 요소를 구성하는 태그에 할당된 높낮이만큼만 사용됩니다.
물론, CSS에서 display 속성을 사용해 시각적 표현 레벨을 바꿀 수 있지만 바꾼다고 한들 Inline의 요소가 Block요소 안으로 들어갈 순 없어요!
인라인 요소는 필요한 만큼만 공간을 차지!
Block vs Inline?
Block은 Inline을 포함시킬 수 있습니다.
Block이 부모로써 Inline을 자식으로 가질 수 있다고 표현할게요!
이말은 즉슨, 블록인 인라인보다 더 큰 구조를 생성합니다
또, Block은 새로운 줄에서 시작되지만 Inline은 줄의 어느곳에서나 시작될 수 있습니다.
약간 차이가 있죠!?
Block에 해당되는 태그들은 mdc docs에서,
Inline에 해당되는 태그들은 mdc docs에서 확인할 수 있습니다.
오늘은 HTML의 Block & Inline에 대해서 알아봤는데요~
다음엔 태그들에 대해서 간략히 알아보도록 해요.
그럼 안녕~
우동먹으려고 개발하는 김치나베우동 성장기