반응형 사이트 만들기 : 필터 이펙트, 비디오, 사이드 콘텐츠

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 91

---

Review


 

 

 

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 91

 

<필터 이펙트>

 

.square a:nth-child(1):hover img {
  filter: blur(2px);
}

.square a:nth-child(2):hover img {
  filter: brightness(50%);
}

.square a:nth-child(3):hover img {
  filter: contrast(10%);
}

.square a:nth-child(4):hover img {
  filter: grayscale(100%);
}

.square a:nth-child(5):hover img {
  filter: hue-rotate(120deg);
}

.square a:nth-child(6):hover img {
  filter: invert(100%);
}

.square a:nth-child(7):hover img {
  filter: opacity(10%);
}

.square a:nth-child(8):hover img {
  filter: saturate(10%);
}

.square a:nth-child(9):hover img {
  filter: sepia(120%);
}

.square a:nth-child(10):hover img {
  filter: sepia(120%) hue-rotate(120deg);
}

 

0

 

 

포토샵으로 작업하는 것처럼 CSS를 이용하여 블렌드 이펙트를 줄 수 있다.

 

 

 

 

---

 

 

 

<유튜브 동영상 다운로드하는 방법>

 

1. 4K Video Downloader 설치

 

https://www.4kdownload.com/-arokg/ko/video-downloader

4K Video Downloader | PС와 macOS, Linux용 무료 Video Downloader

 

다운받으려고 하는 유튜브 주소를 복사한 후 이 프로그램을 설치해서 주소를 붙여넣기 하면

원하는 해상도를 선택하고 다운 받을 수 있다.

 

 

2. 유튜브 페이지에서 링크 앞에 ss 라고 입력한 후 Enter

 

만약 실제 사이트 주소가

"https://www.youtube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf"

라고 가정하면,

"https://www.ssyoutube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf"

www. 뒤에 ss를 입력하고 엔터를 눌러주면

 

 

 

이런 화면이 나타난다.

저기서 초록색으로 된 다운로드 버튼을 누르면 된다 !

 

 

---

 

 

<article class="column col6">
     <h4 class="col_tit">Video</h4>
     <p class="col_desc">반응형 영상을 보여주는 영역입니다.</p>
     <!-- video -->
      <!-- <video autoplay="autoplay" controls="controls" loop="loop">
       <source src="img/video.mp4" type="video/mp4">
       </video> -->
       <div class="video">
           <iframe
           src="https://www.youtube.com/embed/_a5JYdYMmPo"
           title="YouTube video player"
           frameborder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
           allowfullscreen>
           </iframe>
       </div>
      <!-- //video -->
</article>
<!-- //col6 -->

 

 

비디오 파일을 다운받는 방법도 있고, 그냥 유튜브 링크를 복사해서 iframe 태그를 이용해 삽입하는 방식도

있다. 둘 중 편한 것을 이용하면 된다.

 

 

나는 iframe 태그를 이용해 비디오를 삽입하는 방식을 이용했다.