초기 상태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를

FE개발을 위한 자바스크립트 오픈소스 라이브러리html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향함하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함. 컴포넌트로 분리하면

두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution(3, 1

출처: Next.js 공부하기 개발 단계에서부터 효율적인 운영을 위한 code transformation(compiling, bundling, minifying, code spliting) 최적화 툴을 제공함 JSX, Typescript와 같이 더 개발자-친화적인 언

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.행렬 arr1, arr2의 행과 열의 길이는 500을 넘

github 업로드 시 제외하고 싶은 파일이 있는 경우 gitignore에 추가하면 된다. 다만 프로젝트 진행과정에서 이미 github에 올라가 있는 파일을 .gitignore에 새로 추가하고 싶은 경우가 생길 수 있다. 이때는 이미 github에서 해당 파일을 tra