전체 글38 css 도형 1.사각형 2.둥근사각형 3.원형 4.타원형 5.위뾰족삼각형 6.아래뽀족삼각형 7.오른쪽뾰족삼각형 8.왼쪽뾰족삼각형 9.좌상삼각형 10.우상삼각형 11.좌하삼각형 12.우하삼각형 13.응용 14.말풍선 2022. 5. 25. vscode extention 테마 - Material theme - Material icon theme 코드 - Prettier - bracket pair colorizer - Indent-rainbow - Auto rename tag - CSS PEEK - HTML CSS SUPPORT - LIVE SERVER 2021. 12. 28. Terminal 단축키, 명령어 단축키 TAB 파일, 폴더 이름 자동완성 Ctrl + A 현재 작성 중인 라인에서 맨 앞으로 가기 Ctrl + E 현재 작성 중인 라인에서 맨 뒤로 가기 Ctrl + U 커서 뒤에 다 지우기 Ctrl + K 커서 앞에 다 지우기 Ctrl + W 커서 뒤에 단어 지우기 Ctrl + T 커서 뒤 두 글자 위치 바꾸기 Esc+ T 커서 뒤 두 단어 위치 바꾸기 Ctrl + L 화면 다 지우기 Ctrl + C 실행 중인거 다 죽여~kill kill~ Ctrl + D 현재 shell 종료 Option + -> 커서를 한단어 앞으로 이동 시킴 Option + 2021. 12. 20. sublime text 단축키 sublime text 단축키 1.편집 명령 단축키(윈도우) 행 삭제 CTRL + X 다음 행 추가 CTRL + Enter 이전 행 추가 Ctrl + Shift + Enter 행 위/아래 이동 Ctrl + Shift + 위/아래 방향 화살표 키 행 선택 Ctrl + L 단어 선택 Ctrl + D 매칭되는 괄호로 이동 Ctrl + M 커서부터 행 끝까지 삭제 Ctrl + KK 커서부터 행 앞까지 삭제 Ctrl + K + backspace 현재 행 들여쓰기 Ctrl + ] 현재 행 들여 쓰기 제거 Ctrl + [ 행 복제 Ctrl + Shift + D 행 합치기 Ctrl + J 현재 행 주석 처리/취소 Ctrl + / 문단 주석 처리/취소 Ctrl + Shift + / 되돌리기 Ctrl + Z 다시하기 Ct.. 2021. 12. 19. copy to 클립보드 스크립트 소스 2021. 3. 5. lazy load https://appelsiini.net/projects/lazyload/v1/ 사용하는 방법? HTML 코드 끝에 둘 다 포함하십시오. 이미지 태그를 변경해야합니다. 이미지의 주소는 data-original속성에 넣어야 합니다. 지연로드 된 이미지에 특정 클래스를 제공하십시오. 이렇게하면 어떤 이미지 플러그인이 바인딩되는지 쉽게 제어 할 수 있습니다. $(function() { $("img.lazy").lazyload(); }); 프로 팁! 이미지 크기를 속성 width및 height속성 또는 CSS 로 설정해야합니다 . 그렇지 않으면 플러그인이 제대로 작동하지 않을 수 있습니다. 임계 값 설정 //기본적으로 이미지는 화면에 나타날 때로드됩니다. 이미지를 더 일찍로드하려면 threshold매개 변수를 .. 2020. 2. 12. background:gradient 2019. 11. 22. 텍스트를 드래그하지 못하게 div.stop-dragging { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; } 2019. 7. 16. display:grid; 2019. 7. 11. column-count:300px; column-count:300px; column-width:3; 2019. 7. 11. position:sticky 2019. 7. 11. shape-outside:circle(50%); 2019. 7. 11. display:flow-root 2019. 7. 11. scrollbar plugin https://gromo.github.io/jquery.scrollbar/demo/basic.html jQuery Scrollbar Demo DEMO HTML CSS JS Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Do gromo.github.io 2019. 7. 11. image gallery 관련 plugin https://masonry.desandro.com/ Masonry Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower: bower install masonry --save Install with npm: npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works on masonry.desandro.com https://imagesloaded.desandro.com/ imagesLoaded imagesLoaded JavaScript is all like ".. 2019. 7. 11. flex-Properties for the Parent(flex container) https://webclub.tistory.com/259?category=541913 Flexible box Layout - 플렉스 박스 #1 플렉스 박스 레이아웃 이번 포스팅에서는 새로운 레이아웃 모듈 중에 가장 포괄적인 격자 레이아웃과 함께 유동적인 레이아웃 모듈 또는 플렉스박스라고 하는 모듈에 대해 소개하고자 하는데, 이 모듈은 보다 복잡.. webclub.tistory.com https://css-tricks.com/snippets/css/a-guide-to-flexbox/ A Complete Guide to Flexbox | CSS-Tricks Our comprehensive guide to CSS flexbox layout. This complete guide explains everythin.. 2019. 7. 5. css transition https://webclub.tistory.com/620?category=541913 Transition - 화면 이동을 위한 점진적 효과 transform (변환,변형) 효과도 재미있지만 CSS3의 transition 기능과 같이 결합하면 더 큰 효과, 생동감을 부여할 수 있습니다. transition 의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있지만 "화면 이동".. webclub.tistory.com CSS 트랜지션(Transition): IE 10+ transition-property : 화면 이동에 영향을 받는 속성으로 이 값을 지정하면 특정 사항에 대해서만 화면 이동 효과가 나타난다.(어떤 속성을 트랜지션 할 것인지) transition-duration : CSS 효과가 반영되는데 걸.. 2019. 7. 5. css transform https://webclub.tistory.com/619?category=541913 CSS 2D 트랜스폼(Transforms) transform (변형)은 CSS3에 추가된 기능 중 하나로 2D 의 변형을 말합니다. 변형이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미합니다. 일반적으로 변형(transform) 효과는 CSS.. webclub.tistory.com rotate(회전 효과) : rotateX(), rotateY(), rotate(x, y) scale(확대/축소 효과) : scaleX(), scaleY(), scale(x, y) translate(이동효과) : translateX(), translateY(), translate(x, y) skew(비틀기) 효.. 2019. 7. 5. 이전 1 2 3 다음
