css display none과 block 속성 이해하기 [html/css]

 

 

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 에 대해서 보충 설명드리겠습니다. 글만보고선 반만 이해하셨을듯 하니 소스 이미지를 보면서 다시한번 알아보시죠.

 

 

 

위 이미지는 display block, display none을 이해시키기위한 소스 화면입니다. 연한초록 바탕부분을 보시면 style 로 block, none이 들어가있습니다. 이 화면을 출력해 보도록하죠.    출력화면입니다.  뭔가 부족해 보입니다.

 

"디스플레이 블록" 이라는 텍스트는 보입니다만 "디스플레이 논" 이라는 텍스트 문구는 보이지 않습니다. 위에서 설명을 하였듯이 자기영역을 아예 지워버린겁니다. 그래서 출력이 되지 않았던거죠. 이해되셨나요? 

 

 

 

출처 | blog.naver.com/kyujung83?Redirect=Log&logNo=50178772568