CSS display속성

이번에는 css 속성중 display 속성입니다.

display는 엘리먼트를 화면에 표시하고 배치하는 방식을 정합니다.

그럼 엘리먼트는 또 머야?

엘리먼트는 하나의 문단 요소 즉 시작태그에서 종료태그까지를  말합니다,

ex) <span> 부자되세요~ </span> 

    <div> 부자되세요~ </div> 

    혹은 </br>

등 과 같은 것이죠

위의 <span> 태그와 <div> 태그는 화면에 보여지는 방식이 다른데

display 속성을 이용하여 이를 다르게 보일수 있다는 것입니다.

html에 직접 속성값을 입히는 것이 css로 그 일을 넘겨주면서

display 속성타입은 지금도 계속 늘어나는 중입니다.

여러가지 속성중 자주 쓰이는 몇가지 속성만 보면

선택자{display:none} - 선택자가 포함된 컨텐츠 자체가 사라짐 (영역이 없음)

선택자{display:inline} - 선택자를 인라인속성으로 변경 -  div를 span으로

선택자{display:block} - 선택자를 블럭속성으로 변경 - span을 div으로

선택자{display:inline-block} - 선택자를 인라인속성을 유지하면서 블럭효과를 적용

여기서 인라인 속성과 블럭 속성이 나오는데

인라인 속성은 글자처럼 한줄로 죽 이어사용하기가 가능 한 것을 말하며

크기지정을 할수 없고 마진또한 좌우만 적용됩니다.

블럭 속성은 한줄을 다차지하고 다음줄로 넘어가는 문단같은 것을 말하며

임의 크기지정이 가능하고 모든 마진 값을 다 지정 가능합니다.

부자되세요~;

span 속성입니다.

부자되세요~

div 속성입니다.

span은 위와 같이 인라인 속성으로 내용을 폭만큼 넓이가 있어

그 속성의 넓이와 높이 등을 지정할수 없습니다.

이때 {display:block} 속성을 주면  아래와 같이 

span 태그에 넓이와 높이를 줄수 있습니다.

부자되세요~;

<span id="ds"> 부자되세요~;</span>

 #ds {border:1px solid #1DDB16; display:block; width: 200px; height:50px; }

반면 {display:inline-block} 속성을 주면

span 태그에 block 속성을 주어 높이와 넓이를 주면서

span 태그의 inline 속성까지 유지 할 수 있습니다.

부자 되 세요

<span class="dis"> 부자 </span>

<span class="dis"> 되 </span>

<span class="dis"> 세요 </span>

.dis {border:1px solid #1DDB16; display:inline-block; width: 100px; height:30px; }

선택자{display:none} 와 유사한 속성중

선택자{visibility:hidden;} 속성이 있습니다.

display:none과 유사하지만 display:none은 컨텐츠 자체의 영역이 없고

visibility:hidden은 선택자가 포함된 컨텐츠가 감춰짐 (영역이 있음)에

그 차이가 있습니다.