box-shadow 의 올바른 사용법 - ::before 와 ::after

< 참고 자료>

 

stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter

---

box-shadow 속성은 매우 비싼 속성이므로,

box-shadow 자체에 바로 애니메이션을 걸어버리면 성능 저하가 발생할수있다.

따라서 ::before 와 ::after 에 미리 box-shadow 를 만들어놓고,

마우스가 hover 할때만 opacity 를 1로 주는것이 효과적이다.

 

::before 와 ::after 가 햇깔리는데 아래와 같은 문법이다.

div {}

div::before {}

div:hover::before {}

div::after {}

div:hover::after {}

주의할것은, div::after:hover 가 아니라, div:hover::after 이다.

또한 ::before 와 ::after 에는 content : '' 을 잊지말자.

div {

    position    : absolute;
    left        : 300px;
    top         : 300px;
    width       : 500px;
    height      : 500px;  
    background-color: red;

}

div::before {

    content     : '';
    position    : absolute;
    width       : 100%;
    height      : 100%;  
    box-shadow  : -100px -100px yellow;

    opacity: 0;
    transition: all 0.5s;

}

div:hover::before {

    opacity: 1;

}


div::after {

    content     : '';
    position    : absolute;
    width       : 100%;
    height      : 100%;  
    box-shadow  : 100px 100px green;

    opacity: 0;
    transition: all 0.5s;

}

div:hover::after {

    opacity: 1;

}

여기서 또 한가지 주의할것은

::before 와 ::after 는 position 을 absolute 로 했을때,

left, top 등 위치값을 따로 주지않아도, 해당 태그를 부모로 인식해 0 0 에 위치하게 된다.