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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Navigation Bar ======
<WRAP left notice 80%>
  * description : CSS Vertical Navbar
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-30
</WRAP>
<WRAP clear></WRAP>
\\
=====Vertical Navigation Bars=====
수직 네비게이션 바를 만들려면, 이전 페이지의 코드 외에도, 목록 안의 <a> 요소의 스타일을 지정할 수 있습니다.\\
{{:wiki:css:css_note:vnavbar.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li a {
            display: block;
            width: 60px;
            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>A background color is added to the links to show the link area.</p>
    <p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
</HTML>
\\
====예제 설명====
  * ''%%display: block;%%'' - 링크를 블럭 요소로 표시하면, 텍스트뿐만 아니라 전체 링크 영역을 클릭할 수 있게 만들고, 너비 (그리고 패딩, 마진, 높이 등)를 지정할 수 있습니다.
  * ''%%width: 60px;%%'' - 블럭 요소는 기본적으로 사용 가능한 전체 너비를 차지합니다. 60픽셀의 너비를 지정합니다.\\
또한 블록 요소로 표시될 때 사용 가능한 전체 너비를 차지하기 때문에, %%<ul>%%의 너비를 설정하고, %%<a>%%의 너비를 제거할 수 있습니다.\\ 
이전 예제와 동일한 결과가 생성됩니다. 이전 예제와 동일한 결과가 생성됩니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60px;
        }
        li a {
            display: block;
            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>A background color is added to the links to show the link area.</p>
    <p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
</HTML>
=====Vertical Navigation Bar Examples=====
회색 컬러의 배경으로, 기본 세로 네비게이션 바를 만들고,\\ 
사용자가 링크 위로 마우스를 이동할 때 링크의 배경색을 변경합니다.\\ 
{{:wiki:css:css_note:vnavbar1.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            background-color: #dddddd;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* Change the link color on hover */
        li a:hover {
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>
    <h2>vertical Navigation Bar</h2>
    <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:vnavbar2.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            background-color: #dddddd;
            padding: 8px 16px;
            text-decoration: none;
        }
        li a.active {
            background-color: #4caf50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>
    <h2>vertical Navigation Bar</h2>
    <p>
        In this exmple, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.
    </p>
    <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>
=====Center Links & Add Borders=====
''%%text-align:center%%''를 %%<li>%% 또는 %%<a>%%에 추가하여, 링크를 중앙에 배치합니다.\\
\\
''%%border%%'' 속성을 <ul>에 추가하고, navbar 주위에 보더를 추가합니다. navbar 안에 보더를 추가하려면,\\
마지막 요소를 제외한 모든 %%<li>%% 요소에 ''%%border-bottom%%''을 추가합니다.\\
{{:wiki:css:css_note:vnavbar3.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
            border: 1px solid #555;
        }
        li a {
            display: block;
            background-color: #dddddd;
            padding: 8px 16px;
            text-decoration: none;
        }
        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }
        li:last-child {
            border-bottom: none;
        }
        li a.active {
            background-color: #4caf50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>
    <h2>vertical Navigation Bar</h2>
    <p>
        In this exmple, we center the navigation links and add a border to the naviation bar.
    <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>
=====Full-height Fixed Vertical NavBar=====
전체 높이의 'sticky'(고정된) 측면 네비게이션을 만듭니다:\\
{{:wiki:css:css_note:fixedfullheightsidenav.png?600|}}\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            position: fixed;    /* Make it stick, even on scroll */
            height: 100%;       /* Full Height */
            overflow: auto;     /* Enable scrolling if the sidenav has too much content */
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        li a.active {
            background-color: #4caf50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </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="margin-left:25%; padding:1px 16px; height: 1000px;">
        <h2>Fixed Full-height Side Nav</h2>
        <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
        <p>
            Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.
        </p>
        <p>
            Also notice that we have set overflow:auto to sidenav. This willl add a scrollbar when the sidenav is too long (for exmaple if it has over 50 links inside of it).
        </p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
        <p>Some text...</p>
    </div>
</body>
</html>
</HTML>





{{tag>오션 CSS Vertical Navbar}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
