본문 바로가기

분류 전체보기235

TOP 버튼 제이쿼리 scrolltop 정리 탑버튼을 누르면 페이지 상단이동 $() 란? 제이쿼리 선택자 함수이다. 제이쿼리객체가 리턴이 된다 {객체} $('#footer .top_wrap .btn_top').on('click', function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 500); }); 객체표현법 {} 는 객체이다. .animate 의 객체안에 { 속성:값 객체안에 객체 배열안에 배열 다 가능 } $('html, body').animate({ scrollTop: 0, border: '2px solid red', width: 1000, }); {} 객체 표현법으로 추가 css 속성값들을 적을 수 있다. $('html, body').animate( { s.. 2022. 12. 15.
dl, dt, dd 구조 (제목. 내용하나이상) dl 은 dt dd 가 한가지 이상씩 있을때만 dl, dt, dd 를 사용한다. 제목 > 내용구조일떄 dl 안 div 불가. dd, dt 안에 div 가능 넥슨게임즈 SEOUL 서울특별시 강남구 남부순환로 2621 디앤오 강남빌딩 5층 넥슨게임즈 PANGYO 경기 성남시 분당구 판교로 256번길 25 판교 테크노벨리 2022. 12. 15.
폰트크기 vw 비율계산 분기점 별로 폰트를 다르게 주면 크기가 확 변하므로 창크기별 대응할수 있게 font rem 적용 방식을 vw 로 비율계산 해주어 일일히 적용해준다. 타블렛과 모바일 기준이 다르기 때문에 vw 적용시 분기점마다 대응해줘야한다. 아니면 하염없이 줄어들기 때문에 권장하지않음.. 2022. 12. 12.
플렉스구조에서 이미지를 오버해서 배치할때 flex-shrink: 0; 디자인으로 봤을때 전체 1280px 크기보다 오버해서 이미지를 배치해줬다. 먼저 텍스트와 이미지를 플랙스 구조로 좌우 정렬해준다 display: flex; 그리고 텍스트 부분과 이미지를 비율에 맞춰 배치 시켜준다. 텍스트 /* 1280:550=100:x 42.96*/ /* 1280px 전체 크기에서 909이미지 만큼 튀어나가게 */ 이미지 /* 1280:909 = 100:X * 71.01 %/ 그럼 부모의 inner 안으로 들어가는데 원래 디자인 시안처럼 밖으로 나갈수 있도록 조정해보자 기존 플랙스 구조에서 쉬링크가 자동적용되므로 쉬링크를 꺼주자 쉬링크 꺼주기 flex-shrink: 0; 그럼 밖으로 튀어 나가는것 확인 하지만 줄어들면 다시 이미지가 짤리지 않고 나와야하기때문에 1650px분기점을 한번 .. 2022. 12. 12.
스와이퍼 슬라이더 제이쿼리 설정코드 정리 기본 설정 slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수 spaceBetween : 6, // 슬라이드 사이 여백 loop : false, // 슬라이드 반복 여부 loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정 pagination : false, // pager 여부 autoplay : { // 자동 슬라이드 설정 , 비 활성화 시 false delay : 3000, // 시간 설정 disableOnInteraction : false, // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음 }, navigation: { // 버튼 사용자 지정 nextEl: '.swiper-bu.. 2022. 12. 9.
스와이퍼 슬라이더 - 페이지네이션(pagination) 숫자 커스텀 스와이퍼 슬라이더의 페이지네이션과 숫자 부분을 커스텀 해보자 . 이너가 작아진 이유? position: absolute; 줄어드니까 max-width: 1280px; 여도 이너가 작아진다. width: 100%; 설정한다. 그럼 이너가 100% 꽉 찬다 페이지네이션 타입을 프로그래스 바로 변경 (길게) pagination: { el: '.swiper-pagination', type: 'progressbar', }, 슬라이더의 선택자가 프로그래스바로 변경된것을 확인하고 class 명을 가져온다 .main_slider .swiper-pagination-progressbar { position:relative; background: rgba(255, 255, 255, 1); height: 10px; } 포인트.. 2022. 12. 9.
슬라이더 비율에 맞춰 크기조정할때 vw 가로가 100% 잡혀있으니 높이를 vw 로 잡으면 부모의 가로 높이 대비 비율로 창크기를 설정할수있어서 편리하다 이런 큰 비디오를 .main_slider { border: 5px solid red; /* 가로대비 높이 설정 35%조정*/ height: 35vw; } 가로 대비 비율에 맞춰 35% 만 보이게 조정 *단 창을 줄였을떄 영상이 같이 줄어드는게 아니라서 밀려남 .main_slider video { width: 100%; } 그럼 하위요소 비디오에 width:100% 높이만큼 줄어들게하자 그럼 비율에 맞춰 같이 줄어드는 모습 단 영상의 높이가 높기 때문에 다른 부분을 잘린다... 이부분 은 어쩔수없지만 가운데만 보여주게 해주자 height: 100%; 높이를 고정해주고 .main_slider vi.. 2022. 12. 9.
스와이퍼슬라이드 비디오 첫장면부터 재생하기 slideChangeTransitionStart 슬라이더에 들어간 비디오를 슬라이드를 넘겼다가 다시 돌아왔을때 처음부터 재생되도록 해보자 html 코드 연결 video 소스 코드와 autoplay 등 태그 삽입 스와이퍼에서 코드 찾기 var swiper = new Swiper('.main_slider', { loop: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', }, autoplay: { delay: 3000, }, on: { slideChangeTransitionStart: function () { console.log($('.main_slider .swiper-slide-active video').attr('src')); },.. 2022. 12. 9.
fontawesome CDN무료버전 사용하기 fontawesome 5 을 설치하고 다운로드 받으려면 메일을 입력해야한다. 대신 이 링크에서 설치버전 다운로드 가능 5.9.0 을 받아보자 6버전도 가능! css 주소를 html 파일에 연결 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css 버전 5 의 아이콘 검색 https://fontawesome.com/v5/icons Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 폰트.. 2022. 12. 8.
아이폰 플랙스 안먹을때 (flex 이슈) 플렉스 구조일때 하위 메뉴를 플렉스 아이템으로 인식하면서 몇 아이폰 기종에 text-indent: -9999px; 가 적용이안됨 인스타그램 유튜브 인스타그램 유튜브 2022. 12. 7.
파비콘 돌아가게 만들기 ( 배열 or 변수) 이미지 폴더에 favicon 이미지여러장을 넣어준다. html 파비콘 지정 ?v=1 제거가능 여기선 실시간을 보여주는게 의미가 없기때문 제이쿼리에서 설정해주기위해 id 부여 제이쿼리 지정 attr 문자로 이름을 넣어서 href를 가져온다. console.log($('#favicon').attr('href')); 방법 1. 배열로 설정해보기 $(function () { // attr 문자로 이름을 넣어서 href를 가져온다. // $('favicon').attr('href'); var faviconPath = [ 'images/favicon/favicon_logo_01.ico', 'images/favicon/favicon_logo_02.ico', 'images/favicon/favicon_logo_03.i.. 2022. 12. 7.
이미지 비율 맞추기 .main_event .event .img_wrap img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 0.5s; } .main_event .event .img_wrap img { position: absolute; left: 50%; top: 50%; height: 100%; transform: translate(-50% , -50%); } 2022. 12. 7.

티스토리툴바