html display 속성

 

 

 

display 속성에 대해서 메모해놓는다.

​

display 속성은 요소를 어떻게 표시할지를 선택한다.

​

다음은 display 옵션에 대한 설명이다.

 

display:inline -> 기본값으로, 요소를 inline 요소처럼 표시합니다. 
                  따라서 앞뒤로 줄바꿈되지 않습니다.
display:block -> 요소를 block 요소처럼 표시합니다. 따라서 앞 뒤로 줄바꿈됩니다.
display:none -> 박스가 생성되지 않습니다. 따라서 공간을 차지하지도 않습니다.
display:inline-block -> 요소는 inline인데 내부는 block처럼 표시합니다.

 

 

* 추가설명 :

요소는 inline과 block으로 나뉘는데,

inline 태그는 <b>, <span> 등 특정 문자열을 선택할때 사용되는 태그가 예이다. 줄바꿈이 되지 않는다.

block은 좀 더 넓은 범위를 지정할 때 사용하는 <p><h1><div><ul>같은 태그로 block 요소를 사용할 때는 가로화면 100%를 차지하기 때문에 자동으로 앞뒤 줄바꿈이 된다.

​

​

​

​

​

집중력이 줄어들었을때쯤 끄적끄적..다시 홧팅!

​