본문 바로가기

JavaScript88

JavaScript 알고리즘(9) Recursive function 오늘 소개할 친구는 재귀함수이다. 알고리즘 공부하는 중 나온 친구이다. 근데 꽤 흥미로운 친구라서 소개 겸 공부겸 아무튼 참지못하고 포스팅을 올려본다. JavaScript 알고리즘(9) Recursive function 재귀함수는 자기자신 속에서 또 호출되는 함수를 의미한다. (마치 거울의 방에서 끝없이 내 자신이 보이는 느낌이랄까 ) 예시로 들 코드는 모든 숫자의 합과 곱을 구하는 공식이다. 맨처음 코드를 공부하면서 배웠던 함수이며, 실무에서도 은근히 많이 사용하는 추억이 담긴 함수인데, 이것을 재귀함수로 구현하며 밀려오는 감동이란 🤩 ** 반드시 base case 를 만들어놓아야만 한다. 그래야 무한루프의 굴레에 빠지지 않는다. 모든 수의 합 // regular way function sumRange.. 2022. 9. 6.
CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성 -web-kit-appearance) 슬라이더 바를 만들기 위해 을 사용하였다. 그랬더니 요런 귀여운 슬라이더가 나왔다. 하지만 native 태그를 사용하게 되면 브라우저별 호환성이 좋지 않아 ui 가 깨진다. (특히 IE10 에서는 아예 호환x) 그래서 input 을 투명하게 만들어 기능만 동작하게 하고 + 그 위에 예쁜 슬라이더 ui 를 올려서 꼭두각시 노릇을 하게 만드려고 한다. CSS - input [type="range"] 투명하게 만들기 (feat. 브라우저 별 속성 -web-kit-appearance) HTML setValue(e.target.valueAsNumber)} /> CSS input[type:range] { // 인풋창 투명하게 만들기 appearance: none; /* 공통 */ // 인풋창 포커스 시 아웃라인 제.. 2022. 9. 5.
CSS - white-space 란 문자열 안에 escape 문자들을 사용하다보니, white-space 속성을 함께 사용하게 되었다. 습관적으로 사용하는 것 말고 어떤 속성인지 자세히 알아보고 싶었다. 한번 익히고 나면 평생 내 것이 된다. 그럼 공부하러 가보자 CSS - white-space 란 텍스트에서 한 줄 혹은 한 칸을 띄울 때 공백이 생긴다. 이것을 white space 라고 한다. // 공식문서에서는 문자 사이의 vertical 혹은 horizontal 공간으로 정의 내리고 있다. Whitespace refers to characters which are used to provide horizontal or vertical space between other characters. css 의 white-space 는 이 공백을.. 2022. 8. 31.
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.
반응형

티스토리툴바