[HTML/CSS] CSS의 Display속성
[HTML/CSS] CSS의 Display속성
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
Display는 요소를 보여주기 위한 방식을 지정하는 속성입니다. * Inline * Block * List-Item * Run-In * Inline-Block * Inline-Table * Table * Table-Row-Group * Table-Header-Group * Table-Footer-Group * Table-Row * Table-Column-Group * Table-Column * Table-Cell * Table-Caption * None 종류가 많으니 자주 사용하는 속성값만 설명 드립니다. |
|
|
|
|
Inline
|
태그 |
속성 |
속성값 |
비고 |
|
style |
display |
inline |
인라인 속성으로 보여줌 |
|
인라인 속성으로 보여줍니다. 앞서 다룬 블록 요소 & 인라인 요소에서 태그들은 기본적인 속성을 지니고 있다고 설명 했습니다. 따라서 Display속성을 사용하여 블록 요소의 태그들을 인라인 요소로 표현 할 수 있게 합니다. |
Block
|
태그 |
속성 |
속성값 |
비고 |
|
style |
display |
block |
블록 속성으로 보여줌 |
|
블록 속성으로 보여줍니다. 앞서 다룬 블록 요소 & 인라인 요소에서 태그들은 기본적인 속성을 지니고 있다고 설명 했습니다. 따라서 Display속성을 사용하여 인라인 요소의 태그들을 블록 요소로 표현 할 수 있게 합니다. |
Inline-Block
|
태그 |
속성 |
속성값 |
비고 |
|
style |
display |
inline-block |
인라인 속성과 블록 속성을 함께 사용함 |
|
기본적으로 인라인 속성을 띄고 있으나 width, height나 margin같은 블록 특성도 함께 지니고 있습니다. |
< 연습하기 >
