폰트 사이즈 조절

회원가입 폼에 사용된 기본 폰트 사이즈는 16px입니다.

기본 폰트 사이즈를 기준으로 1px씩 폰트 사이즈를 조절할 수 있는 기능을 구현해주세요.

(최소: 12px, 최대: 20px)

현재 폰트 사이즈가 20px일 경우 + 버튼 비활성화

현재 폰트 사이즈가 12px일 경우 - 버튼 비활성화

로직 구현

html의 element를 가져오려면 document.documentElement를 사용한다.

parseFloat()은 숫자가 포함된 문자열을 숫자 부분까지만 파싱하기 때문에 숫자만 가져올 수 있다.예시) > "16px" -> 16

getComputedStyle()로 모든 계산이 완료된 style속성을 가져올 수 있다.

// 폰트 사이즈 조절
const $increaseFontBtn = document.getElementById('increase-font-btn') //+버튼
const $decreaseFontBtn = document.getElementById('decrease-font-btn') //-버튼

const $html = document.documentElement //html

const MAX_FONT_SIZE = 20 // 최대 폰트 크기
const MIN_FONT_SIZE = 12 // 최소 폰트 크기

// html 폰트사이즈 가져오기 함수
const getHtmlFontSize = () => {
    // 예) 16px로 표시되는 것을 parseFloat()으로 16(숫자)로 가져옴.
    return parseFloat(window.getComputedStyle($html).fontSize)
}

// 폰트 사이즈 증가
$increaseFontBtn.addEventListener('click', () => {
    onClickFontSizeControl('increase')
})

$decreaseFontBtn.addEventListener('click', () => {
    onClickFontSizeControl('decrease')
})

const onClickFontSizeControl = (flag) => {
    // 폰트 사이즈 가져오기
    const fontSize = getHtmlFontSize()
    // 3항 연산자로 increase : +1, decrease : -1 
    let newFontSize = flag === 'increase' ? fontSize + 1 : fontSize - 1
    // html에 적용
    $html.style.fontSize = newFontSize
    // 버튼 비활성화
    $decreaseFontBtn.disabled = newFontSize <= MIN_FONT_SIZE
    $increaseFontBtn.disabled = newFontSize >= MAX_FONT_SIZE
}