css : 인접 형제 결합자 +

종종 메뉴나 목록을 만들 때, 그 사이 구분선을 넣으면서 어쩔 수 없이 :last-child, :first-child를 쓸 일이 있다. 아래와 같은 예를 보자. 1 2 3 4 5 li { width: 50px; height: 20px; display: inline-block; background-color: cornflowerblue; text-align: center; margin: 0 10px; position: relative; } 만약 위 5개의 li 사이에 구분자 '|' 를 넣고 싶다고 해보자. li { width: 50px; height: 20px; display: inline-block; background-color: cornflowerblue; text-align: center; marg..

백준-1012-javascript

https://www.acmicpc.net/problem/1012 1012번: 유기농 배추 차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다. 농약을 쓰지 않고 배추를 재배하려면 배추를 해충으로부터 보호하는 것이 중요하기 때문에, 한나는 해충 방지에 www.acmicpc.net 문제 차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다. 농약을 쓰지 않고 배추를 재배하려면 배추를 해충으로부터 보호하는 것이 중요하기 때문에, 한나는 해충 방지에 효과적인 배추흰지렁이를 구입하기로 결심한다. 이 지렁이는 배추근처에 서식하며 해충을 잡아 먹음으로써 배추를 보호한다. 특히, 어떤 배추에 배추흰지렁이가 한 마리라도 살고 있으면 이 지렁이는 인접한 다른 배추로 이동할 수 있어,..

Javascript-1d or 2d array 간단히 만들기

js에서 for문을 돌리지 않고 배열을 만들고 싶어서 찾아보던 중 간단하고 멋진 스택들을 찾아냈습니다. 1. new Array를 사용하는 경우 const arr1d = new Array(2).fill(0); // [0, 0] const arr2d = new Array(2).fill(null).map(() => new Array(3).fill(0)); // [[0, 0, 0], // [0, 0, 0]] new Array를 이용해 length값을 주어서 배열을 만드는 스택입니다. .fill은 하지 않아도 되지만, fill을 사용하지 않으면 배열의 값이 아무것도 들어있지 않아서 forEach 등의 메서드가 아예 먹히지 않을 수 있습니다. 따라서 null이나 0등의 값으로 초기화 할 것을 추천드립니다. 2. A..

DOM API 란?

DOM은 Document Object Model의 약자이다. 프론트엔드에서 이는 HTML에 있는 요소들을 트리 구조로 다루는 모델을 의미한다. HTML 요소들을 DOM으로 접근하면, javascript를 이용해 동적으로 HTML의 내용, 구조, 스타일을 변형시킬 수 있다. DOM에 접근하는 여러 메소드가 있으나 가장 많이 사용되는 것은 querySelector일 것이다. querySelector는 태그, 클래스, 아이디 모두 사용 가능하며 querySelectorAll을 이용해 여러 요소를 한 번에 불러 오는 기능까지 있기 때문에 아주 유용하다. 아래와 같은 HTML이 있다고 해보자. 1 2 3 4 만약 우리가 1번 째 div를 호출하고 텍스트를 바꾸고 싶다면 아래와 같이 할 수 있다. // 호출 let..

백준-1026-javascript

https://www.acmicpc.net/problem/1026 1026번: 보물 첫째 줄에 N이 주어진다. 둘째 줄에는 A에 있는 N개의 수가 순서대로 주어지고, 셋째 줄에는 B에 있는 수가 순서대로 주어진다. N은 50보다 작거나 같은 자연수이고, A와 B의 각 원소는 100보다 작거 www.acmicpc.net 문제 옛날 옛적에 수학이 항상 큰 골칫거리였던 나라가 있었다. 이 나라의 국왕 김지민은 다음과 같은 문제를 내고 큰 상금을 걸었다. 길이가 N인 정수 배열 A와 B가 있다. 다음과 같이 함수 S를 정의하자. S = A[0] × B[0] + ... + A[N-1] × B[N-1] S의 값을 가장 작게 만들기 위해 A의 수를 재배열하자. 단, B에 있는 수는 재배열하면 안 된다. S의 최솟값을..

javascript로 백준 문제 풀기-input

백준에서 javascript로 문제를 풀 때 input을 조금 특이하게 사용한다. readline과 require('fs') 둘 다 사용가능 하지만, 실행시간의 차이 때문에 require('fs')를 강력 추천한다. require('fs') 모든 입력 값을 하나로 받는다. 따라서 여러 줄을 입력 받으면 split 등으로 한 줄씩 저장해야 한다. 실행 시간이 짧아서 주로 사용된다. 한 줄만 받을 경우 let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString(); // 한줄로 사용할 경우 let input = require('fs').readFileSync("/dev/stdin").toString(); 여러 줄을 받고 한 줄씩 나눌..

프로그래머스-구명보트

https://programmers.co.kr/learn/courses/30/lessons/42885 코딩테스트 연습 - 구명보트 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 5 programmers.co.kr 문제 설명 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100kg이라면 2번째 사람과 4번째 사람은 같이 탈 수 있지만 1번째 사람과 ..

프로그래머스-음양 더하기

https://programmers.co.kr/learn/courses/30/lessons/76501 코딩테스트 연습 - 음양 더하기 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 re programmers.co.kr 문제 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. 제한사항 absolutes의 길이는 1 이상 1,000 이하입니다. ab..