How to show, hide using display - CSS

How to show, hide using display - CSS

The homepage is a visualization of a coding list of many tags. 
If you don't need it, you can erase it, but what if it's not visible to the eye, but it's a necessary part? 
Of course, you can hide it with the hidden attribute, but you can use the display in the CSS to hide it by giving it none or hidden, so let's find out how.     


1. Understanding the display 

Display is the property used by the CSS. Decide "what it will look like." 
It can be used anywhere, whether it's div, table, or span. 
You can add a style item to the object you want to apply and process it as follows. 

<div style="display:desired elements;">Content </div>

For example, if you put a code to experiment with a tag, you don't want it to be visible to visitors 
If there is a letter that I want to see by myself, 
You can't see it on the monitor, but you can see it when you see the sauce 
I've been getting some value from another tag, 
There are many ways to use it, such as if you want to overwrite the variable so that it is not visible visually.   ​  

2. How to hide with a display 

Now that I've shown you the basic tags above, let's look at other applications.
I put it in the div above, so I put it in the span this time. 

<span style="display:none;">Content </span> 

The above is the first way to hide an object, and if you attach none, you can't see it and hide it without taking up a seat.    

<span style="display:hidden;">Content </span> 

The above is the second way to hide the object, and if you attach hidden, you can't see it, but it takes up the place.       


3. Explain the difference between none and hidden 

Both none and hidden are invisible, but there's a difference in space.  
If css gives hidden to the properties of the display, it disappears invisible, but the spot becomes empty. 
For example, when writing a word, it's like you can't see it on the monitor by changing the letters to white instead of deleting them.  
However, if you give none to the attribute, the size of the space that was hidden is treated as zero, and the pictures or letters below it are raised and attached. 
For example, if you delete a letter from a word, the paragraph below appears. 
However, because it is an attribute of the display, it does not really disappear, but only the size has become zero.​    ​

4. Other properties of the display... 

In addition to hidden and none, display has properties such as block, inline, and inline-block. 
Let's talk about block, inline, inline-block in another article.

[How to show and hide using the display - CSS]