본문 바로가기

분류 전체보기316

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.
작업실 참고 사진 모음 1 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.
css blend 포토샵 레이어 효과 .blend{ background-blend-mode: luminosity; background-color: #FFEC8C;} 종류/* Keyword values */mix-blend-mode: normal;mix-blend-mode: multiply;mix-blend-mode: screen;mix-blend-mode: overlay;mix-blend-mode: darken;mix-blend-mode: lighten;mix-blend-mode: color-dodge;mix-blend-mode: color-burn;mix-blend-mode: hard-light;mix-blend-mode: soft-light;mix-blend-mode: difference;mix-blend-mode: exclusion;m.. 2024. 4. 28.
input autofill input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px #252748 inset !important; -webkit-text-fill-color:rgba(255, 255, 255, 0.8) !important; border:1px solid #7c7d91 !important;}input:-.. 2024. 4. 28.
goto top $(window).scroll(function(){ if($(this).scrollTop() >= 300){ $('.goTop').fadeIn(); }else{ $('.goTop').fadeOut(); }});$('.goTop').click(function(e){ e.preventDefault(); $('html, body').stop().animate({scrollTop:0}, 500);}); 2024. 4. 27.
부트스트랩 아이콘 배경처럼 넣기 부트스트랩 사이트에서 css 에 있는 코드 복사   css에 content:'' 부분에 넣기  @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"); #header .util .search { position: relative;} #header .util .search::after { display: block; position: absolute; top: 9px; right: 3px; z-index: 30; width: 26px; height: 26px; font-family: "bootstrap-icons"; color: #4d4d4d; content: '\F52A'; } 2024. 4. 27.
티스토리 js 파일 적용하기 1. 스킨편집에서 파일업로드 클릭만든 js 파일을 업로드한다.자동으로 images 폴더 안에 저장된다.  2. html body 마지막에 주소 적어준다.  근데 바로 안먹히고 몇분 뒤에 먹힌다. 몇분을 못기다릴때는 파일을 업로드하고 html이나 css 파일가서 공백하나 넣어서 수정해준뒤 저장 해주면 업로드한 파일이 바로 먹힌다. 2024. 4. 27.
input 화살표 버튼 없애기 input input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} 2024. 4. 26.
input border 그라디언트 CSS 방법 1 . border 그라디언트 .box { position: relative; width: 100%; height: 90px; background-color: #061c4e; } .box::before { padding: 1px; position: absolute; background:linear-gradient(160deg,#1CC8FF,#9E00FF); content: ""; inset: 0; border-radius: 12px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .. 2024. 4. 26.
n줄 이상일때 안보이고 말줄임표 CSS -webkit-line-clamp: 2  (2줄까지만 보임).box {display: -webkit-box;overflow: hidden;white-space: normal !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} 2024. 4. 26.
그라디언드 gradient CSS, 글자에 그라디언트 넣기 방향 .d3 .color1 { background-image: linear-gradient(to bottom, #F47519 70%, #FF0000 100%); }각도.bigBtn:hover { background:linear-gradient(170deg, #1884ff 50%, #a81dff) 100%; } 글자에 그라디언드 넣기 css.section-2 a:hover { -webkit-text-fill-color: transparent; background: linear-gradient(88.39deg,#8ad3fe .66%,#9679fa 28.1%,#f875ad 61.1%,#ffad53); -webkit-background-clip: text; background-clip: t.. 2024. 4. 26.
:not(.클래스명) 특정 클래스 빼고 지정하기 p:not(.classy) { color: red;}body :not(p) { color: green;} 2024. 4. 26.
scroll 스크롤바 css .tbWrap::-webkit-scrollbar{width:8px;background-color:#232c55;}.tbWrap::-webkit-scrollbar-thumb{background:#2ba6d8;background:linear-gradient(90deg, #34bad7 0%, #4e73dd 100%);border-radius:3px;}.tbWrap::-webkit-scrollbar-track{border-radius:3px;}.tbWrap::-webkit-scrollbar-corner{background-color:transparent;}.tbWrap::-webkit-resizer{border-color:#232c55;} 2024. 4. 25.
tab 라디오버튼으로 만들기 111 222  .ingRadio{display:flex;align-items:center}.ingRadio input{display:none}.ingRadio input:checked + span{background-color:#2062BF;color:#fff}.ingRadio span{display:flex;align-items:center;justify-content:center;padding:0 10px;border:1px solid rgba(255,255,255,0.3);border-left:0;width:max-content;min-width:60px;height:40px;background-color:rgba(3, .. 2024. 4. 25.
텝 css .dashWidget .wTab{display:grid;overflow:hidden;width:74px;height:35px;background-color:rgba(0,0,0,0.3);grid-template-columns:1fr 1fr;border-radius:4px}.dashWidget .wTab span{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.3);width:100%;height:100%;cursor:pointer}.dashWidget .wTab span i{font-size:16px;opacity:0.7}.dashWidget .wTab span.active{bor.. 2024. 4. 25.
input checkbox 만들기 동의부트스트랩 체크 아이콘을 배경 이미지로 넣어 사용함 input[type='checkbox'] { display:flex; align-items:center; justify-content:center; margin-top:1px; margin-right:15px; padding:0; border:1px solid #bbb; outline:none;min-width: 24px; width:24px; height:24px; cursor:pointer; appearance:none } input[type='checkbox']::after { display:none; font-family:"bootstrap-icons", sans-serif; font-size:1rem; font-weight:bold; col.. 2024. 4. 25.
input checkbox 스위치모양 아이디 저장.switch { cursor:pointer; color: #E8E8E8; display: inline-flex;align-items: center; font-size: 18px;} .switch input[type="checkbox"] { position: relative; border: 0; border-radius: 1.25em; width: 48px; height: 24px; background-color: #6b768b; } .switch input[type="checkbox"]::before { content: ""; position: absolute; left: 4px;top:4px; width: 16px; height: 16px; border-radius: 50%; backg.. 2024. 4. 25.
Grid 레이아웃 한방 정리. 고정값 가변값 레이아웃.widgetArea { display: grid; grid-template-columns: 310px 456px auto 360px; grid-template-rows: 510px 310px; width: 100%; max-width: 1780px; gap: 2.5rem; } .widget1 { grid-column: 1 / 3; grid-row: 1/2; } .widget2 { grid-column: 3 / -1; grid-row: 1/2; } .widget3 { grid-column: 1 / 2; grid-row: 2/-1; } .widget4 { grid-column: 2 / 3; grid-row: 2/-1; } .widget5 { grid-column: 3 / 4; grid-row: 2/.. 2024. 4. 25.

티스토리툴바