UI 프로젝트발행일 2022. 7. 22.원본 https://blog.naver.com/jword_/222824752443 ↗

CSS강의 가상선택자를 활용하여 화살표 버튼 만들기 (3)

CSS강의 가상선택자를 활용하여 화살표 버튼 만들기 (3) — #CSS강의 #css가상선택자 웹사이트 디자인 소개 및 학습목표 디자인소개 패스트 캠퍼스 "최성일&qu...

#SVG UI#Naver Blog

#CSS강의 #css가상선택자

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

디자인소개

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

처음부터 하나 하나 손코딩 하여 웹페이지 구현하는 글이며, 이전 글을 보면 더욱 이해가 빠릅니다.

1편 :웹코딩, SVG를 활용한 랜딩페이지 제작하기

2편 : CSS before을 활용하여 h1테그꾸미기

3편 : CSS 가상성택자를 활용하여 화살표 만들기

학습목표

css before/after요소를 활용하여 웹상에서 화살표 버튼을 구현하는 방법을 배운다.

짚어가야할 요소

HTML

시멘틱테그 중점으로 구조가 어떻게 짜여지는지 계속 생각하기 (전체구조 보러가기)

CSS

가상선택자(before/after)를 활용하여 화살표 위/아래 버튼 만들기

HTML

Class 지정하기

btnUp과 btnDown클래스를 만들자. main> .btnUp + .btnDown. 이때 div가아닌 <a>태그로 만든다는 것을 기억하자

html 코드 예제

                                    html

<body>
  <main>
    ---
    <a href="#" class="btnUP"></a>
    <a href="#" class="btnDown"></a>
  </main>
</body>

.btnUp & .btnDown 구조

.btnUp과 .btnDown에 들어갈 요소를 만들자. span & p

html 코드 예제

                                    html

<body>
  <main>
    ---
    <div class="btnUP">
      <span></span>
       <p>UP</p>
    </div>
    <div class="btnDown">
      <span></span>
      <p>DOWN</p>
    </div>
  </main>
</body>

태그 안에 들어있는 UP과 DOWN이 main요소 안에 들어온 것을 볼 수 있다.
태그는 블록요소이기 때문에 자동 줄바꿈이 되는것을 알 수 있다.

CSS

.btnUp .btnDown 위치 결정

버튼의 위치를 잡아주자.

.btnUp과 .btnDown 은 인라인 요소이므로 블록화를 먼저 진행한다.
left: -75px;을 줘서 main영역 밖에 자리를 위치한다.
width: 61px;을 준 이유는 화살표의 넓이를 1px로 할 것이기 떄문에 가운데 위치를 고려한 것이다.

&::before , &::after요소로 버튼 구현하기

가상 선택자를 활용하여 화살표를 만들었다.

가상 선택자 블록화 하기: content: ""; display:block;
위치 지정하기: position: absolute; , top:0px; left:50%; //정중앙 위 가로 before,after요소 서로 겹치게 놓기
회전축 정하기 : transform-origin: top center; // 한축을 중심점 잡기