요소 높이 맞추기

요소 높이 맞추기

→ 리스트 내의 각 요소들은 display: flex로 나열한 요소들이라 하나가 길어지면 다른 요소들의 높이도 가장 긴 높이에 맞춰지므로, 가장 바깥쪽 높이는 신경 안써도 된다. 그러나 텍스트 부분이 길어지는 경우에는 텍스트 길이에 따라 텍스트 영역이 아래 이미지처럼 들쑥날쑥 해진다. 

 

이 때, 1개만 생각하면 된다.

가장 긴 텍스트를 가진 요소의 높이에 다른 요소들을 맞춰준다.

 

➡️ html

<div class="my_swiper">
    <ul class="swiper-wrapper tab_content">
        <li class="swiper-slide selected">
            <a href="#" class="tab_content_link">
                <div class="img_wrap"></div>
                <div class="info_option">
                    <span class="price">0</span>
                    <div class="option_name">기본구성기본구성기본구성기본구성</div>
                </div>
            </a>
        </li>
        <li class="swiper-slide">
            <a href="#" class="tab_content_link">
                <div class="img_wrap"></div>
                <div class="info_option">
                    <span class="price">0</span>
                    <div class="option_name">기본구성</div>
                </div>
            </a>
        </li>
        <li class="swiper-slide">
            <a href="#" class="tab_content_link">
                <div class="img_wrap"></div>
                <div class="info_option">
                    <span class="price">0</span>
                    <div class="option_name">기본구성</div>
                </div>
            </a>
        </li>
        <li class="swiper-slide">
            <a href="#" class="tab_content_link">
                <div class="img_wrap"></div>
                <div class="info_option">
                    <span class="price">0</span>
                    <div class="option_name">기본구성</div>
                </div>
            </a>
        </li>
        <li class="swiper-slide">
            <a href="#" class="tab_content_link">
                <div class="img_wrap"></div>
                <div class="info_option">
                    <span class="price">000,000</span>
                    <div class="option_name">슬라이드 욕실장(메이플) 1200*650 + 선반 1200</div>
                </div>
            </a>
        </li>
    </ul>
</div>

 

1. 반환값 사용 x - 전역변수로 처리

let options = document.querySelectorAll('.option_detail .tab_content li');
let optionTxt  = document.querySelectorAll('.option_detail .tab_content .info_option');
let currentOptionHeight;
let optionTxtHeight = [];

// 옵션 높이, 옵션 텍스트부분 높이 체크
function chkOptionHeight() {
    currentOptionHeight = options[0].offsetHeight - 2; // 옵션 높이 - 보더값 2px
    optionTxt.forEach(optionTxt => {
        let currentOptionTxtHeight = optionTxt.offsetHeight;
        optionTxtHeight.push(currentOptionTxtHeight);
    })   
}

// 체크한 높이로 업데이트
function updateOptionHeight(optionHeight, optionTxtHeight) {
    options.forEach(option => {
        option.style.height = optionHeight + 'px';
    })
    optionTxt.forEach(optionTxt => {
        optionTxt.style.height = optionTxtHeight + 'px';
    })
}

document.querySelector('.order_btn').addEventListener('click', function() {
    // 옵션 높이, 옵션 텍스트부분 높이 체크
    chkOptionHeight();

    // 옵션 텍스트 높이 중 가장 긴 높이 체크
    let optionTxtMaxHeight = Math.max(...optionTxtHeight);
    // 체크한 높이로 업데이트
    updateOptionHeight(currentOptionHeight, optionTxtMaxHeight);
})

 

2. 반환값으로 처리 

let options = document.querySelectorAll('.option_detail .tab_content li');
let optionTxts  = document.querySelectorAll('.option_detail .tab_content .info_option');

// 옵션 높이, 옵션 텍스트부분 높이 체크
function getOptionHeight() {
    const currentOptionHeight = options[0].offsetHeight - 2; // 옵션 높이 - 보더값 2px
    let optionTxtHeight = Array.from(optionTxts, text => text.offsetHeight);
    //forEach 대신에 Array.from()으로 써봄
    // Array.from() 유사배열을 배열로 바꿔줌
    return {currentOptionHeight, optionTxtHeight};
}

// 체크한 높이로 업데이트
function setOptionHeight(optionHeight, optionTxtHeight) {
    options.forEach(option => {option.style.height = optionHeight + 'px';})
    optionTxts.forEach(optionTxt => {optionTxt.style.height = optionTxtHeight + 'px';})
}

// 높이 모두 삭제
function clearHeights() {
    options.forEach(option => option.style.height = '');
    optionTexts.forEach(text => text.style.height = '');
}

document.querySelector('.order_btn').addEventListener('click', function() {
    // 옵션 높이, 옵션 텍스트부분 높이 체크
    let {optionTxtHeight, currentOptionHeight} = getOptionHeight();

    // 옵션 텍스트 높이 중 가장 긴 높이 체크
    let optionTxtMaxHeight = Math.max(...optionTxtHeight);
    // 체크한 높이로 업데이트
    setOptionHeight(currentOptionHeight, optionTxtMaxHeight);
})
document.querySelector('.close_btn').addEventListener('click', clearHeights)

 

 

* 얕게 복사, 깊게 복사 

* 유사 배열 객체

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/max