1-5. 카테고리 바 만들기 -실습-

Shy·2023년 7월 24일

HTML, CSS, JS

목록 보기
5/14

실습

카테고리바를 만들기 위해, 버튼을 추가해 본다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Clone coding</title>
</head>
<body>
    <header>
        <img id="logo" src="./imgs/comp.jpg" alt="fast campus logo">
        <div id="little-search">
            <button class="little-search_button">어디든지</button><span class="divider"></span>
            <button class="little-search_button">언제든 일주일</button><span class="divider"></span>
            <button class="little-search_button">게스트 추가</button>
            <div id="magnifying-glass-wrapper">
                <img id="magnifying-glass-icon" src="./imgs/magnifying-glass-icon.png" alt="magnifying glass icon">
            </div>
        </div>
        <div id="header-right-section">
            <div id="do-airbnb">
                당신의 강의를 패스트캠퍼스하세요.
            </div>
            <div id="profile-section">
                <img width="25" src="./imgs/list.png" alt="list icon">
                <img width="30" src="./imgs/profile.avif" alt="profile icon">
            </div>
        </div>
    </header>    
    <div id="category-bar">
        <button class="category-button">
            <img src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
    </div>
</body>
</html>

버튼이 너무 크므로, CSS를 사용하여 버튼의 크기를 조절하고 글자의 사이즈와 굵기를 조절해보고, 여러개의 버튼을 만들어 본다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Clone coding</title>
</head>
<body>
	<header>...
	</header>
    <div id="category-bar">
        <button class="category-button">
            <img src="./categorybar-imgs/beach.jpg" alt="beach">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/best-view.jpg" alt="best view">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/country.jpg" alt="country">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/beach.jpg" alt="beach">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/best-view.jpg" alt="best view">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/country.jpg" alt="country">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/beach.jpg" alt="beach">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/best-view.jpg" alt="best view">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/country.jpg" alt="country">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
    </div>
</body>
</html>
#profile-section {
    display: flex;
    padding: 5px 5px 5px 12px;
    align-items: center;
    border: 1px solid #DDDDDD;
    border-radius: 21px;
    gap: 12px; /*아이템간의 간격을 조절한다.*/
}

#list-icon {
    width: 16px;
}

#circle-icon {
    width: 30px;
}

#profile-section:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

#category-bar {
    display: flex;
    padding: 0 40px;
    gap: 32px;
}

.category-button {
    color: #717171;
    font-size: 12px;
    font-weight: 600;
}

.category-button img{
    width: 28px;
}

하지만, 위처럼 우리가 원하지 않는 스크롤이 생겨버렸다. 이럴때는 CSS - Overflow를 사용하자.

#category-bar {
    display: flex;
    padding: 20px 40px 0; /*상단20px, 우측40px, 하단0px, 좌측은 지정하지 않았으므로 40px 사용.*/
    gap: 32px;
    overflow: auto; /*카테고리바에 스크롤을 만들기 위한 명령어.*/
}

위 처럼, 카테고리바에 별도의 스크롤이 생겨, 페이지 전체를 움직이지 않고 카테고리바만 움직일 수 있게 되었다.
하지만, 우리는 스크롤바가 안보여도 되므로 다음과 같이 css를 입력하자.

#category-bar {
    display: flex;
    padding: 20px 40px 0; /*상단20px, 우측40px, 하단0px, 좌측은 지정하지 않았으므로 40px 사용.*/
    gap: 32px;
    overflow: auto; /*카테고리바에 스크롤을 만들기 위한 명령어.*/
}

#category-bar::-webkit-scrollbar {
    display: none; /*스크롤바를 안보이게 해준다.*/
}

display를 none으로 설정하면, 스크롤바가 보이지 않는다.

이제, 버튼 위에 마우스를 올렸을때 버튼이 강조되게끔 제작하려 한다.
다음 CSS코드를 입력하면 된다.

.category-button:hover {
    color: #000000;
    border-bottom: 2px solid #DDDDDD;
}

위처럼, 선택된 8번째 버튼의 밑에 경계가 생기고, 글자의 색이 검정색으로 바뀌었다.
하지만, 마우스가 hover되었을 때, 이미지가 바뀌길 원하므로, 두가지 이미지를 넣어보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Clone coding</title>
</head>
<body>
    <header>...
    </header>
    <div id="category-bar">
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/beach-inactive.jpg" alt="beach-inactive icon">
            <img class="active-img" src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/best-view-inactive.jpg" alt="best view-inactive icon">
            <img class="active-img" src="./categorybar-imgs/best-view.jpg" alt="best view icon">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/country-inactive.jpg" alt="country-inactive icon">
            <img class="active-img" src="./categorybar-imgs/country.jpg" alt="country icon">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/dom-inactive.jpg" alt="dom-inactive icon">
            <img class="active-img" src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/farm-inactive.jpg" alt="farm-inactive icon">
            <img class="active-img" src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/hot-place-inactive.jpg" alt="hot-place-inactive icon">
            <img class="active-img" src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/log-cabin-inactive.jpg" alt="log-cabin-inactive icon">
            <img class="active-img" src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/room-inactive.jpg" alt="room-inactive icon">
            <img class="active-img" src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/small-house-inactive.jpg" alt="small-house-inactive icon">
            <img class="active-img" src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/swim-inactive.jpg" alt="swim-inactive icon">
            <img class="active-img" src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/beach-inactive.jpg" alt="beach-inactive icon">
            <img class="active-img" src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/best-view-inactive.jpg" alt="best view-inactive icon">
            <img class="active-img" src="./categorybar-imgs/best-view.jpg" alt="best view icon">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/country-inactive.jpg" alt="country-inactive icon">
            <img class="active-img" src="./categorybar-imgs/country.jpg" alt="country icon">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/dom-inactive.jpg" alt="dom-inactive icon">
            <img class="active-img" src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/farm-inactive.jpg" alt="farm-inactive icon">
            <img class="active-img" src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/hot-place-inactive.jpg" alt="hot-place-inactive icon">
            <img class="active-img" src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/log-cabin-inactive.jpg" alt="log-cabin-inactive icon">
            <img class="active-img" src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/room-inactive.jpg" alt="room-inactive icon">
            <img class="active-img" src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/small-house-inactive.jpg" alt="small-house-inactive icon">
            <img class="active-img" src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/swim-inactive.jpg" alt="swim-inactive icon">
            <img class="active-img" src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/beach-inactive.jpg" alt="beach-inactive icon">
            <img class="active-img" src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/best-view-inactive.jpg" alt="best view-inactive icon">
            <img class="active-img" src="./categorybar-imgs/best-view.jpg" alt="best view icon">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/country-inactive.jpg" alt="country-inactive icon">
            <img class="active-img" src="./categorybar-imgs/country.jpg" alt="country icon">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/dom-inactive.jpg" alt="dom-inactive icon">
            <img class="active-img" src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/farm-inactive.jpg" alt="farm-inactive icon">
            <img class="active-img" src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/hot-place-inactive.jpg" alt="hot-place-inactive icon">
            <img class="active-img" src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/log-cabin-inactive.jpg" alt="log-cabin-inactive icon">
            <img class="active-img" src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/room-inactive.jpg" alt="room-inactive icon">
            <img class="active-img" src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/small-house-inactive.jpg" alt="small-house-inactive icon">
            <img class="active-img" src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/swim-inactive.jpg" alt="swim-inactive icon">
            <img class="active-img" src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
    </div>
</body>
</html>

위처럼, 두가지 이미지가 홈페이지에 출력되는 것을 볼 수 있다.
이제, img의 class가 "inactive-img"와 "active-img"로 구분되어 있는 것을 활용하여, 마우스가 hover되지 않았을 때는 inactive 이미지를, 마우스가 hover되었을 때는 이미지를 페이지에 표시해보자.

.active-img {
    display: none; /*일반적인 상활일때 보이지 않음*/
}

.category-button:hover .active-img{
    display: inline-block; /*마우스를 올려야 보임*/
}

.category-button:hover .inactive-img{
    display: none; /*마우스를 올리면 보이지 않음*/
}

위를 보면, 첫 번째 '해변'에 마우스를 올렸더니, 검은 그림이 나타는것을 볼 수 있다.

이제, Eventlistener를 사용해보자, 카테고리바에 있는 버튼을 클릭했을 때, 콘솔창에 'clicked'라는 메시지를 띄워보자.

<script>
    document.querySelectorAll('.category-button').forEach(button => {
        button.addEventListener("click",event => {
            console.log('clicked')
        })
    })
</script>
<!-- forEach(button 으로 하지만, forEach(아무거나 => 로 바꾼 다음에,
 아무거나.addEventListener로 해도 코드가 작동한다.-->

위 코드는 JavaScript를 사용하여 문서 내의 모든 '.category-button' 클래스를 가진 요소들에게 'click' 이벤트 리스너를 추가하고 있다. 이 리스너는 해당 요소들이 클릭될 때마다 작동하게 된다.

  1. document.querySelectorAll('.category-button'): HTML 문서 내에서 .category-button 클래스를 가진 모든 요소를 찾아서 NodeList로 반환한다. NodeList는 배열과 비슷하게 동작하는 객체로, 각 요소에 대한 참조를 포함하고 있다.
  2. forEach(button => {...}): NodeList에 forEach 메서드를 사용하여 각 요소에 대해 특정 작업을 수행한다. 이 경우, 각 버튼 요소에 대해 인라인 함수 (button => {...})를 실행합니다. 이 함수는 버튼을 매개변수로 받는다.
  3. button.addEventListener("click", event => {...}): 각 버튼에 'click' 이벤트 리스너를 추가한다. 이 리스너는 버튼이 클릭될 때마다 동작하게 된다.
  4. console.log('clicked'): 이벤트가 발생하면, 콘솔에 'clicked'라는 메시지를 출력한다. 이 코드는 이벤트가 정상적으로 발생하고 리스너가 작동하는지 확인하기 위한 디버깅용 코드일 수 있다.

위처럼, 클릭하면 'clicked'라는 메세지가, 콘솔창에 출력된다.

이제, 클릭한 버튼이 검은색으로 활성화되도록 만들어보자.



#active-category-button {
    color: #000000; /*글자 색*/
    border-bottom: 2px solid #000000; /*밑 경계*/
}

#active-category-button .active-img{
    display: inline-block; /*active-img보임*/
}

#active-category-button .inactive-img{
    display: none; /*inactive-img 보이지 않음*/
}
<!--
처음엔 바디 부분의 category-bar에 '해변'버튼만 id="active-category-button"을 부여하고, 그 뒤에 Eventlistener의 click에 따라 id="active-category-button"을 삭제후, 클릭한 버튼에 부여한다.
-->
<body>
    <div id="category-bar">
        <button class="category-button" id="active-category-button">
            <img class="inactive-img" src="./categorybar-imgs/beach-inactive.jpg" alt="beach-inactive icon">
            <img class="active-img" src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/best-view-inactive.jpg" alt="best view-inactive icon">
            <img class="active-img" src="./categorybar-imgs/best-view.jpg" alt="best view icon">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/country-inactive.jpg" alt="country-inactive icon">
            <img class="active-img" src="./categorybar-imgs/country.jpg" alt="country icon">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/dom-inactive.jpg" alt="dom-inactive icon">
            <img class="active-img" src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/farm-inactive.jpg" alt="farm-inactive icon">
            <img class="active-img" src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/hot-place-inactive.jpg" alt="hot-place-inactive icon">
            <img class="active-img" src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/log-cabin-inactive.jpg" alt="log-cabin-inactive icon">
            <img class="active-img" src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/room-inactive.jpg" alt="room-inactive icon">
            <img class="active-img" src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/small-house-inactive.jpg" alt="small-house-inactive icon">
            <img class="active-img" src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/swim-inactive.jpg" alt="swim-inactive icon">
            <img class="active-img" src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/beach-inactive.jpg" alt="beach-inactive icon">
            <img class="active-img" src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/best-view-inactive.jpg" alt="best view-inactive icon">
            <img class="active-img" src="./categorybar-imgs/best-view.jpg" alt="best view icon">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/country-inactive.jpg" alt="country-inactive icon">
            <img class="active-img" src="./categorybar-imgs/country.jpg" alt="country icon">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/dom-inactive.jpg" alt="dom-inactive icon">
            <img class="active-img" src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/farm-inactive.jpg" alt="farm-inactive icon">
            <img class="active-img" src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/hot-place-inactive.jpg" alt="hot-place-inactive icon">
            <img class="active-img" src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/log-cabin-inactive.jpg" alt="log-cabin-inactive icon">
            <img class="active-img" src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/room-inactive.jpg" alt="room-inactive icon">
            <img class="active-img" src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/small-house-inactive.jpg" alt="small-house-inactive icon">
            <img class="active-img" src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/swim-inactive.jpg" alt="swim-inactive icon">
            <img class="active-img" src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/beach-inactive.jpg" alt="beach-inactive icon">
            <img class="active-img" src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/best-view-inactive.jpg" alt="best view-inactive icon">
            <img class="active-img" src="./categorybar-imgs/best-view.jpg" alt="best view icon">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/country-inactive.jpg" alt="country-inactive icon">
            <img class="active-img" src="./categorybar-imgs/country.jpg" alt="country icon">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/dom-inactive.jpg" alt="dom-inactive icon">
            <img class="active-img" src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/farm-inactive.jpg" alt="farm-inactive icon">
            <img class="active-img" src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/hot-place-inactive.jpg" alt="hot-place-inactive icon">
            <img class="active-img" src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/log-cabin-inactive.jpg" alt="log-cabin-inactive icon">
            <img class="active-img" src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/room-inactive.jpg" alt="room-inactive icon">
            <img class="active-img" src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/small-house-inactive.jpg" alt="small-house-inactive icon">
            <img class="active-img" src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/swim-inactive.jpg" alt="swim-inactive icon">
            <img class="active-img" src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
    </div>
</body>
<script>
    document.querySelectorAll('.category-button').forEach(button => {
        button.addEventListener("click",event => {
            document.querySelector("#active-category-button").removeAttribute('id')

            button.setAttribute('id', 'active-category-button')
        })
    })
</script>

이 코드는 웹 페이지의 .category-button 클래스를 가진 모든 요소에 클릭 이벤트 리스너를 추가하는 JavaScript 코드이다. 각 버튼이 클릭되면 다음 작업이 수행된다.

  1. 먼저 document.querySelector("#active-category-button").removeAttribute('id')를 통해 현재 id가 active-category-button인 요소에서 해당 id를 제거한다. 이렇게 하면 이전에 활성화된 카테고리 버튼의 활성화 상태가 해제된다.
  2. 그 다음 button.setAttribute('id', 'active-category-button')를 통해 클릭된 버튼에 id 속성을 active-category-button로 설정한다. 이는 클릭한 버튼을 활성화 상태로 만든다.

이 코드의 목적은 사용자가 새 카테고리 버튼을 클릭할 때마다 해당 버튼을 활성화 상태로 만들고, 이전에 활성화된 버튼을 비활성화 상태로 만드는 것이다. 이런 패턴은 탭이나 메뉴 버튼 등에서 주로 볼 수 있다. 이런 방식으로, 사용자는 한 번에 하나의 카테고리만 활성화할 수 있다.

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>Clone coding</title>
</head>
<body>
    <header>
        <img id="logo" src="./imgs/comp.jpg" alt="fast campus logo">
        <div id="little-search">
            <button class="little-search_button">어디든지</button><span class="divider"></span>
            <button class="little-search_button">언제든 일주일</button><span class="divider"></span>
            <button class="little-search_button">게스트 추가</button>
            <div id="magnifying-glass-wrapper">
                <img id="magnifying-glass-icon" src="./imgs/magnifying-glass-icon.png" alt="magnifying glass icon">
            </div>
        </div>
        <div id="header-right-section">
            <div id="do-airbnb">
                당신의 강의를 패스트캠퍼스하세요.
            </div>
            <div id="profile-section">
                <img width="25" src="./imgs/list.png" alt="list icon">
                <img width="30" src="./imgs/profile.avif" alt="profile icon">
            </div>
        </div>
    </header>    
    <div id="category-bar">
        <button class="category-button" id="active-category-button">
            <img class="inactive-img" src="./categorybar-imgs/beach-inactive.jpg" alt="beach-inactive icon">
            <img class="active-img" src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/best-view-inactive.jpg" alt="best view-inactive icon">
            <img class="active-img" src="./categorybar-imgs/best-view.jpg" alt="best view icon">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/country-inactive.jpg" alt="country-inactive icon">
            <img class="active-img" src="./categorybar-imgs/country.jpg" alt="country icon">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/dom-inactive.jpg" alt="dom-inactive icon">
            <img class="active-img" src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/farm-inactive.jpg" alt="farm-inactive icon">
            <img class="active-img" src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/hot-place-inactive.jpg" alt="hot-place-inactive icon">
            <img class="active-img" src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/log-cabin-inactive.jpg" alt="log-cabin-inactive icon">
            <img class="active-img" src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/room-inactive.jpg" alt="room-inactive icon">
            <img class="active-img" src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/small-house-inactive.jpg" alt="small-house-inactive icon">
            <img class="active-img" src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/swim-inactive.jpg" alt="swim-inactive icon">
            <img class="active-img" src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/beach-inactive.jpg" alt="beach-inactive icon">
            <img class="active-img" src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/best-view-inactive.jpg" alt="best view-inactive icon">
            <img class="active-img" src="./categorybar-imgs/best-view.jpg" alt="best view icon">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/country-inactive.jpg" alt="country-inactive icon">
            <img class="active-img" src="./categorybar-imgs/country.jpg" alt="country icon">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/dom-inactive.jpg" alt="dom-inactive icon">
            <img class="active-img" src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/farm-inactive.jpg" alt="farm-inactive icon">
            <img class="active-img" src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/hot-place-inactive.jpg" alt="hot-place-inactive icon">
            <img class="active-img" src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/log-cabin-inactive.jpg" alt="log-cabin-inactive icon">
            <img class="active-img" src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/room-inactive.jpg" alt="room-inactive icon">
            <img class="active-img" src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/small-house-inactive.jpg" alt="small-house-inactive icon">
            <img class="active-img" src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/swim-inactive.jpg" alt="swim-inactive icon">
            <img class="active-img" src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/beach-inactive.jpg" alt="beach-inactive icon">
            <img class="active-img" src="./categorybar-imgs/beach.jpg" alt="beach icon">
            <div>해변</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/best-view-inactive.jpg" alt="best view-inactive icon">
            <img class="active-img" src="./categorybar-imgs/best-view.jpg" alt="best view icon">
            <div>최고의 경치</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/country-inactive.jpg" alt="country-inactive icon">
            <img class="active-img" src="./categorybar-imgs/country.jpg" alt="country icon">
            <div>시골</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/dom-inactive.jpg" alt="dom-inactive icon">
            <img class="active-img" src="./categorybar-imgs/dom.jpg" alt="dom icon">
            <div>돔</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/farm-inactive.jpg" alt="farm-inactive icon">
            <img class="active-img" src="./categorybar-imgs/farm.jpg" alt="farm icon">
            <div>농장</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/hot-place-inactive.jpg" alt="hot-place-inactive icon">
            <img class="active-img" src="./categorybar-imgs/hot-place.jpg" alt="hot-place icon">
            <div>핫플</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/log-cabin-inactive.jpg" alt="log-cabin-inactive icon">
            <img class="active-img" src="./categorybar-imgs/log-cabin.jpg" alt="log-cabin icon">
            <div>통나무집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/room-inactive.jpg" alt="room-inactive icon">
            <img class="active-img" src="./categorybar-imgs/room.jpg" alt="room icon">
            <div>룸</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/small-house-inactive.jpg" alt="small-house-inactive icon">
            <img class="active-img" src="./categorybar-imgs/small-house.jpg" alt="small-house icon">
            <div>작은 집</div>
        </button>
        <button class="category-button">
            <img class="inactive-img" src="./categorybar-imgs/swim-inactive.jpg" alt="swim-inactive icon">
            <img class="active-img" src="./categorybar-imgs/swim.jpg" alt="swim icon">
            <div>수영장</div>
        </button>
    </div>
</body>

<script>
    document.querySelectorAll('.category-button').forEach(button => {
        button.addEventListener("click",event => {
            document.querySelector("#active-category-button").removeAttribute('id')

            button.setAttribute('id', 'active-category-button')
        })
    })
</script>
</html>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

header {
    display: flex;
    padding: 0 80px;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgb(0 0 0 / 8%) 0 1px 0; /*실선을 위한 box-shadow*/
}

button {
    border: none;
    background: transparent;
}

#logo{
    height: 64px;
    cursor: pointer;
}

#little-search {
    display: flex;
    padding: 0 8px;
    justify-content: center;
    align-items: center;
    border: 1px solid #DDDDDD; /*1픽셀 실선 하얀색*/
    border-radius: 40px;
    height: 48px;
    box-sizing: border-box;
    min-width: 330px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0/ 5%);
    cursor: pointer;
}

#little-search:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

#little-search * {
    cursor: pointer;
}

.little-search_button {
    display: block;
    flex-shrink: 0;
    padding: 0 16px; /*상하 0px, 좌우 16px*/
    white-space: nowrap; /*줄바꿈 막기*/
    font-size: 14px;
    font-weight: 600; /*글자의 두께 지정. 100~900까지의 값을 가지며, 400은 보통, 700은 bold이다.*/
    color: rgb(34, 34, 34)
}

.little-search_button:nth-of-type(3) {
    color: #717171;
}

.divider {
    display: block;
    flex-basis: 1px;
    flex-shrink: 0;
    background-color: #DDDDDD;
    height: 24px;
}

#magnifying-glass-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    border-radius: 50%;
    flex-basis: 32px;
    flex-shrink: 0;
    height: 32px;
}

#magnifying-glass-icon{
    height: 12px;
}

#header-right-section {
    display: flex;
    gap: 8px;
}

#do-airbnb {
    padding: 12px;
    font-size: 14px;
    color: #222222;
    font-weight: 600;
    cursor: pointer;
    border-radius: 22px;
}

/*마우스를 올렸을때 작동*/
#do-airbnb:hover {
    background-color: #f7f7f7;
}

#profile-section {
    display: flex;
    padding: 5px 5px 5px 12px;
    align-items: center;
    border: 1px solid #DDDDDD;
    border-radius: 21px;
    gap: 12px; /*아이템간의 간격을 조절한다.*/
}

#list-icon {
    width: 16px;
}

#circle-icon {
    width: 30px;
}

#profile-section:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

#category-bar {
    display: flex;
    padding: 20px 40px 0px; /*상단20px, 우측40px, 하단0px, 좌측은 지정하지 않았으므로 40px 사용.*/
    gap: 32px;
    overflow: auto; /*카테고리바에 스크롤을 만들기 위한 명령어.*/
}

#category-bar::-webkit-scrollbar {
    display: none; /*스크롤바를 안보이게 해준다.*/
}

.active-img {
    display: none; /*일반적인 상활일때 보이지 않음*/
}

.category-button {
    color: #717171;
    font-size: 12px;
    font-weight: 600;
}

.category-button img{
    width: 28px;
}

.category-button:hover {
    color: #000000;
    border-bottom: 2px solid #DDDDDD;
}

.category-button:hover .active-img{
    display: inline-block; /*마우스를 올려야 보임*/
}

.category-button:hover .inactive-img{
    display: none; /*마우스를 올리면 보이지 않음*/
}

#active-category-button {
    color: #000000;
    border-bottom: 2px solid #000000;
}

#active-category-button .active-img{
    display: inline-block; /*active-img보임*/
}

#active-category-button .inactive-img{
    display: none; /*inactive-img 보이지 않음*/
}

querySelector

'query'는 데이터베이스에서 데이터를 요청하거나 HTML문서에서 특정 요소를 찾는 데 사용되는 쿼리 언어(SQL, CSS선택자 등)에서 가져온 용어이다.

특특히 querySelectorAll 메서드에서 사용하는 'query'는 CSS 선택자이다. 즉, HTML 문서에서 특정 요소를 "질의"하거나 "찾아내는" 작업을 수행한다는 의미다.

예를 들어, document.querySelectorAll('.myClass')는 HTML 문서 내에서 클래스가 'myClass'인 모든 요소를 찾아낸 후 그 요소들에 대한 참조를 포함하는 NodeList를 반환한다.

profile
Shy
신입사원...
이전 포스트

1-4. 카테고리 바 만들기 -이론-

다음 포스트

1-6. 숙소 리스트 아이템 만들기 -이론-

0개의 댓글