본문 바로가기
Developer/TIL

TIL : 250408화 (flex-basis: 플렉스 아이템의 초기 크기 지정, 프로그래머스 성격 유형 검사하기)

by 청량리 물냉면 2025. 4. 8.
반응형

1. flex-basis

.wallet-benificial-name,
.wallet-law-name {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.wallet-law-kname,
.wallet-benificial-kname,
.wallet-law-ename,
.wallet-benificial_ename {
  flex-basis: 50%;
}

div 내 각 영역이 정해진 공간을 차지하게 하기 위해 `flex-basis`를 사용했다.

위와 같이 50%씩 영역을 할당해 주었다.

`flex-basis`는 익숙하지 않고 자주 사용하지 않았는데 앞으로는 영역 지정을 위해 자주 사용해야겠다. 

 

flex-basis - CSS: Cascading Style Sheets | MDN

flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.

developer.mozilla.org

 

 

 

 

2. 프로그래머스 성격 유형 검사하기

function solution(survey, choices) {
    const dic = {'R':0, 'T':0, 'C':0, 'F':0, 'J':0, 'M':0, 'A':0, 'N':0};
    let string = '';
    
    for(let i = 0; i < survey.length; i++) {
        const [a, b] = survey[i].split('');
        if(choices[i] > 4) {
            dic[b] += choices[i] - 4;
        } else if(choices[i] < 4) {
            dic[a] += 4 - choices[i];
        }
    }
    
    string += dic['R'] >= dic['T'] ? "R" : "T";
    string += dic['C'] >= dic['F'] ? "C" : "F";
    string += dic['J'] >= dic['M'] ? "J" : "M";
    string += dic['A'] >= dic['N'] ? "A" : "N";
    
    return string;
}

너무 어렵게 생각해서 코드 길이도 길어지고 문제도 안 풀렸다...

답안을 보고 힌트만 얻은 뒤 돌아와서 문제를 풀었고 complete

그래도 시간이 너무 오래 걸려서 다음에 한번 더 풀어봐야겠다.

반응형