본문 바로가기

CSS🔧/css 풀페이지 라이브러리6

풀페이지 모바일 환경에서 폰트크기 em 사용 / em의 쓰임 모바일 환경에 따라 글씨를 조절해주면 숫자부분이 깨진다. .main_about .about .number .number_list { font-size: 8rem; font-weight: 700; display: flex; /* height: 116px; */ height: 1.44em; overflow: hidden; align-items: flex-start; border: 1px solid red; } 기존에 px 로 잡혀있기 때문에 크기가 줄어들면 숫자 부분이 깨진다. 이떄 단위에 맞춰 em 으로 변경해준다. 노토산스폰체는 줄 간격이 1.44 이므로 1.44em 단위를 적용해준다. 단 크기를 줄였을때 숫자 부분이 어그러지며 82% 단위가 나오지않는다 이유는 기존 116px 로높이가 고정되어있어 어그.. 2022. 12. 21.

풀페이지 창크기 줄일시 여백 없어지는 문제점 풀페이지 사용시 창의 크기가 줄어들면 여백이 없어진다 이렇게 여백이 사라져 위에 컨텐츠와 딱 붙어버림 pc 버전에서 분기점을 두어 푸터섹션을 제외한 풀페이지 섹션에 최소 높이를 지정한다. /* pc분기점에서 섹션높이가 750이하일때 적용 */ /* 섹션중에서 푸터가 아닌것은 높이에 제한을 주겠다. */ /* 최소높이를 750으로 해야 안줄어들음 아니면 다닥다닥 붙음*/ @media (min-width:1200px) and (max-height:750px) { #fullpage .section:not(#footer) { min-height: 750px; } } 그럼 창높이를 줄여도 여백이 줄지않음 단 가로를 줄여 타브릿 . 모바일로 갔을때 풀페이지 fp-tableCell 자동속성에 따라 min-height.. 2022. 12. 21.

풀페이지 유튜브 멈춤 / IPA 활용/ data-keepplaying 풀페이지에 유튜브 동영상을 배경으로 넣으면 자동플레이가 깜빡거리며 꺼지는 현상발견 https://developers.google.com/youtube/iframe_api_reference iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers Embed a YouTube player in your application. developers.google.com 참고 https://urakasumi.tistory.com/151 fullpage.js 사용중 다른 페이지로 넘어갈시 동영상이 멈춤 data-keepplaying 속성 추가해서 해결 Your browser does not support the vide.. 2022. 12. 21.

풀페이지 적용 fullpage / 정리 풀페이지는 서브 적용x 세로단위로 한 섹션씩 적용 중요 - fullPage 2.9.7(무료버전) 연결 - 가 섹션컨테이너이므로 #container삭제 - footer가 안쪽 아래에 있어야함 - footer는 높이 100% 아니므로 .fp-auto-height 붙여줌 제이쿼리 설정 $('#fullpage').fullpage({ // 1201미만(타블렛, 모바일)일때 스크롤 활성화 responsiveWidth: 1201, // 뷰포트높이 700미만일때 스크롤 활성화 responsiveHeight: 700, }); 분기점 설정 /* PC, 높이 750이하에서 최소크기지정하여 줄어들지않게 */ @media (min-width: 1201px) and (max-height: 750px) { #fullpage .se.. 2022. 12. 20.

풀페이지 셋팅 적용/ 옵션설정 / 초기화 https://github.com/alvarotrigo/fullPage.js GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple - GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple github.com 깃헙에서 제공하는 초기화 구조를 복붙 Some section Some section Some .. 2022. 12. 20.

풀페이지 다운받기 풀페이지 4 점대 최신버전 유료는 사용 지양.. github 에서 무료 하위버전을 찾아 폴더 전체 다운받기 https://github.com/alvarotrigo/fullPage.js 또는 dist > css 파일만 찾아 다운받아준다. 다운로드 받은 파일을 작업 폴더에 붙여준다. jquery.fullpage.min.css jquery.fullpage.min.js html 연결시켜주기 2022. 12. 20.

이전 1 다음

티스토리툴바