전체 글 81

[css] 선택자(selector)

어제 완성한 웹을 css로 이쁘게 꾸며보려고 했다. 예전에 css를 배운 적이 있어서 잘 할 수 있을거라고 생각했다. 근데 진짜로 전부 다 까먹어버려서 새로운 강의를 듣기로 했다. 생활코딩님께서 유튜브에 올려주신 강의이다. CSS 수업 www.youtube.com 저번에 배운 걸 전부 다 까먹은게(그다지 오래 지난 것도 아닌데.. 작년 3월~6월에 공부함) 정리를 안 해서 그런 것 같아서 이번엔 공부한 내용을 블로그에 다 정리하려고 한다. 내가 모르는 부분, 중요한 부분을 중심으로 정리하고자 한다. 그럼 시작! in-line 별도의 css 파일을 만들지 않고 html 파일 안에 스타일 코드를 작성하는 것이다. 라인5과 라인9의 color:red 부분이 css 코드이다. 선택자(selector)와 선언(d..

[바닐라 JS로 크롬 앱 만들기] weather

getCurrentPosition은 두 개의 인자를 필요로 한다. 첫 번째는 위치 정보를 얻어오는데 성공했을 때 실행하는 함수이고, 두 번째는 실패했을 때 실행하는 함수이다. 위의 코드를 실행했더니 왼)이런게 뜸! 와우 신기하다!! 오)허용 누르니까 콘솔 창에 내 위치 정보가 뜬다. 위도 경도까지 다 뜨는게 신기했다 https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local ..

[바닐라 JS로 크롬 앱 만들기] todo list

이제 완성까지 얼마 남지 않았다. 투두리스트랑 날씨만 하면 된다! index.html 일단 html 파일에 위 코드를 적는다. - ul의 밑에 li는 쓰지 않는다. 일단 처음에는 추가한 to do list가 없을 것이기 때문에 비워두기 위해서이다. 저번 포스팅에서 배경화면 만든 것과 똑같이 js에서 요소를 추가할 것이다. - 한가지 더 주목할 게 있다. form을 사용한 것. form을 쓰면 form이 제출될 때 자동으로 새로고침을 하는 기본동작이 있었다. (greeting에서 함) 아 새로고침을 막기 위한 코드를 짜줘야 한다. submit할 때 해야할 것 1. 새로고침 막기 2. input에 적힌 text 저장하기 3. 제출한 후 input 비우기 to do list 만들기! 어쩌구 저쩌구 이렇게 만들..

[바닐라 JS로 크롬 앱 만들기] random background

quote와 비슷하다. 배경 사진을 여러 개 저장해놓고 랜덤으로 선택해서 화면에 보여줄 것이다. 일단 이렇게 사진을 여러 개 저장해둔다. 랜덤으로 화면에 띄울 것이기 때문에 2개 이상 저장해놓자. 그런 다음 quote에서 한 것처럼 랜덤으로 사진을 골라준다. chosenImage 변수에 랜덤 이미지가 저장되어 있다. 지금까지 우리는 html에 만들어져 있는 요소를 js 파일에 가져와서 그 요소를 수정했다. 이제는 js에서 직접 요소를 만들어서 그걸 html에 추가해보려고 한다. document.querySelector()가 아니라 document.createElement()를 사용해서 요소를 만든다! bgImage는 아직은 js에만 존재하는 요소이다. 이걸 html의 body 영역에 추가해보자. back..

스택과 큐

스택 LIFO: Last-in First-out. 나중에 들어온 데이터가 먼저 나간다. 스택은 DFS: Depth First Search, 백트래킹 문제를 풀 때 사용한다. 후입선출은 재귀 함수 알고리즘 원리와 같다. top: 삽입, 삭제가 일어나는 위치 파이썬 연산(리스트 이용) s.append(data): top 위치에 data를 저장 s.pop(): top 위치에 있는 데이터를 삭제, 확인 s[-1]: top 위치에 있는 데이터 확인 큐 FIFO: First-in First-out. 먼저 들어온 데이터가 먼저 나간다. 삽입과 삭제가 양방향에서 이루어진다. BFS: Breadth First Search에서 사용됨. rear: 큐에서 가장 끝데이터 front: 큐에서 가장 앞 데이터 파이썬 연산(리스트..

코딩 테스트 2023.11.19

구간 합

합 배열(S)을 구하는 것부터 시작한다. S[i] = A[0] + A[1] + ... + A[i-1] + A[i] 인덱스 0 1 2 3 4 5 리스트 A 3 5 2 1 9 6 합 배열 S 3 8 10 11 20 26 ex) S[4] = A[0] + A[1] + A[2] + A[3] + A[4] = 3 + 5 + 2 + 1 + 9 = 20 A[i] ~ A[j] 리스트의 합을 구한다고 하자. - 합 배열(S) 없이 구한다면, 최악의 경우 시간 복잡도가 O(N)이다. - 하지만 위의 합 배열을 사용한다면 O(1)으로 시간 복잡도가 확 줄어든다. 합 배열 S 구하는 공식 S[i] = S[i-1] + A[i] 구간 합 구하는 공식(A[i] ~ A[j] 리스트의 합) S[j] - S[i-1] 예를 들어서 A[1] ..

코딩 테스트 2023.11.18

배열과 리스트

파이썬에서는 리스트가 배열의 특성도 함께 내포하고 있지만, 배열과 리스트는 확실히 다른 자료구조이다. 배열 메모리의 연속 공간에 값이 채워져 있는 형태의 자료구조이다. 인덱스를 사용하여 값에 바로 접근할 수 있다. 새로운 값을 삽입하거나 특정 인덱스에 있는 값을 삭제하기 어렵다. 값을 삽입하거나 삭제하려면 해당 인덱스 주변에 있는 값을 이동시키는 과정이 필요하다. 배열의 크기는 선언할 때 지정할 수 있으며, 한 번 선언하면 크기를 늘리거나 줄일 수 없다. 리스트 값과 포인터를 묶은 '노드'를 포인터로 연결한 자료구조이다. 인덱스가 없으므로 값에 접근하려면 Head 포인터부터 순서대로 접근해야 한다. (접근하는 속도가 느리다.) 포인터로 연결되어 있으므로 데이터를 삽입하거나 삭제하는 연산 속도가 빠르다. ..

코딩 테스트 2023.11.18