본문 바로가기

분류 전체보기76

[css] 자식요소가 float / absolute 일 때 부모 요소 height, width 주기 자식 요소가 float일 때 자식 요소가 float 되어 있으면 (말 그대로 자식 요소가 떠 있는 상태이기 때문에) 부모 요소(상위 요소)의 height가 0이 될 수 있다. 이 때 주요 해결방법은 두가지이다. 사실 첫번째 방법으로 어지간하면 해결 가능. 부모 요소에 overflow:hidden .parent{ overflow: hidden; /* 또는 overflow: auto; */ } 부모 요소의 가상 선택자에 clear:both .parent::after { content: ""; display: block; clear: both; } 자식 요소가 position : absolute 일 때 부모 요소와 자식 요소의 크기가 같아야 하는데 자식 요소가 position:absolute 일 때 (예를들어.. 2020. 1. 30.
[javascript] 바나나 문제 / 0.1+0.2 === 0.3이 틀린 이유 자바스크립트 :: 바나나 자바스크립트를 헷갈리게 하는 몇가지 문제들을 소개해본다. console.log('b' + 'a' ++ 'a' + 'a').toLowerCase(); //banana 첫 글자 b 와 a 는 문자열이므로 쉽게 ba 로 변환된다. 그러나 그 다음 ++ 'a' 에서 첫번째 + 기호는 이전 문자열 더하기와 같은 기능을 수행하지만 뒤에 있는 +는 문자열을 숫자로 바꾸는 unary operator로의 역할을 한다. 그러나 뒤에 따라 붙는 a는 숫자로 변환할 수 없으므로 NaN 이 반환되게 되는데 이것이 toLowerCase() 에 의해 소문자로 변해 최종적으로 banana 가 출력된다. 배열 더하기 console.log([1, 2, 3]+[4, 5, 6]); //1, 2, 34, 5, 6 이.. 2020. 1. 29.
[python] 백준 알고리즘 1152번 문제 영어 대소문자와 띄어쓰기만으로 이루어진 문자열이 주어진다. 이 문자열에는 몇 개의 단어가 있을까? 이를 구하는 프로그램을 작성하시오. 단, 한 단어가 여러 번 등장하면 등장한 횟수만큼 모두 세어야 한다. 첫 줄에 영어 대소문자와 띄어쓰기로 이루어진 문자열이 주어진다. 이 문자열의 길이는 1,000,000을 넘지 않는다. 단어는 띄어쓰기 한 개로 구분되며, 공백이 연속해서 나오는 경우는 없다. 또한 문자열의 앞과 뒤에는 공백이 있을 수도 있다. n = input() l = list(n.strip().split()) print(len(l)) strip() : 주어진 문자열에서 양쪽 끝에 있는 공백을 삭제 split() : 주어진 문자열을 띄어쓰기를 기준으로 나누어준다 2020. 1. 29.
[정보] 이모티콘 & PPT/디자인 참고 사이트 모음 내가 디자인이나 PPT 이모티콘 찾을 때 애용하는 사이트 모음이다. 디자인 참고 => 이모티콘 & 저작권 free 일러스트로 나름 괜찮은 디자인을 뽑아낼 수 있음 이모티콘 사이트 iconfinder 아이콘 파인더지만 일러스트도 찾을 수 있다. 다른 사이트와 겹치는 부분 많으므로 되도록 여기서 다 찾기 3,375,000+ free and premium vector icons. SVG, PNG, AI, CSH and PNG format. 4,100,000+ free and premium vector icons. SVG, PNG, AI, CSH and PNG format. Iconfinder is the leading search engine and market place for vector icons in .. 2020. 1. 26.
[javascript] merge sort (병합정렬 자바스크립트 알고리즘) 📊 병합 정렬하나의 리스트를 두 개의 균등한 크기로 분할하고 분할된 부분 리스트를 정렬한 다음, 두 개의 정렬된 부분 리스트를 합하여 전체 정렬을 하는 방법 병합 정렬은 다음 세가지 과정을 통해 이루어진다. 분할(Divide): 배열을 같은 크기의 2개의 배열로 분할한다.정복(Conquer): 분할된 배열을 정렬.결합(Combine): 정렬된 부분 배열을 다시 합침 const mergeSort = function(array) { if (array.length < 2) return array; let pivot = Math.floor(array.length / 2); //쪼개기 let left = array.slice(0, pivot); let right = array.slice(pivot, array.len.. 2020. 1. 24.
[javascript / python ] 비밀지도 🔑 2018 카카오 입사문제 1번 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 “공백”(“ “) 또는 “벽”(“#”) 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 “지도 1”과 “지도 2”라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다. “지도 1”과 “지도 2”는 각각 정수 배열로 암호화되어 있다. 암호화된 .. 2020. 1. 23.
[html/javascript] CANVAS 알아보기 / 기본 사용법 & svg와 성능 비교 HTML5 : Canvas canvas 는 페이지에 그래픽적인 요소를 그릴 때 사용되는 html5 의 새로운 태그이다. 먼저 html 문서에 다음과 같이 를 삽입한다. 위의 요소를 js를 통해 찾아 제어하는 것이 canvas 의 기본적인 동작이다. const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); 캔버스에 어떤 요소를 그리기 위해서 가장 처음으로 getContext()를 사용하여 위치를 정의할 필요가 있다. 기본적으로 2d로 정의되며, 위 요소를 사용하면 canvas에 2d 좌표로 위치를 지정할 수 있게 된다. beginPath(); 도형을 그리기 전에 지정해줌 closePath() : 도형의 .. 2020. 1. 23.
[CSS] 반응형 박스 만들기 / 화면의 크기가 변해도 모양이 망가지지 않도록 css는 아무리 해도 어렵다.... 반응형 박스 만들기 화면크기에 따라 가진 네모 박스는 만들기 쉽다. 일정 고정값을 가진 박스를 만들면 된다. PC 화면에서는 이렇게 만드는 게 낫지만, 반응형 웹이나 모바일 UI를 제작할 때는 디바이스 크기에 따라 콘텐츠 크기가 조절되어야 한다. .square { width: 100px; height: 100px; } 비율(%)에 맞춰서, 만약 다음처럼 작업을 한다면 어떻게 될까? 이럴 경우 상하-좌우 크기가 모두 변할 때는 정사각형 모양이 깨지지 않겠지만, 좌우 또는 상하만 변할 때는 모양이 찌그러지게 된다. 이것을 헤결하기 위한 방법은 무엇일까? .square { width: 50%; height: 50%; } 해결 width :100%만 준 후 다음과 같이 가상 .. 2020. 1. 22.
[vue-trello] TIL 1 :: webpack이란? / 라우터와 플러그인 webpack SPA(단일 페이지 어플리케이션)이 많아지면서 하나의 파일에서 자바스크립트 코드를 관리할 수 없을 만큼 그 양이 증가하게 되었다. 그래서 파일을 UI 및 기능별로 분리하여 개발하고 webpack을 통해 하나의 js파일로 번들링하여 웹페이지를 불러오는 방식을 사용하게 되었다. webpack.config.js파일에 들어가면 entry point를 확인할 수 있는데, 이는 로딩하는 모듈의 시작점이 되는 파일을 말한다. module.exports = { entry: { main: './src/main.js', } } webpack은 이 entry point를 기점으로 필요한 모듈을 로딩해 하나로 묶는다. (번들링) 번들링이 완료되면 이 결과물을 처리할 위치를 output에 기록한다. module... 2020. 1. 21.

티스토리툴바