CSS Navigation Bar

🔴 WEB/Web 개념정리

CSS Navigation Bar

HYEJU01 2024. 4. 19. 02:22

CSS Navigation Bar

표준 틀

<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> 안녕하세요 </p>
</body>

💬 <ol> 숫자로 정렬된 순서 있는 목록(Ordered List)
💬 <ul> 점으로 순서 없는 목록(Unordered List)
💬 <li> 태그목록항목 정의
💬 <a> 하이퍼링크(링크)를 정의하는 태그 ( href 속성/ target 속성)

ul { list-style-type: none; margin: 0; padding: 0;}

💬 list-style-type : 목록 요소(<ul>, <ol>)의 기본 목록 마커(marker)를 제거

💬 margin: 0; padding: 0; 브라우저 기본 값 초기화(reset)하는 데 사용하거나/ 웹 페이지의 레이아웃을 조정할 때 여백을 제어

CSS Vertical Navigation Bar

        ul { list-style-type: none; 
            margin: 0; 
            padding: 0;
            width: 60px;}

        li a { display: block; 
            background-color: #ddd;}

💬 display : block ; : 요소를 블록 수준 요소(block-level element)로 지정 , 새로운 줄에서 시작/전체 너비 차지/너비와 높이 조절 가능/상하 여백 추가 특징을 가짐

💬 width : 블록 요소는 기본 값이 전체 너비 , 너비를 지정해준다.

      ul { list-style-type: none; 
            margin: 0; 
            padding: 0;
            width: 60px;}

        li a { display: block; 
            background-color: #ddd;
            padding: 8px, 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #555;
            color: white; 
        }

💬 text-decoration: none; : 텍스트에 적용된 기본 텍스트 장식(underline, overline, line-through 등)을 제거
💬 li a:hover : 마우스를 해당 요소 위로 올렸을 때의 상태를 선택합니다.

        li a.active {
            background-color: #04AA6D;
            color: white;
            }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
            }
            
<li><a class="active" href="#Home"> Home </a></li>

💬 li a.active : 어느 페이지에 있는지 표현
💬 li a:hover:not(.active) : (<a>) 요소가 마우스를 올렸을 때 동시에 , 특정 클래스(.active)가 적용되지 않은 경우에만 스타일 적용

   li {
         text-align: center;
            border-bottom: 1px solid #555;
        }
li:last-child {
            border-bottom: none;
        }

💬 border-bottom: 1px solid #555; 하단 테두리 만들기
💬 li:last-child {border-bottom: none;} li 의 마지막 자식은 보더 바텀 값 X

  body{
            margin:0;
        }


        ul { list-style-type: none; 
            margin: 0; 
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            position: fixed;
            height: 100%;
            overflow: auto;
        }


<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2> 안녕하세요 </h2>
<p> 안녕하세요 ~ 반갑습니다.</p>
</div>

전체 높이 고정 사이드 네비게이션

💬body{ margin:0; }  <body> 요소에 대해 외부 여백(margin)을 0으로 설정하는 것
💬width: 25%;  (하단 div) 부모요소의 너비에 상대적 비율로 지정,  하단 div 태그의 margin 값과 맞춰주면 비율에 유동값으로 움직임
💬position: fixed;  뷰포트(Viewport)에 고정된 위치에 배치하는 것 , 스크롤 해도 움직이지 않음
💬height: 100%;   부모 요소의 높이에 상대적인 비율로 지정하는 것, 전체 높이 사용하겠다는 뜻 (요소의 부모 요소에 대해 명시적으로 높이가 설정되어있어야함)
💬overflow: auto; 요소의 콘텐츠가 자신의 영역을 벗어났을 때 어떻게 처리할지를 지정하는 속성 ,  (콘텐츠가 영역을 벗어날 때 스크롤바 표시 / 콘텐츠가 영역을 벗어나지 않을 때는 스크롤바 미표시)

💬style="margin-left:25%;
padding:1px 16px;
height:1000px;    고정 값 부여  (오버플로우되면 속성 지정 가능 상단 참고)
태그 자체에 스타일 부여하는 방법

Horizontal Navigation Bar

     ul { list-style-type: none; 
            margin: 0; 
            padding: 0;
        }

        li {
            display: inline;
        }

💬 li {display: inline;} li 는 기본적으로 블록요소이다. 인라인(inline) 요소로 표시하도록 지정

        ul { list-style-type: none; 
            margin: 0; 
            padding: 0;
            overflow: hidden;
        }

        li {
            float: left;
        }
        li a {
            display: block;
            padding: 8px;
            background: #ddd;
        }

💬  overflow: hidden; =요소의 내용이 요소의 경계를 벗어날 경우 초과된 부분을 숨기는 방법 (넘치는 콘텐츠 숨김/레이아웃 영향 / 부모요소 영향)
💬 float: left;   = 요소를 왼쪽으로 부유(floating)시키는 것
💬  전체 너비 색을 원하면 ul 값에 back-color 넣으면 됨

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

        li {
            float: left;
        }
        li a {
            display: block;
            padding: 14px 16px;
            text-decoration: none;
            color: #fff;
        }
        
        li a:hover {
            background-color: #111;
        }

        .active {
            background-color: rgb(61, 96, 96);
        }
        li a:hover:not(.active) {
            background-color: #111;
        }

💬 사용자가 어느 페이지에 있는지 알 수 있도록 현재 링크에 "활성" 클래스를 추가

<li style="float:right"><a class="active" href="#About"About></a></li>

💬 오른쪽 배치하고 싶은 요소만 float 값을 right 로 주면 됨

    li {
            float: left;
            border-right: 1px solid #bbb;
        }
        li:last-child {
            border-right: none;
            }

💬 수평 테두리 만들기

        ul { list-style-type: none; 
            margin: 0; 
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: fixed;
            bottom : 0;
            width: 100%;
        }
        
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
        <h1>안녕하세요 여러분</h1>
        <p>반갑습니다. 좋은 하루 되세요.</p>

💬  position: fixed;   =  고정된 위치로 배치
💬   top : 0;  =   위쪽(top)을 뷰포트 상단에 고정
💬   width: 100%;  = 화면의 가로폭에 맞게 요소의 너비 설정 100% 전체

ul {
           position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 0;}

상단에 도달하면 바가 고정된다.
💬 position: -webkit-sticky; /* Safari */ = . Safari에는 -webkit- 접두사가 필요
💬 position: sticky; = 스크롤 영역 내에서 지정한 임계값까지 고정된 위치로 배치하는 기능을 제공

 body {margin: 0;}

        ul.sidenav { list-style-type: none; 
            margin: 0; 
            padding: 0;
            overflow: hidden;
            background-color: #d8d8d8;
            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;
            }
        }

💬 @media screen and (max-width: 900px) @media screen and (max-width: 400px) => 미디어 쿼리로 뷰포트 크기에 맞게 설계한다.
💬 position: fixed; => 기본 값
height: 100%;
overflow: auto; (요소의 영역을 벗어날 경우 스크롤을 표시)
💬 (max-width: 900px) { => 너비가 900일때

position: relative; => 네비를 상대적 위치로 지정시킨다. (기본 위치 유지/상대적이동/자식요소의 위치지정)
float: left; => 가로 정렬

💬 (max-width: 400px) { => 너비가 400일때
text-align: center;
float: none; => 기본값 세로 정렬

저작자표시 비영리 변경금지

현재글CSS Navigation Bar

개발일지📝

CSS Navigation Bar

CSS Navigation Bar

CSS Vertical Navigation Bar

Horizontal Navigation Bar

'🔴 WEB/Web 개념정리'의 다른글

티스토리툴바

CSS Navigation Bar

CSS Navigation Bar

CSS Vertical Navigation Bar

Horizontal Navigation Bar

'🔴 WEB/Web 개념정리'의 다른글

관련글

티스토리툴바