한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
inline / block가 무엇일까?
HTML에서 inline 구조는 주로 텍스트나 이미지 같은 작은 요소들을 나타내기 위해 사용됩니다.
예를 들어, <span> 태그는 inline으로 적용되며, 특정 영역에 스타일을 적용하기 위해 사용될 수 있습니다. <img> 태그도 inline으로 적용되며, 이미지를 문서 내에 삽입하는 데 사용됩니다.
다른 일반적인 inline 요소로는 <a>, <strong>, <em>, <input>, <label>, <select>, <button> 등이 있습니다. 이러한 요소는 텍스트 내에서 자연스럽게 흐르며, 다른 inline 요소와 함께 사용될 수 있습니다.
반면에, block 구조는 주로 문단이나 섹션 같은 큰 요소들을 나타내기 위해 사용됩니다. 예를 들어, <div> 태그는 block으로 적용되며, 다른 요소들을 묶어서 스타일을 적용하기 위해 사용될 수 있습니다. <p> 태그도 block으로 적용되며, 문단을 나타내는 데 사용됩니다.
inline과 block 구조는 각각 자신만의 특징과 용도가 있으며, 적절하게 조합하여 문서를 구성하는 것이 중요합니다.
인라인 요소(Inline Elements)
인라인 요소는 마크업을 할 때 가로로 정렬이 됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다.
- 사용 가능한 필요한 만큼의 영역을 사용함 ( 컨텐츠 너비 만큼 )
- 요소들이 수평으로 쌓임 ( 한 줄에 여러개 배치 )
- 크기값 가질 수 없음 ( 사이즈 지정 불가능 )
- 상하 마진 적용 불가능 ( 좌우 마진은 가능 / 상하좌우 패딩도 가능 )
- 텍스트를 작업하는 요소로 적합
블록 레벨 요소(Block - level Elements)
블록 레벨 요소 는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다.
- 사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100% )
- 전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 )
- 크기값 가질 수 있음 ( 가로 너비 & 세로 길이 지정 가능 )
- 상하좌우 마진 & 패딩을 가질 수 있음
- 레이아웃을 작업하는 요소로 적합
그림과 같이 블록 요소는 문자의 길이가 몇이든 아예 한 줄을 차지하고,인라인 요소는 문자의 길이만큼만 줄을 차지하는 걸 확인하실 수 있습니다.