전체 글(94)
-
[JS] 버블 정렬
1. 버블 정렬 버블 정렬은 인접한 두 개의 원소를 비교하여 자리를 교환하는 방식이다. 첫 번째 원소부터 마지막 원소까지 반복하여 가장 큰 원소가 마지막 자리로 오게 정렬 방식이다. 버블 정렬은 탐색 방법이 선택정렬(이전 포스트 글)과 반대라고 생각하면 된다. 선택 정렬은 처음 요소를 1씩 늘려 탐색하는 방법이라고 한다면, 버블 정렬은 마지막 요소를 1씩 빼서 탐색하는 방법이라고 생각하면 된다. 2. 동작 순서 동작 순서도 크게 어려울 건 없다. 선택정렬(이전 포스트 글)에서 썼던 예시 입력 값을 그대로 써서 설명하도록 하겠다. 우리는 이제 위의 입력값 [5, 10, 1, 2, 6]을 버블 정렬을 이용하여 오름차순으로 정렬하려고 한다. 먼저 첫 요소인 5부터 끝 요소인 6까지 탐색을 실시하여 현재 요소 ..
2020.05.30 -
[JS] 선택정렬
1. 선택 정렬 선택정렬은 정렬 알고리즘의 하나이다. 동작 순서는 별거 없다. 이 한마디만 기억하면 된다. 최소 값을 맨 앞으로 보내라 2. 동작 순서 이것이 무슨 말입니까...? 생각이 든다면, 간단한 예를 들어보도록 하겠다. 선택 정렬의 동작순서를 설명을 하기 위해 다음의 리스트 값으로 예를 들어보도록 하겠다. 우리는 선택정렬을 이용해서 이 리스트 값을 오름차순으로 정렬하려고 한다. 먼저, 첫 번째 요소 5에서부터 리스트 끝인 6까지 탐색해서 최솟값을 찾도록 한다. 최솟 값은 1이 나온다. 찾은 최솟 값 1을 맨 앞 요소와 스와핑한다. 그리고 두 번째 요소 10에서부터 리스트 끝인 6까지 탐색해서 최솟 값을 찾도록 한다. 최솟 값은 2가 나온다. 그 후 찾은 최솟 값을 10과 스와핑하여 맨 앞으로 보..
2020.05.29 -
#2 마우스오버 이벤트를 이용하여 메뉴 슬라이더를 만들어보자.
1. 완성본 이번 강의에서 만들 완성본 영상입니다. 2. HTML, CSS 이번에는 스케치 없이도 바로 구조가 어떻게되있는지 알 수 있기 때문에 따로 하지 않겠습니다. 그래서 먼저 HTML과 CSS를 이용해서 다음과 같은 메뉴 디자인만 만들어보려고 합니다. 코드는 다음과 같습니다(CSS 헷갈리시는 분들을 위해 약간의 주석을 달아놓았습니다.). HTML Menu Slide Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 CSS // 전체 태그에 box-sizing을 적용합니다. box-sizing에 border 박스를 하면 // 전체 픽셀을 유지한 채로 padding이나 border의 크기만을 늘릴 수 있습니다. // 예를 들면, 가로 300px, 세로, 300px의 블록이 있고..
2020.05.14 -
#1 버튼 눌러서 Modal창 열고 닫기
1. 완성본 이번 강의에서 만들 모달 창 영상입니다. 2. HTML 구조 짜기 구조를 짜기전에 내가 어떻게 설계할 것인지에 대하여 스케치를 해보는 것이 중요하다고 생각합니다. 지금처럼 간단한 프로젝트의 경우, 머릿 속으로 짜는 것도 중요하지만, 직접 그려보는 것은 더 중요하다고 생각해요. 그래서 저는 모달창 구현을 위해 다음과 같이 스케치를 해보았습니다. 그림을 보시면 ① BODY와 ② MODAL 이라는 구역으로 나뉘어져 있다는 것을 알 수 있습니다. BODY는 HTML을 조금이라도 공부하셨으면, 어떤 것을 의미하는지 아실겁니다. 결론적으로 MODAL은 BODY안에 수평 수직으로 가운데 정렬이 되어있고, 각각 스위치를 하나씩 가지고 있다는 것을 알 수 있습니다(BODY는 OPEN이라는 스위치를 가지고 있..
2020.05.11