sort() 함수의 동작 원리? 오늘 모각코 시간에 혼자서 알고리즘 문제를 풀다가 문득 생각난 궁금증이 있다. 그건 바로 sort() 함수의 동작원리! 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 프로그래머스 Lv.0 난이도의 중앙값 구하기라는 문제였다. 문제 설명은 이렇다. 정수 배열 array를 오름차순 정렬한 후, 배열의 중앙값을 출력하는 문제였는데, 오름차순으로 정렬하기 위해 sort()함수를 사용하면서 궁금증이 생겼다. // 정수 배열의 오름차순 정렬 const array = [1, 10 , 100, 5, 6, 8, 40] array.sort(..

🔍 display 속성 중 grid에 대해 정리. grid 자식 요소들이 컨테이너 안 공간을 맞추기 위해 크기를 키우거나 줄이는 방법 부모요소를 grid-container 자식요소를 grid-item 웹페이지를 위한 2차원 레이아웃(x축, y축) 시스템 grid-container 속성 아래의 속성들은 grid-container(부모 요소)에서 사용되는 속성이다. grid-template-columns 열방향 그리드 트랙의 사이즈 설정 grid-template-rows 행방향 그리드 트랙의 사이즈 설정 💡새로운 단위 fr fraction: 분수 컨테이너를 분할 grid 컨테이너 안에서 트랙의 비율을 지정해주는 유연한 길이 단위 1fr 1fr 1fr은 1:1:1 의 비율을 의미함 grid-template-a..

🔍display 속성 중 flex에 대해 정리. flex flexible: 유연한, 신축성있는, 구부러지는 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 속성 부모 요소를 flex-container 자식 요소를 flex-item. 주로 1차원적 레이아웃(x축 / y축)을 위해 사용 flex-container 속성 아래 속성들은 flex-container(부모 요소)에서 사용하는 속성이다. flex-direction 컨테이너 내 아이템을 배치할 방향 지정 row: 기본값. 왼쪽에서 오른쪽(주축이 행 방향) column: 위에서 아래 방향(주축이 열 방향) row-reverse: 오른쪽에서 왼쪽 column-reverse: 아래에서 위 방향 justify-conten..

🔍CSS display 속성 중 float에 대해서 정리해보자 float float의 사전적 정의 : (물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다 한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌측 또는 우축에 배치되게 함. left: 왼쪽으로 right: 오른쪽으로 none: 기본값 See the Pen Untitled by astinaus (@astinaus) on CodePen. clear: float를 해제할 수 있다. left, right, both See the Pen Untitled by astinaus (@astinaus) on CodePen. 주의사항 자식 요소들이 모두 float 속성을 가지게 되면 컨테이너 요소의 높이에 자식 요소..

display 박스의 유형을 결정하며, 다른 박스들과 어떤 방식으로 배치할지 레이아웃을 설정함. CSS 속성으로 시각적인 배치만 바뀌는 것이고, 태그 자체의 요소가 블록 레벨로 바뀌는 것이 아님. block: 요소 전후에 줄 바꿈을 생성 inline: 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성. width, height, margin, padding 적용 X inline-block: inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있다. flex: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정 grid: 내부 자식 요소들의 위치를 부..

지난 시간에 만들었던 Stroke / Fill 모드 변경 기능에 이어, 이번엔 폰트 크기와 글꼴을 변경할 수 있는 기능을 만들었다. 조금씩 익숙해지는 것인지, 이번에는 1시간 만에 끝냈다. 간단하게 정리해봐야겠다. 추가한 코드 -- 폰트 선택 -- 둘기마요고딕체 교보문고 손글씨체 Rix할매의꽃담체 이순신돋움체 /* 폰트 불러오기 */ @font-face { font-family: "YiSunShinDotumM"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/YiSunShinDotumM.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { ..