본문 바로가기

분류 전체보기235

이미지 비율 맞추기 .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. 6.
슬라이더 반응형 비율계산으로 칸수 조절하기 breakpoints PC버전에서 3칸으로 보이는 슬라이더가 줄어들떄 칸수를 변하게 하기 제이쿼리 슬라이더 분기점 별로 칸수를 줄어들게 하는 메서드 breakpoints slidesPerView 칸수를 보이는걸 적용하자 var liveSlider = new Swiper('.live_slider', { slidesPerView: 3, spaceBetween: 40, pagination: { el: '.swiper-pagination', }, // 분기점 breakpoints: { // 1200이하 1200: { slidesPerView: 2, }, // 767 이하 767: { slidesPerView: 1, }, }, }); 가변처리가 되어있기 때문에 2칸으로 줄으면 이미지가 깨진다 이미지의 크기가 비율에 맞춰 늘어날 수 있.. 2022. 12. 5.
제이쿼리 gnb 아코디언 전체메뉴 만들기 메뉴버튼 // 모바일메뉴 // 열기 $('#header .header_top .btn_open').on('click', function (e) { e.preventDefault(); $('#header .m_gnb_area').addClass('on'); $('#header .dimmed').show(); }); // 닫기 $('#header .m_gnb_area .btn_close, #header .dimmed').on('click', function () { $('#header .m_gnb_area').removeClass('on'); $('#header .dimmed').hide(); }); 아코디언 확인하기 $(this).parent().toggleClass('on').siblings().remo.. 2022. 12. 2.
transition: transform 반응형에서 font사이즈 애니메이션 걸릴떄 폰트에 transition: all 을 설정할 경우 PC > 타블랫 모바일로 줄어들때 애니메이션이 걸려 많이 느린액션으로 줄어든다. transition: all 0.7s; 원치않는다면 transition: transform 0.7s, opacity 0.7s; all 대신 개별속성을 부여한다. 2022. 12. 2.
선 위에서 아래로 반복하기 transform-origin 방법1 선을 위애서 아래로 늘어나는 크기 조절 다시 위로 올라가는 반복 애니메이션 transform-origin: top 스케일 y를 0-1로 아래로 늘리고 transform-origin: bottom 스케일 y를 1-0으로 줄어들게한다. @keyframes scaleLine { /* 시작위치 위로 바꾸고 고정*/ 0% { transform-origin: top; } 49% { transform-origin: top; } /* 아래로 내리리며 위치 고정 */ 50% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } 0-49% 까지는 위에서 내리는것 50-10.. 2022. 12. 2.
980vh 창높이에 비례해서 컨센트 요소 위치 정하기 평균 창 뷰포트 크기 980 980vh 일때 230px 만큼 이동 %? 980:230 : 100 x 23.46 2022. 12. 2.
반응형 반응형 크로스브라우징 px 크롬,엣지,모바일크롬,모바일사파리 IE11 지원종료(2022.06) 후 크로스브라우징 안하는추세 (반응형 화면테스트시 창을 줄일때 가로스크롤이 나오면 안됨) 데탑 미디어쿼리 분기점 설정 - 이론적으로는 min-width를 사용하여 모바일부터 pc로 코딩하는것이 좋으나 데탑디자인이 먼저 나오는경우가 많으므로 max-width 사용하여 큰화면에서 모바일로 내려가며 코딩 - 큰화면부터 시작할경우 모바일장치에서 위에서 아래로 모두 읽음 모바일로 접속을 했을때 min-width 를 주면 타블렛이나 pc 보다 좀더 빠름 분기점 설정 - 타블렛분기점은 1024, 1200이 주로 사용 컨텐츠 내용이 많은경우(헤더) 요소별 분기점 1280 따로사용 - 디자인 그리드가 1600, 1400처럼 커.. 2022. 11. 30.
반응형 font설정 vh / rem / vw (창기준 폰트 단위) 반응형 페이지에 사용하는 경우 vh / rem 쓰임 vh 창기준에서 포이는 폰트크기 비주얼 제목처럼 큰 경우 font-size에 사용하면 좋다 - font-size, margin, padding에 vw단위 사용하면 창크기에 따라 조절되지만 실제디자인과 폰트크기가 달라지므로 사용자제 - 매우 큰 제목등에만 font-size에 vw 일부 사용가능 - vw사용시 320이하로 창이 줄어도 계속해서 작아짐(창크기가 기준이므로) rem 브라우저 폰트설정에 의해 폰트크기를 키울경우 사용 em 비율환산법 16px : 0.3em = 100 : 0.0187 1.8% -0.018em 창크기에 따라 폰트 크기가 달라질수 있게 font-size를 vw 로 설정 폰트사이즈 구하기 창넓이가 768 일때 폰트가 42px 이면 vw는.. 2022. 11. 29.
font 사이즈 rem 적용하기 브라우저 기본 사이즈 확인 브라우저 기본폰트 사이즈 16 폰트사이즈를 10px 로 초기화 시킨다. html { font-size: 62.5%; } 적용예 2022. 11. 28.
반응형제작하기 레이아웃구성 반응형 사이즈 구성 사이즈 실제사이즈 (최소크기맞추기) 시안사이즈 (실제 최소크기 X2) 분기점 모바일 360 720 768이상부턴 태블릿으로 인식 @media (max-width:767px) 태블릿 768 1200 데탑 1200 1200 or 1280 / 1920 (1400/1600 지양 : 펼쳐진 디자인으로 내용구성이 어려움) 640px 창대응을한 이상한 단위 데탑에서 분기점을 기준으로 모바일 / 태블릿을 대응할 수 있게 분기점 설정을 해준다. 이때 제이쿼리 @media 로 max-width를 설정 flex ,position 등 레이아웃에 맞게 적용 예제1. 예제와 같이 각레이아웃이 분기점 별로 변경될수있게 min-width 단위 사용 모바일 타블랫 pc /* 모바일 분기점 잡기 순서변경 안됨*/ @.. 2022. 11. 28.
반응형 font-size rem 단위 rem단위 기준 - root(html) em: html의 폰트크기를 기준으로한 상대크기 - em은 부모에서 상속받은 폰트크기가 기준 (각각의 부모에 상속되어 부모의 크기에 따라 실제 폰트가 다 달라지기 때문에 사용권장안함 단 rem은 html 상속받기 때문에 em 보단 사용가능) 사용법 - rem단위사용시 브라우저 접근성메뉴를 통한 폰트크기 확대기능 사용가능(저시력자) - 레이아웃에는 사용하지않으며 font-size만 사용할것(레이아웃에 사용시 화면이 깨질수있음) 지정법 - html {font-size:62.5%;} 브라우저 기본값 16px -> 10px로 환산 - body {font-size: 1.6rem;} 디자인의 폰트기본크기 지정 - .gnb>li>a {font-size:1.5rem;} font-.. 2022. 11. 28.
select박스의 값에따라 change 로 값넣어주기 / 버튼 켰다 끄기 조건 .search_area .search_top input[type=text] 최초 value는 '전복죽' select change 이벤트시 value 가 BF101 = 전복죽 value 가 BF102 쇠고기야채죽 value 가 BF104 광양식바싹불고기 반상 value 가 BF105 양곱창뚝배기 switch 문 사용 var searchInput = $('.search_area_wrap .search_top input[type=text]'); searchInput.val('전복죽'); $('.search_area_wrap .search_top .select_wrap select').on('change', function () { var _val = $(this).val(); console.log(_va.. 2022. 11. 28.

티스토리툴바