웹 코딩54 코드블럭 - 접기/펼치기 (+언어명 표시 & 자동 줄바꿈 적용/해제) 흠.. 쓸수록 코드블럭에 자꾸 관심이 가네여...왜지...(?) 코드블럭 공지에 올라온 댓글을 보고 오호 있으면 좋겠는데!? .. 해서 만들어 보았습니다. 뭔가 버튼이 노출되어야 하는김에 코드의 언어 명을 표시했고, 보너스로 줄바꿈 적용/해제 체크박스도 넣었습니다. 예시는 대략 이렇습니다. var wrapper = (code.parentNode.tagName == "PRE")? code.parentNode : code; if (!wrapper.dataset.noindent) { //long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. long. .. 2020. 8. 19. 코드블럭 - 코드 자동 정렬 추가 (+ 탭간격 조정) 코드블럭 3탄!? ㅋ 색상을 입히는 문법강조와는 별개로 코드블럭으로 입력한 소스의 줄맞춤(들여쓰기?)을 예쁘게 정렬해줍니다. 이용된 auto indent 라이브러리는 매우 가볍고 다른 알려진 넘들처럼 지멋대로 줄바꿈을 추가하는 등의 오버는 떨지하지 않고 오롯이 들여쓰기 부분만 잘 만져 줍니다. (출처: https://github.com/zebzhao/indent.js) 거기에 탭크기 설정을 지원하기 때문에 간혹 너무 크다고 느껴졌던 기존의 탭크기를 줄이는 용도로 쓸 수도 있겠습니다. 이미 문법 강조 플러그인을 사용하고 있어도 잘 작동합니다. (highlight.js 를 직접 추가한 케이스라면 하이라이트 적용 전에만 실행시켜 주면 됩니다.) 준비물: 아래 js 파일 다운로드 받아서 스킨에 업로드 해주세요... 2020. 8. 19. highlight.js (문법강조) 적용하기 및 설정 코드블럭으로 입력한 소스를 알록달록 예쁘고 보기 쉽게 만들어 주는데는 여러 방법이 있는데... 그중 티스토리와 가장 찰떡궁합인 highlight.js 를 적용하는 방법을 알아보자! (줄번호 추가는 2020/08/16 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 참고) 방법1: '코드 문법 강조' 플러그인 사용 이건 뭐 딱히 설명이 필요 없을듯.. 가장 심플한 방법이라 (아마 다들 알아서 쓰고 계실듯..) 편리함이 장점이라면, 단점으로는 사용가능한 테마가 제한적이고 버전 업데이트가 안되고 탭간격 같은 옵션 적용불가 방법2: '코드 문법 강조' 플러그인 사용을 해제하고 직접 highlight.js 를 스킨에 추가하기 [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래.. 2020. 8. 17. 본문의 모든 링크는 새창으로! 난 내 블로그의 본문안에 있는 링크들은 모두 새창으로 열리는 걸 선호함 그런데 종종 무심코 글을 쓰고나면 링크에 타겟 지정하는 것을 까먹을 때가 있음 (특히 [이전 글 넣기] 플러그인 링크나 복/붙한 링크의 경우...) 암튼, 그것 때문에 다시 수정하기는 귀찮고. 그냥 스킨에 스크립트 한줄 추가해서 해결함 적용방법: [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래 소스를 넣고 [적용]하면 끝 var anchors = document.querySelectorAll('.entry-content p a, .entry-content l a, .entry-content blockquote a, .entry-content div a'); for(var i=0; i < anchors... 2020. 8. 16. 움직이는 햄버거 메뉴 + 클릭하면 펼치기 요즘 많이 보이는 메뉴 버튼... (주로 모바일에서..) 대충 요런거... 눌르면 샤르륵 X 로 바뀌면서 뭔가 내용이 나오는.... 메뉴 펼침은 숨겨진 체크박스를 이용함 예제: (Result 클릭) https://jsfiddle.net/alikong/8r3g0czn/ 2020. 8. 14. 파일 업로드 미리 보기 파일.. 특히 이미지 같은거 올릴 때 파일 선택하면 실제 업로드 하기 전에 미리 보여주기 대략 위 예시같은 기능... function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { document.getElementById('preview').src = e.target.result; }; reader.readAsDataURL(input.files[0]); } else { document.getElementById('preview').src = ""; } } 구현은 단순 https://jsfiddle.net/alikong/hkzxegm6/ 2020. 8. 14. 업로드 허용 확장자 지정하기 파일 올리기 할 때 이미지만 받는다던지, 엑셀만 받는다던지... 확장자를 지정해서 미리 차단할 수 있음 Show .xls, .xlsx, .csv files... Only show Excel (.xlsx) files... Only show Excel (.xls) files... Only show image files... Only show text files... Only show html files... Only show video files... Only show audio files... Only show .WAV files... Only show .PDF files... 2020. 8. 10. pixi.js - 웹에서 쉽게 애니메이션 구현하기 플래시를 대체한다고 해야 할까... 웹에서 Canvas 위에 각종 애니메이션을 쉽게 구현하게 해주는 툴? The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. 나도 아직 많이 써보진 못해서 설명은 조금 어려우나 데모들이나 실제 사용중인 사이트들의 결과물을 보면 대단한 넘인 걸 느낄 수 있음 HTML5로 게임을 만들거나, 애니메이션을 만들거나, 기능성 배너를 만들거나 그 외 여러가지 활용도가 있음 (예전에 플래시로 할 수 있는 건 거의 다 가능한 듯) html + css + js 로 할 수 있는 그 이상의 것들... (꼭 이상이 아니라도 좀 더 편하게...) 구현.. 2020. 8. 10. 스크롤 활용도 극강 UP! - 스크롤매직 (ScrollMagic) 스크롤에 따라 페이지에 다양한 액션을 주고 싶을때! 이게 생각으로 쉬운데 실제 짜다보면 손도 많이가고 은근 복잡해지는 부분도 있다. 그럴땐 그런거 고민하는 시간에 탄탄하고 가벼운 플러그인이 있다면 냉큼 집어 쓰는게 진리! 데모 사이트 한번 둘러보시면 우와~ 하게 되고, 생각보다 훨씬 많은 활용도가 있음을 알게 됨 데모: http://scrollmagic.io/examples/index.html 다운로드 및 안내: http://scrollmagic.io/ (메인 페이지만으로도 데모 그 자체라는..ㅋ) 2020. 8. 7. 스크롤 바닥치면 뭔가 하기 제목 그대로... 편의상 jquey를 썼으나 일반 js 로 하기에도 높이 값들 가져오는 명령만 다를뿐 큰 차이는 없음 (초보시라면 위 이미지 출처 사이트에 추가 설명이 잘 되어 있으니 한번 보시는 것을 추천) var noMore = false; $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var innerHeight = $(window).height(); var scrollHeight = $(document).height(); if (scrollTop + innerHeight >= scrollHeight) { //스크롤이 바닥치면 뭐할지 여기에 정의 시작 if (!noMore) { $("body").append(""); } n.. 2020. 8. 7. CodeMirror - 최강 온라인 코드 에디터 내가 예제 만들때 종종쓰는 JSfiddle 이나 CodePen 같은 사이트나 각종 소스 입력이 가능한 곳곳에 쓰이는 에디터 (티스토리 스킨 편집도 이거 쓰고 있음) 예전에 모를때는 우와.. 이런거 어떻게 만들지? 막 궁금했다가 뭔지 알고 써보니 정말 좋더라는... 한때 이걸로 코드 연습 사이트도 만들었었는데 진짜 안정성과 기능에 많이 감탄했던 기억이 남 다운로드 및 사용법: https://codemirror.net/ 모두 영문이라 좀 그렇긴한데.. 옵션만 잘 이해하고 설정해주면 쉽게 사용할 수 있음 혹시 댓글로 질문 남기시면 아는 선에서 답변해 드림 ^^ 2020. 8. 6. 라디오 radio / 체크박스 checkbox - input 꾸미기 input의 type들 중 radio 나 checkbox 를 많이 쓰게 되는데.. 이 둘은 CSS로 꾸미기가 가능하고 선택되고 안되고 같은 상태가 감지되기 때문에 다양한 용도로 변형되어 사용됨 나도 하나 뚝딱 만들어 봄 예제와 소스는 아래 참고 https://jsfiddle.net/alikong/24t87bvu/ 핵심은 input은 숨기고 label을 마음껏 꾸미는 것 (필요하면 :before 나 :after 등으로 좀 더 확장해가면서...) 그리고 체크 상태일때와 아닐때에 따라 다른 스타일을 적용하는 것 잘 이해하고 응용하면 메뉴로 만들 수도 있고, 탭으로 쓸 수도 있고 각종 버튼으로 만들 수 있음 2020. 8. 6. 비밀번호 보이기 감추기 요즘 웹/모바일 사이트 비밀번호 입력창에 종종 보이는 그것 원리는 단순, input 의 type 을 password 와 text 로 교차시키기 소스와 예제는 아래 참고 https://jsfiddle.net/alikong/mshf9nv4/ 2020. 8. 6. jQuery - selectors / 선택자 목록 제이쿼리의 가장 큰 장점이 쉽고 다양한 선택자라고 해도 과언이 아닐 듯 그래서 이 선택자들만 잘 파악하고 있어도 코드가 짧아지고 진행이 순조로울 수 있겠다 근데 원래 이렇게 많았니!!!??? 있는지도 몰랐던 넘들고 보이고.. (새로운 추가된 애들인가.., 쿨럭) 암튼, 여기 적어놓고 필요할 때 참고 하겠음 (자주 쓰는넘들은 하이라이트했음) All Selector (“*”) Selects all elements. :animated Selector Select all elements that are in the progress of an animation at the time the selector is run. Attribute Contains Prefix Selector [name|=”value”] Se.. 2020. 8. 6. CSS - 뚜껑 열리는 링크 (메뉴) 3D Rotate 알아보다 줏은 아이 원래는 less 버전으로 되어 있던걸 일반 CSS 로 풀어보았음 내용은 별거 없고, 그림자 색상 맞추는게 까다로울뿐! 아래는 소스와 예시: See the Pen plain CSS link - with 3D lid by Alex Park (@alikong) on CodePen. https://codepen.io/alikong/pen/zYqYEwR 2020. 8. 5. CSS - rotate 좌우/상하 뒤집기 (3D) CSS가 하도 좋아져서 다양한 애니메이션도 가능한데 항상 문제는 브라우저 호환! 마우스 올리면 휘릭 뒤집는건 rotateX 나 rotateY를 써서 쉽게 했는데.. 3D 로 보여지게 하려니 손이 좀 가고.. 특히 그냥 뒤집기만 하는게 아니라 뒤집으면서 뒷면에 있는게 앞으로 나오는 식으로 하려니 손이 더 가고.. 다 해놓고 보니 Edge 에선 뒷면이 안나오네! 그래서 알아보니 판을 통체로 하나만 돌리면 안되고 앞면 뒷면을 동시에 돌려줘야 한다니... 아래는 예시: (Result 탭을 눌러보자) https://jsfiddle.net/alikong/ac5ghs6p/ 암튼 해결! 2020. 8. 4. 이전 1 2 3 4 다음
