[CSS] 페이지 제작하기

 

이런 페이지 만들기.

간단하게 3페이지 정도 만들 예정.

---

코드에서 이미지 태그 없이 화살표 아이콘을 사용한 것은 Font Awesome 같은 아이콘 폰트나,

CSS ::before 의사 클래스와 함께 사용된 CSS content 속성을 통해 이미지를 대체한 방식

---

참고할 글  >>
after, before 부분 알아보기 - 글 하단

[CSS] Draw Underline Link Hover Effect (tistory.com)

[CSS] Draw Underline Link Hover Effect

 

---

대충 틀 짜놓기

CSS

  <!-- 페이지 수 넣어주기 -->
          <a href="#"></a>
          <ol>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
          </ol>
          <a href="#"></a>

ol 겉에 있는 a 태그로 화살표 넣어줄 예정. 

---

Font Awesome 같은 아이콘 라이브러리를 사용하기

참고할만한 글

[CSS] Font Awesome 같은 아이콘 라이브러리 사용 방법 (tistory.com)

[CSS] Font Awesome 같은 아이콘 라이브러리 사용 방법

          <!-- 페이지 수 넣어주기 -->
          <a href="#"><i class="fas fa-angle-left"></i> </a>
          <ol>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
          </ol>
          <a href="#"> <i class="fas fa-angle-right"></i></a>

사용해서 넣어주기.

= i 태그로 사용

---

CSS 로 꾸며주기

HTML 코드 수정

          <!-- 페이지 수 넣어주기 -->
          <div class="pages">
            <a href="#"><i class="fas fa-angle-left"></i> </a>
            <ol>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
            </ol>
            <a href="#"> <i class="fas fa-angle-right"></i></a>
          </div>

div 태그 하나 더 생성해서 감싸줬다.

CSS

.pages {
  display: flex;
  ol {
    display: flex;
  }
}

pages 전체도 flex 를 주고

ol 태그에도 display flex 를 줘야 저렇게 한 줄로 나열됨.

반응형을 위해 전반적인 css 수정해줌.

  main {
    flex: 1;
    padding: 2vw;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

main 에다가 justify-content 를 space-between 로 변경했다.

나머지 margin-bottom : 60px 준거는 다 삭제시킴

.pages {
  color: $text_color;
  font-size: 1vw;
  width: 100%;
  padding: 1vw;
  display: flex;
  justify-content: center;
  gap: 15px;
  ol {
    display: flex;
    gap: 15px;
  }
}

그리고 페이지 스타일링 완료