[웹제작] css 가상선택자 before/after와 filter를 활용하여 이미지 꾸미기 (7)

#사이트만들기 #가상선택자 #웹제작

웹사이트 디자인 소개 및 학습목표

디자인소개

패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리를 한 것 입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.

​

학습목표

1. 가상선택자 CSS before/after를 활용하여 패널을 CD모양으로 꾸며보자

​

사용하는 언어

HTML

• .pic클래스 안쪽에 .dot를 만들어 작은점을 만들어 CD모양을 구현할 것이다.

​

CSS

• 가상 선택자 before/after요소를 사용하여 둥근 CD가 겹치게 만들자
• 한쪽 CD를 내리고 filter를 활용하여 CD에서 은은한 빛이 나도록 구현한다.

HTML

                                    <body>

<main>
  <article class="on">
    <div class="inner">
       <div class="pic">
          <div class="dot">
          </div>
       </div>
    </div>
  </article>
</main>

</body>

main>article>.inner>.pic>.dot을 넣어 CD구멍을 만들 것이다.

CSS

1.before/after로 백그라운드 이미지 넣기

                                    main{
 article{
   .pic{
     &::before, &::after{
       content="";
       display=block;
       width:100%;
       hegiht: 100%;
       position: absolute;
       top: 0px;
       left : 0px;
       border-radius: 50%;
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
       background-image: inherit;
      }
    }
  }
}

긴 내용이긴데 하나씩 천천히 알아보도록 하자

before/after요소를 활용하여 이미지 겹치게 놓기

• 가상요소를 우선 블록화해준다. content="", display=block;
• border-radius // 원형으로 둥글게
• background-image: inherit; //부모 요소 이미지를 그대로 가져옴
• background-size: cover; //이미지가 부모요소 크기에 딱맞게 조정된다.

​

아래 결과를 확인하자

​

background-image: inherit;을 통하여 두개의 이미지가 겹쳐서 보인다. 사실 before과 after에 이미지가 들어간거라 3개의 이미지가 겹쳐져있는 상태이다. 본래의 이미지는 inherit용이었으니 안보이도록 숨기자.

background-positiond을 통하여 부모요소의 이미지를 완전히가렸다.이제 before과 after요소가 겹쳐져있다. 하나를 내려서 은은한 빛을 구현하자

​

2.filter를 통해 은은한 빛을 구현하자

                                     &::before{
                    transform: translateY(10%);
                    filter: blur(20px) brightness(160%); //주변에 빛나도록 표현하는 거
           }

before와 after요소 이미지가 겹쳐져있는 상태이다.

before요소의 이미지를 살짝 내리고 filter를 적용하여 은은한 빛을 구현하자

(filter는 나중에 설명링크를 달아두겠다)

​

3. class dot css적용하여 CD모양 완성하기

동그란 원형 모형을 완성시켰지만 아직 뭔가 밋밋하다. CD모양이니 가운데가 뚫여있으면 좋을 것 같다.

HTML로 만든 clas dot을 활용하자

                                    css

 main{
    article{
     .pic{
       .dot{
         width:3vw;
         height: 3vh;
         position: absoulte;
         border-radius: 50%;
         background: #fff;
         z-index:3;
         box-shadow: inset 5px 5px 20px rgba(0,0,0,.2);
          }
       }
   }
}

z-index: 3; //before,after이미지 요소보다 위에 적용해야하기 때문에 3으로 주었다.box-shadow: inset //inset을 설정하면 안쪽으로 그림자가 생긴다.

​

학습결과

짚어갈 포인트

• background-size: cover; 로 pic크기에 딱맞게 이미지가 배치되었다.
• before/after요소로 이미지를 넣었다.
• #cssfilter효과를 활용해 은은한 빛을 구현했다.

​