[CSS 기초] hover, overflow

 

 

안녕하세요 PNcoding입니다 :)

 

오늘은 hover와 overflow 속성에 대하여 알아보도록 하겠습니다.

 

 

 

---

 

 

hover

요소에 마우스를 올렸을 때(hover) 효과를 줄 수 있는 방법입니다.

선택자:hover {
스타일
}

 

사용방법은 선택자 뒤에 :(콜론)을 붙인 다음 hover를 적어줍니다.

이렇게 :(콜론) 이 붙은 요소는 가상클래스라 불러줍니다.

 

가상클래스란?

 

실제로 존재하는 요소에 특정한 이벤트를 적용시켜 줄 때 가상의 클래스를 만들어

html의 수정 없이, 또한 추가적인 스크립트 없이 간단하게 css만으로 디자인요소를 추가해 주는 방법을 의미합니다.

가상클래스에 대한 추가적인 내용은 다음에 더 알아보도록 하겠습니다 :)

 

 

 

항상 hover 효과를 주기 위해서는 마우스를 올려 줄 요소를 먼저 만들어 주어야만 합니다.

<div class="box"></div>

 

.box {
    width: 200px;
    height: 200px;
    background-color: salmon;
}

 

 

 

그러고 나서 이벤트를 적어주시면 됩니다.

마우스를 올렸을 시 배경색을 한번 바꿔 보도록 하겠습니다.

중괄호 안쪽에 바꾸길 원하는 속성을 적어주시면 됩니다.

.box:hover {
    background-color: gold;
}

 

 

 

 

간단하죠?

 

이 hover 이벤트는 네이버 메인에 많이 사용되고 있습니다.

네이버의 콘텐츠에 마우스를 올렸을 때 이미지가 확대된다거나 글자에 밑줄이 생성이 됩니다.

바로 hover 이벤트가 적용이 되어 있다고 보시면 됩니다 :)

 

 

 

---

 

반응형

 

 

 

overflow

이러한 hover와 자주 같이 사용되는 속성이 있습니다.

바로 overflow라고 하는 속성입니다.

 

이 속성은 요소 안의 컨텐츠가 너무 커서 요소 안에 다 들어가지 못할 때 그 콘텐츠를 어떻게 보여줄지를 지정해 줄 수 있습니다.

 

overflow에 사용되는 속성값은 네 가지가 있습니다.

 

• visible : 기본값. 컨텐츠가 요소 밖에 그대로 표현
• hidden : 넘치는 컨텐츠 부분을 잘라서 보이지 않게 만들어 줌 (가장 많이 사용)
• scroll : hidden과 동일하게 넘치는 부분을 잘라주지만, 잘린 부분에 스크롤을 생성해 줌
• auto : 콘텐츠의 크기에 따라 스크롤을 생성할지 자동으로 결정

 

1) visible

기본값이며, 요소 밖으로 넘친 영역을 그대로 표현해 줍니다.

<div class="box">
    <img src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_1280.jpg" alt="">
</div>

 

.box {
    width: 200px;
    height: 200px;
    border: 10px solid gray;
    overflow: visible;
}

overflow: visible

 

 

2) hidden

요소 밖으로 넘친 영역을 잘라서 보이지 않게 만들어줍니다.

.box {
    width: 200px;
    height: 200px;
    border: 10px solid gray;
    overflow: hidden;
}

 

overflow: hidden

 

 

3) scroll

요소 밖으로 넘친 영역이 잘리고 대신 스크롤바가 생성되어 잘린 부분을 볼 수 있습니다.

잘린 부분의 크기에 따라 가로스크롤만, 세로스크롤만, 혹은 둘 다 생성될 수 있습니다.

.box {
    width: 200px;
    height: 200px;
    border: 10px solid gray;
    overflow: scroll;
}

 

overflow: scroll

 

 

4) auto

넘치는 영역이 있을 경우 스크롤바가 자동으로 생성됩니다.

.box {
    width: 200px;
    height: 200px;
    border: 10px solid gray;
    overflow: auto;
}

overflow: auto

 

 

 

---

 

 

 

overflow와 hover 활용

 

overflow:hidden과 hover 이벤트를 함께 사용하면 네이버 화면과 동일한 모양을 만들어 줄 수 있습니다.

<div class="box">
    <img src="https://cdn.pixabay.com/photo/2017/07/25/01/22/cat-2536662_1280.jpg" alt="">
</div>

 

.box {
    width: 200px;
    height: 200px;
    border: 10px solid gray;
    overflow: hidden;
}

.box>img {    
    width: 100%;
    height: 100%;
}

.box:hover>img {
    width: 120%;
    height: 120%;
}

 

 

 

 

---

 

 

 

어떤가요? 생각보다 어렵지 않죠?

hover와 overflow를 사용하면서 다양한 움직임을 한번 만들어 보세요 :)

 

 

다음 포스팅에서는 position 속성에 대하여 알아보도록 하겠습니다