Block 요소와 Inline요소

독학으로 공부하며css에서 가장 난해 했던 html태그의 블럭과 인라인 요소 이를 잘 이해해야 css를 잘 사용 할 수 있는 것 같다.

 

우선 css의 box-model은 margin, padding, border, content area를 갖는다

 

Content area : 콘텐츠 경계(content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다. 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)입니다. 배경색과 배경 이미지를 가지고 있기도 합니다.

box-sizing 속성의 값이 기본값인 content-box이며 요소가 블록 레벨 요소인 경우, 콘텐츠 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 사용해 명시적으로 설정할 수 있습니다.

 

padding area : 안쪽 여백 경계(padding edge)가 감싼 영역으로, 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장합니다. 영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이입니다.

안쪽 여백의 두께는 padding-top, padding-right, padding-bottom, padding-left와 단축 속성인 padding이 결정합니다.

 

border area: 테두리 경계(border edge)가 감싼 영역으로, 안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장합니다. 영역의 크기는 테두리 박스 너비와 테두리 박스 높이입니다.

테두리의 두께는 border-width와 단축 속성인 border가 결정합니다. box-sizing 속성의 값이 border-box라면 테두리 영역의 크기를 width, min-width, max-width, height, min-height, max-height 속성을 사용해 명시적으로 설정할 수 있습니다. 박스의 배경(background-color 또는 background-image)은 테두리의 바깥 경계까지 늘어나고, 그릴 땐 테두리에 가려집니다. 이 동작 방식은 background-clip 속성으로 바꿀 수 있습니다.

 

margin area: 바깥 여백 경계(margin edge)가 감싼 영역으로, 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만듭니다. 영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이입니다.

바깥 여백 영역의 크기는 margin-top, margin-right, margin-bottom, margin-left와 단축 속성인 margin이 결정합니다. 여백 상쇄가 발생할 때는 요소 간에 바깥 여백이 공유되므로 여백 영역이 명확하게 결정되지 않습니다.

끝으로, 비대체 인라인 요소가 차지하는 공간의 크기(줄 높이에 기여하는 양)는, 요소 주위에 테두리와 안쪽 여백이 표시되더라도 line-height (en-US) 속성으로 결정한다는 점을 주의하세요.

block 요소

블록 요소는 모든 인라인 요소를 포함 할 수 있고 다른 블록요소도 일부 포함 할 수 있다.

가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width, height, margin, padding 등을 사용하여

형태를 변형하며 레이아웃을 수정 할 수 있다

요소 다음에는 줄바꿈이 이루어짐.

 

블록요소를 인라인으로 변경이 필요할 경우

{display: inline;}

 

 

HTML5의 블록요소 종류

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3~~

header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video등등

 

inline 요소

인라인 요소는 항상 블록 요소안에 포함되며 인라인 요소가 다른 인라인 요소에 포함 될 수 있다.

기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 됨- width, height의 변형을 줄 수없음.

인라인 요소는 line-height으로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 중앙, 좌, 우 측 정렬을 할 수 있다.

줄바꿈 없이 우측으로 바로 이어 표시됨

 

 

인라인 요소를 블록요소로 변경이 필요할 경우 css에서

{display: block;}

 

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

{display: inline-block;}

 

 

 

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, sub, strong, sup, textarea, tt, var등등

 

* inline-block의 경우 문제점이 있음

-박스간에 공간이 생성됨, 정해진 form이 없음.

- margin-right같은 속성을 사용해서 간격을 맞춰 줄 수는 있지만 시간이 ...

- 그렇게 맞췄다고 해도 창크기에 따라 반응하고 간격이 달라짐.

이것을 해결하기 위해 flexbox를 이용하자

flexbox는 다음 포스팅으로.