A-HA💡 51

[CSS] JS에서 CSS 변수(사용자 정의 속성) 설정하는 방법

// element.style.:propertyName = propertyValueelement.style.setStyle('--variantName', variantValue)element.style.:propertyName 하려고 console에 찍어보니 나오지 않아 당황했다.style의 setStyle 함수를 이용하여 설정해주면 된다. 간단 box { --rotation: 0; transform: rotate(calc(var(--rotation) * 1deg));}const box = document.querySelctor('.box') // 방법1// const box = document.getElementByClassName('box') // 방법2box.styl..

A-HA💡/CSS 2024.04.24

[JS/알고리즘] 백준1085. 최솟값 최댓값

C++ 로 알고리즘을 처음 배워서 for문으로 구하는 방식만 알고 있었는데 아니 이게 웬 걸 우리 JS에겐 Math 라이브러리가 있었다. 4ms 시간이 단축됐다. Math.min(value1, value2, ...) Math.min() - JavaScript | MDN Math.min() 함수는 주어진 숫자들 중 가장 작은 값을 반환합니다. developer.mozilla.org + 최댓값 Math.max() 소수점 내림 Math.floor() 소수점 반올림 Math.round() 소수점 올림 Math.ceil() 제곱값 Math.pow() 제곱근 Math.sqrt() 랜덤 Math.random() 절대값 Math.abs() 부호 Math.sign()

A-HA💡/JS 2024.04.02

[CSS] 그라데이션 종류

icon에 drop-shadow를 하려고 했는데 속성을 부여하는 이미지에 따라 shadow가 결정돼서 아주 얇고 작은 아이콘에 확실한 효과를 주려니 투명도가 없어도 너무 희미했다. 그래서 배경을 원형 그라데이션으로 줄 수 있는 방법이 없나 찾아보다 발견하게 되었다. Radial Gradient radial-gradient() - CSS: Cascading Style Sheets | MDN The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ..

A-HA💡/CSS 2024.03.28

[Git] 기능 개발과 배포에 따른 branch 관리

대학교에서는 Git으로 add commit push 하는 법만 겨우 배웠었다 branch에 대한 개념도 잘 없어서 조원이랑 한 branch를 공유하며 잘못된 줄도 모르고 참 불편하다고만 생각했다 입사하고나서는 사수도 체계도 제대로 갖춰지지 않았어서 입사 당시 돼있던 것들을 토대로 눈치껏 익혔다. 기능/프로젝트 개발 단위로 feature를 파고 dev, stage, prod에 각각 merge하고 배포했다. 처음엔 branch를 새로 파야하는지도 몰라서 master에서 작업하다가 실서버 요청사항이 들어오면 작업중이던 파일(코드)을 모두 메모장에 복사해두었다가 다시 그대로 가져와서 이어 하는 매우 비효율적인 방법으로 했었다. 중간에 계셨던 백엔드 시니어 개발자분께서는 바로 master에 feature를 합쳐 ..

A-HA💡/Git 2024.03.19

[CSS] CSS, SASS, SCSS, LESS

[Sass] Sass란? Sass에 대해 알아보자 [ Sass ] Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다. CSS despiteallthat.tistory.com [CSS] CSS, SASS, SCSS 차이점, 사용방법 ⏲ TL;DR SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어 SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가 SASS는 들여 쓰기+줄 바 cocoon1787.tistory.com Sass(SCSS) 적용하기 📝 개..

A-HA💡/CSS 2024.01.30

[CSS] 반응형

https://nykim.work/84 반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리 이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 nykim.work https://nykim.work/85 반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성 프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히 nykim.work

A-HA💡/CSS 2024.01.22

VSC 간편 단축키

7) 반복되는 단어 한방에 수정 ⌘ + D or Ctrl + D(한번씩 일일이 눌러줘야함 / 귀찮으면 Ctrl + F2) 6) 클릭하는 곳마다 커서 생성 ⌥ + Click or Alt + Click 5) 코드 위/아래로 움직이기 ⌥ + ↑ / ↓ or Alt + ↑ / ↓ 4) 코드 복사해서 위/아래로 움직이기 ⌥ + ⇧ + ↑ / ↓ or Alt + ⇧ + ↑ / ↓ 3) 코드 블록 한방에 코멘트 처리하기 ⌘ + / or Ctrl + / 2) 선택된 영역에 커서 만들기 ⌥ + ⇧ + i or Alt + ⇧ + i 1) 마우스가 가는 곳 마다 커서 만들기 ⌥ + ⇧ + Mouse Drag or Alt + ⇧ + Mouse Drag Bonus: 파일 맨 위-아래로 한번에 이동하기 Top / Bottom o..

A-HA💡 2024.01.17