전체 글

파이썬(python) 알고리즘 - 최단 경로 (플로이드 워셜)

플로이드 워셜 개요 항목 내용 언제 쓰는가? 양방향이면서 음/양 가중치 그래프에서 최단 경로 찾기 모든 노드에서 다른 모든 노드 까지의 최단 경로의 길이 계산 ex) A→B로 가는 경로가 있는지 확인 ex) A→??지점을 거쳐서 B,C로 각각 갈때 최소비용 노드 개수가 500개 이하 그래프 유형 양방향, 가중치 (음의 사이클 x) 가중치 양(o), 음(o) 시간 복잡도 O(V^3), (V

CSS - 텍스트 스타일

color 속성 : 글자색 지정 color: 색상 색상은 6자리의 16진수, rgb, rgba, hsl, hsla, 색상이름(black,green,orange...) 기입 가능 VS code에서 아주 친절하게 색깔을 보여준다. 자동완성에서 6자리의 16진수까지 보여준다. 색상 표현법 6자리의 16진수 표기법 : #RRGGBB ※ 만약 RR, GG, BB가 각각 같은 숫자면 #RGB 로 축약가능 hsl, hsla (hue(색상), saturation(채도), lightness(명도)) 표기법 : hsl(0, 100% 50%) - 색상 : 무지개색을 시계방향으로 동그란원을 만들었을때의 각도 (red : 0도, cyan: 180도) - 채도(%) : 회색이 0%, 원래색은 100% - 명도(%) : 어두움 0..

CSS 폰트 적용 방법

font-family 속성 : 글꼴지정 font-family: 글꼴이름; font-family: 글꼴이름, 글꼴이름; font-family: "맑은 고딕", 돋음, 굴림; ※ 글꼴이 없을 경우 대비하여 여러 개 등록하는 것임. CSS3가 웹 폰트를 표준으로 채택하면서 사용자에게 없는 글꼴도 웹 문서와 함께 다운로드하여 보여줄 수 있게 되었다. 자신의 글꼴을 적용하기 위해서는 ttf,EOT,WOFF,WOFF2포맷을 직접 업로드해야한다. ※ TTF은 용량커서 Woff를 먼저지정해야 함 @font-face { font-family: 글꼴이름; src: 글꼴파일, 글꼴파일; } @font-face { font-family: 'HelloFont'; src: local('HelloFont'), url('font/h..

CSS - Cacading Style Sheet, Selector(선택자)

CSS란 CSS는 Cacading Style Sheet 이다. Cascading은 스타일 시트가 적용되는 우선순위가 위에서 아래로 떨어지는 폭포형태로 적용된다는 의미이다. 문서에 여러 개의 스타일을 적용할 때 충돌하지 않도록 하기위한 2가지 방법이 있다. 스타일 우선순위 : 사용자/제작자/브라우저 스타일 순서로 우선순위를 가지고 적용됨 스타일 상속 : 태그의 포함 관계에 따라 부모요소를 자식요소로 전달함 스타일 우선순위 Style Sheet는 아래의 3가지 종류가 존재한다. 사용자 스타일 제작자 스타일 브라우저 기본 스타일 웹 페이지에 아무런 스타일 적용하지 않았을 때 3. 브라우저 기본 스타일이 기본으로 적용해 둔 스타일이 적용되고 제작자가 따로 스타일을 적용했다면 2. 제작자 스타일이 적용되어 보여진..

CSS - html 파일에 css 적용시키는 방법

html 파일에 css 적용시키는 방법 인라인 방식 : HTML 파일의 각 태그안의 내부 스타일 시트 : HTML 파일 안에 태그로 작성 /* test.html.css */ /* css/style.css */ #First { color: red; background-color: yellow; } 외부 스타일 시트 : 태그 안의 내용을 CSS 파일로 분리하고 태그로 연결 절대주소 또는 상대주소 넣어주면 됨. (가장 좋은 방법) /* test.html.css */ /* css/style.css */ #First { color: red; background-color: yellow; } CSS Import : 태그 안의 내용을 CSS 파일로 분리하고 파일을 import 절대주소 또는 상대주소 넣어주면 됨. /..

HTML - input 태그 (사용자 입력, 텍스트 필드, 버튼)

태그 (사용자 태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다. type 속성이 굉장히 많다. 종류 설명 text 한 줄짜리 입력 텍스트 박스를 넣는다. password 패스워드 입력 필드를 넣는다. serach 검색 입력 필드를 넣는다. 이 필드에 입력시 오른쪽에 x버튼 추가되어 손쉽게 입력내용 지울 수 있게 된다. url URL 주소 입력 필드를 넣는다. email 이메일 주소 입력 필드를 넣는다. tel 전화번호 입력 필드를 넣는다. checkbox 선택지가 2개 이상 있는 체크 박스를 넣는다. radio 선택지가 1개만 있는 라디오 버튼을 넣는다. number 숫자 조절가능한 스핀 박스를 넣는다. range 숫자 조절가능한 슬라이드 막대를 넣는다. date 사용자 지역 기준으로 날짜..

자바스크립트 - 브라우저와 관련된 객체 (window,document, ...)

브라우저와 관련된 객체 종류 설명 window 브라우저 창이 열릴 때마다 생성됨. 최상위 객체 document 웹 문서마다 하나씩 있음. 태그 만나면 생성된다. HTML문서 정보 담김 navigator 현재 사용하는 브라우저 정보가 담김 history 현재 창에서 사용자 방문 기록을 저장 location 현재 페이지의 URL 정보 담김 screen 현재 사용하는 화면 정보를 다룸

자바스크립트 - 이벤트 함수, 이벤트 처리기

이벤트 함수 이벤트는 브라우저나 사용자가 행하는 어떤 행동이다. 아래의 이벤트들이 존재한다. 마우스 이벤트 종류 설명 click HTML 요소 클릭시 발생 dbclick HTML 요소 더블 클릭시 발생 mousedown HTML 요소 위에서 마우스 버튼 눌렀을 때 mouseup HTML 요소 위에서 마우스 버튼 뗄 때 mousemove HTML 요소 위에서 마우스 버튼 움직였을 때 mouseover HTML 요소 위에 마우스 포인터 올라갈 때 mouseout HTML 요소 위에서 마우스 포인터 벗어날 때 키보드 이벤트 종류 설명 keydown 사용자가 키 누르는 동안 발생 keypress 사용자가 키 눌렀을 때 발생 keyup 사용자가 키 뗄 때 발생 문서 로딩 이벤트 종류 설명 abort 문서가 완전히..

자바스크립트 - 코딩 컨벤션

이 게시물은 구글 자바스크립트 스타일 가이드를 따른다. Google JavaScript Style Guide Google JavaScript Style Guide 1 Introduction This document serves as the complete definition of Google’s coding standards for source code in the JavaScript programming language. A JavaScript source file is described as being in Google Style if and only i google.github.io 코드는 Tab 대신 Space 2칸 들여쓰기 권장 if (...) { something... } var 사용 금지, ..

2021.08.28 사는 이야기 (퇴근 후 공부하기)

오늘의 이야기 : 퇴근 후 공부하기 2021.08.22(일) 부터 알고리즘 공부를 다시 시작하기 위하여 매일 백준 5문제 (문자열, 그리드, DP, 그래프탐색, 구현 1문제 씩) 풀고 개인 github에 commit 하자는 약속을 세웠다. 그리고 하는 김에 github도 너무 더럽게 썼어서 포트폴리오 용으로 제출하기 민망해서 새로 만들었다. 처음엔 5문제 빠르게 해치우고 JS, React 공부를하려했는데 너무 오래 쉰 탓인지... 도저히 지금 상태로는 퇴근 후 CS 5문제 + 추가 공부를 소화해낼 수 없는 상태가 되어버렸다!! 한 8시 부터 시작하면 빠르면 11시, 12시, 1시, 심지어 2시 까지도 붙잡고 있었던 적도 있다. 2시에 잤던 그 날의 다음 날 아침에 엄~청 늦잠 자서 늦게 출근했다. 옛날엔..

파이썬(python) 가장 긴 증가하는 부분수열 (LIS)

가장 긴 증가하는 부분수열 (LIS) 알고리즘 분류 : 동적계획법 설명 [3,5,7,9,2,1,4,8] 과 같은 하나의 수열은 여러 부분수열로 나눌 수 있다. ex) [3,5], [5,7], [9,2,1,4], [1,4,8] 그 부분수열의 처음~끝까지 증가하는 횟수가 몇번이 되는지 count 하였을때 가장 횟수가 많은 부분수열을 구하는 문제다. [3,5] = 2회 [3,5,7] = 3회 [3,5,7,9] = 4회 [2,1,4] = 2회 아이디어 [3,5,7,1] 라는 수열의 LIS를 구해보자. 무지성 야생의 힘으로 덤벼보자. 모든 부분수열을 구해서 그 중에서 LIS를 구한다. [3], [5], [7], [1], [3,5], [5,7], [7,1] [3,5,7], [3,5,1], [5,7,1], [3,5,..

2021.08.22 사는 이야기 (2021 카카오 공채, 이직결심)

2021년 카카오 공채가 열렸습니다. 지원 기간 : 2021.08.19(목) 11:00 ~ 09.06(월) 17:00 https://careers.kakao.com/2022-developer 2022 카카오 신입개발자 블라인드 채용 카카오에서 더나은 세상을 함께 만들어 봐요 careers.kakao.com 2019년에 카카오 공채에 C++로 도전하였던 기억이 나네요. 살면서 알고리즘 제일 열심히 했던 시절이었는데도 1차에서 광탈했습니다. 그때 주 언어가 python이었다면, 독학이 아닌 제대로 된 교육을 받으며 공부 기간이 더 길었다면 어땠을까 하는 아쉬운 마음이 가득했습니다. 그때 카카오 떨어지고 운좋게 다른 대기업에 덜컥 취업을 해서 2년이나 지나버렸네요. 2년간 정말 후회도 많이하고 배운것도 많고 ..

자바스크립트 - Generator

Generator는 작업 도중에 다른 작업을 하다가 다시 돌아왔을때 이전 작업부터 이어서 진행할 수 있게 해준다. 개념 자체는 다른 대부분의 언어에도 있으니 여러 언어를 공부하신 분들은 이미 아실거다. Generator 는 iterable이다. 순회(차례로 진행) 가능한 객체다. for of 문으로 전체 순회가능하다. iterable은 Symbol.iterator() 메소드가 있고, 이 메소드는 iterator를 반환해야 한다. iterator는 next() 메소드를 가진다. 이 메소드는 value, done 속성을 가진 객체 반환한다. 작업 끝나면 done=true가 된다. for of 문은 iterable 객체여야 사용가능하며, Array, Map, Set, String, TypedArray, arg..

자바스크립트 - 프로미스 (promise)

프로미스 (promise) 프로미스는 콜백 함수이다. 특정 함수의 성공(resolve) 또는 실패(reject) 된 경우에 알맞은 함수를 실행할 수 있게 해준다. const pr = new Promise((resolve, reject) => { resolve('success!'); reject(new Error(''error!')); }); pr.then( # then함수에 resolve/reject가 일어났을때 일어날 함수 작성 function(result){} # 성공한 경우 ).catch( function(err){} # 실패한 경우 ).finally( function(){} # 마지막에 반드시 수행되야 하는 작업 작성 ) 프로미스 체이닝 Promise.all() 한꺼번에 프로미스를 실행하여 모두 ..

자바스크립트 - 클래스 (class)

클래스 (class) class Player{ constructor(hp, power){ 생성자 this.hp=hp; this.power=power; } showInfo(){ console.log(this.hp, this.power); } } const player1 = new Player(100,100); class healer extends Player{ constructor(hp,power,mp){ # 생성자를 명시하지 않아도 있는 것 처럼 작동은 됨. super(hp,power); # 부모 생성자를 먼저 호출해야 함. this.mp = mp; } heal(){ console.log('heal'); } showInfo(){ super.showInfo(); # 메소드 오버라이딩한 경우 부모 함수 호출..