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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== CSS Navigation Bar ======
<WRAP left notice 80%>
  * description : CSS NavBar
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-30
</WRAP>
<WRAP clear></WRAP>
\\
=====Navigation Bars===== 
사용하기 쉬운 네비게이션 바는 모든 웹 사이트에서 중요합니다.\\
\\
%%CSS%%를 사용하면 지루한 %%HTML%% 메뉴를 멋진 네비게이션 바로 변환할 수 있습니다.\\
\\
=====Navigation Bar = List of Links=====
네비게이션 바는 표준 HTML이 기본으로 필요합니다.\\
\\
예제에서는 표준 HTML 목록의 네비게이션 바를 작성합니다.\\
\\
네비게이션 바는 기본적으로 링크 목록이므로, %%<ul>%% 및 %%<li>%% 요소를 사용하는 것이 완벽합니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
</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>Note: We use href="#" for test links. In a real web site, this would be URLs.</p>
</body>
</html>
</HTML>
===Result===
{{:wiki:css:css_note:testlink.png?600|}}\\
\\
목록에서 불릿(bullets), 마진(margin)과 패딩(padding)을 제거합니다.\\
====예제====
<HTML>
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
    <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>
===Result===
{{:wiki:css:css_note:testlink2.png?600|}}\\
====예제 설명====
  * ''%%list-style-type: none;%%'' - 불릿을 제거합니다. 네비게이션 바는 목록 표시(marker)가 필요하지 않습니다.
  * ''%%margin: 0;%%''과 ''%%padding: 0;%%''으로 설정하여 브라우저의 기본 설정을 제거합니다.
상기 예제의 코드는 수직, 수평 네비게이션 바 모두에서 사용되는 표준 코드입니다.\\


{{tag>오션 CSS Navbar}}

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

사용자 도구

사이트 도구

문서 도구