(*매우중요) CSS - block요소, inline요소

(*매우중요) CSS - block요소, inline요소

 

#1 block요소

 

1)특징

-블록 요소를 여러개 연속해서 쌓을 경우, 자동으로 다음 줄로 넘어간다.

-좌/우 양쪽으로 늘어나서 부모 요소의 너비를 가득 채운다.

-width, height 값은 box를 기준으로 먹여지는 값이다. block요소에는 적용된다.

-display에 속성을 부여해서 block -> inline, inline -> block으로 변환이 가능하다.

예: display: inline;

그러면 이 명령이 유효한 한에서는 block요소도 inline요소로 속성이 적용된다.

-vertical-align이 적용되지 않음

-test-align이 적용되지 않음

---

2)태그들

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

---

#2 inline요소

 

1)특징

-여러개의 요소를 연속해서 입력해도, 자동으로 다음 줄로 넘어가지 않는다.

-태그에 할당된 공간 만큼의 너비만 차지한다.

-width, height 값은 box를 기준으로 먹여지는 값이다. inline요소에는 적용되지 않는다.

-display에 속성을 부여해서 block -> inline, inline -> block으로 변환이 가능하다.

예: display: block;

그러면 이 명령이 유효한 한에서는 inline요소도 block요소로 속성이 적용된다.

---

2)태그들

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