본문 바로가기

CSS50

filter: drop-shadow .tri{position: absolute; left:100px;border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: 60px solid #0f0;filter: drop-shadow(0 0 10px #0f0) drop-shadow(0 0 30px #0f0)} 2024. 10. 18.
mouse move .box span {position: absolute; display: block; width: 0; height: 0;border-radius: 50%;background: #fff; transition: 0.1s;transform: translate (-50%, -50%); mix-blend-mode: difference;}.box:hover span {width: 300px;height: 300px;}document.querySelectorAll('.box').forEach(function (box) { box.addEventListener('mousemove', function(e){ let x = e.pageX - box.offsetLeft; let y = e.pageY - box... 2024. 10. 17.
나눔스퀘어 네오 폰트, 웹폰트로 사용법 https://campaign.naver.com/nanumsquare_neo/#introduce 네이버 나눔스퀘어 네오문장을 더 돋보이게, 네이버의 새로운 브랜드 폰트campaign.naver.com 사용법아래 둘중에 하나 선택.head혹은 css@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css'); 폰트 패밀리 적용font-family: 'NanumSquareNeoLight';font-family: 'NanumSquareNeo';font-family: 'NanumSquareNeoBold';font-family: 'NanumSquareNeoExtraBold';font-family: 'NanumSquareNeoH.. 2024. 10. 1.
배경 그라디언트 애니메이션 .text-container { z-index: 100; width: 100vw; height: 100vh; display: flex; position: absolute; top: 0; left: 0; justify-content: center; align-items: center; font-size: 96px; color: white; opacity: 0.8; user-select: none; text-shadow: 1px 1px rgba(0,0,0,0.1); } :root { --color-bg1: rgb(108, 0, 162); --colo.. 2024. 10. 1.
li 점 색상 바꾸기 CSS li::marker { color: red;} 2024. 9. 2.
vsCode에서 css 컬러에 피커가 안보일때 갑자기 vsCode에서 컬러 피커가 안보일때설정 -> 검색창에 hover 입력 ->  Editor hover Enabled 에 체크한다.  그러면 컬러 피커가 이제 보인다. 2024. 7. 9.
item:has(+ * + * + * + :hover), items .item:hover + * + * + * * {margin: 0;padding: 0;box-sizing: border-box; } :root {--index: calc(1vw + 1vh);--transition: cubic-bezier(.1, .7, 0, 1); } body {background-color: #141414; } .wrapper {display: flex;align-items: center;justify-content: center;height: 100vh; } .items {display: flex;gap: .4rem;perspective: calc(var(--index) * 35); } .item {width: calc(var(--index) * 3);height: calc(var(--index) * 12);background.. 2024. 7. 7.
버튼 배경 css button button #buttons1 button { overflow: hidden;position: relative; width: 200px;border-radius: 20px;}#buttons1 button .bg {overflow: hidden;position: absolute;top: 0;left: 0; width: 0; height: 100%; transition: 0.3s;}#buttons1 button:hover .bg{ width: 100%;}#buttons1 button span span {display: block; width: 200px; height: 80px;background-color: #ae5e9b;line-height: 80px;color:.. 2024. 6. 29.
table thead sticky 적용시 보더 투명해지면서 tbody 겹쳐 보일때 원인 : border-collapse해결방법 : border-collapse: separate; border-spacing: 0; .tableScroll{overflow: auto; height:calc(100vh - 340px)}.tableScroll::-webkit-scrollbar{width:8px;height:8px;background-color:#131538}.tableScroll::-webkit-scrollbar-thumb{border-radius:2px;background:rgba(28,79,151,0.7);border:1px solid #2b89d6}.tableScroll::-webkit-scrollbar-track{border-radius:2px}.tableScro.. 2024. 5. 22.
VScode 디자이너를 위한 플러그인 세팅, CSS 위주 설치할 플러그인Live Server -  실시간 미리보기css-compact - 어지러운  css 를 한줄로 정리 단축키 : shift+alt+f  PostCSS Sorting - 협업을 위한 CSS 정리 단축키가 중복일 경우가 많아 직접 입력시킴 postcss 세팅 방법 - 설정 아이콘 클릭 - Extension Settings 클릭 Edit in settins.json 클릭 아래처럼 순서 복붙 "postcssSorting.config": { "properties-order": [ /* Layout */ "display", "grid", "grid-column-gap", "grid-row-gap", "grid-auto-flow", "gr.. 2024. 5. 12.
input radio 라디오버튼 모양 바꾸기 시간대 30분 15분 .selTimeRadio input { border: 4px solid #A0A0A0; outline:none; width: 36px; height: 36px; background-color: transparent; border-radius: 50%; appearance: none; } .selTimeRadio input:checked { border-color: #1CC8FF; position: relative } .selTimeRadio input:checked::after { display: block; position: abs.. 2024. 5. 8.
input date icon 달력 모양 바꾸기 날짜 선택 .dateBox input { border: 1px solid #69789F; position: relative;width: 185px; height: 34px; background: url('../img/icon_date.svg') no-repeat right 10px center; font-size: 1rem; color: #fff; border-radius: 4px; } .dateBox input[type="date"]::-webkit-calendar-picker-indicator,.dateBox input[type="date"]::-webkit-inner-spin-button { opacity: 0; appearance: none; } 2024. 5. 8.
animation 애니메이션 css div { width: 100px; height: 100px; background-color: red; position: relative; animation: myfirst 5s linear 2s infinite alternate;}div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate;}@.. 2024. 5. 5.
header nav logo menu menu menu menu header {position: absolute;top: 0;left: 0;width: 100%;padding: 20px 0;z-index: 3; } header h1 {position: relative;height: 40px;margin:0;float: left;z-index: 3; } header h1 img {display: block;position: relative;top:10px; } .main-navigation {float: right; } .main-navigation a {colo.. 2024. 5. 5.
로컬에서 작업중 부트스트랩 등 cdn 연결 안될때 갑자기 작업중에 부트스트랩 아이콘들이 다 사라져 버렸다. 부트스트랩 뿐만 아니라 제이쿼리 등 cdn으로 불러오는 모든 파일들이 차단된 것 같았다.개발자모드에서 보니 부트스트랩이 이렇게 보였다. 해결 방법은 간단했다. 브라우저 설정가서 인터넷 사용 기록을 삭제해주고 재부팅 해주었다. 2024. 5. 2.
로티파일 html 에 넣기 test_lottie.jsvar anmation = bodymovin.loadAnimation({ container : document.getElementById('animContainer'), renderer : 'svg', loop : true, autoplay : true, //path: 'https://assets8.lottiefiles.com/packages/lf20_b32f3vtz.json' // 2-1. url path: 'https://hiphouse.club/front/images/music_notes.json' // 2-2. 다운받아서 사용.});​ 2024. 4. 29.
input checkbox 체크박스를 이용한 부트스트랩 아이콘 토글 체크박스 안에 부트스트랩 아이콘 토글    .ckPrice input[type='checkbox'], .star input[type='checkbox'] { display: none; } .ckPrice input[type='checkbox'] + span::after { display:block; content:'\F584'; font-family:"bootstrap-icons", sans-serif; font-size:1rem; color:white; cursor: pointer; width: 24px; height: 24px; } .ckPrice input[type='checkbox']:checked + span::after { content:'\F26D' } .sta.. 2024. 4. 29.
background bg css background-color:#eee;background-image: url(../img/sample.jpg);background-position:center;background-size: 50%;background-repeat:no-repeat;background: #004fff url(../img/sample.jpg) no-repeat center/cover;background: url(../img/sample.jpg) no-repeat center/cover;background: url(../img/sample.jpg) repeat-x center/40%;;background-repeat: no-repeat;background-position: center;background-size: cover.. 2024. 4. 28.
sns 카톡 사이트 링크 대표이미지 설명 만들기 이미지 사이즈는 1200 * 630요약글은 160자 이내로 작성 head 에 추가  트위터도 넣고 싶다면 추가그냥 카톡 섬네일 이미지만 보이고 싶을때 썸네일 이미지 사이즈는 : 800px*400px  ( 2:1 비율 )카톡 썸네일 안바뀔때는 https://developers.kakao.com/tool/debugger/sharing 에 가서 캐시삭제 도구 - 디버거도구 - 공유디버거 페이지에서 캐시초기화 버튼 클릭 2024. 4. 28.
favicon 파비콘 만들기 1. 다양한 사이즈 커버해야 할 경우 512 * 512 사이즈로 제작후 아래 사이트에서 뽑아냄 https://realfavicongenerator.net/ Favicon Generator for perfect icons on all browsersThe ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.realfavicongenerator.net 그러면 다운로드할 이미지 패키지와 소스가 나옴. 이걸 head 에 넣어줌  2. 그냥 간단히 한 사이즈의 ico 만 필요할 경우아래 사이트에서 만든 파비콘 이미지 업.. 2024. 4. 28.
마우스 포인터 모양 바꾸기 css js #m-pointe {position: absolute;width: 20px;height: 20px;top: 50%;left: 50%;margin: -10px 0 0 -10px;border-radius: 50%;background: #eee;mix-blend-mode: difference;pointer-events: none; z-index: 9999;transition: transform 0.3s; } #m-pointe.hover {transform: scale(6); }$(document).ready(function () { //마우스 모양 바꾸기 var $mousePointer = $('#m-pointe'); var $clickElements = $('a, button, input').. 2024. 4. 28.
초기 리셋 관련 css 모음. reset.css normalize.css reset.css/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, cap.. 2024. 4. 28.
svg 이미지 css filter로 색상 변경하기 .svg{filter: invert(53%) sepia(49%) saturate(6664%) hue-rotate(166deg) brightness(101%) contrast(102%);} 필터값 계산하기 주소 https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex colorAdded License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Permission to use, copy, modify, and/or distribute...codepen.io 2024. 4. 28.
css flex 한방정리 flex-grow 넓히라고  1 2 3flex-shrink 숫자 클수록 줄어듬, 0 :이면 가득 , 1 :기본값,  2 :  2배 줄어듬  3flex-basis 최소한은  1 2 3 4미리보기 https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink flex-shrink - CSS: Cascading Style Sheets | MDNflex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-codeveloper.mozilla.org 2024. 4. 28.
css page start setting 처음 세팅 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"); /* SET */:root { --color-link:rgba(255,255,255,0.9); --color-text:#FEFFFF;--color-main:#1CC8FF; --color-fontgray:#E8E8E8; } html { font-size: 16px; } body { margin:0 auto; overflow-y:auto; position:relative; width:100%; -ms-overflow-style:none; display:flex; width:100%; height:max-content; min-height:100v.. 2024. 4. 28.
보더 겹쳐 쌓기 css box-shadow .th {box-shadow: 0 0 0 5px #fff, 0 0 0 10px rgb(65, 184, 231), 0 0 0 13px #fff, 0 0 0 20px rgb(231, 125, 241) ;width: 50px; height: 50px; border-radius: 50%; background-color: rgb(78, 235, 138);} 2024. 4. 28.
연혁 css 2021 05무선 제품군 자체 개발 07제품군 자체 개발 10무선 제품군 자체 개발 12무선 제품군 자체 개발 2020 05무선 제품군 자체 개발 10무선 제품군 자체 개발 .comhistory { position: relative; margin-left:40px; width: 700px; padding-left: 40px;}.comhistory dt, .comhistory dd { display: inline-block; margin: 0; padding: 0;}.comhistory::before { background-color: #e3e3e3; width: 1px; height: calc(100% - 18px); position: absolute;.. 2024. 4. 28.
css 코딩 컨벤션을 위한 세팅 설치 플러그인 1. css-compact Alt + Shift + F 로 css를 한줄로 정돈한다.  2. PostCSS Sorting Ctrl + Shift + Q 로 css 순서를 정돈한다. 2024. 4. 28.

티스토리툴바