HTML CSS display none과 block 속성에 대한 이해

CSS display none과 block 속성 이해하기

  
css 속성 중 많이 쓰는 display none, display block 에 대해 알아보자.  
이 css 속성은 javascript, jquery 로 toggle 형식을 만들때 많이 쓰고 있으며, display에는 4가지 속성이 존재한다.

 
1. display - block

2. display - inline

3. display - none

4. display - inline-block
  

위 속성에 대한 기능에 대해서 정리하자면,
 

1. block - 적용된 태그는 블록 요소를 가지며, 가로값이 100%로 줄바꿈이 일어납니다. span태그같이 inline태그에 사용해도 같은 기능을 가집니다.
 
2. inline -적용된 태그는 인라인요소를 가지며, 줄바꿈 되지않고 그안에 들어가있는 텍스트나 이미지 사이즈만큼만의 가로값을 가집니다.    

3. none -적용된 태그는 자기영역을 지워버립니다. 애초에 없었던 태그인것마냥 눈에 보이지 않게 됩니다.

4. inline-block -적용된 태그는 인라인이지만 블록처럼 css요소가 적용됩니다.  예) inline에서 적용되지 않는 margin 기능이나 padding기능이 적용됩니다.
  
이렇게 4가지 속성에 대해서 알아보았고, 저희가 이해할 display block, display none 에 대해서 보충 설명드리겠습니다. 글만보고선 반만 이해하셨을듯 하니 소스 이미지를 보면서 다시한번 알아보시죠.  

<div style="display:block">디스플레이 블럭</div>
<div style="display:none">디스플레이 논</div>

위 이미지는 display block, display none을 이해 시키기 위한 소스 화면입니다. 연한 초록 바탕부분을 보면 style 로 block, none이 들어가 있다. 이 화면을 출력해보면 뭔가 빠진 듯한 느낌이다 (아래 이미지 참조)

* 테두리(border)는 출력시 블럭 영역 이해를 위해 임의로 넣었으니 착오 없으시길 바랍니다.

"디스플레이 블록" 이라는 텍스트는 보입니다만 "디스플레이 논" 이라는 텍스트 문구는 보이지 않는다. 위에서 설명을 하였듯이 자기 영역을 아예 없애버린 것. 그래서 출력이 되지 않는 것이다.

또한 

<div style="display:inline-block">디스플레이 인라인 블럭</div>
<div style="display:inline-block">디스플레이 인라인 블럭</div>

태그를 화면으로 출력하면

이런 식으로 출력이 된다. 인라인 블럭은 줄바꿈 형태가 아닌 행렬로 출력된 것을 볼 수 있다. display:inline-block 태그를 주로 GNB, 상품 리스트, 섬네일 리스트(갤러리), 배너 등 가로형(행) 배열 타입 구조를 짤 때 자주 사용한다.

display:block 같은 경우는 가로폭을 고정값을 주어도 옆으로 붙지 않고 inline-block 과 달리 줄바꿈식 블럭으로 출력된다.

display:block 태그로 display:inline-block 정렬 효과를 주고 싶다면 가로 폭에 대한 일정 값을 주고, float:left 태그를 함께 사용함으로써 가로형 배열을 할 수 있다. display 태그는 레이아웃 구조를 세팅할 때 가장 기초적으로 정의하는 태그이니 꼭 숙지하고 작업하도록 하자. 가장 기초적이면서 가장 중요한 태그 중 하나이다.

---

본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :) 
"당신의 하루가 별보다 빛나길"