Display 속성 오브젝트 숨기기 { 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. 외우려 하지 말고 개념만 잡아 놓고 검색하자. 프로그래머도 검색한다.
'PUBLISHING > CSS' 카테고리의 다른 글
Text-overflow 2줄 말줄임표 사용법 {css 코드 공부하기} (0) | 2020.06.01 |
---|---|
White-Space 속성 {CSS 코드 공부하기} (0) | 2020.05.31 |
댓글