CSS - 반응형 웹페이지 / after : / 미디어쿼리

오늘은 쇼핑몰 만드는 반응형 웹페이지를 다시 만들었다.

그 중에서 이미 학습했지만, 당시에도 어려웠던 개념에 대해 다뤄본다.

: after 

.card:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    color: black;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}

먼저 :after의 기본활용은 이렇다.

내가 기존에 만들었던 요소에 어떤 특정효과를 주기 위해 활용한다.

가장 큰 이유는 굳이 효과를 주기 위해 HTML 내에 불필요한 요소를 집어넣는 이유가 큰 것 같다.

:after 활용에서 주의해야 할 점은 content, 내용이 필요없으면 공백으로 두어도 무방하다.

 

.card에 마우스 오버했을 시 다소 어둡게 만들 목적이니,

rgba 를 활용하여 백그라운드 투명도를 0.7 / 기본 투명도를 0으로 두었다.

.card:hover:after {
    opacity: 1;
}

이후, 위와 같은 코드를 작성해주면 .card에 마우스 오버가 되었을 경우 원하는 결과를 얻을 수 있다.

 

@media 쿼리

미디어쿼리는 반응형 웹페이지에 필수적인 요소지만, 꽤 귀찮은 작업이다.

가끔은 똑같은 일을 또하는 느낌이 들기도 한다.

@media screen and (min-width:768px) and (max-width:1023px) // 태블릿
@media screen and (max-width:767px) // 모바일

기본적인 구성은 이렇고, 해당 width 에 따라 수정할 부분을 삽입해 변경해주면 된다.

아직 숙련도가 부족해 이미 작성한 코드를 다시 작성하게 되는 경우가 많은데, 이 부분만 주의하면 좋을 것 같다.

1024px 이상

태블릿 크기

모바일 크기