본문 바로가기

분류 전체보기235

zen 젠코딩 방식 한번에 코드입력 ul>li*3 ul 태크안에 li 태그 입력시 ul>li*3 젠코딩 방법을 쓰면 한번에 처리가능 p 하고 tap 키를 누르면 자동완성이된다! link 태그도 더 쉽게 젠코딩으로 가능! css 젠코딩 mt50 입력시 margin-top 바로생성 숫자 뒤에는 단위를 입력하지않아도 px 로 자동인식 .article { margin-top: 50px; mt50 } 2022. 12. 26.
애니메이션 숫자 카운트 돌아가기 이렇게 숫자가 카운트 자동으로 돌아가게 하기 html 태그를 숫자 왼쪽과 오른쪽으로 나누어 class 를 공통으로 변경할수 있게 지정한다. 멈추는 숫자가 맨 위로 올수 있도록 차례대로 나열해준다. display flex 으로 배치해주면 아래로 쭉 나열됨 overflow hidden 으로 감춰준다. @keyframes moveNumber { /* transform: translateY(calc(-100% + 116px));*/ /* em 은 폰트크기를 따라가기 때문에 모바일에서 같이 줄어들도록 조정*/ /* 폰트크기를 기준으로 할 경우 */ 0% { transform: translateY(calc(-100% + 1.44em)); } 100% { transform: translateY(0); } } .mai.. 2022. 12. 21.
풀페이지 모바일 환경에서 폰트크기 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.
자바스크립트 유튜브 배열예시 url 로 변수를 만들어 배열을 나열해준다. $(document).ready(function () { // 동일 데이터타입을 저장할 경우 배열 var url = ['https://youtu.be/KSQJTSsUoDM', 'https://www.youtube.com/embed/rCim2a9h69M', 'https://www.youtube.com/embed/dIuArPmla2M']; console.log(url[0]); }); 유튜브 링크를 배열로 링크 나열을 해준 후 콘솔로 찍어보면 나오는것 확인 제이쿼리로 누르면 영상 나오게 하기 $(document).ready(function () { // 동일 데이터타입을 저장할 경우 배열 var url = ['https://youtu.be/KSQJTSsUoDM', .. 2022. 12. 19.
자바스크립트 스코프 스코프란 ? 전체적인 범위 안에서 지역변수로 만드는것 // 함수외부의 변수는 전역변수 var obj = '안녕'; console.log(window.obj); function fn2() { var obj = '안녕'; // 지역변수 console.log(obj); // 함수로감아줬기떄문에 콘솔 확인시 밑의 안녕이 나옴 } fn2(); 위에 obj 변수가 사용됬어도 지역변수를 만들어 함수안에 가두면 또 사용이 가능 둘이 중복되지않는다. function fn2() { var obj = '안녕'; // 지역변수 console.log(obj); // 함수로감아줬기떄문에 콘솔 확인시 밑의 안녕이 나옴 function innerFu() { console.log(obj, '==='); var obj = 'hi'; }.. 2022. 12. 19.
제이쿼리 요소 바깥쪽 클릭시 창닫기 length 판단 저렇게 모달창이 토글버튼으로 뜨면 다시 토글을 눌러줘야만 창이 꺼지기 때문에 다른곳을 클릭해도 꺼지지 않는다. 이런식으로 다른 요소와 겹쳐나옴 이럴때 제이쿼리를 이용하여 꺼주기 lanth 로 판단해 꺼주기 document 즉 window의 하위객체인 html 문서 전체를 클릭해줄때 끄게 해준다. e.target 을 찍으면 객체의 요소가 나온다. lang_wrap 이 있는지 없는지 판단해보자. consol 로 확인해보면 맞으면 true 1 아니면 false 0 방법1 요소의 부모를 판단해 꺼주기 $(document).on('click', function (e) { console.log($(e.target).parent('.lang_wrap')); if (!$(e.target).parent('.lang_wr.. 2022. 12. 16.
스크롤바 없애기 $('body').addClass('on'); 모바일 환경에서 or 타블렛 gnb 메뉴 모달창이 나올때 스크롤바를 없애주고 싶다면 /*********************** 공통스타일 *************************/ /* body에 높이가 없어도 hidden이 걸리면 스크롤바가 사라짐 */ /* body.on {overflow: hidden;} */ /* iOS 사파리는 페이지최상단에서만 hidden이 걸리므로 페이지 위로 올라오게함 */ body.on { overflow: hidden; position: fixed; left:0; top:0; width:100%; } css common 에 공통스타일로 들어가있기때문에 제이쿼리에서만 on 클래스를 걸어준다. // 타블렛모바일 $('#header .m_btn_close').hide(.. 2022. 12. 16.

티스토리툴바