HTML/CSS/JS

more

[JS+CSS]Madia님 영상보다가 디자인 예쁜거 구현해보기 (고객의 소리 부분)

https://www.youtube.com/watch?v=dIEViv_i7Xs데모See the Pen 고객의 소리 by Oh Ikmyeong (@dpffpself) on CodePen. HTML123456789101112131415161718192021222324252627282930313233343536!DOCTYPE html>html lang="en"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>마디아 고객의 소리/title>    link rel="stylesheet" href="./style/main.css">    script src="..

👀Study and Copy 2024.10.04 0

[CSS]inverted border-radius 안쪽으로 파인 효과

box-shadow와 background-color, border-radius를 잘 조합하여 눈속임 효과를 낼 수 있다.HTML123456789101112131415161718192021222324252627282930313233343536!DOCTYPE html>html lang="ko"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>border radius Inverted/title>    link rel="stylesheet" href="./style.css">/head> body>    a href="https://codepen.io/kris..

👀Study and Copy 2024.09.30 0

[JS]Trello 스타일의 drag & drop 구현하기

챗지피티가 정말 좋아졌다... 불과 2년전까지만 해도 머리털 쥐뜯었는데... 기본으로 짜준 코드를 바탕으로 다듬어봄 DemoSee the Pen Trello by Oh Ikmyeong (@dpffpself) on CodePen.HTML123456789101112131415161718192021222324252627282930313233343536373839404142!DOCTYPE html>html lang="en"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Trello/title>    link rel="stylesheet" href="./s..

👀Study and Copy 2024.09.27 1

[LunDev]CSS only marquee slider

css로만 만들 수 있는 marquee slider. 마우스 hover시 잠시 애니메이션이 멈춘다(animation-play-state:paused)https://www.youtube.com/watch?v=mF9yOwlunWk다만 매번 아이템 추가하고 지우고 변경하고 할 때 총 갯수 지정 및 이런게 귀찮으니 JS로 생성 가능하게 만들어봄See the Pen Untitled by Oh Ikmyeong (@dpffpself) on CodePen. HTML12345678910111213!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale..

👀Study and Copy 2024.09.19 0

[CSS/JS]Lun Dev 쇼핑몰 이미지 줌 효과

See the Pen imageZoom by Oh Ikmyeong (@dpffpself) on CodePen.html1234567891011121314151617181920212223242526!DOCTYPE html>html lang="ko"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Image Zoom Effect in E-commerce Website using Javascript/title>    link rel="stylesheet" href="./style.css">    script src="./main.js" type="modul..

👀Study and Copy 2024.09.13 1

[JS]무작위로 LOVE 나올 때 까지 문자열 출력

원본 작품 : https://x.com/ntv_rd/status/1792053852889612311 X의 日テレR&Dラボ님(@ntv_rd)LOVEが現れるまでランダムに文字列を生成し続ける作品、エキソニモさんの『Find My LOVE』。37万文字描いてやっと出会えました。シンプルだけど奥深い。面白い。 アートキャンバスとしてのWebtwitter.com무작위로 A-Z까지 알파벳중 랜덤으로 출력하여 최종적으로 LOVE라는 글자가 출력될 때 까지 시간을 계산한다.근데 이거 실제로 돌려보면 한평생 걸릴 가능성이 크기 때문에 다른 글자도 입력해서 테스트 할 수 있도록 해놓았다.코드펜 데모 See the Pen RANDOM LOVE by Oh Ikmyeong (@dpffpself) on CodePen. HTML1234567891..

⚡Thinkers 2024.05.20 0

[JS]팝업창에 함수를 전달하고, 팝업창의 변수를 부모창에 전달하는 방법.

window.opener 챗지피티는 정말 짱이다... 기본적인 원리는 다음과 같음. i index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2 Click const $btn = document.getElementById("btn"); const $result = document.getElementsByName("result")[0]; $btn.addEventListener("click",()=>{ window.open("./popup.html", "popup", "width=200,height=200"); }); function get_value(value){ $result.value = value; } Color..

👀Study and Copy 2024.04.16 0

[OnlineTutorials]링크 아이콘 자석효과

https://www.youtube.com/watch?v=1tz-m88gFVA js animate 사용으로 좀 더 부드럽게 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Document Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 @charset "utf-8"; ..

👀Study and Copy 2024.03.06 0

[ZeroCho]인간 JS엔진 되기 1-6 this는 호출 때 결정된다.

https://www.youtube.com/watch?v=pgo6URFz8tc 요약 : 일반 함수의 this는 "호출"시 결정 화살표 함수의 this는 "선언"시 결정. (부모 참조) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 { const obj = { name : "🍒", sayNameClassic : function(){console.log("sayNameClassic",this.name || "undefined");}, sayName(){console.log("sayName",this.name || "undefined");}, sayNameArrow : ()=..

👀Study and Copy 2024.01.04 1

[별코딩]Promise.all .allSettled .any .race 예제로 비교하기

데모 See the Pen promise예제 by Oh Ikmyeong (@dpffpself) on CodePen. 별코딩 강의 영상 html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 자바스크립트 비동기 프로그래밍 #3.5 | Promise.all + allSettled + any + race 별코딩 : 자바스크립트 비동기 프로그래밍 #3.5 | Promise.all + allSettled + any + race 콘솔창을 확인해보세요 함수들은 각각 1,2,3초가 걸립니다. Promise.all Promise.allSettled Promise.any Promise.race Colored by Color Scripter cs CSS..

👀Study and Copy 2024.01.03 0

[CSS/JS]vanilla JS로 핸들러 2개인 range input 구현하기(기본)

보통 input[type="range"]는 핸들러가 1개 뿐이다. 근데 만일 min, max 핸들러가 2개인 input을 구현하고 싶다면? 유의사항 완전 기본의 기본. 안되는게 더 많아요! 되지 않는 항목들은 다음과 같음 현재 min, max 제한 없이 왔다갔다함. (min이 max보다 더 오른쪽으로 이동한다든가) step에 대한 snap 없음 귀찮아서 window.resize에 대한 초기화 안 해놓음 그대로 갔다 쓰면 문제가 많을거에요 ㅋㅋ 걍 원리만 이해하시고 변형하고 추가 수정해서 쓰면 됩니다. 데모 사이트 : https://Ohikmyeong.github.io/range-slider-minmax/v1 HTML html은 별거 없습니다. 그냥 css랑 js링크용 1 2 3 4 5 6 7 8 9 10..

⚡Thinkers 2023.10.11 2

C3.js 사용해야하는데 d3.v5.min.js 파일 못 구하시는 분

https://d3js.org/d3.v5.min.js C3.js는 D3.js에 의존한다. c3-0.7.20 기준, d3의 v5.min.js 파일을 필요로 하는데 현재 d3 페이지 가보면 버젼이 7까지 올랐음. 7로 연결해도 되지 않나? 하지만 호환성 문제인지 오류 때문에 안 됨. v5는 어디서 구하는데? 해서 찾아보니 역시... 과거 블로그 글들이 구원해주시리라... 저와 같은 문제를 겪었을 분들을 위해 빠른 검색 결과 나오시라고 링크 올립니다.

[Kevin Powell]CSS,JS로 marquee 태그 같은 무한 스크롤 애니메이션 구현하기

https://www.youtube.com/watch?v=iLmBy-HKIAw 데모 : https://ohikmyeong.github.io/kp-infinite-scroll/ Infinite Scorll ohikmyeong.github.io CSS 키워드 mask width : max-content transform:translateX(calc(-50% - (var(--gap) / 2))); JS 키워드 $elem.cloneNode(true); HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 Infinite Scorll Create an infinite horiz..

👀Study and Copy 2023.10.04 0

[OnlineTutorials] 3d Carousel Slider(drag,touch,button)

https://www.youtube.com/watch?v=ikbwJy84f2Y 영상과 코드가 다릅니다. 아이템의 갯수가 변화할시 일일히 CSS 수정 안 하고 걍 JS가 알아서 계산해서 CSS 대입하도록 했음. See the Pen 3d carousel by Oh Ikmyeong (@dpffpself) on CodePen. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3d Gallery 3D Image Gallery in CSS & Javascript 1 2 3 4 5 6 7 8 9 10 PREV NEXT Colored by Color Scripter cs CSS 아이템들을 중앙에 위치하..

👀Study and Copy 2023.09.07 0

[JS]부모에만 mousedown,mouseup,mousemove를 적용하고 자식에는 click만 적용하고 싶을 때

JS의 .animate() 속성을 이용해서 클릭&드래그로 좌우로 이동하는 DOM을 만들건데, 1. 자식요소들을 감싸고 있는 부모만 움직임 2. 자식요소엔 클릭이벤트만 적용 (클릭시 크기가 줄어들었다/원래크기로 돌아옴) 3. 부모가 움직이고 난 후에도 자식 위에 마우스 커서가 있을때 원래는 클릭이벤트로 간주되지만, 이를 원치않음. 따라서 부모가 움직였다면 마우스 커서가 자식 위에 있더라도 클릭이벤트를 처리하지 않음. 4. 부모를 움직일때도 일정 거리 이상 마우스 커서를 움직이지 않으면, 부모도 움직이지 않게 할 것임. (이렇게 하지 않으면 아주 조그만 움직임에도 부모는 움찔거리며 계속 움직임) See the Pen Untitled by Oh Ikmyeong (@dpffpself) on CodePen. HT..

⚡Thinkers 2023.08.31 0

[JS] .animate() 또는 setTimeout과 Promise로 marquee 효과 만들기

보통 웹사이트에서 배너가 끝없이 반복되며 한쪽으로 흐르는 효과를 재현해보자. 방법을 크게 2가지로 써봤는데, 1. js의 신규 내장 API인 $elem.animate(keyframes,options)를 사용하여 쉽고 효과적으로 재현하기 2. Promise와 setTimeout을 사용하여 원시적으로 재현하기 슬프게도 2번이 보기가 더 안 좋다..! 미세하지만 툭 끊기는 느낌이 나기 때문. 화면을 다시 그리고 이벤트 루프가 돌고...화면을 다시 페인팅하고 어쩌고...이런것 때문에 js는 생각대로 마음처럼 움직여주지 않는다. 어찌하였건 똑똑한 개발자들이 animate를 만들어주었으니 더 부드러운 효과가 재현 가능한거다...! css에서 animation이 종료되었을시 이벤트를 추가하고 싶다면 animation..

⚡Thinkers 2023.07.13 0

[Hyperplexed]클릭, 그리드 그라데이션 효과

https://www.youtube.com/watch?v=bAwEj_mSzOs 원본 영상에선 라이브러리를 쓰고있는데, 이걸 바닐라 자바스크립트로 구현해보았음... 데모 : https://ohikmyeong.github.io/hpp-tile-anime hpp-tile-anime [Hyperplexed]Mind-Blowing Anime.js Staggered Grid Effect ohikmyeong.github.io index.html엔 그냥 #wrap인 DOM 하나만 있음. CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 @charset "..

👀Study and Copy 2023.07.12 0

DESIGN

more

[어도비Ai]변형(transform) 회전,기울이기로 아이소메트릭 효과 빠르게 내기

정교한 이미지 작업을 하려면 120도짜리 사선그리드를 그려서 한땀 한땀 패스 따며 만들고 3D효과를 주거나 해야겠지만 그냥 아 한국사람 빨리빨리; 느낌으로 글자며 귀도리있는 도형이며 아이소메트릭 각도대로 눕혀버려야 할 때가 있다. 단순히 도형 하나, 글자 몇 개 좀 눕히자고 그 그리드를 만들거나 키자면 매우 비효율적이며 정신병이 올 수 있다. 글자는 일단 Ctrl Shift O 해서 도형으로 깨뜨려주라.(상단메뉴 문자 > 윤곽선 만들기) 그다음 도형 선택하고 우클릭>변형>회전(R) 60도로 눕혀주라 다시 우클릭 > 변형 > 기울이기 기울이기 각도(S)는 30도 기울이기 각도(A)는 -30도로 해주면 된다.

DESIGN 2023.02.27 0

본문에 자주 쓰는 한글 무료 고딕 계열 폰트들

1. KopubWorld - 편집에 최적화 - 웹은 따로 eot랑 woff 만들어서 직접 해야함 2. Noto Sans KR - 구글이 제공해주는 무료 웹폰트 CDN = 엄청 편함! - Noto다 보니 한자 깨지는게 없다고 생각하면 됨 고마워요 구글 ㅎ - 다만 생으로 갖다 쓰다보면 전체적으로 묘하게 뚝딱거리는 느낌은 있음. 자간을 조정해야함. 행간도 좀 뚝딱거리는 느낌이 있음... - 현재 그냥 빠르게 걱정없이 갖다 비비기 가장 좋은 무료 웹폰트 3. Spoqa Han Sans Neo - 무료 CDN을 제공하지만, 빠른 속도를 원한다면 직접 해야함. 다만 킹갓 스포카는 서브를 지원해서 woff, eot까지 함께 제공하고 있음 - 알못이 보면 Noto Sans와 거의 비슷하지만 Noto Sans의 뚝딱거..

DESIGN 2021.12.28 0

[Adobe InDesign]어도비 인디자인에서 RGB 작업을 하는데 PNG 색상이 칙칙하게 출력될 때

? 이게 무슨일인가? 왜 포토샵과 인디자인의 RGB 파일 색상이 다르게 나오는건지? 예를들어 RGB(255,0,0)의 포토샵 PNG 파일을 인디자인(문서 색상모드:RGB)에 얹고 PNG로 내보내기 했을때 왜~~~ 두 파일의 색상이 다르게 보이냐 인디자인은 왜 RGB로 작업했을때 몇개는 색상값이 일치하고 몇개는 일치 안 하냐... 어쩐지 인디자인으로 웹 작업을 하면 포토샵으로 할 때 보다 뭔가 칙칙한게 기분탓인가 했더니 사실이었던것이다. 경고 : 인디자인은 원래 출력용(CMYK)작업을 하기위한 툴이기 때문에 본인의 색상설정 세팅을 잘 기억하고 있자. 이 포스팅은 RGB를 맞추려고 하기 위해 하는짓이기 때문... 님 왜 RGB작업 하는데 인디자인 쓰셈? 이라고 묻는다면 미친듯한 반복작업 때문임.. 반복작업엔..

DESIGN 2021.11.05 13

유튜브 로고처럼 귀도리 있고 둥근/볼록한 사각형 만들기 (일러스트레이터 AI)

path 툴을 사용하여 라인워크로 작업 폭도구로 부풀리기 outline stroke하여 면으로 변경 이후 모서리 설정 추가로 귀도리 있는 사각형 그러나 위의 방법은 개고생이고 그냥 Effect > Warp > 부풀리기(inflate) 하면 됨 bulged rectangular / bulged polygon Warp > Pucker & Bloat을 쓰는 방법도 있지만 꽃모양으로 변하는 패스때문에 여간 빡치니 걍 이거 쓰자 ㅎ

DESIGN 2021.02.22 0