Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

2021/08/30 2

OWL Carousel로 슬라이드를 간편하게 만들기

안녕하세요 :) 오늘은 오픈소스인 그누보드에 기본적으로 내장되어 있는 "owlcarousel" 플러그인 사용법을 알아보도록 하겠습니다. 만약에 그누보드에 없거나 별도로 개발을 하실 경우는 https://owlcarousel2.github.io/OwlCarousel2/ 사이트에서 직접 다운로드를 받아 사용하실 수 있습니다. :) 우선 그누보드 기준으로 플러그인의 JS 위치와 소스 위치를 알려드리겠습니다. 위에 보이는 사진처럼 owl 플러그인은 js 폴더안에 "owlcarousel" 이름으로 있습니다. 그누보드에서는 "head.sub.php"파일에태그안에서 확인해보시면 됩니다. 만약 구버전이거나 적용이 되어 있지 않다면 위 사진과 같이 적용을 하시면 되겠습니다. 모든 준비가 완료되었다면 실제 슬라이드를 적용..

Web/Plugin 2021.08.30

반응형 폰트 사이즈 단위 em? rem? 뭐가 다를까? | css font-size 상대 단위

오늘은 반응형 사이트 제작할 때 많이 쓰는 size 단위인 em, rem에 대해서 알아보도록 하겠습니다. 보통 폰트사이즈를 12px 요렇게 고정 크기 픽셀 단위로 설정하지만 em과 rem은 배율이라고 보시면 되요 1.2em 1.2rem은 1.2배라고 보시면 되요~ 근데 배율이면 기준이 있어야하자나요? 도대체 어떤 요소의 1.2배란 말일까요? 여기서 em과 rem은 서로 다른 길을 갑니다. em은 상위 요소(부모)가 기준이 되구요 rem은 최상위 요소가 기준이 됩니다. rem의 뜻은 최상위를 뜻하는 root의 r을 붙여줘서 r + em이 된답니다. 상위? 최상위? 상위와 최상위의 차이가 어떻게 다른지는 예제를 통해서 한번 알아보도록 하겠습니다. EM의 글자크기 REM의 글자크기 위 코드를 실행하게 되면 다..

Web/CSS 2021.08.30