[Javascript] 'mouseover'를 사용하여 컨텐츠 보이게하기

여러 개의 타이틀이 있고, 각 타이틀에 마우스를 대면 해당 타이틀에 맞는 컨텐츠를 보여주고, 다른 타이틀에 마우스를 올리면 이전에 보여졌던 컨텐츠는 숨기고 새로운 컨텐츠를 보여주는 기능을 만들었다.

 

HTML

  <div class="section">

    <ul>

      <li class="list">

        <div class="title">

          <p>A site</p>

        </div>

        <div class="content">

          <p>여기는 A site입니다.</p>

          <p>여기는 A site입니다.</p>

          <p>여기는 A site입니다.</p>

          <p>여기는 A site입니다.</p>

          <p>여기는 A site입니다.</p>

          <p>여기는 A site입니다.</p>

        </div>

      </li>

      <li class="list">

        <div class="title">

          <p>B site</p>

        </div>

        <div class="content">

          <p>여기는 B site입니다.</p>

          <p>여기는 B site입니다.</p>

          <p>여기는 B site입니다.</p>

          <p>여기는 B site입니다.</p>

          <p>여기는 B site입니다.</p>

          <p>여기는 B site입니다.</p>

        </div>

      </li>

      <li class="list">

        <div class="title">

          <p>C site</p>

        </div>

        <div class="content">

          <p>여기는 C site입니다.</p>

          <p>여기는 C site입니다.</p>

          <p>여기는 C site입니다.</p>

          <p>여기는 C site입니다.</p>

          <p>여기는 C site입니다.</p>

          <p>여기는 C site입니다.</p>

        </div>

      </li>

    </ul>

  </div>

ul,li 태그를 사용해 list 박스 안에 title과 content를 넣어주었다.

 

CSS

.section{

  width: 100vw;

  height: 100vh;

  display: flex;

  align-items:center;

  justify-content: center;

}

.list{

  list-style: none;

  margin-right: 300px;

  margin-bottom: 100px;

  position: relative;

}

.title{

  width: 250px;

  height: 100px;

  border-radius: 100px;

  display: flex;

  cursor: pointer;

  align-items: center;

  justify-content: center;

  transition: all 0.3s

}

.title-on{

  background-color: black;

  color: white;

}

.title p{

  font-size: 60px;

}

.content{

  position: absolute;

  top: 0;

  left: 300px;

  width: 500px;

  display: none;

}

.content p{

  font-size: 40px;

  font-weight: bold;

  line-height: 1.6;

}

.content-on{

  display: block;

}

미리 title-on, content-on이라는 클래스를 만들어 놓고 마우스가 올라갔을 때 클래스를 붙였다가 뗐다가 하는 방식을 사용할 것이다. 그리고 content는 list에 대한 position:absolute를 걸어서 위치를 맞춰주었다.

 

* position: absolute를 사용하는 이유는 각각의 컨텐츠를 절대적인 위치에 배치하여 겹치지 않고, 원하는 위치에 정확하게 배치하기 위함이다. 이 방법을 사용하면 컨텐츠의 위치를 조절하고 겹침을 피할 수 있다.

position: absolute는 해당 요소를 부모 요소를 기준으로 절대적인 위치에 배치하게 되며, 다른 요소와 겹칠 수 있다. 이는 정확한 위치 조절에 유용하며, 여러 요소를 겹치게 하거나 레이아웃을 특정하게 구성할 때 효과적이다.

또한, 겹침을 피하기 위해 position: absolute를 사용할 때는 주의가 필요하다. 다른 요소와의 충돌을 방지하기 위해 적절한 여백(margin)이나 z-index 속성을 사용하여 겹치는 요소의 층위를 조절할 수 있다.

만약 겹치는 것이 문제가 되지 않고, 일반적인 플로우에 따라 요소들을 배치하고 싶다면 position: static (기본값)이나 position: relative를 사용하는 것이 좋다. 이러한 속성은 요소들이 문서 플로우에 따라 배치되며, 일반적인 레이아웃 흐름을 따라가게 된다.

 

JAVASCRIPT

for(let i = 0; i < document.querySelectorAll('.list').length; i++){

  document.querySelectorAll('.title')[i].addEventListener('mouseover',function(){

    document.querySelectorAll('.title').forEach((e) => {

      e.classList.remove('title-on');

    });

    document.querySelectorAll('.content').forEach((e) => {

      e.classList.remove('content-on');

    });

    document.querySelectorAll('.title')[i].classList.add('title-on');

    document.querySelectorAll('.content')[i].classList.add('content-on');

  });

}

'mouseover' 이벤트리스너를 사용해 html을 조작해준다. 우선 title에 마우스를 대면 title과 content에 붙어있는 on 클래스들을 없애주고나서 각 타이틀에 클래스를 부여해주는 방식으로 for반복문을 이용해서 코드를 짰다.

 

* 클래스를 제거해주는 코드에서 forEach 반복문을 사용한 이유는 여러 요소에 대해 querySelectorAll로 선택하면 NodeList가 반환된다. NodeList는 배열과 비슷하지만 배열 메서드를 직접 사용할 수 없기 때문에 forEach 반복문을 사용하여 각 요소에 접근하는 것이 좋다.

 

* 이 코드를 짤 때 바로 이러한 형태로 짜지 않고 순서대로 한글로 먼저 코드를 구상해놓고 짰다. 그래야만 헷갈리지 않고 차근차근 코드를 잘 짤 수 있다. 순서를 얘기하자면...

 

1. title의 첫번째를 찾아서 mouseover 이벤트리스너를 사용해주고, title과 content에 on 클래스를 부여했다.

2. 똑같은 코드를 두번째, 세번째 title을 찾아서 짜주었다. 그렇게 하니 다른 title로 마우스가 넘어갔을 때 content와 title이 그대로 on이 되어있어 전체적으로 먼저 제거해주고 클래스를 부여해야겠다는 생각을 했다.

3. 이렇게 세개의 코드가 정상적으로 잘 작동하고 나서 반복되는 부분들을 줄여주기 위해 for 반복문을 사용해주었다.

 

코드를 작성하기 전에 논리적인 흐름을 생각하고 계획을 세우는 것이 중요하다. 여러 번의 단계를 거쳐 코드를 완성하는 것은 효과적인 방법이며, 그렇게 함으로써 코드의 가독성과 유지보수성이 향상된다.

여러 단계로 나누어 생각하고 문제를 해결하는 것은 코드를 논리적으로 이해하고 문제를 분해하는데 도움이 된다. 먼저 작은 부분을 해결하고, 그 후에 일반적인 패턴이나 중복 코드를 식별하여 반복문과 같은 추상화 기법을 도입하는 것은 좋은 프로그래밍 습관 중 하나이다.

이렇게 고민하고 진행하는 것은 향후 유지보수가 더 쉽고 코드의 확장성을 높일 수 있다. 계속해서 자신만의 개발 방법론을 발전시켜 나가면서 프로그래밍 역량을 향상시켜 나가기를 권장한다. 좋은 습관과 논리적인 사고는 프로그래밍에서 핵심적인 역할을 한다.