front-end/HTMI CSS
CSS 공간분할태그, 가시속성
Hoon0211
2023. 6. 7. 11:10
728x90
1. 공간분할태그
경계를 분할하거나 영역을 나눌 때 사용하는 태그
<div>, <span>
<body>
<h1>오늘부터 <span>지각</span> 금지!</h1>
<div id ="one">1번 BOX
<div id = "three">
<p> 3번 BOX는 1번 BOX 안에서 또 공간을 나눔</p>
</div>
3번 BOX 아래인데 1번 BOX 영역이야
</div>
<div id ="two">2번 BOX
</div>
</body> <style>
span{
color: red;
}
#one{
background-color: wheat;
}
#two{
background-color: darkkhaki;
width: 200px;
height: 200px;
}
#three{
background-color: coral;
width: 150px;
height: 150px;
}
</style>
2. 가시속성(visibility)
- visible : 눈에 보이게 하는 속성
- hidden : 눈에 보이지 않는 자리는 차지함
<body>
<div id="grayB">
<p>회색 box 안</p>
<div id=yellowB>
(노란 box 공간)
</div>
<div id="greenB">
(초록 box 공간)
</div>
</div>
</body><style>
#grayB {
width: 300px;
height: 300px;
background-color: gray;
}
#yellowB {
width: 100px;
height: 100px;
background-color: yellow;
}
#greenB {
width: 100px;
height: 100px;
background-color: green;
}
</style>
* hidden과 none의 차이점!
- hidden
자리를 남긴다.
#yellowB {
width: 100px;
height: 100px;
background-color: yellow;
visibility: hidden;
}
- none
자리도 삭제를 한다.
#yellowB {
width: 100px;
height: 100px;
background-color: yellow;
display : none
}
728x90