본문 바로가기

Display 속성 오브젝트 숨기기 { css 공부하기 }

PUBLISHING/CSS 2020. 6. 30.

dipslay 속성 css

안녕, 오늘은 Css 속성 중 하나인 Display에 대해 알아 볼꺼야. Display 단어 뜻에서도 알 수 있듯이 표시, 전시에 관한 속성이다. 오브젝트를 어떻게 보여줄 것인가(영역) 혹은 숨길 것인가를 설정 할 수 있는 속성이기에 자주 사용하는 Css이다. 


Display에는 4가지 속성이 있다. 

.ex1  {display: none;}
.ex2  {display: block;}
.ex3  {display: inline;}
.ex4  {display: inline-block;}


속성 1. Display : none;

오브젝트를 표시하지 않는다. 오브젝트를 숨기는 요소로 주로 사용되며, 영역을 차지하지 않고 렌더링 단계에서 부터 오브젝트를 숨긴다.
예) 블로그 스킨을 변경 하였는데, 자신에게 필요 없는 부분이 있다면 간단하게 display:none;으로 해당 오브젝트를 숨길 수 있다. 
예2) 클릭이벤트로 오브젝트를 컨트롤(표시/비표시)에 사용된다. 


See the Pen gOPGZyy by lee kwang jae (@estyless) on CodePen.



속성 2. Display : block;

가로 영역을 모두 차지하여, block 요소 뒤에는 무조건 다음 줄에 렌더링 표시 된다. 영역을 독식하고, 줄바꿈이 된다고 생각하면 편하다. 

See the Pen LYGzMom by lee kwang jae (@estyless) on CodePen.



속성 3. Display : inline;

Block 속성과 반대되는 개념으로 줄바꿈이 되지 않는다. float를 생각하면 이해가 쉽겠다. 하지만 width, height를 지정할 수 없다. text-decoration을 반영하는 용도로 주로 사용된다. 

See the Pen bGEoOPG by lee kwang jae (@estyless) on CodePen.



속성 4. Display : inline-block;

Inline 속성과 block의 속성 혼합이라 생각하면 쉽다. inline은 width, height를 지정할 수 없다고 앞에 언급하엿다. inline-block은 with, height를 지정할 수 있다. 줄바꿈은 inline과 같이 되지 않는다.

See the Pen ExPwGBb by lee kwang jae (@estyless) on CodePen.


특히 초보들에게 Dispay: none; 속성은 상당히 유용하다. 코드 삭제로 인한 오류를 예방할 수 있다. Display는 오브젝트 표시 여부와 영역 지정 속성임을 기억하고 활용하길 바란다.

Ps. 외우려 하지 말고 개념만 잡아 놓고 검색하자. 프로그래머도 검색한다. 


댓글