todo list를 만들면서 버튼과 배경에 그라데이션을 넣고싶어 찾아보았다!linear-gradient()를 활용해 생각보다 간단하게 적용할 수 있었다. linear-gradient()CSS에서 두개 이상의 색상이 점진적으로 변화하는 이미지를 만드는 함수다.image 의 한 종류인 gradient 타입의 객체를 반환한다. 따라서 image를 사용하는 background-image 등에 사용할 수 있다.처음엔 별생각없이 background-color에 사용했다가 적용이 안됐는데 이 이유때문이었다! 사용법linear-gradient(각도 || 방향, 색상1, 색상2, ...); 1) 각도 || 방향 (기본값: to bottom)첫 색상에서 마지막 색상까지 변화하며 이어질 방향을 지정한다. 지정하지 않을 ..
todo list를 만들며 1) 타이틀 영역 2) 유저 입력 영역 3) 할일 목록 영역이 일정 비율을 유지하고, 목록이 영역을 넘어가도 전체 영역이 커지지 않고 스크롤하도록 하는 구조를 구성해보고 싶었다. 첫 시도처음엔 웹브라우저 크기가 달라지는 것만 생각하여 flex-grow를 활용했다..mainContainer { display: flex; justify-content: center; flex-direction: column; align-items: center;}.title { flex-grow: 1;}.userInput { flex-grow: 1;}.listBody { flex-grow: 7;}하지만 내 예상과 다른 결과가 나왔다.. 목록에 할일을 추가할수록..
todo-list 삭제 버튼에 추가한 이벤트가 제대로 적용되는지 확인하려는데 html 파일을 실행하자마자 콘솔에 빨간 불이 들어왔다.미리 버튼을 추가해두고 테스트했을 때는 발생하지 않았는데, 기존에 있던 테스트용 요소들을 모두 지우고 실행했을 때 발생하는 것으로 보아 addEventListener는 버튼이 생기기도 전에 호출되는데 해당 아이디를 가진 object가 없으니 이런 오류가 나는구나 추측이 됐다. 알아야 할 것동적으로 생성한 요소에 이벤트를 추가하기 위해 생각해야하는 것은 다음과 같다.1) addEventListener는 EventTarget 인터페이스의 메서드로, 가장 일반적으로 DOM 객체에 어떤 이벤트가 발생했을 때 어떤 동작을 수행할지 설정하는 기능을 한다.2) createElement..
프로그래머스 대충만든 자판 문제를 풀이하다가 NaN과 논리연산에 의문이 생겨 조금 더 알아보았다! 우선 프로그래머스 문제의 조건은 다음과 같다.1) 자판에 문자가 1개 이상 할당될 수 있고, 두번째에 할당되어있는 문자를 입력하려면 해당 자판을 두번 누르면 된다.2) 문자열 배열이 주어졌을 때 그 문자들을 자판으로 입력하기위해 필요한 '자판을 누르는 최소 수'를 구한다. 내가 접근한 방법1) 자판으로 입력할 수 있는 문자들을 객체의 키로 만들고, 여러 자판을 눌렀을 때 그 문자가 나오는 가장 작은 수를 구해둔다.-> 매번 가장 작은 수를 구하지 않고 저장해뒀다가 활용하기 위함2) 문자열 배열을 돌며 각 문자를 입력하기 위해 필요한 수를 객체에서 찾아 더한다. 궁금했던 부분function solution(k..
DOM (Document Object Model, 문서 객체 모델)DOM은 HTML, XML 문서에 접근하기 위한 인터페이스이다. Javascript와 같은 언어가 문서에 접근할 수 있도록 콘텐츠, 구조, 스타일 요소를 구조화시켜 제공하고, 이를 변경할 수 있도록 한다. Javascript가 DOM을 다루는 대표적인 언어이긴 하지만, 이외의 다른 프로그래밍 언어들도 DOM에 접근하고 사용할 수 있다! DOM은 웹페이지(HTML 문서)를 트리 구조로 표현한다. 즉, 웹페이지는 하나의 최상위 노드(root 노드)에서 시작하는 자식 노드들을 가진다. 노드의 타입은 총 12개이며, 주요 노드는 아래의 4가지이다. DOM 트리의 주요 노드1) document node (문서 노드): DOM 트리 구조의 최상위 ..
투포인터 알고리즘이란?배열/리스트에서 두개의 인덱스(포인터)를 사용하여 특정 조건을 만족하는 구간을 효율적으로 탐색하기 위한 알고리즘일반적으로 탐색하는 배열/리스트가 정렬되어 있을 때 사용한다. 사용하는 경우1) 일반적으로 두 인덱스를 탐색범위의 시작과 끝으로 사용하여, 탐색 범위 내에서 특정 조건을 만족하는 요소를 찾거나 조건을 만족하는 부분배열을 찾는 데에 사용한다.2) 동일한 인덱스를 시작으로, 한 인덱스를 고정하고 다른 인덱스를 이동시키다가 특정 조건에서 고정한 인덱스도 이동시키며 탐색하는 방법도 사용할 수 있다. 구현 방식1) 배열의 탐색할 위치에 두 포인터를 설정한다.2) 두 포인터 혹은 그 구간을 탐색하고 조건에 일치하는지 확인한다.3) 조건을 만족시키는 경우 탐색을 종료한다.4) 조건을 ..