[CSS] overflow, visibility, display
🍁오버플로우 (overflow)
박스에 담을 수 있는 내용을 초과하면 초과한 내용이 박스를 빠져나간다. 하지만 height: auto; 값을 주면 그만큼 박스가 커지기 때문에 내용이 빠져나가지 않는다.
만약 박스 크기를 유지하면서 내용을 보이지 않게 하거나 보이게 하고 싶다면 overflow를 사용하면 된다.
<style>
#box {
border: 1px solid black;
width: 200px;
height: 200px;
/* overflow: visible; */
/* overflow: hidden; */
/* overflow: scroll; */
overflow: auto;
}
</style>
visible은 오버플로우가 발생하면 넘치는 대로 두고, hidden은 오버플로우가 발생한 부분을 안 보이게 한다.
scroll은 오버플로우가 발생하지 않아도 scroll 바를 만들고, auto는 오버플로우가 발생하지 않으면 scroll바를 만들지 않는다.
overflow x, y
overflow-x: ;
overflor-y: ;오버플로우는 x와 y에 따라 속성을 다르게 줄 수 있다.
🍁가시성 (visibility)
가시성은 요소를 화면에 보이게 할지, 보이지 않게 할지를 결정하는 것이다.
#cat1 {
visibility: hidden;
}
첫 번째 고양이의 visibility를 hidden으로 설정하자 보이지 않는다. 그런데 고양이가 있던 자리는 그대로 남아있다.
즉, 눈에만 보이지 않을 뿐 요소의 원래 영역은 그대로 유지된다.
hover 기능 활용
#cat1:hover {
visibility: hidden;
}마우스를 올려뒀을 때 고양이를 보이지 않게 하려고 hover를 쓰는 것은 부자연스럽다.
고양이가 나타나고 사라지는 것을 반복하며 깜박이기 때문이다.
첫 번째 고양이 위에 마우스를 올려두면 반응
#cat1:hover + #cat2 {
visibility: hidden;
}#cat1:hover ~ img {
visibility: hidden;
}다른 고양이에게 마우스를 올려뒀을 때 형제 선택자를 사용한다면 자연스럽게 두 번째 고양이를 안 보이게 할 수 있다.
부모 상자 위에 마우스를 올려두면 반응
<body>
<div id="box">
<img src="../asset/images/catty02.png" id="cat1">
<img src="../asset/images/catty04.png" id="cat2">
<img src="../asset/images/catty05.png" id="cat3">
</div>
</body><style>
#box {
border: 10px solid black;
padding: 30px;
}
#box:hover > img {
visibility: hidden;
}
</style>
부모 선택자를 이용하여 박스 위에 마우스를 올려뒀을 때 모든 고양이들을 보이지 않게 할 수 있다.
🍁디스플레이 (display)
디스플레이는 가장 많은 출력 속성을 가지고 있는 기능 중에 하나이다.
display 속성은 HTML 요소가 브라우저에서 보여지는 방법, 즉 레이아웃에 대해 결정한다.
가로로 정렬된 메뉴 만들기
블럭 태그와 인라인 태그 성질 변환
<body>
<h1>블럭 태그</h1>
<div id="box1box">상자1</div>
<div id="box2box">상자2</div>
<div id="box3box">상자3</div>
<h1>인라인 태그</h1>
<a href="#"><link1 class="link">링크1</link1></a>
<a href="#"><link2 class="link">링크2</link2></a>
<a href="#"><link3 class="link">링크3</link3></a>
</body><style>
.box {
border: 1px solid black;
display: inline;
}
.link {
border:1px solid black;
display: block;
width: 100px;
height: 100px;
}
</style>
- 블럭 태그 -> 인라인 태그
- 인라인 태그 -> 블럭 태그
display를 inline 또는 block으로 설정하면 블럭 태그를 인라인 태그로 만들 수 있고, 또한 반대로 인라인 태그를 블럭 태그로 취급할 수 있다.
위 코드에서는 블럭 태그가 인라인 태그로 성질이 바뀌었기 때문에 원래 블럭 태그인 링크 박스의 width와 height를 지정해 줄 수 있게 되었다.
<ul>과 <li> 태그의 공간
<body>
<ul>
<li>메뉴</li>
<li>메뉴</li>
<li>메뉴</li>
<li>메뉴</li>
<li>메뉴</li>
</ul>
</body><style>
ul {
border: 1px solid red;
}
li {
border: 1px solid blue;
}
</style>ul {
border: 1px solid red;
padding: 0;
}
먼저 <ul>태그와 <li> 태그의 공간을 확인해 보도록 하자.
아닛😮 그런데 <li> 태그의 왼쪽에 여백이 있다! 이건 누구의 것일까?
이 여백은 빨간색 상자(ul)가 가지고 있는 안쪽 여백이다.
<ul> 태그의 padding을 0으로 설정하자 여백이 사라졌다.
inline-block
<ul id="menu">
<li>메뉴</li>
<li>메뉴</li>
<li>메뉴</li>
<li>메뉴</li>
<li>메뉴</li>
</ul>#menu li {
display: inline-block;
width: 15%;
}
<li> 태그의 display를 inline으로 설정하자 불릿이 사라지고, 가로로 나열이 된다.
이때 크기를 지정하려면 inline-block으로 설정하면 된다. 이는 inline 성질을 갖고 있으면서 inline처럼 크기를 지정할 수 있는 display이다.
hover 속성 부여
#menu li {
display: inline-block;
width: 15%;
background-color: #CCC;
text-align: center;
padding: 10px;
}
#menu li:hover {
background-color: #333;
color: white;
}
hover 속성을 부여하여 마우스를 올려뒀을 때 메뉴의 색이 변하게 했다.
우리가 사용하는 많은 웹 페이지의 메뉴와 버튼이 이런 방법으로 만들어진다.
