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 태그는 모든 다 감쌀 수 있다. *****

반응형