생활
html css고수분들 이박스 두개 가상선택자로
어떻게 붙히나요?
그리고 가상선택자로 박스두개를 위아래로 붙이고 디스플레이 none후에 마우스 오버하면 디스플레이 블럭하면 보이게 되는건가요?
1개의 답변이 있어요!
안녕하세요.
질문하신 가상선택자(::before, ::after) 를 이용해서 박스 두 개를 만들고, 마우스 오버 시 나타나게 하는 방법은 충분히 가능합니다. 핵심은 부모 요소 하나만 두고, 그 안에서 가상요소 두 개를 상·하단에 배치하는 겁니다.
아래 예시를 보시면 바로 감이 오실 거예요.
<div class="box"></div>
.box {
position: relative;
width: 200px;
height: 100px;
background: #ccc;
}
/* 위 박스 (::before) */
.box::before,
.box::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 50px;
background: skyblue;
display: none; /* 처음엔 안보이게 */
}
/* 위 박스 */
.box::before {
top: -55px; /* 본체 위쪽 */
}
/* 아래 박스 */
.box::after {
bottom: -55px; /* 본체 아래쪽 */
}
/* 마우스 올렸을 때 가상박스 보이게 */
.box:hover::before,
.box:hover::after {
display: block;
}
# 설명
1. .box 하나만 있고, 그 안에서 ::before, ::after로 위/아래 박스 2개를 만듭니다.
2. display: none → block으로 토글하면 마우스 오버 시 나타납니다.
3. position: absolute로 위·아래에 자유롭게 붙일 수 있습니다.
4. 만약 transition 효과를 주면 자연스럽게 등장시킬 수도 있어요.
예를 들어 조금 더 자연스럽게 하려면 이런식으로 구현합니다.
.box::before,
.box::after {
opacity: 0;
transition: opacity 0.3s;
}
.box:hover::before,
.box:hover::after {
opacity: 1;
}
이런 식으로 하면 hover 시 두 박스가 서서히 나타나는 효과도 줄 수 있습니다.
단, 구조상 반드시 부모 요소는 position: relative; 를 주셔야 가상요소가 정상적으로 배치됩니다.