유튜브 사이트 (사이드바) 만들기

화면에 고정하기

- position : fixed 브라우저의 전체 화면을 기준으로 고정 배치

  top, left, bottom, right와 같은 offset 속성 사용

- z-index : 숫자가 높을 수록 가려지지 않고 앞으로 배치

.sidebar {
    position: fixed;
    left: 0;
    bottom: 0;
    top: 55px;
    background-color: #212121FF;
    width: 72px;
    z-index: 200;
    padding-top: 5px;
}

flex박스를 이용한 세로 가운데 정렬

- display : flex 복잡한 레이아웃을 간단하게 구현 가능 (요소 크기, 순서, 배치, 정렬, 분산 등)

- flex-direction : column 주축을 세로로  row(default)

- justify-content : center (주축 기준으로 가운데 정렬)

- align-items : center (교차축 기준으로 가운데 정렬)

- cursor: pointer 해당 박스위에 마우스 커서가 가면 마우스 모양 바뀜

.sidebar-link {
    height: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

포인터 효과

- :hover 마우스가 올라갔을 때 행동 설정

.sidebar-link img {
    height: 24px;
    margin-bottom: 4px;   
}

.sidebar-link:hover {
    background-color: #4d4d4d;
}

.sidebar-link div{
    font-size: 10px;
}

결과

사이드바 html

- <nav> : 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용

 ex) 메뉴, 목차, 인덱스

 <nav class="sidebar">
        <div class="sidebar-link">
            <img src="assets/icons/home.svg">
            <div>Home</div>
        </div>
        <div class="sidebar-link">
            <img src="assets/icons/explore.svg">
            <div>Explore</div>
        </div>
        <div class="sidebar-link">
            <img src="assets/icons/subscriptions.svg">
            <div>Subscriptions</div>
        </div>
        <div class="sidebar-link">
            <img src="assets/icons/originals.svg">
            <div>Originals</div>
        </div>
        <div class="sidebar-link">
            <img src="assets/icons/youtube-music.svg">
            <div>Youtube Music</div>
        </div>
        <div class="sidebar-link">
            <img src="assets/icons/library.svg">
            <div>Library</div>
        </div>
    </nav>

GitHub

GitHub - jeongdong99/YouTube