CSS before/ after 요소로 컨텐츠 전환 버튼 만들기 (3)

#웹사이트만들기 #CSS #::before #::after

​

​

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

디자인소개

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

​

학습목표

1. css before /after요소를 활용하여 좌/우 패널전환버튼을 만든다.

1. 버튼의 위치를 원하는 곳에 배치하는 법을 배운다.

​

​

좌/우 버튼 구조짜기

HTML

버튼의 위치를 먼저 구현하자. main요소의 형제요소로 nav.btnPrev & nav.btnNext를 만든다. 이후 span테그로 글자를 넣어준다.

​

CSS

before,after요소를 활용하여 좌,우 패널 이동버튼을 만든다. 이후 hover을 이용하여 버튼에 마우스를 갖다대면, 글자가 사라지면서 일자선이 화살표 < & > 로 바뀌게 만들 것이다.

​

HTML

                                    <body>

<main>
</main>

<nav class="btnPrev">
<span>Prev Music</span>
</nav>

<nav class="btnNext">
<span>NEXT Music</span>
</nav>

</body>

main요소의 형제요소로 달아준다.

​

class 이름 : btn - 주로 버튼에쓰이는 이름이다 기억하자.

CSS

1.버튼 위치 조정하기 (Prev버튼 기준)

                                    body{

.btnPrev{
  position: absoulute;
  left : 50%
  top: 50%
  transform: translate(-15vw,-50%)

  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;

  font-size : 0px;
  curor : pointer;

 }
}

중간배치만 먼저 알아보자

<버튼위치>

• 버튼을 중간으로 배치하기위해 position: absoulte, top50%, left 50% 지정한다
• 버튼 시작점이 top 50%, left 50%이니 좌,상 조정이 필요하다.
• translate를 활용하여, 좌우 위아래 값을 조정해준다
• translate(좌우,상하) : 좌측으로 15vw만큼 땡겨오고 위로 -50%만큼 배치해준다

​

​

자주쓰이는 구문이니 기억해두면 편하다

​

​

2. before & after

​

버튼 앞의 선을 표현하기 위해 before, after요소를 만들어준다.

                                    .btnPrev{
  ---
  &::before{
  content: "";
  display: block;

  width: 100%;
  height: 1px;
  background: #fff;

  position: absoulte;
  top:50%;
  left: 0px;

  transform-origin: left center;
  transform: rotate(-180deg);
  transition: 0.5s;

  }

}

먼저 before 가상요소를 블록화 해주자

공식이다

​

• content에 빈문자열을 먼저준다.
• 이후 display : block; 을 지정해주면 끝

​

​

​

​

흰색 가늘어진 선을 만들 것이다.

​

before이 블록화 되었기 때문에 CSS속성을 이용하여 원하는 모양을 만들어준다.

​

• width:100% => 부모요소의 넓이를 그대로 가져온다.(선의길이)
• height: 1px; => 가늘어진 선을 표현하기 위해 높이를 작게준다.
• background : #fff; => 흰색을 지정해준다.
• position: absoulte, top50%, left: 0px ; => 선의 위치를 글자 가운데로 배치한다

​

다시 위로 가서 .btnPrev속성을 확인해보자 display: flex; align-items : center;를

확일 할 수 있다. 버튼과 선을 가지런히 가운데 배치하기 위함이다.

회전 중심축 선정 (머리가 살짝 아픈부분)

이해가 되지않는다면, 그냥 따라 적어도 된다. 천천히 이해해보자.

​

• before요소의 중심축을 좌측 가운데로 맞췄다 //transform-origin
• 이후 기준축을 중심으로 -180도를 회전시킨다. //rotate
• 부드러운 모션을 위해 transition속성에 시간을 추가한다. (0.5초간 움직임)

​

​

​

​

#transform-orign 속성을 이해하기 위해서 다음 그림을 참고하자

​

transform-origin속성은 좌우/ 상하 순으로 적어주면된다.

위의 위치 배열을 통해 berfore요소가 글자 가운데 겹치도록 위치해있다.

우리는 선을 글자 좌측으로 빼줄 것이다.

​

transform-origin : left center; 를 이용하여 그림의 빨간 부분으로 중심축을 옮겼다.

(원래는 요소의 정중앙이 디폴트값)

​

빨간 중심축으로 부터 -180deg 회전하면 (-는 반시계방향) 글씨 옆으로 선이 붙게된다.

결과는 아래 그림과 같다

​

동일한 방법으로 after를 만들고 두개를 겹쳐 놓자

​

​

3.hover

                                    .btnPrev{
 ---
 ::before{
 }

 ::after{
 }

 &:hover{
   span{
     transform: translateX(100%)
     opacity: 0;
   }

   &::before{
     transform: rotate(-30deg);
   }

   &::after{
     transform: rotate(30deg);
   }
 }
}

​

#csshover 는 사용자가 마우스를 해당요소에 올렸을 때 나타나는 모션을 표현하기 위해 사용한다. 여기서는 버튼 글자가 사라지고 일직선으로 된 선이 화살표로 바뀌는 모션을 만들것이다.

​

#

위에서 span테그에 무엇이 포함되어 있었는지 기억하는가?

바로 PrevMUSIC이라는 글자이다.

​

글자에 마우스를 갖다대면 글자가 우측으로 사라지는 표현이다.

#

before & after요소 작동원리는 동일하니 하나만 보겠다. 위로 다시올려서 before요소의 중심축을 확인하자. 좌측 가운데이다.

좌측 가운데를 기준으로 -30도면 선이 "<" 로 바뀌게 된다. ( after요소는 +30deg로 해준다)

​

​

​

다음글에는 패널이동 방법을 배워보겠다.

​