프론트 엔드 개발 기록

figcaption 내부에 h태그나 p태그 사용은 가능하다! [참고] https://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/

최근에 윈도우7에서 윈도우10으로 업데이트 했는데, 업데이트 후 블루투스가 연결되지 않았다. 내 상황은 윈도우 설정 > Bluetooth 및 기타 디바이스 > Bluetooth 켬 / 끔 토글버튼 없음 장치 관리자 > Bluetooth항목 존재하지 않음 블루투스 동글 이용하여 연결. intel 드라이버 새로 깔았다가. 윈도우 업데이트 해봤다가. 동글 드라이버 또 찾아서 깔아보다가. 난리를 쳤는데 너무 간단하게 아래 방법대로 하니까 됐다. https://answers.microsoft.com/en-us/windows/forum/all/csrbtport01-not-working-with-10/d2e3d715-5b17-41bf-af27-8e5ec4c744cc

로컬에서 ajax 를 시도하니 크롬에 이렇게 오류가 떴다. "XMLHttpRequest로 저 경로에 접근하는건 CORS 정책에 의해 막혀있다. Cross origin 요청은 protocol schemes에서만 지원된다. (http, data, chrome, chrome-extension, https)" 검색으로 다른 방법들도 시도 해 보았지만, 로컬 서버를 생성하는 편이 가장 좋다. 로컬 서버 생성은 IIS 로컬 서버 라는 키워드로 검색하면 많은 내용들이 나오니 참고하면 된다. 아주 간단하다. CORS(Cross-Origin Resource Sharing)와 관련된 더 딥한 내용은 아래 경로들에서 공부할 수 있다. https://brunch.co.kr/@adrenalinee31/1#comment http..

(?=특정텍스트) 컨텐츠를 10개 넘게 하드코딩을 해야 하는 업무가 생겼다. 컨텐츠 안에 들어가는 디자인들을 개별 컴포넌트로 개발할 예정이었으나, 기간이 촉박하게 되어 우선 하드코딩으로 작업해서 오픈 하기로 했다. 자료 수급도 컨텐츠마다 기간이 다르게 들어와서 먼저 수급이 되는 컨텐츠 부터 작업을 진행하다보니, 중-후반부터는 기존에 작업해 놓았던 소스를 끌어와서 이미지 경로와 텍스트만 교체하는 방식으로 진행되었다. 위 방식대로 레이아웃부터 잡고 나면 이미지 경로들이 뒤죽박죽 되어있다. 서로 다른 경로들을 일괄 선택해서 하나의 경로로 수정하고, 이미지 제목은 하나하나 바꿔줘야 하기 때문에 선택하기 쉽게 바꾸고 싶었다. 이미지명을 모두 통일하고 뒤에 넘버만 붙이면 제일 좋겠지만 이미지명은 내가 정하는 것이 ..

한 페이지에 여러개의 swiper 슬라이더를 넣어야 할 때. new Swiper를 다른 변수로 반복해서 선언하면 되긴 하지만, 그렇게되면 코드가 너무 지저분해진다. 아래처럼 컨트롤러들에 각각 다른 클래스 명을 주고 각각 슬라이더 컨트롤러로 지정해쥬면 된다. 작업한 소스 참고!

2018년 9월 25일 전까지는, rel파라미터를 사용해서 노출을 선택할 수 있었다. 그러나 그 이후 정책이 바뀌어서 노출되지 않게 설정 할 수는 없고, 같은 채널의 비디오만 리스트에 뜨는 옵션으로 바뀌었다고 참고 사이트에서 확인했다. 참고 : https://stackoverflow.com/questions/52962114/how-to-remove-more-video-from-youtube-embed 그런데, 직접 테스트를 해보니 실제로 같은 채널의 비디오라기 보다는 더 적은 양의 비디오들이 관련 영상 리스트에 떴다. 뭔가 싶어 추가로 다양한 설정이 되어있는 영상으로 테스트를 진행해 보니, 관련 영상 리스트는 우리가 사이트에 업로드 하고자 하는 영상이 포함된 플레이 리스트가 노출되는 것으로 확인됐다. 플..

이미지 썸네일 클릭 시 갤러리용 팝업이 뜬다. 갤러리용 팝업에 swiper가 들어있어서 썸네일에 맞는 이미지가 swiper에 떠야 한다. pager를 클릭하도록 하고 싶었지만 최초 1회는 아직 pager가 로드되지 않는 상태라서 기능이 되지 않았다. 검색 해 보니 지원하고있는 method가 이미 있다. var slider = new Swiper($("#modal_detail [data-slider='type02']"), { slidesPerView: '1', centeredSlides: true, loop: true, loopAdditionalSlides: 1, grabCursor: true, observer: true, observeParents: true, effect: 'coverflow', cov..

/* 앞 숫자를 뒤 숫자로 나누고 남는 값을 의미한다. 7 % 3 = 1 10 % 2 = 0 9 % 5 = 4 */ function odds2(l){ for (let i=0; i