본문 바로가기

JavaScript85

CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 버튼 위에 마우스를 올려놓으면(hover) 밑줄이 가운데서 좌우가 양옆으로 펼쳐지는 라인 애니메이션을 구현하고자 한다. 결과화면 미리보기 프로필 버튼 위에 마우스 호버를 하면 밑줄이 좌우가 양옆으로 펼쳐지는 애니메이션이 생긴다. CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 HTML 프로필 CSS .spread-underline { color: #2e3248; display: inline-block; padding: 15px 0; position: relative; text-decoration: none; } .spread-underline::after { background: none repeat scroll 0 0 transparent; background: #2e3248; bottom: 0; .. 2021. 11. 5.
JavaScript - Break문 vs Continue문 break문 - 이제 더 이상 반복없이, for문이나 while문 바로 나간다. - 반복문을 쿨하게 나가버린다. let sum = 0; for(const num=1; num 2021. 10. 14.
CSS - 테두리가 있는 툴팁(말풍선) 만들기 요즘 새발자는 CSS 를 열심히 연마하고 있다. 오늘은 테두리가 있는 툴팁을 만들어 볼 것이다. 테두리가 없는 툴팁은 비교적 만들기 쉬운 편인데, 테두리가 있는 툴팁은 조금 까다로웠다. 그래서 잊지 않도록 기록을 남겨본다. CSS - 테두리가 있는 툴팁(말풍선) 만들기 결과화면 미리보기 하늘색 바탕에 파란색 테두리가 있는 툴팁이 완성되었다. HTML 새발자는 오늘도 뚠뚠.. 모두들 화이팅입니다. CSS before 로 삼각형을 after 로 삼각형의 테두리를 만들어주었다. .task-tooltip { background-color: #eef3fd; border: #7689fd solid 1px; border-radius: 5px; color: #505bf0; font-size: 12px; font-wei.. 2021. 10. 1.
CSS - 툴팁 삼각형 화살표 만들기 CSS 로 툴팁을 만들어보자. 여태까지 툴팁을 두어번정도 만들어봤다. 텍스트가 들어가는 말풍선 부분을 만들기는 쉬운데, 삼각형 화살표를 만들기가 조금 까다롭다. 그래서 기록해본다. (미래의 나는 여전히 해멜 것을 알기에... ) 결과화면 미리보기 아래처럼 배경색이 들어간 툴팁을 만들어 보자. JavaScript - CSS 툴팁 삼각형 화살표 만들기 HTML ! 툴팁입니다 ! CSS 가상요소인 after 속성을 이용해 삼각형 부분을 표현하였다 .tooltip {// 몸통 부분 background-color: #7689fd; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 500; height: 31px; letter-spacing: -0.25.. 2021. 9. 30.
CSS - input 체크박스 테두리 스타일 변경하기 요즘 새발자는 UI 를 열심히 하고 있다. (쑥쑥 무럭무럭자라라) input 의 기본 체크박스 안의 테두리 스타일을 변경하는 미션을 맡아 그 기록을 남겨보았다. (미래의 나는 여전히 해멜 것을 알기에... ) 자 그럼 시작해보자 ! 결과화면 미리보기 일단 구현된 결과물이다. 기본 체크박스는 테두리가 회색으로 되어있다. 하지만 나는 테두리가 없는 깔끔한 디자인을 구현하였다. JavaScript - CSS input 체크박스 테두리 스타일 변경하기 현실은 css 에서 바로 변경이 안된다. 😭 after 속성을 사용하여 현실에서는 적용이 안되는 가상의 스타일을 지정해주자. HTML CSS ** 참고로 IE 는 appearance 속성이 안먹었던 기억이 가물가물하게 나니, 혹시 IE 구버전 대응을 해야한다면 참.. 2021. 9. 29.
JavaScript - split()으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기) 파일 전송시, 썸네일(미리보기)와 파일명을 함께 보여주는 기능을 구현 중이다. 이미지 파일이 아닐 때, 썸네일에 파일확장자만 보여주려고 한다. 결과화면 미리보기 이렇게 파일확장자가 썸네일(미리보기)부분에 나온다. 그럼 시작해보자! JavaScript - split으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기) 기본 아이디어는 이렇다 ! - split() 함수로 파일 이름을 ' . '(쩜) 을 기준으로 양옆으로 분리한다. ex) 새발.jpg 라고 하면 ' 새발 ' 과 ' jpg ' 로 분리된다. - ' . ' (쩜) 뒤의 확장자만 문자 배열로 따로 빼내버리는 것이다! ex) saebal[1] 을 호출하면 ' jpg ' 가 호출된다. split() 간단 원리 설명 아래 문자열을 잘라보자. 문자열에 .. 2021. 9. 28.
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.
반응형