본문 바로가기

CSS🔧/반응형20

폰트크기 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.

transition: transform 반응형에서 font사이즈 애니메이션 걸릴떄 폰트에 transition: all 을 설정할 경우 PC > 타블랫 모바일로 줄어들때 애니메이션이 걸려 많이 느린액션으로 줄어든다. transition: all 0.7s; 원치않는다면 transition: transform 0.7s, opacity 0.7s; all 대신 개별속성을 부여한다. 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 / location.href 현재창 띄우기 $('#footer .select_area select').on('change', function () { console.log($(this).val()); }); $('#footer .select_area select').on('change', function () { // location.href = $(this).val(); window.open($(this).val(), '_black'); }); 빈칸이 떠버림 $('#footer .select_area select').on('change', function () { // location.href = $(this).val(); if ($(this).val()) { window.open($(this).val(), '_black'); } }); 빈칸을.. 2022. 11. 21.

미디어쿼리로 320 화면 대응하기 정상화면 320 화면으로 줄였을때 제목을 가린다. 미디어 쿼리로 높이를 잡자 360부분부터 가려지는 부분을 강제로 높이잡기 자바스크립트 if 와 같음 /* 문제있는부분에서 media 쿼리 적용 */ /* 창크기 360 이하 */ @media (max-width : 360px) { .main_vision { height: 210px; } } 예) @media screen and (max-width : 360px) and (min-width:320px) 조건설정할때 360이하일때 360 이하에서도 잘 적용이 된다. 2022. 11. 18.

아이폰 배경 fixed 이 반영안됨 pc에선 잘 보이지만 아이폰에서 배경에선 배경 fixed (스크롤 움직였을때 배경이 고정된 상태로 움직이는 ) 가 반영이안됨 이미지가 확대되고 깨짐 안드로이드는 잘 보임 /* 아이폰에선 반영안됨 */ /* background: url(../images/bg_main_vision.jpg) 50% 50% / cover fixed; */ 다른방법으로 반영하기 (아이폰대응) 방법 1 배경으로 깔아준다. 다른 섹션에 배경을 일일히 깔아주고, 현재 섹션을 배경 fixed 가 아닌 position 으로 띄우고 z-index로 맨 밑에 깔아준다. /* 아이폰에서 배경 fixed 막혀있음 */ .main_vision .bg_fixed { position: fixed; left: 0; top: 0; width: 100%;.. 2022. 11. 17.

모바일 유튜브 비율조절 모바일에서 유튜브 삽입시 데탑과 동일하게 넣었을때 깨짐 css 처리를 해줘야한다. div 로 한번 감아주고 width / height 을 100% 로 맞춘다. .main_best .youtube { margin-top: 60px; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .main_best .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 영상 비율은 16:9 이기때문에 옾이를 꽉 차게 100% 로 준다면 16 : 9 X100 16 : 900 900 / 6 = 56.25% 즉 56.25% 비율로 아래를 늘려주라는 뜻 2022. 11. 16.

이전 1 2 다음

티스토리툴바