블록 요소 vs 인라인 요소
HTML 요소는 블록 요소(block-level element)와 인라인 요소(inline element)로 나눌 수 있다.
HTML 요소를 이용하여 마크업을 한 뒤 스타일링을 하기 전에 잠시 살펴볼 것들이 있습니다.
HTML 요소들은 저마다 기본적으로 제공되는(우리가 아무런 스타일 정의를 내리지 않아도) 스타일 속성들이 있습니다.
그 중에서 레이아웃의 기본이 되는 속성들을 기준으로 크게 블록 요소(block-level element)와 인라인 요소(inline element)로 나눌 수 있습니다.
블록 레벨 요소 (block-level elements)
- 블록 요소는 화면의 가로폭 전체를 차지하는 직사각형이다.
- 독립적인 공간을 의미한다.
- 기본적으로
width: 100%스타일 속성을 가지게 된다. (엄밀히 말하자면width: auto) - 해당 요소의 이전 요소와 이후 요소를 개행(줄바꿈)하는 특징을 가진다. (앞 뒤로 자동 줄바꿈이 일어난다.)
- 기본적인 레이아웃 관련 스타일 속성들을 (
width,height,margin,padding) 지정하여 형태를 지정할 수 있다. - HTML 문서상에서 전반적인 흐름을 유도하는 컨텐츠로서 포함되는 카테고리로 인식된다.
- HTML5의 블록 요소:
address,article,aside,audio,blockquote,canvas,dd,div,dl,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,noscript,ol,output,p,pre,section,table,ul,video
▶ 예제실습코드 1-2 : Block-level Elements
인라인 요소 (inline elements)
- 너비(width)와 높이(height) 속성이 적용되지 않는다.
- 상, 하단 외부 여백(margin-top, margin-bottom) 속성이 적용되지 않는다.
- 좌, 우에 약 4px 가량의 외부 여백(margin)이 자동으로 발생한다.
- HTML5의 인라인 요소:
a,abbr,acronym,b,bdo,big,br,button,cite,code,dfn,em,i,img,input,kbd,label,map,object,q,samp,small,script,select,span,strong,sub,sup,textarea,tt,var