HTML, CSS 내맘대로 정리/CSS
인라인 요소와 블록 요소 정리
yumino
2020. 4. 10. 04:11
반응형
block요소
- block,inline요소를 감쌀 수 있음.
- width: 100%, height: 0으로 시작.
- 크기를 지정할 수 있음.
- 항상 (한 영역을 다 차지하여) 줄바꿈되서 시작이 되며 가로폭 전체의 넓이를 가지는 직사각형 형태가 됨.
- width, height, margin, padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있음.
- 종류 : 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
inline요소
- inline만 감쌀수있음.
- 항상 블록요소 안에 포함 되어있음.
- 필요한 만큼의 가로 너비만 사용함. 줄바꿈 성질이 없어 한줄로 출력됨.
- width:0; height:0;으로 시작. 변형을 줄 수가 없음.
- margin과 padding - 위,아래 사용 불가
- line-height로 줄의 높낮이를 조절할 수 있고, text-align으로 텍스트의 중앙, 좌,우측 정렬을 할 수 있음.
- 종류 : 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
***** 예외 - a 태그는 모든 다 감쌀 수 있다. *****
반응형