본문 바로가기

CSS🔧95

글래스모피즘(Glassmorphism) 배경 불투명 효과 css 처리 이렇게 일반 불투명한 배경 효과에서 글래스모피즘 효과 주기 backdrop-filter: blur(10px); backdrop-filter 추가 2023. 12. 5.

텍스트 밑줄효과 text-decoration: underline; // 밑줄 text-underline-offset: 4px; // 밑줄위치 text-decoration-thickness: 1px; //밑줄굵기 일반 텍스트에 밑줄주기 2023. 11. 3.

선택자 nth-child 활용 기본 선택자:nth-child(n) // n번 선택자:nth-last-child(n) //뒤에서 n번째 선택자:nth-child(2n) // 2의배수번째 2,4,6,8.......번째들 모두 선택자:nth-child(odd) //홀수번째 모두 선택 선택자:nth-child(even) //짝수번째 모두 선택 범위 선택자:nth-child(-n+6) //1번부터 6번까지 선택자:nth-last-child(-n+6) //뒤에서 1번부터 6번까지 선택자:nth-child(n+6) //6번부터 전부 선택자:nth-last-child(-n+6) //뒤에서 6번쨰 전까지 전부 (10개라면 5개) 선택자:nth-child(n+2):nth-child(-n+4) //2번 부터 4번 전까지 2023. 11. 3.

애니메이션 숫자 카운트 돌아가기 이렇게 숫자가 카운트 자동으로 돌아가게 하기 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.

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

이전 1 2 3 4 ··· 8 다음

티스토리툴바