전체 글
[JS] 자바스크립트와 DOM, HTML 요소 메소드
목차 DOM이란 자바스크립트와 DOM 01. DOM 이란? 문서 객체 모델(Document Object Model) 문서객체모델(Document Object Model) : 객체지향 모델로써 구조화된 문서를 표현하는 형식 DOM은 프로그래밍 언어와 독립적이다. 주로 자바스크립트를 사용하지만, DOM의 구현은 어떠한 언어에서도 가능하다. HTML 문서에 대한 인터페이스 DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스 DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함 DOM의 종류 Core DOM : 모든 문서 타입을 위한 DOM 모델 HTML DOM : HTML 문서를 위한 DOM 모델...
[JS] 자바스크립트 배열(array)과 sort(), split() 함수
Array (배열) 선언 하나의 변수에 여러 값을 저장할 수 있음 let array = [1,2,3,4,5] console.log(array[0]) array.push(6) console.log(array) array.length Sort (정렬) 함수 자바 스크립트 배열의 내장 함수 sort()는 배열 안의 원소를 정렬하는 함수이다. arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체이다. sortFunction는 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하면 오름차순, ASCII 문자 순서로 정렬된다. 문자정렬 var fruit = ['orange', 'apple', 'banana']; fruit.sort(); // apple, banana, or..
[JS] 자바스크립트 변수 (var, let, const, scope)
목차 변수 scope var이 잘 안쓰이는 이유 변수 값에 상징적인 이름으로 변수를 사용한다. 자바스크립트에는 총 3가지의 변수 선언 방법이 있다. Name Scope 변경 가능성 var Function Scoped 변경 가능 let Block Scoped 변경 가능 const Block Scoped 변경 불가능 변수 선언 방법 (var, let, const) (변수 이름) = (값); var name = "daniel"; let age = 20; const isMale = true; Scope 변수에 접근할 수 있는 범위 Global Scope (전역 스코프) 만약 변수가 중괄호( { } )밖에 선언된다면 어디서든 접근 가능한 전역 변수가 되고, 전역 스코프에 정의된다. var daniel = "awe..
[HTML+CSS] Media Query, Viewport
1. 미디어쿼리 (Media Query) 미디어쿼리란 PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문으로 특정 조건에서만 CSS 코드를 적용시켜 준다. min-width : 최소 너비 max-width : 최대 너비 min-height : 최소 높이 max-height : 최대 높이 aspect-ratio : 가로세로비 orientation : 방향 @media (조건) { 속성 } ex .media { width: 500px; height: 500px; background-color: red; } /* 미디어쿼리 */ @media (min-width: 320px) and (max-width: 800px) { .media { width: 300p..
[CSS] CSS 애니메이션 (Transform, Transition, Animation)
Transform, Transition, Animation은 전부 css3 의 언어에 등장하는 속성 1. Transform transfrom은 특정 영역을 회전시키거나, 확대/축소 시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용 1.1 rotate, scale, skew, translate .transition { transfrom: rotate(45deg); /* 회전 */ transform: scale(2,3); /* 확대 축소 */ transform: skew(10deg, 20deg); /* 각도 변경 */ transform: translate(100px; 200px); /* 위치 변경 */ } .rotate(angle): 입력한 각도만큼 회전하며, 음수도 입력 가능 ..
[Java] 프로그래머스 Lv.2 : 가장 큰 정사각형 찾기
https://programmers.co.kr/learn/courses/30/lessons/12905 코딩테스트 연습 - 가장 큰 정사각형 찾기 [[0,1,1,1],[1,1,1,1],[1,1,1,1],[0,0,1,0]] 9 programmers.co.kr 풀이 해당 문제의 규칙은 다음과 같다. 행 또는 열의 길이가 1이면 정사각형의 넓이는 1이다. 루프를 돌아 자신의 위치([i][j])의 값이 0이 아닌 경우, 자신의 기준으로 왼쪽상단(↖), 왼쪽(←), 위쪽(↑) 의 최솟값을 구한뒤, 자신의 위치에 최솟값+1을 할당한다. 그렇게 구한 board값 중 최댓값을 answer에 할당 해준 뒤 answer*answer로 정사각형 넓이를 구해 리턴한다. 2번의 최솟값이 0이상인 경우엔 1로 이루어진 정사각형이 ..
[Java] 프로그래머스 Lv.2 : 타겟 넘버
https://programmers.co.kr/learn/courses/30/lessons/43165 코딩테스트 연습 - 타겟 넘버 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 programmers.co.kr 풀이 DFS를 이용한 풀이 depth 변수 값을 통해 탐색 중인 트리의 깊이를 알 수 있다. 트리 끝에 도착했다면, 여태 계산한 result와 target 값을 비교한다. class Solution { int count = 0; public int solution(int[] numbers, int target) { int answer = ..
[Java] 프로그래머스 Lv.2 : 구명보트
https://programmers.co.kr/learn/courses/30/lessons/42885 코딩테스트 연습 - 구명보트 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 5 programmers.co.kr 풀이 구명보트를 최대한 적게 사용하여 모든 사람을 구출하기 위해, 가장 먼저 사람들의 몸무게가 담겨있는 배열 people을 Arrays.sort()로 정렬해준다. 몸무게가 가장 적은 사람(people[min])과 가장 많은 사람(people[max])의 합계를 limit와 비교해 구출여부를 따진다. 만약 두 명의 몸무게합이 limit가..