문제 설명 코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다. 한 번 사용한 카드는 다시 사용할 수 없습니다. 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다. 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한..

문제 설명 두 정수 X, Y의 임의의 자리에서 공통으로 나타나는 정수 k(0 ≤ k ≤ 9)들을 이용하여 만들 수 있는 가장 큰 정수를 두 수의 짝꿍이라 합니다(단, 공통으로 나타나는 정수 중 서로 짝지을 수 있는 숫자만 사용합니다). X, Y의 짝꿍이 존재하지 않으면, 짝꿍은 -1입니다. X, Y의 짝꿍이 0으로만 구성되어 있다면, 짝꿍은 0입니다. 예를 들어, X = 3403이고 Y = 13203이라면, X와 Y의 짝꿍은 X와 Y에서 공통으로 나타나는 3, 0, 3으로 만들 수 있는 가장 큰 정수인 330입니다. 다른 예시로 X = 5525이고 Y = 1255이면 X와 Y의 짝꿍은 X와 Y에서 공통으로 나타나는 2, 5, 5로 만들 수 있는 가장 큰 정수인 552입니다(X에는 5가 3개, Y에는 5가..

숙소에서 시작! 야나가와를 가기전에 아침을 해결하기 위해서 하카타역으로 갔다. 일본은 길을 가다보면 나무로 만든 조형물이 많이 보이는 것 같다. 하카타역으로 가기 위해서 산책 겸 걸어서 텐진역으로 가다가 보인 조형물 걸어가다가 그냥 아카사카역에서 지하철을 타고 하카타를 가지 않은 것에 후회를 하며 아침 공기와 출근하는 일본인을 보며 걸었다. 아침은 계란 밥으로 유명?한 우치노타마고에 먹으러갔다. 한국에서 계란 밥이라고 하면 계란 볶음밥을 생각할텐데, 진짜 계란과 밥을 준다. 일본에서 날계란에 밥을 비벼먹는다고 하길래 집에서 한번 만들어먹었는데, 도저히 비려서 못먹었던 어릴적 기억이 있어서 아침에 먹으러 갔다. 귀여운 달걀이 있는 간판이 반겨주는 우치노 타마고이다. 위치는 지하철역에 붙어있어서 하카타역에서..

디자인이 너무 이쁜 Toggle 버튼이 있어서 해당 코드를 베이스로 CSS 공부를 하려고 한다. 컴포넌트 분석 // components/toggle import { useState } from "react"; import "./toggle.style.css"; const Toggle = () => { const [toggle, setToggle] = useState(false); const handleClickToggle = () => { setToggle((prev) => !prev); }; const btnClassName = [ "toggle-btn", toggle ? "toggle-btn-on" : "toggle-btn-off", ].join(" "); return ( ); }; export de..

CSS를 사용하다보면 가상 클래스 또는 가상 요소 선택자를 사용한다. 사용하면서 우리는 두 개가 같은 거라고 생각하며 사용하고 있지만 실제로는 둘은 다른 녀석들이다. 가상 요소 실제로 존재하지 않는 가상의 요소를 만들어서 스타일을 주는 것을 말한다. 사용할 때 콜론( : )을 사용할 수 있지만 가상 클래스와 구분하기 위해서 이중 클론( :: )을 권장한다. 대표적인 가상 요소들을 나열하자면, ▶ ::before : 지정된 요소의 앞에 가상의 요소 생성 ▶ ::after : 지정된 요소의 뒤에 가상의 요소 생성 ▶ ::placeholder : Input 필드의 힌트 텍스트에 스타일을 적용한다. ▶ ::selection : 사용자에 의해서 선택(드래그)된 텍스트 영역의 속성을 변경한다. ▶ ::first-l..

문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion return ["leo", "kik..

브라우저에서 텍스트를 드래그하거나 더블 클릭해서 선택할 수 있다. 그런데 이것을 막으려면 자바스크립트로도 가능하겠지만 CSS를 사용해서도 막을 수 있다. 바로 user-select를 사용해서! 사용 방법은 다음과 같다. user-select: auto | all | none | text user-select는 4가지 설정을 줄 수 있으며, 기본 값은 auto이다. 각 옵션의 기능은 다음과 같다. ▶ auto : Default 값, 브라우저 허용 시 텍스트 선택 가능 ▶ all : 더블클릭이 아닌 클릭 만으로도 선택이 가능 ▶ none : 텍스트 선택 불가 ▶ text : 텍스트 선택 가능 -webkit-user-select: none; -moz-user-select: none; -ms-user-selec..

CSS에서 가장 많이 사용하는 속성 중 하나로 display가 있다. display는 요소를 어떻게 배치할지를 나타내는데, 일반적으로 block, inline, inline-block이 있다. Block vs Inline block은 전체 라인을 모두 가지고 있다. 또한 width 값을 줘서 공간이 남더라도 나머지 공간에 다른 요소가 들어올 수 없다. inline은 컨텐츠의 크기만큼의 영역을 가지고 있으며, 한 라인에 여러 요소가 배치될 수 있다. block의 대표적인 태그로 div가 있고, inline의 대표 태그로 span이 있다. 여기서 하나의 특징이 더 나오는데, div 안에는 span을 넣을 수 있지만 span 안에는 div를 넣을 수 없다. 즉, block 안에는 inline이 들어올 수 있지..