JavaScript88 CSS - 텍스트가 넘칠때 생략하기 (말줄임) Updated 08/01/22 css 를 사용하다 보면 은근히 텍스트를 생략해야 할 때가 많다. 지난번에도 UI 작업하다가 버튼 안의 텍스트가 너무 길어 버튼 영역이 망가져 버렸다. 이럴때 너무 텍스트가 길면 ... 으로 생략되도록 css 를 사용하여 만들어보자. CSS - 텍스트가 넘칠때 생략하기 text-overflow 라는 속성을 사용하면 된다. overflow 속성으로 영역 안에 내용이 많아서 넘칠 때, 종종 스크롤 바를 사용했다. 오버플로우는 흘러넘치는 영역을 제한하는 속성이다.text-overflow 속성도 비슷하다. 문장이 넘쳐흐를 때 생략할 수 있다. text-overflow 의 조건 text-overflow 속성을 사용하려면 몇 가지 조건이 만족되어야 동작한다. 그렇지 않으면 생략 기호.. 2021. 9. 13. JavaScript 알고리즘(4) 퀵정렬(Quick Sort) 알고리즘 4번째 시간 ! 돌고돌아 오랜만에 돌아왔다. JavaScript 알고리즘(4) 퀵정렬(Quick Sort) 퀵 정렬은 앞선 정렬과 확인했을 때 훨씬 빠르다. 이를 분할정복 알고리즘이라고 한다. 특정 값을 기준으로 큰 숫자와 작은 숫자로 나눠 보면 어떻까? - 기초 아이디어 퀵 정렬에서는 피봇이라는 기준 값이 있다. 보통 첫번째원소를 피봇(pivot) 이라고 놓는다. 피봇을 기준으로, 피봇보다 작은 애들은 모두 피벗의 왼쪽으로 옮기고, 피봇보다 큰 애들은 모두 피벗의 오른쪽으로 옮긴다. 다 옮겼으면 피봇을 제외한 왼쪽 리스트와 오른쪽 리스트를 다시 순서대로 정렬한다. 좌우로 나눠진 부분 리스트는 순환 호출을 이용하여 정렬을 반복한다. 부분 리스트 내에서 다시 피봇(기준값)을 정해서 좌우로 2개의 .. 2021. 8. 26. JavaScript 알고리즘 (3) 삽입정렬 (Insertion Sort) 알고리즘 세번째 시간 😀 삽입정렬에 대해 알아보자삽입정렬삽입정렬은 각 숫자를 적절한 위치에 삽입하는 방법이다.선택정렬, 버블정렬은 이중포문으로 원소들을 몽땅 검사하면서 위치를 바꾸는 정렬이었지만, 삽입정렬은 조건을 걸어 필요할 때만 위치를 바꾸게 된다.그래서 버블정렬과 선택정렬보다 더 빠르지만 시간복잡도는 O(N^2)으로 엄청 막 효율적이라고는 말할 수 없다안정적인 정렬 알고리즘이고, 제자리 정렬 알고리즘 이다. (비교와 교환을 통해 정렬하는 알고리즘이므로 다른 메모리 공간을 필요로 하지 않음) 뒤죽박죽인 배열 내의 숫자들을 오름차순(1, 2, 3, ... 10)으로 정렬해보자자, 준비물은 array, temp 다. 이 변수들 안에 숫자들을 담아 능력껏 줄세워보자.let array = [1, 5, 4,.. 2021. 7. 22. JavaScript 알고리즘(2) 버블정렬(Bubble Sort) Updated 10/30/22 알고리즘 두번째 시간😀 원리를 알아가니 퍼즐이 맞춰지는 느낌이다. 이렇게 하나하나 알아가보자! 자 그럼 버블정렬에 대해 알아가보자 버블 정렬(Selection Sort) 정렬알고리즘 중 버블 정렬은 가장 큰 숫자를 선택해서 뒤로 보낸다. 옆 원소랑 비교해서 더 작은 값은 앞으로, 최대값을 뒤로 보내자! 뒤죽박죽인 배열 내의 숫자들을 오름차순(1, 2, 3, ... 10)으로 정렬해보자 자, 준비물은 array, temp 다. 이 변수들 안에 숫자들을 담아 능력껏 줄세워보자. 첫번째 원소자리에는 1st - 10th 원소 검사해서 젤 큰 수를 맨뒤로 넣고, 두번째 원소자리에는 1st - 9th 원소 검사해서 젤 큰 수를 맨뒤로 넣고, 세번째 원소자리에는 1st - 8th 원소 .. 2021. 7. 19. JavaScript 알고리즘 (1) 선택 정렬 (Selection Sort) 예전에는 알고리즘을 생각해볼 여유도 없이 프로그래밍 언어와 문법 위주로만 공부하기 바빳다. 알고리즘까지 배울 레벨과 여력이 안된다고 생각하여 주위에서 중요성을 설파할 때면 귓등으로 넘긴 것 같다.코딩테스트를 그때그때 머리에 의존하여 풀어내면서 이제서야 알고리즘에 대한 중요성을 확실히 깨달았다. 하지만 자바스크립트로 푸는 알고리즘 자료는 많이 없다. 아마도 자바스크립트 언어 특성상 파이썬이나 자바에 비해 자료구조 등을 효율적으로 쉽게 풀어내기가 어려워서라고 생각한다. 그렇지만 포기는 없다. 자 그럼 이제부터 한걸음씩 시작해보자. updated 06/09/24알고리즘 강의를 2번째 보고있는 중이다. 개념과 이해는 어느정도 잡혔지만어느날 누군가 나에게 던진 질문처럼 이 알고리즘이 왜 사용해야하는지에 대한 답은.. 2021. 7. 18. JavaScript - URL 인코딩(encodeURI) / 디코딩하기(decodeURI) 신입 네 달차, 프로젝트의 URL 안의 특수문자가 유니코드로 인코딩되어 표시되었다. 그래서 URL 을 사용하는 메소드의 결과가 제대로 나오지 않는 이슈가 발견되었다. 문제해결을 위해 encodeURI() 의 문서를 살펴보며 해결을 모색하였다. URL 전체를 건들고 싶을 때, URL 의 (영어제외) 전체가 인코딩 / 디코딩 된다. endcodeURIComponent() var encodeStr = encodeURI("http://www.mywebpage.com/한글.jsp"); console.log(encodeStr); // "http%3A%2F%2Fwww.mywebpage.com%2F%ED%95%9C%EA%B8%80.jsp" decodeURIComponent() var decodeStr = decodeU.. 2021. 6. 17. javaScript - sort () 로 오름차순 내림차순 정렬하기 sort() 자바스크립트 배열의 오름차순, 내림차순은 sort() 라는 함수로 간단하게 만들 수 있다. 단 sort 만 사용하게 되면 ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않는다. 그래서 안에 내장함수를 넣어주어 앞 뒤 인덱스와 비교한 뒤 정렬해준다. 숫자 정렬 // 오름차순 score.sort(function(a, b) { return a - b; // 1, 2, 3, 4, 10, 11 }); // 내림차순 score.sort(function(a, b) { return b - a; // 11, 10, 4, 3, 2, 1 }); 2021. 5. 16. JavaScript - map 함수란 (feat. filter) map () 이란 - 반복문을 돌며 배열 안의 요소들을 1대 1로 짝지어 매핑해준다. - 결과로 나오는 새 배열과 !== 기존배열 은 다르다. (기존 배열을 수정하지 않고 새로운 배열을 만들기 때문) - 단, [ 배열 안에 { 객체 } 가 들어있으면, ] 객체는 공유된다. 새 배열 = 기존 배열.map((요소, 인덱스, 배열) => { return 요소 }); map() 으로 짝수만 출력하기 - 새 배열의 아이템 갯수는 === 기존배열 아이템 갯수와 같다. 그래서 map으로 거른 부분을 제외한 나머지는 undefined 가 된다. 출력화면 ** tip. 만약 빈칸으로 남아있는게 싫다면 filter 함수로 필터링 해주면 된다. filter() 으로 짝수만 출력하기 출력화면 ** 나의생각 map 과 filt.. 2021. 5. 12. javaScript - slice와 splice 비교하기 updated(01/20/24) splice 와 slice 로 배열의 원소들을 추가 삭제 교체 등을 해보자! - slice 는 원본 배열을 건드리지 않고, 수정된 복사 배열을 리턴한다. (삭제만 가능) - splice 는 직접적으로 삭제, 추가, 교체한 원본 배열을 리턴한다. (삭제 교체 추가 가능) slice( 시작인덱스#, 마지막인덱스# ) copy 된 새로운 배열 이 나온다 (원본은 유지) 이친구는 삭제만 가능하다 시작인덱스# 부터 ~ 마지막 인덱스# 직전까지만 삭제된다 **마지막 인덱스#는 optional 로 안넣으면 끝까지 삭제된다 const arr = [a, b, c, d, e]; 이고 const copy = arr.slice(1, 4); 이면 첫번째 인덱스 부터 4번째 인덱스 직전(=== 3.. 2021. 5. 7. 이전 1 ··· 6 7 8 9 10 다음 반응형
