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

2025. 4. 8. 22:47·Developer/TIL
반응형

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

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

반응형
저작자표시 비영리 변경금지 (새창열림)

'Developer > TIL' 카테고리의 다른 글

TIL: 20250415화 (백엔드 인수인계 (엔드포인트 트래킹 방법 등), 오라클 함수 outer join, 별칭 지정, nvl)  (0) 2025.04.15
TIL: 20250410목 (CSS-transform)  (0) 2025.04.10
TIL : 250409수 (말줄임표(ellipsis) CSS, &::placeholder SCSS )  (0) 2025.04.10
TIL : 250404금 (프로그래머스 다트 게임, Git 원격 브랜치 코드 로컬 브랜치에 적용하기, 자바스크립트 소수점 자르기 방법, 디버거 사용법, JS 딕셔너리)  (0) 2025.04.04
TIL : 250403목 (프로그래머스 크레인 인형뽑기 게임, debugger의 중요성...)  (0) 2025.04.04
TIL : 250402수 (falsy값 처리(?., ??, || 언제 써야 할까?), setTimeout 0ms 비동기 처리, 프로그래머스 완주하지 못한 선수, for...in vs for...of 차이점 정리, 프로그래머스 실패율)  (0) 2025.04.02
'Developer/TIL' 카테고리의 다른 글
  • TIL: 20250410목 (CSS-transform)
  • TIL : 250409수 (말줄임표(ellipsis) CSS, &::placeholder SCSS )
  • TIL : 250404금 (프로그래머스 다트 게임, Git 원격 브랜치 코드 로컬 브랜치에 적용하기, 자바스크립트 소수점 자르기 방법, 디버거 사용법, JS 딕셔너리)
  • TIL : 250403목 (프로그래머스 크레인 인형뽑기 게임, debugger의 중요성...)
청량리 물냉면
청량리 물냉면
프로그래밍 공부를 하고 있습니다. 공부 내용 정리 겸 정보 공유를 목적으로 합니다.
    반응형
  • 청량리 물냉면
    노력중인 블로그
    청량리 물냉면
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 프로그래밍
        • Programming
        • C | C++
        • Java
        • Python
      • 웹 프로그래밍
        • HTML | CSS
        • JavaScript | TypeScript
        • React
        • Vue.js
        • Next.js
        • Spring & Spring Boot
        • JSP & Servlet
        • DB
      • 웹 프로젝트
        • 웹 프로젝트
        • 🥨스낵몰
        • 👨‍👨‍👧‍👧소셜 가계부
        • 🌜꿈 일기장
        • 🔮포트폴리오 사이트
        • 🏃‍♂️팀 프로젝트: 일정관리 프로그램
        • 📈팀 프로젝트: AI기반 주식 분석 플랫폼
        • 😺Just Meow It: 고양이의 조언
      • 앱 프로그래밍
        • Flutter
        • Kotlin
      • Problem Solving
        • 백준
        • 프로그래머스
        • SWEA
      • Computer Science
        • 알고리즘
        • 컴퓨터 네트워크
        • 이산수학
      • Developer
        • 후기
        • 자료정리
        • 취업 | 취준
        • 웹개발 교육 프로그램
        • TIL
  • 블로그 메뉴

    • 홈
    • Github
  • 공지사항

    • 프로그래밍 공부 중😊
  • 인기 글

  • 태그

    mysql
    Next.js
    포트폴리오
    자바
    뉴렉처
    클론 프로젝트
    백준
    블로그 제작
    bfs
    SWEA
    React
    AWS
    공식문서
    컴퓨터네트워크
    파이썬
    ZeroCho
    알고리즘
    리액트
    프로그래머스
    구현
    웹사이트
    spring boot
    타입스크립트
    프로젝트
    자바스크립트
    플러터
    Jiraynor Programming
    d3
    강의내용정리
    Til
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
청량리 물냉면
TIL : 250408화 (flex-basis: 플렉스 아이템의 초기 크기 지정, 프로그래머스 성격 유형 검사하기)
상단으로

티스토리툴바