CSS 기능 2

[라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 "YTPlayer" 플러그인입니다. 유튜브 iframe은 모바일에서 자동재생, 자동바 숨김이 안되기 때문에 이런 경우에 활용가능한 라이브러리(플러그인)입니다. 01. 일반 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer) by TytanLee (@TytanLee) on CodePen. 일반적인 활용을 하면 html파일에서 문서가 지저분해 보여서 html에서 설정한 속성값을 스크립트로 넘겨서 html파일을 깔끔하게 만들 수 있습니다. 깔끔하게 정리한 문서는 아래를 참고해주세요. 02. 코드 간소화 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화 by TytanLee (@..

[HTML/CSS]a태그 클릭시 섹션 부드럽게 넘어가기(scroll-behavior)

안녕하세요 :) 무택입니다🧔 오늘은 간단하지만 인풋대비 좋은 아웃풋을 낼 수 있는 기능을 가져왔습니다. 홈페이지에서는 잘 사용하지 않지만 원페이지로 되어있는 있고 페이지의 길이가 긴 경우에 사용하기 좋은 기능입니다. 바로 scroll-behavior 설정입니다. See the Pen [CSS]a태그 클릭시 섹션 부드럽게 넘어가기(scroll-behavior) by TytanLee (@TytanLee) on CodePen. 위처럼 html에 'scroll-behavior: smooth;' 값을 주면 페이지 전체에 a태그 클릭 시 부드럽게 이동하는 효과를 적용할 수 있습니다. 서치 하다 보니 옛날에는 js라이브러리를 이용해서 구현했던 것 같은데 지금은 위 기능으로도 충분히 좋은 ux를 적용할 수 있으니 시대..