문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Navigation Bar ======
<WRAP left notice 80%>
  * description : CSS Horizontal Navbar
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-30
</WRAP>
<WRAP clear></WRAP>
\\
=====Horizontal Navigation Bars=====
가로 네비게이션 바를 만드는 방법에는 두 가지가 있습니다.\\ 
인라인(inline) 또는 플로팅(floating) 목록 항목 사용하는 것입니다.\
\\
====Inline List Items====
가로 네비게이션 바를 만드는 한 가지 방법은 이전 페이지의 "표준"코드 외에도, %%<li>%% 요소를 인라인(inline)으로 지정하는 것입니다.\\
{{:wiki:css:css_note:inline1.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li {
            display: inline;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>
</HTML>
\\
====예제 설명====
  * ''%%display: inline;%%'' - 기본적으로 %%<li>%% 요소는 블록 요소입니다. 여기서는, 각 목록 항목 앞뒤의 줄 바꿈을 제거하여 한 줄에 표시합니다.\\
=====Floating List Items=====
가로 네비게이션 바를 만드는 또 다른 방법은 %%<li>%% 요소를 플로팅하고, 네비게이션 링크의 레이아웃을 지정하는 것입니다.\\
{{:wiki:css:css_note:inline2.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            padding: 8px;
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <p><b>Note:</b>If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
    <p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
    <p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list..</p>
</body>
</html>
</HTML>
\\
====예제 설명====
  * ''%%float: left;%%'' - float를 사용하여 블럭 요소들을 서로 옆으로 배치되게 합니다.
  * ''%%display: block;%%'' - 패딩(그리고 원하는 경우, 높이, 너비, 마진 등)을 지정할 수 있습니다.
  * ''%%padding: 8px;%%'' - 블럭 요소는 사용 가능한 전체 너비를 차지하므로 나란히 float할 수 없습니다. 그래서 패딩을 지정하여 보기 좋게 만듭니다.
  * ''%%background-color: #dddddd;%%'' - 각 요소에 회색의 배경색을 추가합니다.
**Tip:** 전체 너비의 배경색을 원하는 경우, 각 %%<a>%% 요소 대신 %%<ul>%%에 배경색을 추가합니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>

<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #dddddd;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            padding: 8px;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <p>A background color is added to the list instead of each link to create a full-width background color</p>
    <p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
</body>
</html>
</HTML>
===Result===
{{:wiki:css:css_note:inline3.png?600|}}\\
=====Horizontal Navigation Bar Example=====
어두운 배경색으로 기본 가로 네비게이션 바를 만들고, 사용자가 링크 위로 마우스를 이동할 때 링크의 배경색을 변경합니다.\\
{{:wiki:css:css_note:inline4.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover {
            background-color: rgb(116, 113, 113);
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>
</HTML>
\\
=====Active/Current Navigation Link=====
현재 링크에 "active" 클래스를 추가하여, 사용자가 어느 페이지에 있는지 알 수 있습니다.\\
{{:wiki:css:css_note:inline5.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover:not(.active) {
            background-color: rgb(116, 113, 113);
        }
        .active {
            background-color: #4caf50;
        }
    </style>
</head>
<body>
    <ul>
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</body>
</html>
</HTML>
\\
=====Right-Align Links=====
목록 항목(list items)을 오른쪽으로 플로팅하여, 링크를 오른쪽 정렬합니다 (''%%float : right;%%''):\\
{{:wiki:css:css_note:inline6.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover:not(.active) {
            background-color: rgb(116, 113, 113);
        }
        .active {
            background-color: #4caf50;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="active" style="float:right"><a href="#about">About</a></li>
    </ul>
</body>
</html>
</HTML>
\\
=====Border Dividers=====
링크 구분선(link dividers)을 만들려면 ''%%border-right%%'' 속성을 %%<li>%%에 추가합니다:\\
{{:wiki:css:css_note:borderdivider.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
            border: 1px solid #bbb;
        }
        li:last-child {
            border-right: none;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover:not(.active) {
            background-color: rgb(116, 113, 113);
        }
        .active {
            background-color: #4caf50;
        }
    </style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li style="float:right"><a href="#about">About</a></li>
    </ul>
</body>
</html>
</HTML>
\\
=====Fixed Navigation Bar=====
사용자가 페이지를 스크롤 하더라도, 내비게이션 바를 페이지 상단 또는 하단에 유지합니다.\\
====예제====
===Fixed Top===
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: fixed;
            top: 0;
            width: 100%;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover:not(.active) {
            background-color: rgb(116, 113, 113);
        }
        .active {
            background-color: #4caf50;
        }
    </style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <div style="padding:20px; margin-top:30px;background-color:#1abc9c;height:1500px;">
        <h1>Fixed Top Navigation Bar</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>The navigation bar will stat at the top of the page while scrolling</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
    </div>
</body>
</html>
</HTML>
====예제====
===Fixed Bottom===
<HTML>
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: rgb(116, 113, 113);
        }

        .active {
            background-color: #4caf50;
        }
    </style>
</head>

<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <div style="padding:20px;background-color:#1abc9c;height:1500px;">
        <h1>Fixed Top Navigation Bar</h1>
        <h2>Scroll this page to see the effect</h2>
        <h2>The navigation bar will stat at the top of the page while scrolling</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, ullam.</p>
    </div>
</body>

</html>
</HTML>
\\
**Note:**고정 위치(fixed position)는 모바일 장치에서 제대로 작동하지 않을 수 있습니다.\\
\\
=====Gray Horizontal Navbar=====
얇은 회색 보더가 있는 회색 가로 네비게이션 바의 예제:\\
{{:wiki:css:css_note:grayhorizontalnavbar.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            border: 1px solid #e7e7e7;
            background-color: #f3f3f3;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: #666;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover:not(.active) {
            background-color: #ddd;
        }
        li a.active {
            color: white;
            background-color: #4caf50;
        }
    </style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#About">About</a></li>
    </ul>
</body>
</html>
</HTML>
\\
=====Sticky Navbar=====
sticky navbar를 만들려면 ''%%position: sticky;%%''를 %%<ul>%%에 추가합니다.\\
sticky 요소는 스크롤 위치에 따라 relative 및 fixed 사이에서 전환됩니다.\\ 
주어진 오프셋 위치가 뷰포트에서 충족될 때까지, relative 배치된 다음 제자리에 "고정"됩니다 (position : fixed 처럼).\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 28px;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: -webkit-sticky;
            /* Safari */
            position: sticky;
            top: 0;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover {
            background-color: #111;
        }
        .active {
            background-color: #4caf50;
        }
    </style>
</head>

<body>
    <div class="header">
        <h2>Scroll Down</h2>
        <p>Scroll down to see the sticky effect.</p>
    </div>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#News">News</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <h3>sticky Navigation Bar Example</h3>
    <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
    <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, 
      altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. 
      Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</body>
</html>
</HTML>
\\
**Note:**
Internet Explorer는 sticky positioning(고정 위치 지정)을 지원하지 않습니다.\\ 
Safari에는 -webkit- 접두사가 필요합니다 (위의 예 참조).\\ 
또한 sticky positioning(고정 위치 지정)이 작동하려면 ''top'', ''right'', ''bottom'' 또는''left'' 중 하나 이상을 지정해야 합니다.\\
\\
=====Responsive Topnav=====
====예제====
<HTML>
<!DOCTYPE html>
<html>

<head>
    <style>
        body {margin: 0;}

        ul.topnav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        ul.topnav li {float: left;}

        ul.topnav li a {
            color: white;
            display: block;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        ul.topnav li a:hover:not(.active) {background-color: #111;}

        ul.topnav li a.active {background-color: #4caf50;}

        ul.topnav li.right {float: right;}
        @media screen and (max-width: 600px) {
            ul.topnav li.right,
            ul.topnav li {float: none;}
        }
    </style>
</head>
<body>
    <ul class="topnav">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="right"><a href="#about">About</a></li>
    </ul>
    <div>
        <h2>Responsive Topnav Example</h2>
        <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
        <p>You will learn more about media queries and responsive web design later in out CSS Tutorial.</p>
        <h4>Resize the browser window to see the effect.</h4>
    </div>
</body>
</html>
</HTML>
\\
=====Responsive Sidenav=====
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        body {margin: 0;}
        ul.sidenav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            position: fixed;
            height: 100%;
            overflow: auto;
        }
        ul.sidenav li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        ul.sidenav li a.active {
            background-color: #4caf50;
            color: white;
        }
        ul.sidenav li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
        div.content {
            margin-left: 25%;
            padding: 1px 16px;
            height: 1000px;
        }
        @media screen and (max-width: 900px) {
            ul.sidenav {
                width: 100%;
                height: auto;
                position: relative;
            }
            ul.sidenav li a {
                float: left;
                padding: 15px;
            }
            div.content {
                margin-left: 0;
            }
        }
        @media screen and (max-width: 400px) {
            ul.sidenav li a {
                text-align: center;
                float: none;
            }
        }
    </style>
</head>
<body>
    <ul class="sidenav">
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <div class="content">
        <h2>Responsive Sidenav Example</h2>
        <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
        <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
        <p>You will learn more about media queries and responsive web design later in our css Tutorial.</p>
        <h4>Resize the browser window to see the effect.</h4>
    </div>
</body>
</html>
</HTML>
\\
=====Dropdown Navbar=====
네비게이션 바 내부에 드롭다운 메뉴를 추가하는 방법.\\
====예제=====
<HTML>
<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {float: left;}

    li a, .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover, .dropdown:hover .dropbtn {background-color: red;}

    li.dropdown {display: inline-block;}

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {background-color: #f1f1f1;}

    .dropdown:hover .dropdown-content {display: block;}
  </style>
</head>
<body>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
  </ul>
  <h3>Dropdown Menu inside a navigation Bar</h3>
  <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
</HTML>
{{tag>오션 CSS Horizontal Navbar}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
