그나기록

아 영업자들 나날이 요구하는게 점점 늘어 .. 재촉할거면 커피라도 한 잔 사주면서 요구해라 ... 아무튼 이번 미션은 스크롤을 내리다가 특정구간에서부턴 스크롤을 해도 뷰포트 하단에 고정되어지는 바를 만드는 것이었다. https://codesandbox.io/s/affectionate-carlos-ggy7cj?file=/index.html affectionate-carlos-ggy7cj - CodeSandbox affectionate-carlos-ggy7cj codesandbox.io section 01 section 02 fixed section 03 section 04 section 05 //css div { display: flex; align-items: center; justify-content:..

한글자씩 휘리릭 넘어가는 모션을 보여줘야해서 사용하게 된 odometer.js 라이브러리 그런데 나는 화면에 해당세션이 보여질때 라이브러리가 작동하게 하고싶은 것 구글은 내 친구, 함 해보자고 https://slfc2s.csb.app/ Static Template slfc2s.csb.app jqeury cdn은 필수임 //css cdn //js cdn 그러고 odometer의 css와 js cdn을 불러온다 section 1 section 2 section 3 section 4 html 마크업은 간단하게 세션으로 구분지어 주고 오도미터가 들어갈 세션에 counter 클래스명과 해당 세션 안에 오도미터 라이브러리 박스를 넣어준다. * {margin: 0; padding: 0; box-sizing: bord..

오랜만에 코드펜을 돌아다니며 다른사람들의 css를 구경하다가 신기한 걸 발견했다 scroll-snap-type이라고 스크롤을 할 때 잘 사용하면 한 세션을 통으로 스크롤할 수 있는 코드인 거 같다 신기해보이는건 또 못참고 해봐야징 https://codesandbox.io/s/awesome-monad-ywzzzd?file=/index.html awesome-monad-ywzzzd - CodeSandboxawesome-monad-ywzzzdcodesandbox.io scroll-snap-type:y mandatory; 를 사용하면 풀스크린스크롤도 가능한거같다. 다만 창의 높이가 높아질 수록 움직임이 부드럽지 않은거 같다. 그래도 라이브러리 없이 css만으로 풀스크린스크롤이 가능하다니 신기방기 !! 잘 메모해..

회사에서 급하게 슬라이드 사용할 때 자주 사용하는 라이브러리 swiper 필요한 건 jquery / swiper css / swiper js 이 세가지 CDN이 필요함 https://swiperjs.com/get-started Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 여기서 CSS와 JS CDN을 긁어온다 //CSS //JS 그리고 HTML안에 기본 틀을 넣고 Slide 1 Slide 2 Slide 3 ... 나는 보통 pagination 이나 button, scr..

다시 시간을 만들어서 공부를 하기로 했다. 30세에 개발공부를 시작해 31에 개발자가 되었다는 분이 있다는 얘기를 들어서 나도 다시 자바스크립트부터 공부하고 뷰js까지 공부해서 프엔에 도전하기로 했다 겸사겸사 영어도 같이 공부하기로 했다 앞으로 챗지피티는 내 선생님이다 피할 수 없다면 즐겨줘야지

영업자가 줮같은 랜딩을 넘겼다. 사실 처음 기획안을 받았을 땐 줮같지 않았다. 다 만들고 나서 이건 이렇게 되어야 한다 저건 저렇게 되어야 한다면서 계속 수정할 걸 떤져줘서 줮같아짐 처음 나에게 말 했을땐 gif 이미지가 있는데 9개의 아이템에 하나씩 순서대로 빨간 아웃라인이 생겼다가 1초가 지나면 해당 아이템은 아웃라인이 없어지고 그 다음 순서의 아이템에 아웃라인이 생기는 그런 이미지고 9개의 아이템 롤링이 끝나고 나면 두번째 gif로 변경되어서 위와 똑같은 동작을 이어가는 것이었다. 두번째 gif 롤링이 끝나면 다시 첫번째 gif 로 변경.. 이건 setInterval로 실행시키면 되는거니까 okay 해서 넘겼다. 근데 그 위에 버튼을 두개 생성해서 버튼을 누르지 않은 상태에서 두개의 gif 이미지가..

5년 뒤에 내가 뭘 하고 있을까라는 생각이 문득 들었다 최근에 chat gpt로 코딩 질문을 했었는데 놀랍게도 정답을 알려줘서... 내가 직장인으로 일하는 동안에는 AI가 내 일을 대신하는 일은 없었으면 좋겠다는 생각이 들었당... 돈 열심히 벌어놔야겠누 ㅠㅠ

회사에 웹디자이너분이 담주 토욜에 웹디자인기능사 실기를 보신다고 하는데, 슬라이드가 너무 어렵고 이해가 안가신다고 해서 중간중간 작업 끝내고 짬나는 시간에 간단하게 예시를 만들어 드렸다 근데, 나 생각보다 정성스러운 느낌 ㅎㅋ 그래서 블로그에 남겨두려고 한다. 요건 css 요건 html left 1 2 3 right 제이쿼리 cdn 추가한 뒤 스크립트 삽입 혼자 포트폴리오 준비할 때 머리 지끈지끈 끙끙 앓아본 적이 있어서 내 설명으로 디자이너분이 슬라이드는 개껌처럼 쉽게 만들수있었으면 좋겠당 설명해주러가야지~.~ 총총 한번에 빡 합격하셔서 나한테 빠삐코 사주셨으면 좋겠당

반응형에서 relative와 absolute를 사용하여 테이블을 짰는데 PC에서 개발자도구로 모바일 사이즈 확인했을땐 이상이 없었다. 근디 모바일 디바이스에서 확인했더니, relative는 쓸모없는 거처럼 나오는 것 그래서 오늘도 구글구글해서 찾은 해결방안은 tr {position:relative; transform:scale(1);} // transform:scale(1) 을 같이 써줘서 영역을 확실히 잡아줌 td {position:fixed; top:0; left:0;} //absolute 대신 fixed로 사용 ++ 안드로이드와 리스폰시블리 앱에서 확인했을땐 잘 나왔지만 아이폰에서는 여전히 삐뚤 빼뚤 ,,,, 그냥 반응형으로 사이즈가 바뀔때마다 달라져야 하는 테이블 구조라면 그냥 div 주고 gri..

반응형에서 relative와 absolute를 사용하여 테이블을 짰는데 PC에서 개발자도구로 모바일 사이즈 확인했을땐 이상이 없었다. 근디 모바일 디바이스에서 확인했더니, relative는 쓸모없는 거처럼 나오는 것 그래서 오늘도 구글구글해서 찾은 해결방안은 tr {position:relative; transform:scale(1);} // transform:scale(1) 을 같이 써줘서 영역을 확실히 잡아줌 td {position:fixed; top:0; left:0;} //absolute 대신 fixed로 사용