반응형 유튜브 비디오 만들기

데모 페이지Github 위 비디오처럼 CSS로 요소를 특정 비를 유지하며 크기가 줄어들도록 하실 수 있습니다. .resvid { position: relative; width: 100%; padding-bottom: 56.25%; margin: auto } .resvid iframe { position: absolute; width: 100%; height: 100% } .resvid.alt { width: 35%; padding-bottom: 62.22% } .resvid.square { width: 70%; padding-bottom: 70% } .resvid.old { width: 80%; padding-bottom: 60%...

3년 전

[CSS] 드로어(Drawer) 만들기

퓨어 CSS로 만든 드로어입니다.input과 label, 그리고 CSS 선택자인 ~만 적절히 조합하면 요소를 클릭하면 다른 요소에 class 더하고 빼는 수준의 작업은 CSS만으로도 할 수 있습니다. 먼저 CSS 선택자인 ~ 는 elem1 ~ elem2 와 같은 방식으로 사용하며, elem1 뒤에 있는 elem2 모두를 선택합니다.여기서 중요한 건, elem 1과 elem 2의 부모는 같은 요소여야 합니다. 당연히 label::before를 클릭해도...

3년 전

[자바스크립트] 로또 추첨기

우연히 새로 발견한 개발자 커뮤니티를 둘러보다 발견한 프로젝트에서 아쉬운 점이 보여 후다닥 만들어봤습니다. 개선하고 싶었던 점은 1 - 버튼을 연타하면 애니메이션이 진행되는 중에도 결과가 바뀐다.2 - 새로운 숫자를 부여받을 때 조금 더 역동적인 애니메이션이 표시됐으면 좋겠다. 이 두 가지 사항입니다. let tmp = 1; let numbers; function decryptEffect(element, time) { const effect = setInterval(() =>...

3년 전

HTML5 Canvas로 밤하늘 그리기

https://codesandbox.io/s/z68y1012yl 참고한 글 https://github.com/marshallku/canvas-night-sky 깃허브 땐나의 계절인 여름도 왔고, 호텔 델루나 보다 보니 보름달이 뜬 밤하늘이 예뻐서 인터넷 뒤적이며 만들어 봤습니다.어디에 써먹을지 고민을 좀 해봤는데, 막상 써먹을 데가 없는 게 아쉽네요. ㅠㅠ HTML에 nightsky란 ID를 지닌 canvas 추가하시고 아래 스크립트만 붙여 넣으셔도 작동합니다. const width = window.innerWidth, height = window.innerHeight, stars = createStars(width, height, 30),...

3년 전

[워드프레스] 하위 카테고리를 포함한 카테고리의 포스트 개수 구하기

워드프레스에서 카테고리의 포스트 개수를 표현하고 싶을 때 $category->count 혹은 $category->category_count 를 사용하면 해당 카테고리의 포스트 개수가 출력됩니다. 하지만, 위와 같은 코드는 하위 카테고리의 포스트는 세지 않고, 순수하게 해당 카테고리의 포스트 개수만 출력합니다. function postCount($id) { $count = get_category($id)->count; foreach (get_categories(array('child_of' => $id)) as $category) { $count += $category->count; } return $count; } function.php에 위 함수를...

3년 전

[워드프레스] 플러그인 없이 Infinite Scroll 사용하기

Infinite Scroll(무한 스크롤)이란 페이지의 이동 없이 스크롤을 내리는 것만으로 다음 페이지의 내용을 불러오는 것을 의미합니다. 제 블로그의 프론트엔드 카테고리 등에 가보시면 라이브 데모를 확인해보실 수 있습니다. 테마 수정하기 PHP <?php get_header(); ?> <main id="main" class="postList<?php echo postListStyle() ?>"> <div class="gutter-sizer"></div> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <a class="link_post<?php...

3년 전

블로그에 투 두 리스트 추가하기

블로그 등의 html, css가 수정 가능한 웹 사이트에 할 일 목록을 추가하는 방법입니다.블로그에선 포스트 수정이라는 좋은 수단이 이미 존재하니, html과 css만 작업했습니다. HTML <div class="m_todo"> <h1>할 일 목록</h1> <ul> <li> <span>장보기</span> <div class="checkbox"></div> </li> <li done> <span>호텔 델루나 시청</span> <div class="checkbox"></div> </li> </ul> </div> CSS .m_todo { margin: 0 auto; background: #4DD0E1; padding: 10px; border-radius:...

3년 전

[자바스크립트] 자동으로 글자 적고 지우기

How to code 위 예시처럼 글자들을 자동으로 타이핑하고 지우는 스크립트입니다. let i = 0, j = 0; const textArray = ["HTML", "CSS", "Javascript"], speed = 100, target = document.getElementById("type"); function txtnum() { j == textArray.length - 1 ? j = 0 : j++ } function type() { i < textArray[j].length ? (target.innerHTML += textArray[j].charAt(i), i++,...

3년 전

바닐라에서 jQuery slideToggle 구현하기

jQuery의 slideToggle()이란 함수를 바닐라 자바스크립트로 구현하는 방법입니다.최소한의 코드로 동작하게 해뒀으며, jQuery의 slideToggle과는 달리 대상 요소만 지정하고 애니메이션 진행 시간은 자바스크립트에서 작성하지 않습니다. function toggleSlide(element) { let a; 0 === element.offsetHeight ? ( element.style.height = "auto", a = element.offsetHeight, element.style.height = 0, void element.offsetHeight, element.style.height = `${a}px` ) : element.style.height = 0 } 함수를 실행하면 요소의...

3년 전