html에서 블록과 인라인 요소..

html에서 기본적으로 블록요소와 인라인 요소가 있습니다

블록요소는 무엇이고 인라인 요소는무엇인지에 대해 자세히 알아보도록 할께요

block element

기본적으로 가로폭 전체의 길이를 가진 직사각형의 모양을 하고 있습니다

가로폭 길이의 직사각형모양을 가지고 있기에 뒤에오는 요소는 줄바꿈이 일어난다

body 요소 안에서만 사용할 수 있다

width, height,margin,padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다

블록안에 인라인을 포함할 수도 있고 같은 블록라인도 css로 바꾸어 포함할 수도 있습니다

display:inline css명령어로 블록요소를 인라인 요소의 속성으로 바꿀수 있습니다

특히 div를 inline 요소처럼 변경할 수 있다

div{display:inline}

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, 

from, h1-h6. header, hgroup, hr, noscript, ol, output, p,  pre, section, table, ul, video

inline element

폭이 없는 그전 단순히 글자끝 까지만 표시를 할 수 있다

인라인 요소는 항상 블록 요소안에 포함되어 있으며 줄바꿈 없이 표시된다

line-height로 줄의 높낮이을 조절 할 수 있고 텍스트의 좌,우 중앙정렬을 할 수 있습니다

display:block css 명령어로  인라인 요소를 블록 요소의 속성으로 변경할 수 있습니다

div {display:block}

inline-block 으로 인라인 요소와 블록요소의 속성을 갖는 속성으로 변경이 가능합니다

div {display: inline-block} 

텍스트 레벨 요소라고 부른다

a, addr, acronym, b, bdo, button, dite, code, dfin, em, i, img, input, kbd, label, map, object, q, 

samp, script, select, small, span, strong, sub, sup, textarea, var

결론적으로  블록이나 인라인 요소는 기본적인 특성을 가지고 있으나

css 명령어 사용으로 인해 인라인으로도 블록이로도 

둘다의 속성을 가진 요소로 바꿀수있다는 뜻이네요

block element 와 inline element 는 body안에서 움직이는 요소이며

block element는 직사각형 모양으로 한줄 전체를 다 사용하고

inline element 는 텍스트만 사용한다

block element 직사각형안에  inline element 을 포함하지만 같은 block element  div를  

css 명령어인 div{display:inline} 사용해서 인라인처럼 사용한다

inline element 는 css 명령어인 div{display:block} 으로 바꿔 블럭요소처럼 사용할 수도 있고

div{display:inline-block} 인라인과 블록요소 둘 다 가진 속성으로도 바꿔 사용할 수 있다