전체 글84 코드블럭 - 코드 자동 정렬 추가 (+ 탭간격 조정) 코드블럭 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. 비 - 폴킴 아... 비 징하게 오네 진짜... 비와 관련된 노래가 많지만.. 난 이 노래가 매우 좋더라... 폴킴이라 막 좋은건 아니고... 멜로디가 왠지 익숙하고 편안한? 그런 느낌.. 창문에 떨어지는 빗방울을 보고 있자니 더 생각나는 노래 비가~ 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. 친구라도 될 걸 그랬어 (어쿠스틱 버전) - 거미 나 남자노래만 듣는 사람 아님!ㅎ 여자 발라드 최고봉 거미의 '친구라도 될 걸 그랬어' (어쿠스틱 버전)도 엄청 많이 듣는 노래 중 하나 원곡은 2003년에 발매된 거미 1집에 수록된 곡인데... (친구가 부릅니다, 거미라도 될 걸 그랬어~ 로 유명(?)한...ㅋ) 아무튼 난 그보다 2006년 거미의 언플러그드 앨범에 들어간 어쿠스틱 / 언플러그드 버전을 훨씬 더 좋아함 원곡은 걍 슬픈데 이 버전은 슬프면서 안슬픈 듯 부르는 오묘한 느낌이 든다랄까? (작곡가는 내가 조금 불신하는 김도훈 작곡가님이라 살짝 놀람...) 2020. 8. 5. 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. 이전 1 2 3 4 5 6 다음
