반응형 디자인의 첫 번째 원칙: 모바일 버전을 먼저 만들어라데스크탑에 필요한 디자인을 다 만든 후 모바일 버전을 위해 scale down 하는 것이 더 힘들다. 모바일 버전을 먼저 갖춰놓은 후 데스크탑을 위한 기능들을 점진적으로 붙여나가는 것이 훨씬 편한 방법이다. 1

사용자 정의 줄 이름을 사용하여 열 구조를 정의하면, 그리드 아이템을 배치할 때 이 이름들을 참조하여 더 쉽게 위치를 지정할 수 있다.영역에 직관적으로 이름을 붙이므로써 시각화를 돕는다. 각각의 영역은 사각형 모양이다. 해당 아이템을 어느 그리드에 놓아야 할지, 작업해

TanStack Query 1. Motivation 기존의 많이 쓰이던 상태관리 라이브러리는 클라이언트 상태를 작업하기에는 좋으나 async나 서버 상태 작업에 최적화되어있지는 않다. 그 이유는 서버상태는 완전히 그 개념이 다르기 때문이다 > #### server

Redux란 Javascript를 위한 것 state container predictable Redux를 이용해야하는 이유 predictable한 방법으로 어플리케이션의 전역상태를 관리하기 위해 Redux Toolkit Redux의 몇 가지 단점을 보완하기 위

flexbox는 display 속성을 사용하여 구현한다. display: flex를 줌으로써 해당 컨테이너의 첫번째 자식요소들에 flex를 적용할 수 있다. display: inline-flex를 사용할 수도 있다. display: flex와 다른 점은, inline-

초기 상태html 코드위 사례의 4번째 해결 방안에 만일 button요소를 더 추가하게 되면 바로 문제가 발생하게 된다. 해당 요소를 선택하여 margin-top을 다시 적용하면 된다고 생각하겠지만 이렇게 건당 처리하는 것보다 좀 더 일괄적으로 적용될 수 있는 솔루션이

너비가 300px인 요소가 있을 때, 여기에 padding: 10px, border: 1px solid을 주게되면 너비가 322px로 바뀐다. magic numbers: border과 padding을 뺀 만큼 너비를 계산해서 적용하기 일반적으로 magic numbers

수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일

상대단위로 em과 rem만 있는 것이 아니다. 브라우저 뷰포트의 상대적 크기(길이)를 정의하기 위한 뷰포트 단위도 존재한다. Viewport 란출처: MDN - Viewport 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사

2.1. The power of relative values CSS는 웹페이지에 동적바인딩(late-binding) 스타일을 부여한다. > 동적바인딩(late-binding) 바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는

2개 이상의 각기 다른 css 문법을 동일한 요소에 선언할 경우 conflicting declarations(선언한 내용이 서로 충돌함)이 생길 수 있다. 위와같이 <h1> 태그를 각기 아래와 같이 선택하여 css를 선언했을 때 결과적으로 어떤 선언이 이기게 될까

정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요.numbers의 길이는 2 이상 100 이하입니다.nu

알고리즘을 푸는데 걸리는 최악의 시간시간 복잡도장기적으로 데이터가 증가함에 따른 처리시간의 증가율을 예측하기위해 만든 표기법 -> 상수는 무시함ex) 이진탐색법으로 알고리즘을 푸는데 걸리는 시간은 O(logn)이다. 하지만 이진탐색법으로 모든 알고리즘 문제를 풀었을 때

네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.1478 → "one4seveneight"234567

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.예를 들어 array가 1, 5, 2, 6, 3, 7, 4, i = 2, j = 5, k = 3이라면array의 2번째부터 5번째까지 자르면 5, 2, 6, 3입니

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 "sun", "bed", "car"이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로

네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다.지도는 한 변의 길이가 n인 정사

출처: Secrets of the JavaScript Ninja웹애플리케이션 생애주기 내 여러 단계HTML 코드가 웹페이지로 어떻게 바뀌는지JavaScript 코드 작동 순서이벤트 상호작용이벤트 루프Client-side 웹 어플리캐이션의 라이프사이클은 사용자가 브라우저

명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니

어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를