[CSS] hidden, none 차이점

2017. 10. 27. 17:18
반응형

[CSS] hidden, none 차이점  

 1. display:none  / block

    눈에서 뿐만아니라 공간도 차지않음

 

2. visibility:hidden / visible

    눈에서 만 보이지않고 공간은 정해진 만큼의 공간 차지함



▼ display:none ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <style>
  #box{
   display:none;
  }
 </style
</head>
<body>
 <span>하나</span>
 <div id="box">
<span> 요기데이터있음</sapn>
 </div>
 <span>두개</span
 
 
<!--result-->
하나 두개
 
cs



▼ visibility:hidden ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <style>
  #box{
   visibility: hidden;
  }
 </style
</head>
<body>
 <span>하나</span>
 <div id="box">
<span> 요기데이터있음</sapn>
 </div>
 <span>두개</span


<!--result-->
하나
두개
 
cs





반응형

BELATED ARTICLES

more