CSS55 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. 부트스트랩 아이콘 배경처럼 넣기 부트스트랩 사이트에서 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. 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. pretendard 프리텐다드 웹폰트 적용하기 그동안 한글 웹폰트 사용할때마다 항상 뭔가 부족하고 자간과 행간의 조정이 필요했었는데.. 이제 이거만 써도 될 듯. 이거 만드신 분 복받으시길. 다운로드 https://cactus.tistory.com/306?fbclid=IwAR3KcWXEy7qzM0oykZFgY58eUebI3Qcwnl1SJ2IZQdCLQewxX6S-3auKYsM 1. PC 에서 사용할때적용된 모습 2. 웹폰트로 사용시 1. 소스를 복붙한다. 아래 둘중에 하나를 사용한다. css에서 사용시 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); 또는.. 2023. 6. 11. ion icon https://ionic.io/ionicons Ionicons: The premium icon pack for Ionic Framework Ionicons is an open-sourced and MIT licensed icon pack. ionic.io 사용법 사이즈와 컬러 or ion-icon { font-size: 64px;} ion-icon { color: blue;} 2023. 4. 28. 유튜브 웹페이지 배경으로 넣기 https://github.com/stamat/youtube-background GitHub - stamat/youtube-background: Simple script for embedding YouTube, Vimeo and HTML5 videos a as cover backgroundSimple script for embedding YouTube, Vimeo and HTML5 videos a as cover background - GitHub - stamat/youtube-background: Simple script for embedding YouTube, Vimeo and HTML5 videos a as cover backgr...github.com사용법 1. js파일을.. 2023. 2. 26. VS code에서 Sass .scss 사용하기 1. 세팅 VSCode에서 live sass compiler 를 설치한다. settings 클릭 format 클릭원하는 경로 지정 "liveSassCompile.settings.formats":[ { "format": "compressed", "extensionName": ".css", "savePath": "여기에 경로지정 하면됨 예시 ~/../css" }],"liveSassCompile.settings.generateMap": false,예시VSCode 하단의 Watch Sass 버튼을 클릭하면 scss를 css로 변환해준다. 2. 사용법main.scss (최종 사용할 파일 하나)@import 'header'.. 2023. 2. 13. VS code 단축키 shift+alt+f 로 CSS 한줄로 변환하기 VS code에서 CSS-compact 을 설치한다. 단축키는 shift+alt+f 이다. 2023. 2. 13. 컬러헌트 https://colorhunt.co/palettes/popular The Most Popular Color Palettes of 2023 - Color Hunt Find the perfect trendy color palettes and get color inspiration for your next design or art project. colorhunt.co 머리쓰기 싫을때 컬러 조합 가져오기 2023. 1. 16. 그라디언트 팔렛트 https://webgradients.com/ Free Gradients Collection by itmeo.com Free collection of 180 background gradients that you can use as content backdrops in any part of your website. webgradients.com 그라디언트 미리 보고 쉽게 쓰기 2023. 1. 16. 컬러팔렛트 https://coolors.co/palettes/trending Trending Color Palettes - Coolors Get inspired by thousands of beautiful color schemes and make something cool! coolors.co 머리쓰기 싫을때 컬러 조합 가져오기 2023. 1. 16. 이전 1 2 다음
