[프론트엔드 개발자 면접 문제 02] 인라인 요소와 블록 요소

HTML의 태그에는 인라인 요소와 블록 요소로 이루어져 있습니다. 이것에 대해 제대로 숙지하지 않으면 CSS가 제대로 먹히지 않습니다. 하지만 이것보다 더 큰 문제는 각 요소를 제대로 파악하지 않으면 HTML의 문서 흐름을 방해하고... 만약 면접관이 직접 만들어보라고 했을 때 인라인 요소 안애 블록 요소를 넣는다? 당신의 면접에 아주 악영향을 줄 것입니다...

블록요소와 인라인 요소를 구분하자면 다음과 같습니다.

 

이미지로 보는 블록요소와 인라인 요소

 

블록요소

 

1. 줄 바꿈이 일어남.

2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음

3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음

 

블록요소의 종류

 

address,article,aside,audio,blockquote,canvas,dd,div,dl,
fieldset,figcaption,footer,form,h1,h2,h3,h4,h5,h6,
header,hgroup,hr,noscript,ol,output,p,section,table,ul,video

 

인라인요소

 

1. 줄 바꿈이 일어나지 않음.

2. 인라인 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음.

3. 인라인 요소 안에는 블록 요소를 포함할 수 없음.

4. 인라인 요소와 텍스트는 블록 요소 안에 포함되어야 함

 

인라인 요소의 종류

 

a,br,button
,em,i,img,input,label,map
q,samp,select,span,strong,textarea