[HTML5 & CSS3] CSS와 박스 모델

▶ CSS와 박스 모델

​

*블록 레벨 요소와 인라인 레벨 요소

종류	해당 태그
블록 레벨 태그	<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨 태그	<img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

​

​

*width, height 속성 - 콘텐츠 영역의 크기

​

기본형)

width : <크기> / <백분율> / auto

height : <크기> / <백분율> / auto

속성 값	설명
<크기>	너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정한다.
<백분율>	박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정한다.
auto	박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정된다.

​

박스 모델의 너비와 높이 지정하기

​

 

*display 속성 - 화면 배치 방법 결정하기

display 속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있다.

​

기본형) display : none / contents / block / inline / inline-block / table / table-cell 등

​

- block 속성 값

이미지를 인라인으로 혹은 블록 레벨로 배치하기

​

 

- inline 속성 값

인라인으로 배치하기

​

 

- inline-block 속성 값

블록 레벨 속성을 가지면서 인라인으로 배치하기