[CSS] scroll bar 만들고 숨기기

 

유튜브스타일로 카테고리를 만들고,  scroll 숨겨서 적용하기

 

 

 

 

 

html 과 css 로 적당한 색감과 크기의 버튼을 만들어준다

 

<div class="head-category-wrapper">
  <ul class="head-category">
    # 이 부분을 js에서 추가하도록 하거나, html에서 필요한 만큼 하드코딩한다 
    <li class="category-item">
      <a type="button" class="nav-link" href="연결할.html"> 카테고리이름 </a>
    </li>
  </ul>
</div>

 

 

 

 

아래와같이 스크롤을 적용하면 스크롤 바가 바로 생기는데

문제는 가로 세로 관계없이 내용물이 정해진 상자의 범위를 벗어나면 scroll이 적용된다

auto 로 되어있는 부분에서 좀 곤란할듯!

 

overflow : scroll;

 

 

 

 

그럴땐 해당 div 등의 가로 세로 크기를 조절해주거나

x y 축을 적용해주어 한 쪽 방향으로만 스크롤이 생기도록한다.

 

-x 는 가로, -y 는 세로로 스크롤바가 자동 생성된다

 

overflow-x: scroll;
 
overflow-y: scroll;

 

 

 

 

이후 스크롤바 숨기기를 적용해준다!

 

.head-category {
    display: flex;
    min-width: 400px;
    width: 1200;
    overflow-x: scroll;
    
    -ms-overflow-style: none; # IE
    scrollbar-width: none; # firefox
}

.head-category::-webkit-scrollbar {
    display: none; # 그외
}

 

 

 

 

---

 

 

 

 

위 사항을 적용했을 때 카테고리에 scroll이 생성되지 않고,

카테고리들이 페이지 크기도 무시한채 한 줄로 쭉 늘어나는 모습을 볼 수 있었다

 

그래서 상위 div search-category-area 에 grid 속성을 적용하고

하위 div를 생성하여 scroll 설정을 추가해주는 방향으로 바꾸었다.

 

<div class="search-category-area">
  <div class="head-category-wrapper">
    <ul class="head-category">
      <div class="category-item-box">
        <li class="category-item">
          <a type="button" class="nav-link" href="community_main.html"> 커뮤 카테고리 </a>
        </li>
        ...

 

 

 

 

 

 

부모 div인 category-item-box에

display: flex 설정,

flex-warp을 한 줄로 만들어주는 nowrap 적용

overflow-x 를 auto로 스크롤이 자동으로 만들어지도록 하였다.

 

이후 grid box안에 꽉 차도록 길이 속성 및 스크롤바 숨기기 기능을 넣어주었음!

 

 

자식 div인 category-item에 flex auto 설정!

flex: 0 0 auto;로 설정하면 flex-grow, flex-shrink , flex-basis가 auto로 설정된다고 한다.

화면 변화에 따라 알아서 변화하도록 하는 것인데,

내 카테고리는 크기와 간격이 정사이즈로 지정되어있어서 딱히 필요는 없을지도..

 

 

.category-item-box {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    
    -ms-overflow-style: none; /* IE */
    scrollbar-width: none; /* firefox */
}

.category-item-box::-webkit-scrollbar {
    display: none; /* 그외 */
}

.category-item {
    flex: 0 0 auto;
    
    white-space: nowrap;
    cursor: pointer;
}

.category-item:hover {
    background-color: #707070;
    transition: all ease 0.5s;
}

 

 

category-item에 글자를 한 줄로 고정하는 속성 nowrap적용하여 박스가 flexible해지는 것을 방지,

cursor:pointer; 와 hover시 색 변화로 선택할 수 있음을 나타내줌!

 

 

 

 

 

---

 

 

 

 

애매하게 가운데에 떠있는 search 박스. 오른쪽 정렬을 하고 싶었다

grid설정에서는 float:right;를 사용해도 search box가 오른쪽으로 가지않는다!

 

 

 

 

margin-left를  auto로 적용하여  자연스럽게 그리드 오른쪽 방향으로 옮겨준다.

 

.search-category-area {  #search 와 category가 한 줄에 들어가는 grid영역 생성
    display: grid;
    grid-template-columns: 70% 30%;
}

.search-box {
    margin-left: auto;
    justify-content: center;
    align-items: center;

    grid-column: 2;
}