분류 전체보기 (224) 썸네일형 리스트형 버튼 hover animation 여러개 https://codepen.io/elroy_tsai/pen/RgNEqz HTML 삽입 미리보기할 수 없는 소스 통통 튀는 로딩화면 https://codepen.io/ahmadbassamemran/pen/bXRPdr HTML 삽입 미리보기할 수 없는 소스 블록 맞추기 로딩화면 https://codepen.io/imathis/pen/ZYEWrw HTML 삽입 미리보기할 수 없는 소스 배경화면 도형이 계속 움직이는것 https://codepen.io/jenishhrestha/pen/BXQMom HTML 삽입 미리보기할 수 없는 소스 부드러운 스크롤링 효과 플러그인 데모 https://www.cssscript.com/demo/smooth-momentum-scrolling-butter/ Butter.js Smooth Momentum Scrolling Example www.cssscript.com 다운로드 링크 https://www.cssscript.com/smooth-momentum-scrolling-butter/#google_vignette Create Smooth Momentum Scrolling Effects - Butter.js | CSS Script Butter.js is a plain JavaScript library that applies a smooth momentum scrolling (also called inertial rolling) to any.. 커스텀 selectbox See the Pen custom selectbox by publisher.kim (@publisherkim) on CodePen. html 111 111 222 333 css li{list-style:none;} a{color:#000; text-decoration:none;} div.selectbox { padding: 0; position: relative; text-align: left; width:200px;} div.selectbox .selected { display: block; width: 100%; height: 100%; padding: 0 15px; box-sizing:border-box; background: #fff; border:1px solid #d9d9d9; height:3.. 코드작성규칙 1. 태그 순서 type - id - title - class - style 2. a태그 새창 오픈시 target="_blank" 및 title="xxx 페이지 새창으로 열림" 표기 3. a태그로 tab menu등 구현시 클릭후 포커스 이동 않게 반드시 처리 ex) 4. 제목과 열 제목이 있는 경우 이에 대한 scope 속성을 사용 (thead 안에 th의 경우 scope="col" , tbody 안에 th의 경우 scope="row" 적용) 5. 넓이 조정시 w100, w100p 등으로 조정. 6. 네이밍의 조합은 '형태_의미_순서_상태' 또는 '형태_의미&순서_상태'을 기본 순서로 사용 7. 코드 그룹 간 1줄의 빈 줄, 두개 이상의 요소에 하나의 스타일을 지정하는 경우 쉼표(,) 뒤로 줄바꿈. 8... VSCode 단축키 내가 자주쓰는 단축키! scss 컴파일시 공백 너무 많을때 ctrl+h 눌러서 정규식 체크 하고 \n\n 을 \n 으로 바꿔준다. CMD + Shift + P -> 코드 정렬하는것 (Prettier) ctrl + alt + 상하방향키 : 세로로 다중선택 드래그 + ctrl + d : 드래그한 영역 아래로 같은것 선택 +1씩 alt + 클릭 : 다중클릭 shift + alt + a : 여러줄 한번에 주석처리 ctrl + shift + c : autoprefixer 전체동의 체크박스 (회원가입 약관 등에 쓰임) See the Pen checkbox all by publisher.kim (@publisherkim) on CodePen. html 전체동의 회원 이용약관 동의 회원 이용약관 동의2 css /* custom checkbox*/ span.chk {display: block;} .chk input {opacity: 0; position: absolute;} .chk > span {display: inline-block;} .chk > span label {display: inline-block;position: relative;line-height: 1;cursor: pointer; padding-left:1.2em; } .chk .cbx label::before {content: '';position: .. 웹접근성에 맞는 탭메뉴 html 메뉴1 더보기 1리스트 내용 리스트 내용 리스트 내용 리스트 내용 리스트 내용 메뉴2 더보기 2리스트 내용 리스트 내용 리스트 내용 리스트 내용 리스트 내용 메뉴3 더보기 3리스트 내용 리스트 내용 리스트 내용 리스트 내용 리스트 내용 css /* tab */ .tab{width: 100%;} .tab>ul{position: relative;} .tab>ul:after{content:"";display:block;clear:both} .tab>ul>li{float: left;} .tab_cont{position: absolute; width: 100%; top: 0; left: 0;} .tab .tab_menu{position: relative; z-index: 99;} /* 그 외 스타일은 자.. 브라우저 기본 스크롤바 커스텀 css .section::-webkit-scrollbar { /* 스크롤바 전체 width 지정 */ width: 10px; } .section::-webkit-scrollbar-track { /* 스크롤바 트랙 배경색 지정*/ background-color: darkgrey; } .section::-webkit-scrollbar-thumb { /* 실제 스크롤바 디자인 변경 */ box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } 스크롤 끝에서 컨텐츠 추가 html .box { width: 500px; height: 500px; border: 1px solid; font-size: 32px; font-weight: bold; } css 1 2 3 4 5 js let count = 5; let $lastBox = document.querySelector(".box:last-child"); const obsever = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting && count < 15) { for (let i = 0; i < 5; i++) { const $newBox = document.createElement("div"); $newB.. 카운팅 스크립트 See the Pen counting script by publisher.kim (@publisherkim) on CodePen. html javascipt * jquery 필요 // counting $(document).ready(function () { $.fn.countTo = function (options) { options = options || {}; return $(this).each(function () { // set options for current element var settings = $.extend({}, $.fn.countTo.defaults, { from: $(this).data('from'), to: $(this).data('to'), speed: $(this).data.. 웹접근성 체크리스트 0. 크로스브라우징을 고려하여 html, css가 작성되었는가? - 서울시 기준 ie11까지는 고려해야함. ie11, edge, chrome, firefox에서 구동 확인) - W3C 마크업, CSS 검사 서비스 통과 1. 문서 기본 언어가 (html lang="ko") 로 설정 되었는가? 2. img에 alt 속성이 적절히 들어갔는가? (디자인을 위한 의미없는 img의 경우 alt="" 로 값 비우기) 3. 페이지 이동은 a, 그 외는 button으로 적절히 사용되었는가? a태그로 tab menu등 구현시 onclick="return false;" 등 포커스 이동을 막는것이 쓰였는가? 4. table - scope 속성이 잘 쓰였는가 ? (thead 안에 th의 경우 scope="col" , tbody.. 웹접근성 고려한 html, css 작성방법 웹접근성 고려한 html 0. 크로스브라우징을 고려하여 html, css가 작성되었는가? - 서울시 기준 ie11까지는 고려해야함. ie11, edge, chrome, firefox에서 구동 확인 - W3C 마크업, CSS 검사 서비스 통과 1. 문서 기본 언어가 (html lang="ko") 로 설정 되었는가? 2. 대체 텍스트가 적절히 들어갔는가? - img에 alt 속성이 적절히 들어갔는지? (디자인을 위한 의미없는 img의 경우 alt="" 로 값 비우기) 3. 페이지 이동은 a, 그 외는 button으로 적절히 사용되었는가? - a태그로 페이지 이동이 아닌 이벤트 구현시 onclick="return false;" 등 포커스 이동을 막는것이 쓰였는가? 4. table - scope 속성이 잘 쓰였.. nth-child (n번째 부터 n번째 까지 css적용) /* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */ 선택자:nth-child(7n){ background: red; } /* 22번 부터 이후 모든 box 폰트색 변경 */ 선택자:nth-child(n+22) { color: blue; } /* 1번째 부터 4번째 까지 box 배경색 변경 */ 선택자:nth-child(-n+5) { background: green; } /* 16번째 부터 19번째 까지 box 배경색 변경 */ 선택자:nth-child(n+16):nth-child(-n+19) { background: hotpink; } /* 마지막에서부터 순서를 계산 */ /* 마지막(28)에서 부터 3번째 */ 선택자:nth-last-child(3) { background: gol.. background linear gradient 사용시 border-bottom에 하얀색 라인이 생길때 선형 그라데이션 배경 끝에 CSS 그림자 흰색 선이 생기는 경우 간단한 해결방법. position fixed + background가 linear gradient가 들어간 header의 끝에 자꾸 하얀색 선이 생겨서 짱 스트레스 받았는데 아주아주아주 간단한 해결방법을 찾음. border-bottom : 1px solid rgba(255,255,255,0); 이렇게 투명한 보더 바텀을 주면 끝! https://www.edureka.co/community/179616/css-shadow-white-line-at-the-end-linear-gradient-background 타이핑효과 css로만 만들기 CSS Typing Effect https://codepen.io/denic/details/GRoOxbM See the Pen CSS Typing Effect by Marko (@denic) on CodePen. vanilla javascript accordion menu See the Pen Untitled by uming (@uming) on CodePen. 패럴렉스 스크롤 애니메이션 See the Pen Parallax scroll animation by isladjan (@isladjan) on CodePen. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
