Jun's TID

더보기 이것은 접은 글 입니다. 위와 같이 자바스크립트를 활용하여 글이나 이미지 등을 클릭했을 때만 보이게할 수도 있다. 간단하게 hideDetail, showDetail 함수를 각각 작성하여 버튼의 onclick에서 호출해주기만 하면 된다. ◎event.css #item { position:relative; width:500px; height:auto; padding:15px 20px; margin:auto; } button { background-color:rgba(255,255,255,0.7);; padding:5px; border:1px solid #ccc; font-size:0.8em; } .over { position:absolute; /*이와 같이 절대 좌표로 버튼을 이미지 위에 띄울 수 있..

자바스크립트 또한 다른 언어와 비슷하게 if, for, while 등 거의 대부분의 제어문을 사용할 수 있다. 간단한 예제 몇개를 작성해보며 알아보자. 1. if 2. for 구구단 3. switch - case 4. while 각각의 제어문의 사용 방법을 익히기 위한 예시이므로, 따로 css코드나 결과 페이지는 설명하지 않는다.

자바스크립트는 alert, window, confirm, prompt 등 다양한 방법으로 사용자에게 알림창을 띄울 수 있다. 이 중 prompt는 상대방이 값을 입력할 수 있는 입력창을 함께 띄워 서버나 스크립트가 입력 값을 사용한 연산이 가능하게끔 만들어 준다. 예제를 한번 확인해보자. ◎age.css @charset "UTF-8"; /*age.css*/ body{ text-align: center; } .btn { margin-top:50px; font-weight: 400; color:#fff; background-color:#007bff; text-align: center; white-space: nowrap; vertical-align: middle; /*세로 정렬*/ border: 1px so..

Date 클래스를 사용하여 현재 시간을 변수에 저장한 뒤 페이지에 출력하는 아주 간단한 자바스크립트 예제이다. ◎js-time.js 별로 맛은 안나는 매우 간단한 예제이지만, 꽤나 유용하게 사용할 수 있는 클래스이니, 알아두는 것이 좋다.

자바 스크립트의 첫 포스팅이다. 개인적으로는 입문하긴 쉽지만 마스터하긴 굉장히 어려운 언어라고 생각을 하는데, 지금부터 차근차근 스탭을 밟아가며, 공부해보자. 우선 그 개념부터 짚고 넘어가자. 기본적으로 자바 스크립트는 웹 브라우저 내에서 동작하는 객체 기반의 스크립트 프로그래밍 언어이다. 또한 다른 응용 프로그램의 내장 객체에도 접근할 수 있기 때문에 View 단에서 동적 웹 페이지를 구성하기 위하서 반드시 알아둬야할 언어이다. 즉, 아래와 같이 script내에서 HTML 태그들을 제어하여 페이지에 동적인 느낌을 줄 수 있다. ◎change.html 자바스크립트 위의 글자를 클릭 위의 글자를 클릭 ◎change_color.css @charset "UTF-8"; body{ text-aglgn: cente..

간단하게 구현한 단방향 연결 리스트이다. 이렇게 아예 구현해놓고 문제를 푸는 게 삽입, 삭제, 조회 등을 추가하여 사용하기가 훨씬 편리할 거 같아서 작성했다. class ListNode: def __init__(self, data): self.val = data self.next = None class LinkedList: def __init__(self): head_node = ListNode(None) self.head = head_node self.tail = head_node self.num_of_data = 0 def insert(self, data): insert_node = ListNode(data) self.tail.next = insert_node self.tail = insert_nod..

이번 포스팅은 웹 프로젝트를 만들 때, 특정 페이지에서 사용자가 서버로 파일을 업로드할 수 있게끔 View단을 구성하고, 이를 Server에서 처리할 수 있도록 하는 로직을 어떻게 구현해야 하는 지 알아보겠다. 우선, 기본적으로 input 태그를 사용하여 사용자가 사용자의 pc에서 파일을 선택할 수 있게끔 할 수 있다. 이 input 태그를 처리할 server가 정상적으로 file 객체를 다루게 할 수 있도록 하기 위해서는 다음과 같이 form 태그를 구성하여 encoding type을 지정해야 한다. 일반적으로는 request를 통해서 form 태그 내의 속성들을 얻어낼 수 있지만, 위와 같이 enctype="multipart/form-data" 로 지정하여 전송했을 경우 일반적인 방법으로는 reque..

앞서도 몇번 언급했듯이, ArrayList와 같은 연결 리스트는 자료들이 노드로 하나씩 연결되어 있는 형태이기 때문에, 자료의 삽입이나 삭제는 O(1) 의 매우 유리한 시간 복잡도를 가지지만, 탐색은 노드를 따로 불러올 수 없고, 리스트 전체를 훓어가면서 찾아야 하기 때문에 최악의 경우 O(n)의 복잡도를 가진다. 그렇기 때문에 연결 리스트를 탐색, 비교하는 문제를 풀 때, 문제가 조금 복잡해지면 빈번하게 타임 아웃이 일어나기 쉽다. 이번 포스팅에서는 이런 연결 리스트의 탐색 속도를 2개의 포인터를 이용하여 조금이나마 향상시킬 수 있는 방법인 Runner 기법에 대하여 다룰 것이다. 1. Runner? Runner 기법은 연결 리스트를 순회할 때, 2개의 포인터를 동시에 사용하는 기법이다. 한 포인터가 ..

보통 어떤 알고리즘에서 최대 값을 계속해서 갱신하기 위해서 max = 0 과 같은 방법을 자주 사용한다. 이 경우 딱히 문제가 되는 경우가 없지만, input pool이 음수를 포함할 수 있거나 최대값이 아닌 최소값을 계속 갱신해야 하는 경우 문제는 조금 복잡해진다. 이럴 때 사용할 수 있는 것이 시스템이 가질 수 있는 가장 큰 or 작은 값을 가지도록 초기값을 선언해주는 것이다. 파이썬에서는 보통 두가지 방법을 이용하여 구현할 수 있다. # 첫번째 방법(sys 모듈 사용) mx = sys.maxsize # 시스템이 가질 수 있는 가장 큰 값 mn = -sys.maxsize # 시스템이 가질 수 있는 가장 작은 값 # 두번째 방법(float 사용, 이 경우 값은 무한대이다) mx = float('inf'..

제약 조건이 없다면 미리 값들을 모두 곱한 다음에 이터레이터가 되는 값을 나눠서 간단하게 구할 수 있지만... 제약조건이 있기 때문에 시간 복잡도를 맞추기 위해서는 이터레이터가 되는 값의 왼쪽을 모두 곱한 결과에 오른쪽 값을 모두 곱한 값을 곱해줘서 구해볼 수 있다. (이것도 한참 고민하다가 모범 답안을 본 건데, 진짜 미친 풀이인 거 같다...) from typing import List def multiply(nums_list: List[int]) -> List[int]: result = [] left_p = 1 right_p = 1 # 이터레이터 기준 왼쪽 값들의 곱을 저장 for i in range(0, len(nums_list)): result.append(left_p) left_p *= num..