본문 바로가기

분류 전체보기416

[ 자바스크립트 ] <script> 태그는 어디에 위치하는게 효율적일까? 태그는 어디에 위치하는게 가장 효율적일까? 를 적는 크게 4곳을 정리해 보았습니다: 1. parsing HTML Blocked parsing HTML fetching js executing js 태그 안에 가 있는 경우 parsing HTML fetching js executing js parsing HTML Blocked parsing HTML fetching js executing js parsing HTML executing js fetching js parsing을 하다가, script에서 defer을 보면, "main.js를 다운 받자" 명령만 시켜두고 나머지 HTML을 끝까지 parsing 한다. parsing이 끝난뒤에 다운로드 되어지 JavaScript 파일을 실행한다. 2022. 9. 30.
[ 프로그래머스 / JavaScript ] 카펫 https://school.programmers.co.kr/learn/courses/30/lessons/42842 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 .. 2022. 9. 30.
[ 웹 기능 구현 ] offsetTop을 사용하여 scroll움직임 표현하기 window 객체의 scroll() 메서드와 offsetTop()에 대해 알아보았다.   자바스크립트에서 window 객체는 브라우저 창을 가리킨다.window.scroll() 메서드는 브라우저의 스크롤을 특정 위치로 이동시킨다.   이 메서드는 두 가지 방법으로 호출할 수 있다.     1. window.scroll(x좌표, y좌표)     2. window.scroll(options객체) - key와 value로 구성된 객체를 전달한다.    2번으로 이번 프로젝트를 만들어보았다.   scroll() 메서드를 사용하면!스크롤바를 이동하지 않아도 키보드를 위아래 누르지 않아도 페이지의 스크롤을 이동시킬 수 있다.   HTML요소 중에 offsetTop()을 활용하면!요소의 윗면 경계가 최상위 요소의 윗.. 2022. 9. 30.
[ 프로그래머스 / JavaScript ] 숫자의 표현 https://school.programmers.co.kr/learn/courses/30/lessons/12924# 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 설명Finn은 요즘 수학 공부에 빠져 있습니다. 수학 공부를 하던 Finn은 자연수 n을 연속한 자연수들로 표현하는 방법이 여러 개라는 사실을 알게 되었습니다. 예를 들어 15는 다음과 같이 4가지로 표현할 수 있습니다.1 + 2 + 3 + 4 + 5 = 154 + 5 + 6 = 157 + 8 = 1515 = 15자연수 n이 매개변수로 주어질 때, 연속된 자연.. 2022. 9. 29.
[ 웹 기능 구현 ] Date()를 사용하여 디지털 시계 만들어보기 프로젝트 설명 Date()를 사용하여 현재 시간을 출력하고 GO를 누를 경우 시간이 가고 STOP을 누를 경우 시간이 멈추게 해 보았다. 결과물 코드 index.html GO STOP style.css html, body { margin: 0; /* 웹에는 기본적으로 margin이 있어 margin을 초기화해주었다. */ } .container { text-align: center; /* container 안에 있는 요소들은 중간으로 배치해준다. */ } .clock { width: 200px; /* 가로 길이를 200px로 줄이지 않으면 박스가 화면을 꽉 채운다 */ margin: 30px auto; border: 2px solid black; border-radius: 10px; } button { .. 2022. 9. 28.
[ 프로그래머스 / JavaScript ] 가장 큰 수 https://school.programmers.co.kr/learn/courses/30/lessons/42746 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문.. 2022. 9. 28.
[ 프로그래머스 / JavaScript ] 올바른 괄호 https://school.programmers.co.kr/learn/courses/30/lessons/12909?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return .. 2022. 9. 27.
[ 프로그래머스 / JavaScript ] 최솟값 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/12941?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째.. 2022. 9. 26.
[ 프로그래머스 / JavaScript ] [ 2018 KAKAO BLIND RECRUITMENT ][1차] 비밀지도 https://school.programmers.co.kr/learn/courses/30/lessons/17681 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr  문제 설명네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다.지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다.전.. 2022. 9. 25.
728x90

티스토리툴바