[JS] 기초 - 연습 (1)

👩🏻‍💻 버튼눌러 박스 배경색 채우기

→ 버튼 클릭하세요! 클릭
→ [1, 2, 3] 에 각각 background 색 넣기
→ 버튼 문구 클릭했어요 로 바꾸기
→ 클릭했어요 글자 크기, 굵기 변경

[ 해설 ]

// HTML 요소를 찾아 변수에 저장
const els = document.querySelectorAll('CSS선택자');
const el = document.querySelector('CSS선택자')

// el.addEventListener('click', 함수)
// HTML 요소를 '클릭'하면 함수를 실행
el.addEventListener('click', function () {
  console.log('클릭했어요')
})

// els.forEach(함수)
// 찾은 HTML 요소의 개수만큼 함수를 실행
els.forEach(function (el, index) {
  console.log(index, el)
})

// el.style.CSS속성 = '값'
// HTML 요소에 CSS 지정 (카멜 표기법으로 작성)
el.style.backgroundColor = 'red';

// el.innerHTML = 'HTML 코드'
// HTML 요소의 내용으로 문자를 추가 (문자는 HTML 코드로 해석)
el.innerHTML = '<span>Hello</span>'