분류 전체보기 (37) 썸네일형 리스트형 Flex Box를 이용한 안정적인 그리드 레이아웃 제작 강사님이 운영중이신 영화관 웹사이트... 메인 요소 안 영화 정보와 사이드바로 구분된 레이아웃이 흥미롭다. 이런 페이지에서 중요한 것은 컨텐츠의 크기 변화, 또는 다양한 디바이스 너비에서도 안정적으로 유지되는 레이아웃의 설계! 천천히 만들어 가 보자. 🐢1. 메인 영역 안에서 영화 정보와 사이드바의 구분우선 flex box의 속성을 이용하여 컨테이너를 168px로 고정된 사이드바와, 나머지 너비를 차지하는 메인 영역으로 나눈다. MAIN Side bar index.html.container { box-shadow: inset 0 0 30px gold; display: flex; gap: 24px; min-height: 848px;.. image 사이의 여백 - 인라인 요소의 vertical-align img와 div, img와 img 사이의 여백은 왜 생기는 걸까?? 이유는 vertical-align의 초기값이 baseline이기 때문인데요, vertical-align은 인라인 요소의 상하 정렬을 위한 속성으로 영어를 쓸 때 baseline 기준으로 알파벳을 정리해줍니다! 이 속성은 span, strong과 더불어 img 등 모든 인라인 요소에 적용되어 있기 때문에 실제 요소의 높이와 baseline 사이에 간격이 여백으로 표시된다고 하네요. 이 여백을 없애는 방법으로는 vertical-align의 값을 bottom으로 주기display를 block으로 바꾸기등이 있습니다. https://www.daleseo.com/css-img-extra-space/ 관련 내용은 위 블로그에서 참고했습니다. Javascript 오브젝트를 배열로 바꾸기 Array.from() Array.from(arrayLike)Array.from(arrayLike, mapFn) 유사배열 객체 arrayLike란 이터러블한 객체를 말합니다. 즉 인덱스로 원소를 표현할 수 있고, length 속성을 가지고 있는 객체입니다. Array.from()의 기본 사용법은 다음과 같습니다.Array.from("foo");// [ "f", "o", "o" ] String인 foo는 유사배열 객체이므로 각 원소를 분리해 배열을 생성합니다.const set = new Set(["foo", "bar", "baz", "foo"]);Array.from(set);// [ "foo", "bar", "baz" ] 중복되는 원소를 가지고 있는 배열을 Set에 넣어 중복 값을 없앤 후 다시 from을 사용해 배열로 만들어 .. Javascript 문자열 쪼개기 String.substring() substringsubstring() 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다.str.substring(indexStart[, indexEnd])만약 indexEnd 가 생략된 경우, substring() 문자열의 끝까지 모든 문자를 추출합니다.만약 indexStart 가 indexEnd와 같을 경우, substring() 빈 문자열을 반환합니다.만약 indexStart 가 indexEnd보다 큰 경우, substring() 메서드는 마치 두 개의 인자를 바꾼 듯 작동하게 됩니다.length 속성과 함께 사용하여 특정 문자열의 마지막 문자들을 얻을 수 있습니다.// Displays 'illa' the last 4 charactersvar an.. 코딩테스트를 위한 Javascript 입출력 기본 입출력// Run by Node.jsconst readline = require('readline');function solution(data) { console.log(data);}(async () => { let rl = readline.createInterface({ input: process.stdin }); const data = []; for await (const line of rl) { data.push(line); rl.close(); } solution(data); process.exit();})(); 코드의 동작과정은 다음과 같다. 1. for await...of 루프 안에서 rl이 사용자 입력을 읽어와 line에 할당한다. 2. data 배열에 line을 push한 후 rl.. Programmers 120812 최빈값 구하기 Javascript Problemhttps://school.programmers.co.kr/learn/courses/30/lessons/120812 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 입력으로 주어진 배열에서 최빈값을 찾는 문제이다. 최빈값이 2개 이상일 시 -1을 리턴한다. 이 문제를 어떻게 해결할 까 생각해 보면 입력으로 주어진 배열은 자연수로 구성되어 있으므로 단순하게 카운트 배열을 하나 만들어 입력 배열에 존재하느 원소들을 카운트 해주고, 카운트 배열에서 가장 높은 카운트 값이 2개 이상이라면 -1을, 아니라면 그 값에 해당하는 수를 리턴하면 된다. 이것을 코.. Programmers 120811 중앙값 구하기 Javascript https://school.programmers.co.kr/learn/courses/30/lessons/120811 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 홀수 개수의 무작위 숫자 배열을 입력으로 받아 그 중 중앙값을 추출하는 문제이다. 문제해결 논리는 다음과 같다. 1. 배열을 정렬한다. 2. 중간 인덱스 값에 위치한 요소를 찾는다. 배열을 정렬할 때 sort함수를 이용할 수 있는데 이 때 주의해야 할 것이 있다. sort 함수는 문자열의 유니코드를 기본 정렬 순서로 가진다. 따라서 [11, 12, 0, 1, 2]와 같은 배열을 sort하면 [0.. Programmers 120808 분수의 덧셈 Javascript https://school.programmers.co.kr/learn/courses/30/lessons/120808 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr numer1 / denom1 + numer2 / denom2의 결과를 기약분수로 나타내는 문제이다. 분수 덧셈의 과정을 생각해보면 1. 두 분모의 최소공배수를 구한다. 2. 최소공배수를 각 분모로 나눈 만큼 분자에 곱해준다. 3. 통분된 두 분수를 더해준다. 단계를 가진다. 우선 두 수의 최소공배수는 두 수의 곱에 최대공약수를 나눔으로써 구할 수 있다. 최대공약수는 유클리드 호제법을 재귀함수를 .. 이전 1 2 3 4 5 다음
