그나기록

아 영업자들 나날이 요구하는게 점점 늘어 .. 재촉할거면 커피라도 한 잔 사주면서 요구해라 ... 아무튼 이번 미션은 스크롤을 내리다가 특정구간에서부턴 스크롤을 해도 뷰포트 하단에 고정되어지는 바를 만드는 것이었다. 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..

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

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

이번주 업무하면서 가장 많이 쓴 플러그인이다. 상하로 롤링이 되는 플러그인으로 실시간으로 롤링되는 리스트같은걸 만들 수 있다. 업무 특성상 페이지 카피가 많은데, 카피해야하는 페이지가 다 vTicker를 쓰고 있더라 구글에 검색해보니 최신글은 없어서 이걸 쓰는게 맞나 싶지만 카피하라니 나도 뭐 써야지 뭐 ,,, 궁시렁궁시렁 플러그인은 세상 간단. div 안에 ul 과 li를 넣어주고 아래처럼 맞는 옵션을 채워주면 끝 롤링 리스트 1 롤링 리스트 2 롤링 리스트 3 롤링 리스트 4 롤링 리스트 5 롤링 리스트 6 롤링 리스트 7 롤링 리스트 8 롤링 리스트 9 롤링 리스트 10 점점 플러그인만 늘어가는 느낌..

while문은 조건이 true이면 계속 반복시킴 조건이 true이면 반복 수행하고, false면 멈춤 참고글 https://hianna.tistory.com/370 [Javascript] 반복문(2) - while 두 번째 반복문은 while입니다. while while(조건식){ // 반복할 코드 } while문은 '조건식'의 결과가 true 인경우 코드 블록을 반복적으로 수행합니다. 코드 수행 순서는 1. 먼저 조건식을 판단하고, 2. 조 hianna.tistory.com const name = ['anna', 'jimin', 'heyjin']; let i = 0; while(i < name.length){ console.log(name[i++]); } 실행 시, name 배열의 순서는 0 1 2 a..

수정 요청 들어온 페이지 코드를 보다가 신기한걸 발견했다. $('div ul li:gt(5)') 인데 :nth-child()도 아니고 :gt() ??? 처음 봐서 신기했다. 그래서 바로 구글에 검색했는데 html 문법은아니고 제이쿼리 선택자더라 ​ li:lt(3) 는 3미만을 선택해서 0, 1, 2 까지를 선택하고 li:gt(3) 는 3보다 큰 것들을 선택해서 4, 5, 6 ~ 을 선택한다. ​ 근데 구글검색했는데, 2016년 글이 최신글로 뜨는거 보면 요즘은 잘 안쓰는듯 ?? 그래도 알아두면 좋으니까 메모 !

localStorage 를 이용해서 버튼을 누를때마다 스크롤 위치가 변하는 페이지를 만들어보쟙 html은 index1과 index2를 만들거다 category top banner section1 section2 content sub_category bottom index2 에는 sub category 버튼과 bottom 버튼이 있다. 각 버튼을 누르면 input[type="hidden"]의 값이 각 버튼의 클래스명(go, go2)로 변경이 된 후 submit을 시킨다. submit을 시키면서 localStorage에 key를 생성하고 input[type="hidden"]이 갖게 된 값을 key의 값으로 넣어준다. sub category 탭을 클릭하면 sub category 탭이 주소창 아래에 위치하고 b..

한 단어, 혹은 한 문장을 한글자씩 타이핑하여 보여주기 ​ 결과 https://px540v.csb.app/ typing px540v.csb.app // html //한글자씩 보여질 단어 리스트 무궁화 꽃이 피었습니다 //타이핑이 보여질 위치 // css * {margin:0; padding:0;} .wrap {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-align:center;} .typing_txt {display:none;} .typing {display:inline-block; border-bottom:1px solid black; font-size:20px; font-weight:bold;} html 과 c..

PC와 모바일에서 영상 자동재생 시켜보쟈 ​ 참고글 https://www.thewordcracker.com/basic/%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EC%98%81%EC%83%81-%EC%9E%90%EB%8F%99-%EC%9E%AC%EC%83%9D%EB%90%98%EB%8F%84%EB%A1%9D-%EC%82%BD%EC%9E%85%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/ 1. 유튜브 영상 소스 코드를 복사해서 가져온다 2. 영상 src에 ?autoplay=1&mute=1 를 붙여준다 이렇게 추가하고 모바일에서 확인하면 영상이 자동재생되는거까지 확인이 된다. 근데 iframe의 width와 height 값 때문에 영상화면이 짤려서 보이기 때문에 ​ ​ 4. 에..