웹프로그래밍/css

CSS - display, visivility 보이기, 숨기기, 인라인, 블럭

zelkova 2017. 2. 11. 13:37


<목차로 돌아가기>


디스플레이 속성으로 인라인과 블록을 설정할 수있습니다.

display : inline;


display의 속성

block : 블록

inline : 인라인

none : 없는 것으로 간주

hidden :화면에서 감춰짐



inline과 block의 차이


HTML블록요소는 블록요소이거나 인라인 요소 중의 하나에 속한다. 일반적인 문서의 흐름에서 HTML 요소는 블록 요소냐 인라인 요소냐에 따라서 다음과 같이 화면에 표시된다.


블록요소(block)

화면의 한 줄을 전부 차지한다. 즉, block은 무조건 한줄은 점유하고 다음줄로 가버림.


ex)  가위, 풀, 종이, 색연필 


결과)

가위 

풀

종이

색연필


인라인요소(inline)

한 줄에 차래대로 배치된다.


ex)  가위, 풀, 종이, 색연필 


결과)

가위, 풀, 종이, 색연필


inline의 대표적인 태그는 <span>이라는 태그의 성질로 content/text크기만큼만 점유하고 동일 라인에 붙는 성질입니다.


- width/height 적용 불가

- margin/padding-top/bottom 적용 불가

- line-height 원하는 대로 적용 불가
  (span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)





display


 속성

 설명

 inline

 인라인 속성을 가집니다.

 block

 block 속성을 가집니다.

 inline-block

 inline과 block의 짬뽕입니다. 

 none

 요소가 전혀 표시되지 않습니다
 (레이아웃에는 영향을주지 않음).


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.     .dis1 li{
  6.         display:inline;
  7.         border:1px solid #000;
  8.         height:50px;
  9.         width:200px;
  10.     }
  11.     .dis2 li{
  12.         display:block;
  13.         border:1px solid #000;
  14.         height:50px;
  15.         width:200px;
  16.     }
  17.     .dis3 li{
  18.         display:inline-block;
  19.         border:1px solid #000;
  20.         height:50px;
  21.         width:200px;
  22.     }
  23.     .dis4 li{
  24.         display:none;
  25.         border:1px solid #000;
  26.         height:50px;
  27.         width:200px;
  28.     }
  29.   </style>
  30. </head>
  31. <body>
  32.   <ul class="dis1">
  33.       <li>test1</li>
  34.       <li>test2</li>
  35.       <li>test3</li>
  36.   </ul>
  37.   <ul class="dis2">
  38.       <li>test1</li>
  39.       <li>test2</li>
  40.       <li>test3</li>
  41.   </ul>
  42.   <ul class="dis3">
  43.       <li>test1</li>
  44.       <li>test2</li>
  45.       <li>test3</li>
  46.   </ul>
  47.   <ul class="dis4">
  48.       <li>test1</li>
  49.       <li>test2</li>
  50.       <li>test3</li>
  51.   </ul>
  52. </body>
  53. </html>



display 기타속성


속성

설명

flex

플랙스 컨테이너로 표시합니다.

inline-flex

요소를 인라인 레벨 플렉스 컨테이너로 표시합니다. CSS3의 새로운 기능

inline-table

요소가 인라인 수준 테이블로 표시됩니다.

list-item

요소가 <li> 요소처럼 동작하도록합니다.

run-in

문맥에 따라 요소를 블록 또는 인라인으로 표시합니다.

table

요소가 <table> 요소처럼 동작하도록합니다.

table-caption

요소가 <caption> 요소처럼 동작하도록합니다.

table-column-group

요소가 <colgroup> 요소처럼 동작하도록합니다.

table-header-group

요소가 <thead> 요소처럼 동작하도록합니다.

table-footer-group

요소가 <tfoot> 요소처럼 동작하도록합니다.

table-row-group

요소가 <tbody> 요소처럼 동작하도록합니다.

table-cell

요소가 <td> 요소처럼 동작하도록합니다.

table-column

요소가 <col> 요소처럼 동작하도록합니다.

table-row

요소가 <tr> 요소처럼 동작하도록합니다.

initial

이 속성을 기본값으로 설정합니다.

inherit

부모 요소에서이 속성을 상속받습니다.




visivility


 속성

 설명

 visible

 요소를 보여줍니다. 기본값임.

 hidden

 요소를 보이지 않게 합니다.

 그렇지만 여전히 공간을 차지합니다.

 collapse

 표 요소에만 작용합니다.

 행이나 열을 제거하지만 표 레이아웃에는 영향을 주지 않습니다. 

 행 또는 열에 의해 차지된 공간은 다른 내용으로 대체 가능합니다.

 축소가 다른 요소가 사용되면 '숨김'으로 랜더링됩니다.

 none

 사라집니다. 뿅..?




  1. <html>
  2. <head>
  3. <style>
  4. h1.visible {
  5.     visibility: visible
  6. }

  8. h1.hidden {
  9.     visibility: hidden
  10. }
  11. </style>
  12. </head>
  13. <body>

  15. <h1 class="visible">This is a visible heading</h1>
  16. <h1 class="hidden">This is an invisible heading</h1>
  17. <p>Notice that the invisible heading still takes up space.</p>

  19. </body>
  20. </html>



display:none, visivility:hidden의 차이점


display : none 공간이 사라짐

visibility : hidden 공간이 그대로임


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div{
  6. width:80px;
  7.     height:40px;
  8.     padding:0px;
  9.     margin:0px;
  10.     border:1px solid #000;
  11. }
  12. div.display {
  13.     display:none;
  14. }

  16. div.visible {
  17.     visibility: hidden;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div>display1</div>
  23. <div class="display">display2</div>
  24. <div>display3</div>
  25. <br><br>
  26. <div>visible1</div>
  27. <div class="visible">visible2</div>
  28. <div>visible3</div>

  30. </body>
  31. </html>





레이아웃

이런것을 활용하여 박스의 모양을 맞추어 반응형 홈페이지로 만들 수 있습니다.



position:static의 블록요소에 사용된다.

이 속성이 사용되면 컨테이너 안 다른 요소가 이 요소를 감싸며 배치된다.



반응형
저작자표시 비영리 변경금지

'웹프로그래밍 > css' 카테고리의 다른 글

Webkit이란?  (0) 2017.02.16
CSS - Position의 이해  (0) 2017.02.12
CSS3 애니메이션  (0) 2016.03.04
CSS 효과 및 필터  (0) 2016.03.04
CSS 박스모델 - 경계선  (0) 2016.02.29

'웹프로그래밍/css'의 다른글

  • 현재글CSS - display, visivility 보이기, 숨기기, 인라인, 블럭

관련글

티스토리툴바