Simple icons 웹 아이콘 https://simpleicons.org/ Simple Icons 2441 Free SVG icons for popular brands simpleicons.org svg로 바로 사용가능 로고가 많음! width="24px" height="24px"
눈누 상업용 무료한글폰트 사이트 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc
수티(SUTI) 웹폰트 @font-face { font-family: 'SUIT-Thin'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SUIT-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-fa..
스크롤 바(scrollbar) 없애기 .over{ overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; } .over::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
Feather 웹 아이콘 https://feathericons.com/ Feather – Simply beautiful open source icons Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability. feathericons.com head 부분 body 사용법 css .feather { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fil..
카카오톡 채팅방 링크 공유 캐시 초기화 https://developers.kakao.com/tool/debugger/sharing 카카오계정 accounts.kakao.com
border에 그라디언트 넣기 border-top: 3px solid transparent; border-image: linear-gradient(90deg, rgba(253,29,29,1) 0%, rgba(252,176,69,1) 30%, rgba(142,255,121,1) 64%, rgba(131,58,180,1) 100%) 1; background-origin: border-box; background-clip: content-box, border-box; background: #fff; border-image의 맨끝 1은 꼭 넣기 둥글기가 들어가있으면 적용되지 않음
폰트어썸 before, after (FontAwesome) Css에서 사용하기 https://fontawesome.com/search Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com :before { content: '\폰트어썸 Unicode를 입력해주세요.'; content: '\f191'; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; }
텍스트 문단 수 줄이기 p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /*줄이고 싶은 줄(문단) 수 적기*/ -webkit-box-orient: vertical; text-overflow: ellipsis; }
폰트어썸 (font-awesome) 웹 아이콘 5버전 링크 https://fontawesome.com/v5/search Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com //5버전 무료 아이콘 링크 6버전 링크 https://fontawesome.com/search Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. A..
input radio 버튼 꾸미기 html input id = label for 값이 동일해야한다. 강아지 고양이 얼룩말 호랑이 css .in_box{ display: flex; justify-content: space-between; } .in_box input[type=radio]{ display: none; } .in_box input[type=radio] + label { color: #222222; font-size: 1.6rem; width: 24%; border: 1px solid #888; height: 45px; line-height: 45px; text-align: center; } .in_box input[type=radio]:checked + label { color: #fff; background: #000; }
스크롤바(scrollbar) 꾸미기 각 아래에 대한 CSS 코드를 추가해 주면 커스텀 가능 ::-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 예시 body::-webkit-scrollbar { width: 8px; /* 스크롤바의 너비 */ } body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #1b73ba; /* 스크롤바의 색 */ border-radius: 10px; /* 스크롤바의 둥글기 */ } body::-webkit-scrollbar-track { background: rgba(3..
XEIcon 웹 아이콘 http://xpressengine.github.io/XEIcon/library-2.3.3.html XEIcon, 문자를 그리다 XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다. xpressengine.github.io 네이버, 카카오 아이콘
Html 태그 [picture, detail & summary, datalist, optgroup] picture 태그 특정 화면 크기, 해상도에 따라 여러 이미지 지정이 가능 detail & summary 태그 클릭으로 정보를 보여주고 숨기는 기능, css로는 [open] 이라는 CSS선택자를 통해 스타일 변경 가능 클릭 전 볼 수 있는 영역 클릭 후에만 표시되는 영역 details[open] { background-color: pink; } datalist 태그 자바스크립트 없이 auto complete(자동 완성 기능) input의 list와 datalist의 id 명칭은 동일해야 된다. What is your favourite movie? optgroup 태그 select 그룹 묶음 Showtimes Twister Napoleon Dynamite What About Bob? Be Kind Rew..
div 영역에 링크 걸기 현재페이지에 부를 때 새창띄우기
라이브러리 브랜드 그룹 | 마멜코드

티스토리툴바