40+DAY_멋사 프론트엔드 부트캠프 14기_TIL

What I Learned Today

오늘은 아코디언을 실습해보며 루프를 연습했다.

• 아코디언 : 정보를 펼치거나 숨길 수 있는 UI 컴포넌트다.
  • 닫혀있을 땐 헤더만 보이고 열면 내용이 표시된다.

 

이런 마크업이 있을때

<div class="accordion__container">
      <div class="accordion" data-theme="cheese">
        <div class="accordion__header">
          <h2>
            <button type="button">
              <span class="accordion__title">치즈</span>
              <span class="accordion__indicator">
                <svg viewBox="0 0 80 80" aria-hidden="true">
                  <use href="images/sprite.svg#plus" />
                </svg>
              </span>
            </button>
          </h2>
        </div>
        <div class="accordion__content">
          <svg viewBox="0 0 141 65">
            <use href="./images/sprite.svg#cheese" />
          </svg>
          <p>
            <a
              href="https://ko.wikipedia.org/wiki/Cheese"
              rel="noopener noreferrer"
              target="_blank"
            >
              치즈</a>는 우유에서 유래한 식품으로, 우유 단백질인 카제인을 
              응고시켜 다양한 맛, 질감, 형태로 만들어집니다.
          </p>
        </div>
      </div>
    </div>

 

이렇게 JS를 작성했다.

// 먼저 아코디언 컨테이너, 아코디언 클래스를 찾아 변수에 저장한다.
const accordionContainer = document.querySelector('.accordion__container')
const accordions = accordionContainer.querySelectorAll('.accordion')

// 루프를 이용하여 각 버튼에 is-open 클래스를 추가하는 클릭 이벤트를 만들어준다.
accordions.forEach((accordion) => {
	const accordionButton = accordion.querySelector('button')
    accordionButton.addEventListener('click', () => {
    	accordion.classList.toggle('is-open')
    })
})

이렇게 짜면 좋은점은 계속 컨텐츠를 추가해도 JS 코드는 바꿀 필요가 없다.

결과물

 

JS에서는 요소를 선택하는 여러가지 방법이 있다.

• 아이디
• 클래스
• 태그
• 속성

개발자는 어떤 상황에서 어떤 방법으로 요소를 선택해야 효율적일지 고민해야한다.

• 요소가 하나일 경우 : id
  • 문서 전체에서 고유하게 식별 가능하기 때문이다.
• 요소가 두개일 경우 : 클래스, 속성 또는 태그
  • 하지만 태그 사용은 지양하는것이 좋다.
  • 태그는 너무 일반적이라 많은곳에 사용하기 때문이다.
• JavaScript Hook : JS가 필요한 컴포넌트에는 js 접두사를 포함하는 것이 유용할 수 있다.
  • JS가 해당 요소에 필요하다는 것을 알기 쉽다.
  • 클래스를 제어할 때 JS 기능 손상을 예방할 수도 있다.

 

JS를 사용해 요소의 CSS 스타일을 설정해야 할 때가 있다.

// 요소의 CSS 스타일 설정을 위해서는 style 속성을 사용한다.
// 브라우저에서 지원되는 모든 CSS 속성을 변경할 수 있다.
// style 속성을 사용해 CSS 스타일 설정 시 속성 이름은 카멜케이스로 작성해야 한다.

const element = document.querySelector('.element')

element.style.color = 'rgb(237, 76, 103)'
element.style.backgroundColor = '#1289A7'
element.style.fontSize = '2.875rem'
element.style.fontWeight = '800'

// 하이픈이 포함된 CSS 속성을 변수로 사용할 경우 대괄호를 사용한다.

element.style['속성명'] = 값

// setProperty() 메서드를 사용하는 방법도 있다.
// 사용자 정의 속성도 설정할 수 있다.
// setProperty() 메서드를 사용할 경우 CSS 속성 이름은 하이픈 케이스로 설정해야 한다.

element.style.setProperty('--theme-color', '#A3CB38')

 

JS를 사용하여 CSS 스타일을 읽을 수도 있다.

• 인라인 스타일 읽기 : DOM 요소에 style 속성으로 설정된 스타일을 읽는다.
• 계산된 스타일 읽기 : 요소에 적용된 스타일이 CSS 파일에 작성된 경우를 읽는다.

인라인 스타일 읽기

<p class="element" style="font-size: 2rem; color: #1289a7;">
	인라인 스타일이 적용된 단락입니다.
</p>

// 인라인 스타일이 적용된 요소의 CSS 스타일 속성 값을 읽으려면 style 속성을 사용하면 된다.

const element = document.querySelector('.element')

const fontSize = element.style.fontSize
console.log(fontSize) // '2rem'

const color = element.style.color
console.log(color) // '#1289a7'

 

계산된 스타일 읽기

<p class="element">
	스타일이 적용된 단락입니다.
</p>

<!-- CSS 문서에 작성됨 -->
.element {
  background-color: #131012;
  color: #f9f8f0;
}

// CSS 문서에 작성된 스타일을 읽으려면 getComputedStyle() 메서드를 사용한다.

// 문서에서 .element 요소를 변수에 참조
const element = document.querySelector('.element')

// getComputedStyle() 메서드를 사용해 요소의 스타일을 가져올 수 있다.
const elementStyles = getComputedStyle(element)
console.log(elementStyles)

// 하나의 스타일을 보는 방법
// CSS 속성 값을 읽으려면 속성 이름을 카멜케이스로 작성한다.

// backgroundColor 속성을 보고싶다면
const backgroundColor = elementStyles.backgroundColor

// color 속성을 보고싶다면
const color = elementStyles.color

console.log(elementStyles)의 콘솔 결과

 

가상 요소의 스타일도 읽을 수 있다.

<p class="element">
	가상 요소를 포함하는 단락입니다.
</p>

<!-- CSS 문서 -->
.element {
  background-color: #131012;
  color: #f9f8f0;
  
  &::before {
	  content: '[가상 요소]';
  }
}

// 가상 요소 스타일 값을 읽을때도 getComputedStyle() 메서드를 사용한다.
// 하지만 메서드의 두 번째 인수로 가상 요소를 전달해야 한다.

const element = document.querySelector('.element')
const pseudoElementStyle = getComputedStyle(elelment, '::before')

console.log(pseudoElementStyle.content) // '[가상 요소]'

The Problem I Faced

 

What I Tried to Do

 

How I Solved It

 

So

 

Aha Moments

BOM과 DOM 부분이 정말 많은 지식을 필요로 하고 활용 방법이 많아서 어렵다.

하지만 너무 재미있어서 흥미가 떨어지지 않는다.