CSS Property - Display 기본 속성

 

 

CSS Display

 

---

 

• HTML은 크게 Block level element 와 Inline level element로 나뉩니다.
• 이것은 display라는 css속성을 통해 다른 요소처럼 표시되게 할 수 있습니다.
  
  
• 하지만 본질적으로 부여받은 블럭,인라인,테이블등의 자기본질은 변하지 않으므로, CSS에서 display 방식을 바꾸었더라도 HTML마크업의 규칙은 지켜야함은 주의하셔야 합니다.
• 예를들어 <p>태그 내에 <div>태그가 오지못하는 경우, css에서 display 방식을 바꾸어도 마찬가지로 유효하다는 이야기가 될 수 있습니다.

 

 

CSS display에 대해서 알아봅시다~!

 

Welcome to CODING HELL

Display Overview

- 모든 HTML element의 display방식을 변경하여, 원하는대로 css로 제어할 수 있습니다.

- 참조사이트 - 바로가기

 

 

A. Display 속성에 대하여 알아보자.

 

기본적으로 많이 사용하는 Display의 속성값을 알아봅시다.

Property	Value	Description	note
display	none	요소를 숨김	숨겼다가 마우스롤 올리면 보이거나 또는 모달팝업을 미리 숨겨둘 떄에도 많이 사용됩니다.
	block	Block 요소의 성질을 갖게 함	a 태그 같은경우 인라인요소여서 크기를 가질 수없을때에, dipslay:block을 선언받으면, 블럭요소처럼 css의 박스모델을 모두 사용할 수 있게 됩니다.
	inline	Inline요소의 성질을 갖게 함	블럭요소지만, 인라인요소처럼 여러줄에 표시하고 싶을때에 사용합니다.
	inline-block	Inline-block 요소의 성질을 갖게 함	인라인요소를 유지하면서, 블럭요소의 성질만 받고 싶을때에 사용합니다.

 

Layout용으로 사용하는 Display의 속성값을 알아봅시다. - Flex, Grid는 다음 포스트에서 자세히 다뤄봅니다.

Property	Value	Description	note
display	flex	flexable 형식의 그룹박스로 만든다.	flex 속성일때에 사용할 수 있는 추가 속성들과 child요소들의 변화를 잘 익혀야 한다.
	gird	grid 형식의 그룹박스로 만든다.	불규칙 박스형태의 레이아웃을 만들때에도 용이하며 flex와 공통으로 사용되는 추가 속성들이 있다.
	table	실제 table태그처럼 표시되도록 할 수 있다.	내부의 요소들을 실제 테이블처럼 마크업 한후 차례대로 사용하면, div태그로도 표처럼 표시되게 만들 수 있다. 반응형때문에 표로 하기 어려울 경우 가끔 사용되지만, 추천하지는 않는 편이다.

 

 

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.