[pico css] 페이지 네비게이션 > HTML
HTML

[pico css] 페이지 네비게이션

조회 355회 댓글 0건

기본적으로 제공이 안되고 있어서 확인 후 테스트 해본 것입니다.

간단하며 어떤 방식으로 사용 할것 인지는 본인 판단으로 하면 되며 rem 방식이 제일 무난 하게겠지요.


db9af7ecfd0797a755090bc50218c8a6_1712454450_3816.png 


  <!doctype html>
  <html lang="ko">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark" />
    <!-- <link rel="stylesheet" href="css/pico.min.css"> -->
    <title>페이지 네비게이션</title>
    <style>
      html {
        font-size: 1rem;
      }

      .pagination {
        list-style: none;
        padding: 0;
        display: flex;
        gap: 8px;
        /* 네비게이션 아이템 사이의 간격 */
      }

      .pagination a {
        text-decoration: none;
        padding: 5px 10px;
        border: 1px solid #000;
        border-radius: 5px;
        color: black;
        /* 텍스트 색상 */
      }

      .pagination a:hover {
        background-color: #f0f0f0;
        /* 호버 시 배경 색상 */
      }

      /** rem */
      .nav-pagination {
        list-style: none;
        padding: 0;
        display: flex;
        gap: 0.5rem;
        /* 네비게이션 아이템 사이의 간격을 rem으로 설정 */
      }

      .nav-pagination-link {
        text-decoration: none;
        padding: 0.3125rem 0.625rem;
        /* padding 값을 rem으로 설정 */
        border: 0.0625rem solid #000;
        /* border 두께를 rem으로 설정 */
        border-radius: 0.3125rem;
        /* border-radius를 rem으로 설정 */
        color: black;
        /* 텍스트 색상 */
        font-size: 1rem;
        /* 폰트 크기를 rem으로 설정 */
      }

      .nav-pagination-link:hover {
        background-color: #f0f0f0;
        /* 호버 시 배경 색상 */
      }
    </style>
  </head>

  <body>
    <main class="container">
      <h1>Hello Page navigation</h1>
      <p>피코 CSS에서는 기본적으로 제공되고 있지 않은 페이지 네이게이션에 대해서 각 CSS 스타일 스트 처리 방식에 따른 형태를 비교 하고자 한다.</p>

      <h2>태그 인라인 스타일 </h2>
      <nav aria-label="Page navigation example">
        <ul style="list-style: none; padding-left: 0; display: flex; gap: 10px;">
          <li><a href="#" style="text-decoration: none; padding: 5px 10px; border: 1px solid #000; border-radius: 5px;">이전</a></li>
          <li><a href="#" style="text-decoration: none; padding: 5px 10px; border: 1px solid #000; border-radius: 5px;">1</a></li>
          <li><a href="#" style="text-decoration: none; padding: 5px 10px; border: 1px solid #000; border-radius: 5px;">2</a></li>
          <li><a href="#" style="text-decoration: none; padding: 5px 10px; border: 1px solid #000; border-radius: 5px;">3</a></li>
          <li><a href="#" style="text-decoration: none; padding: 5px 10px; border: 1px solid #000; border-radius: 5px;">다음</a></li>
        </ul>
      </nav>

      <hr>

      <!-- <style>에 넣어서 처리 한 경우 </style> -->
      <h2>내부 스타일시트 px </h2>
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li><a href="#">이전</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">다음</a></li>
        </ul>
      </nav>

      <hr>
      <h2><styleL> 내부 스타일시트 rem</h2>
      <nav aria-label="Page navigation example">
        <ul class="nav-pagination">
          <li><a href="#" class="nav-pagination-link">이전</a></li>
          <li><a href="#" class="nav-pagination-link">1</a></li>
          <li><a href="#" class="nav-pagination-link">2</a></li>
          <li><a href="#" class="nav-pagination-link">3</a></li>
          <li><a href="#" class="nav-pagination-link">다음</a></li>
        </ul>
      </nav>

    </main>
  </body>

  </html>
 



  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 14건 1 페이지
  • profile_image 난 복잡한 부트스트랩이나 테일윈드 같은것 사용하기 싫고 순수 html 로만 페이지를 만들고 싶다.보통 백오피스 페이지가 그렇습니다.(시간이 들어가니 그렇지요. 집에서 양복 입지 않는것과 같은 이치~)하지만 반응형은 필요하고 보여지는 것은 좀 괜찮아야 한다면 pico css를 추천합니다.폰트사이즈만 약간 줄여서 사용하면 그만.아래는 폰트사이즈 때문에 테스트 해본것입니다.결론 부터 말하면1rem은 16pxpico css 기본은 21px 입니다. 부…
  • profile_image 외부파일을 읽어서 사용하는 경우에 오류가 있을 때 처리하는 방법에 대한것입니다.이런 문제 발생 할 걱정이 되면 자신의 서버에 모두 저장하고 사용하면 됩니다.일반적인 경우는 모두 자사의 서버에 두고 사용하기 때문에 이런것을 신경쓸 필요는 없지만 그래도 이런 방법도 있는것을 알고 있으면 좋겠지요~아래는 먼저 읽힌것이 실패할 경우 처리 하는 방법의 예 입니다.  <!DOCTYPE html>  <html lang="ko">    …
  • profile_image 파일 첨부할때 사용합니다.기본이 모든 파일로 되어 있는데 특정 워드파일만 받고 싶다든지 아니면jpg 이미지만 받고 싶을때 선택을 그것만 가능하게 하는 방법에 대한 것입니다. accept 속성에 MIME 값을 넣어주면 됩니다.    <!-- 모든것을 보여줄 때는 아래처럼 하면 된다: 순서대로 오디오,동영상,이미지 -->  <input type="file" accept="audio/*">  <input type="file…
  • profile_image 부트스트랩에서는 대부분 영문의 약자를 생각하면 되면 되는데 문제는 왼쪽, 오른쪽이 아니라 시작, 끝 인것이 있다는 것이다.마진: m패딩: p * 위, 아래top: tbottom: b * 왼쪽 오른쪽 보다는 시작과 끝으로 생각하면 된다.left: sright: e * 포함이다.즉 위아래는 top, bottom이 되고 x는 left, right가 되는것이다.위아래:  y ( left / right )양옆: x (top / bottom)위와 별도로 …
  • profile_image 원하는 것은 이런것입니다.메시지를 보여주고 닫기 버튼만 있어서 닫을 수 있게 하는것이 없네요. 많이 사용할텐데 좀 만들지? 버전이 5.2까지 올라오면서 왜? 그랬을까 하는 생각이 먼저 듭니다.** 부트스트랩 모달 닫기버튼만 보이도록 하기 **<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta…
  • profile_image 부트스트랩 연습하는데 한쪽으로 쏠립니다.다운데로 버튼을 보내고 싶은데요 생각처럼 되지 않아 찾아 보아 정리 한것입니다.다른것들도 방법은 비슷합니다. 가운데 정렬하고 싶을대 말입니다. 테이블 같은것도 비슷한 원리 입니다. 부트스트랩 버튼을 가운데(중앙) 정렬하기 <div class="row">  <div class="col text-center">    <!-- <button class="btn btn-primar…