티스토리 뷰
반응형
레이아웃 관련 스타일 CSS - 블록 레벨 / 인라인 레벨 요소
- 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다.
- 블록 레벨 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이므로 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.
너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 합니다.
< div > 태그나 < p > 태그 등이 블록 레벨 요소를 만드는 대표적인 태그입니다. - 인라인 레벨 요소는 줄을 차지하지 않는 요소입니다. 즉 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다.
- 인라인 레벨 요소는 한줄에 여러 개의 인라인 레벨 요소를 표시할 수 있습니다.
< img > 태그나 < strong > 태그등이 인라인 레벨 요소를 만드는 태그입니다.
종류 | 해당 태그 |
---|---|
블록 레벨 태그 | < p >, < h1 >~< h6 >, < ul >, < ol >, < div >, < blockquote >, < form >, < hr >, < table >, < fieldset >, < address > |
인라인 레벨 태그 | < img >, < object >, < br >, < sub >, < sup >, < span >, < input >, < textarea >, < >, < label >, < button >, |
반응형
댓글
© 2019 Eun's