인라인
-
CSS - 박스모델프론트엔드/CSS 2020. 8. 23. 23:17
박스 모델이란? CSS의 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 가리킨다. HTML에서 , 등으로 문서를 작성하게 되면 눈에는 보이지 않지만 태그별로 공간을 점유하게 된다. 문서 내용과 주변 공간을 통틀어 박스라 한다. 태그 별로 문서 부분 이외에 padding과 margine 값을 가지게 된다. 그림처럼 HTML 본문을 'contents'라 하면 해당 문서의 경계인 'border' 사이에 'padding'이 존재한다. 그리고 경계선인 'border' 밖으로 'margin'이 존재한다. 블록 레벨과 인라인 레벨 위 박스 모델을 블록 레벨과 인라인 레벨로 나눠진다. 블록 레벨 블록 레벨의 경우 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소다. 블록 레벨인 태그를 써서 ..