본문 바로가기

JavaScript85

JavaScript - 정규식 Regular expression updated 06/28/23 오늘은 정규식의 날이었다 정규식이 나를 애먹였지만 덕분에 생동감있게 배웠다. 아래 내용은 내가 편하게 이해하려고 정리해놓은 규칙들이다. 서서히 늘려나갈 계획이다. JavaScript - 정규식 Regular expression 💡 기본 규칙 / _____ / 일단 정규식은 요런 형식을 사용한다. 슬래시로 감싸진 형태이다. / _____ / g 전체 문자열을 몽땅 검색한다 / _____ / i 대소문자를 구분하지 않는다 / _____ / gi 전체 문자열 몽땅 검색 + 대소문자를 가리지 않는다 / ^[0-9] / 여기서 ^ 는 시작을 의미한다. → 한마디로 0-9 인 숫자로 시작되는 문자를 의미한다. / [^0-9] / 괄호 안의 ^ 는 not 을 의미한다. → 한마디로 0-.. 2022. 7. 29.
CSS - 이미지 자르기(crop) Updated 09/21/22 crop 은 그림판에서 1초컷이지만, css 로는 로 영역을 한번더 감싸줘야 한다. 자, 여기 귀여운 고양이가 있다. CSS 로 고양이 얼굴만 잘라보도록 하자. 결과화면 미리보기 HTML CSS .bg-crop { position: relative; width: 100px; // 자를 사이즈를 명시해준다. height: 50px; overflow: hidden; .bg-cat { position: absolute; // 포지션을 주고, top: 0; // 보이기 원하는 위치를 지정 left: 0; width: 300px; // 오리지널 사이즈 height: 200px; } } **styled-component 기준입니다. 2022. 7. 7.
CSS - <li 태그> dot 스타일 변경하기 + 들여쓰기 기본적인 리스트를 정렬중인 새발자 기초를 탄탄히 다지기 위해 열심히 포스팅을 정리해보았다. 들을 사용해보았는데 오랜만에 사용해보니 부족한 것들이 눈에 들어왔다. 그럼 에 대해 좀 더 알아보러 가보자 CSS - dot 스타일 변경하기 + 들여쓰기 일단 타이틀과 정렬이 맞지 않고, 하위메뉴들도 정렬이 안되있다. 그리고 dot 크기도 마음에 안든다. 테스트 타이틀 1. 커피류 • 아메리카노 • 카페라떼 • 에스프레소 2. 테스트 입니다. 3. 테스트 입니다. 아래와 같이 수정을 해보자. 테스트 타이틀 1. 커피류 • 아메리카노 • 카페라떼 • 에스프레소 2. 테스트 입니다. 3. 테스트 입니다. HTML 커피류 아메리카노 카페라떼 에스프레소 테스트 입니다. 테스트 입니다. CSS .list { list-sty.. 2022. 7. 5.
CSS - 배경 이미지 animation 으로 이동시키기 updated 02/21/24 페이지를 만드는 도중 로딩이 뙇뜨면 배경이미지를 스르륵 올려주는 효과가 필요하다. 이럴 때 당황해하지 말고 css animation 속성을 사용해 구현해보자 결과화면 미리보기 CSS - 배경 이미지 animation 으로 이동시키기 일단 이미지태그에 클래스 이름을 활용해서 css 로 animation 을 사용해보자 // 이미지 태그가 있다. animation 속성은 따로 정리할 필요가 있을 것 같아 나중에 따로 포스팅을 정리해야겠다는 생각을 해보았다. ** 참고로 transfrom: translateY(의 값이) - 이면, 위로 + 이면 아래로 움직인다. 방법1 .building-img { position: absolute; // 일단 위치지정은 필수지! top: 500px.. 2022. 7. 3.
JavaScript - scrollTop / scrollHeight / clientHeight 이란 (feat.최대스크롤 값) 스크롤 핸들링은 항상 숙제같은 녀석이었다. 몇번을 마주쳤지만 피하고 싶었던 녀석, 그래서 자세한 개념 아묻따하고 그때그때 해결하기 바빳는데, 결국 확실히 알고 넘어가야겠다는 생각이 들어 그동안 야금야금 쌓아왔던 포스팅을 방출하고자 한다. JavaScript - scrollTop / scrollHeight / clientHeight 이란 (feat.최대스크롤 값) 긴 게시글이 하나있다고 치고 설명하겠다. scrollTop 아래 참고 이미지에 보이는 것처럼, 원글 맨 처음부터 ~ 현재 화면에 보이는 부분까지의 길이가 scrollTop 이다. 글의 맨 처음 부터 얼마나 내려왔는지 현재 스크롤 위치 를 알수있다. An element's scrollTop value is a measurement of the di.. 2022. 7. 2.
CSS - border 뾰족한 대각선 모서리 채워넣기 (feat.box-shadow) 탭 버튼을 클릭했을 때, 굵게 표시된 테두리 영역을 자세히 보면 edge가 대각선으로 뾰족하게 나와있다. 멀리서보면 잘 티가 안나지만, 확대해보면 여간 신경쓰이는 게 아니다. 이때 대각선으로 뾰족하게 보이는 edge 를 예쁘게 펴봤던 과정을 포스팅으로 정리해보았다. 결과화면 미리보기 CSS 테두리가 있는 박스 안에서 생긴 이슈이기 때문에 box-shadow 를 사용해보았다. box-shadow 는 요소의 테두리에 그림자 효과를 준다. 박스 요소 바깥은 물론 박스 안에도 그림자 효과를 줄 수 있다. box-shadow 의 inset 옵션을 사용을 사용하여 요소 안에 그림자 효과를 넣어 뾰족한 edge 를 채워넣었다. .tab-items .item { width: 100%; height: 77px; } .t.. 2022. 6. 30.
JavaScript 알고리즘(8) Multiple Pointers Pattern - isSubsequence 차근차근 시간날 때마다 알고리즘을 풀고 있다. 이번 하반기에는 좀더 집중해서 알고리즘을 공부할 생각이다.(선선포 후공부라 하자) Multiple Pointers 패턴에서 isSubsequence 문제이다. 먼저 풀면서 느낀점은 우선 멀티 포인터를 쓰는 부분이 익숙하지 않았고, 2중 루프를 쓰지 않는다는 것 그래서 O(N) 으로 성능을 좀 더 개선시키는 방향으로 풀어보았다는 부분이었다. 어려웠지만 풀고나면 항상 성장하는 기분이 들어 뿌듯하다 😁 JavaScript 알고리즘(8) Multiple Pointers Pattern - isSubsequence 쉽게 한방에 설명해보겠다. 함수의 첫번째 인자로 주어진 'sing' 문자열과 두번째 인자로 주어진 'sting' 문자열이 있다. 두번째 문자열 sting 안.. 2022. 6. 29.
JavaScript - KeyDown / KeyPress / KeyUp 이벤트 메시지 입력창에서 엔터키로 메시지 전송을 할 때나 줄바꿈을 할 때 키보드 이벤트를 사용하게 된다. 대표적인 키보드 이벤트인 keyDown / keyPress / KeyUp 에 대해서 정확히 알고싶어서 공부해보았다. JavaScript - KeyDown / KeyPress / KeyUp 이벤트 keyDown 키보드를 누를 때 + 계속 누르고 있는 경우 실행 (아무 키나 다 반응) keyPress 키보드를 누를 때 + 계속 누르고 있는 경우 실행 (text 입력되는 키만 반응 - 방향키, 탭 같은 거 제외) keyUp 키보드를 눌렀다가 키에서 손을 뗄 때 실행 Key 이벤트 동작 순서 key event 사이의 동작 순서는 다음과 같다. keydown → keypress → keyup 하지만, 실제 글자가 입.. 2022. 6. 22.
JavaScript - 배열에서 원하는 인덱스만 삭제하기 (Splice / Filter) 예전에 내장함수들 공부할때 기초는 기초일뿐 이라고 생각하였던 적이 있다. 하지만 실무에서 배열을 동적으로 삭제하는 경우에는 보통 인덱스를 많이 사용한다. 그래서 다시한번 가장 기초적인 배열 함수 splice 와 filter 을 한번 더 정리해보았다. 실제로 응용했던 코드가 궁금하시다면? (아래 포스팅 클릭 ↓↓↓) React(72) map()으로 input 추가 삭제하기 CRUD 를 그리다 보면 의 자유로운 추가 삭제 기능이 필요할 때가 있다. 비슷한 기능을 3번째 구현하면서, 잊지 않기 위해 기록으로 남겨본다. React(72) map()으로 input 추가 삭제하기 1. Input 입력값 devbirdfeet.tistory.com splice vs slice 기억이 가물가물하시다면...? (아래 기초.. 2022. 6. 8.
반응형

티스토리툴바