Develop_NOTE

유튜브 url 기반으로 정해진 규칙에 따라 매핑 해주면 해당 영상에 등록된 다양한 사이즈의 썸네일을 이미지로 따로 서버에 저장해 놓지 않아도 쉽게 가져 올 수 있음. 등록된 이미지를 가져오는 규칙 "https://img.youtube.com/vi/[유튜브 영상 ID값]/[이미지형식].jpg" 위의 유튜브 영상 URL은 "https://www.youtube.com/embed/lS9avGTDWZM" 이며 위의 [유튜브 영상 ID]값은 IS9acGTDWZM 이 된다. 그리고 [이미지형식]은 아래와 같이 지정되어있음으로 필요한 해상도에 따라 사용하면 된다. 120×90: default.jpg 320×180: mqdefault.jpg 480×360: hqdefault.jpg 640×480: sddefault.jp..

아래와 같은 마크업 구조를 가진 갤러리형태 swiper 슬라이드와 팝업형태의 swiper 슬라이드가 있다. 갤러리 형태 swiper 요소를 클릭시 팝업이 페이드 인이 되면서 클릭했던 갤러리형태의 swiper index로 팝업형태의 swiper도 자동으로 이동시키고자한다. 그럴땐 아래와 같이 JS를 작성하도록한다. //갤러리 형태 swiper 옵션 const myGalImgSwiper = new Swiper("#mySwiper",{ slidesPerView: 3 //갤러리 뷰 갯수 spaceBetween: 20 //스와이퍼 요소 간 여백 }); //팝업 형태 swiper 옵션 const layerImgSwiper = new Swiper("#layerSwiper",{ slidesPerView: 1, //팝업..

출근을 하지않는 주말에 쇼핑몰 이벤트 팝업을 띄운다던지 등의 업무가 발생했을때 주말에 일일이 들어가서 display:block 처리 하는건 매우 비효율적이고 주말이 아까운 행동이다. (전제: 백엔드로 처리가 어려운 상황에..) Date객체를 이용하면 몇줄 안되는 코드로 주말에 일을 할 필요 없이 해당 날짜에 함수 및 이벤트 실행 시킬 수 있다. * 2022년 5월 1일 일요일 부터 팝업이 보여져야함. *백엔드 작업이 어려운 상황이라면 //이벤트가 실행되어야하는 날짜 변수 선언. let eventDate = new Date("05/01/2022 00:00:00"); //현재 날짜 변수 선언 let nowDate = new Date(); //해당 날짜 확인 조건문 if(eventDate

'' 태그는 작업의 진행률을 나타내는데 사용하는 태그다. ( 태그에 대해 자세한 부분은 아래 글 참고) [HTML5]작업의 진행률 표시줄을 나타내는 태그 ' ' 태그는 작업의 진행률 표시줄을 제공해주는 태그다. 태그,태그,가상요소, css의 포지셔닝등 복잡한 구조를 쓰지 않고 ' ' 태그 한줄이면 ui/ux적으로도 꽤나 훌륭한 표시줄을 만들어준다. 는 작 joroki.tistory.com 태그만 사용해서는 진행률을 동적으로 보여주기 어렵기 때문에 스크립트를 사용해야한다. 만들고자 하는 조건은 다음과 같다. * max값은 '10' * 'next' 버튼 클릭시 value 값이 1씩 늘어남. value값이 10을 넘길 경우 alert 창을 띄움. * 'prev' 버튼 클릭시 value 값이 1씩 줄어듬. va..

어떠한 사이트를 보는 중 크롬 기반 브라우저에서 위와 같이 url영역의 색상이 변경되는 부분을 가끔 목격 할 때가 있다. 실무 도중 기획자분과 디자이너 분께서 가능한지 요청하여 방법을 찾아보았고 실제로 적용해보니 특정한 컨셉의 랜딩페이지의 경우 url영역의 색상까지 컨셉에 맞춰 변경 할 수 있다면 시각적으로 유용하게 쓸 수 있을 것 으로 보였다. css,자바스크립트로는 제어가 불가능한 영역이지만 태그와 그 속성값을 이용하면 한줄만으로 위의 영역을 간단하게 색상 변경이 가능하다. 태그 안에 name속성의 값이 theme-color 인 태그에 content속성에 원하는 색상코드 값을 넣으면 위의 이미지와 같이 크롬 기반 브라우저에 한정하여 간단하게 url 영역의 색상을 변경 할 수 있다.

아래의 jsfiddle에서 같은 버튼을 중심으로 퍼지는 애니메이션을 주고싶을때 아래와 같이 처리한다. 퍼지는 버튼 - JSFiddle - Code Playground jsfiddle.net HTML 마크업 버튼 SCSS body { background: #000; } /* 버튼 요소 */ .btn { background: #fff; color: #000; font-size: 20px; width: 100px; height: 40px; border-radius: 35px; position: relative; z-index: 1; border: 0; //버튼을 중심으로 퍼질 요소 &:before { content: ""; border-radius: 35px; display: block; position: a..

출처는 아래의 북마크. 자바스크립트 배열에서 요소, 랜덤하게 아무거나 무작위 추출 함수; JavaScript Random Array Item 어떤 배열이 있을 때, 그 배열 속에 들어 있는 요소들 중에서 아무것이나 무작위로 랜덤하게 1개만 뽑아내는 함수를 만드는 소스 코드입니다. 아래의 randomItem()이라는 함수를 사용하면 됩니다. mwultong.blogspot.com 간단히 요약하자면 어떠한 배열 객체를 생성하고 그 배열속에 있는 요소,값 중에서 아무거나 무작위 랜덤으로 1개만 출력하게 하는 소스코드이다. let job = ["의사","개발자","디자이너","회계사","판매원"] function randomTest(a) { return a[Math.floor(Math.random() * a.l..

'' 는 게이지 내에서 특정 값이 어느정도인지 표현 할 때 사용한다. ex) 컴퓨터 디스크 사용량, 전체인구중 코로나 바이러스 확진자 비율 등 ''는 위와 같이 최대 값 안에서 비율이 어느정도인지 표현할때 사용해야하며, 어떠한 진행률을 나타낼때는 ''가 아닌 반드시 '' 를 사용해야한다. [ 진행률을 나타내는 '' ] [HTML5]작업의 진행률 표시줄을 나타내는 태그 ' ' 태그는 작업의 진행률 표시줄을 제공해주는 태그다. 태그,태그,가상요소, css의 포지셔닝등 복잡한 구조를 쓰지 않고 ' ' 태그 한줄이면 ui/ux적으로도 꽤나 훌륭한 표시줄을 만들어준다. 는 작 joroki.tistory.com [사용속성] 속성명 속성값 설명 form form id 요소가 포함될 하나 이상의 요소를 명시 high ..

백틱(`) 리터럴 작성 방식은 ES2015부터 생겨난 작성 방식이며 기존에 문자열과 변수를 같이 쓸때 '+'등을 사용하며 지저분했던 문자열을 훨씬 보기 좋고 간결하게 작성할 수 있게 한다. * "2곱하기3은6입니다." 라는 문자열을 출력하기 위해 기존에는 아래와 같이 작성했다. const val1 = 2 const val2 = 3 const result = 6 console.log(val1 + " 곱하기 " + val2 + " 은" + result + " 입니다"); 변수와 문자열을 섞어서 사용하기위해선 '+'가 계속해서 들어가 깔끔하지 못했으며 띄어쓰기 또한 '+' 사이에 작성된 문자열에 별개로 줘야해서 가독성이 매우 아쉬웠다. 백틱(`) 작성 방식은 아래처럼 깔끔하고 띄어쓰기 또한 편하게 작성이 가능..

position: absolute 속성과 값을 이용하여 요소를 정가운데 오도록 할때 반드시 같이 써야하는 속성으로 transform: translate(-50%, -50%)을 소개한 적이 있다. 위의 값을 적용하려는게 이미지,폰트일때 웹킷(크롬,웨일 등)계열 브라우저에서 이미지나 텍스트가 깨지거나 흐려지는 이슈사항이 있다는 것을 확인했다. 그럴때 아래와 같이 처리해준다. div { position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% + 0.5px),calc(-50% + 0.5px)); } transform: translate(-50%, -50%) 이 아닌 calc() 함수를 쓰는 것이다. transform: translate(c..