TIL 5 | CSS(layout)_2.display

mincode_·2020년 11월 17일
0

html&css

목록 보기
2/4
post-thumbnail

inline & block

HTML 태그는 크게 블럭요소와 인라인 요소로 나눌수 있다.

블록 요소는 항상 새 줄에서 시작하여 왼쪽에서 오른쪽으로 페이지의 전체 너비를 차지하며 앞 뒤에 줄바꿈이 있다.
인라인 요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있다. 그리고 기본적으로 컨텐츠가 지닌 넓이 만큼 넓이로 가지게 된다.

블럭요소

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

인라인요소

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

주의할점

  1. inline 요소는 컨텐츠 양 만큼을 넓이로 가지기 때문에 with 나 height 값을 조정할수 없다.

그런데, 이렇게 default값으로 가지고 있는 display 값을 css 로 바꿀수 있다.

a { display: block;}
div { display: inline}
p { display: inline-block}

inline-block

그렇다.
CSS로 inline 요소의 특징과 block 요소의 특징을 합친 inline-block 요소를 가지게도 만들수 있다..!

inline-block 본인의 컨텐츠 만큼 넓이를 가지지만 인라인 요소에서는 하지 못하던 width 값과 height 값을 조정할수 있다.

profile
그림그리는 프론트앤드 개발자 입니다

0개의 댓글