본문 바로가기

웹 코딩54

사이드 바 - 스크롤 따라 다니게 만들기 따라다니는 메뉴? 보통 Sticky 라고 하나요? 평소엔 자기 위치에 있다가 위아래로 스크롤 될 때는 화면상 위치가 고정되는거요. (이미 좌측 사이드 바에 적용되어 있습니다.) 특히 요샌 포스팅 길이도 많이들 길고해서 사이드 바에 이 기능이 적용되서 따라다니면 좋겠다는 생각을 해봤습니다. 그래서 살펴보니 float 이 적용된 제 사이드 바를 그렇게 만드는 방법은 3가지 정도 있을 것 같습니다. 우선 제일 쉬운 방법부터... 방법 1. CSS 의 position : sticky 사용하기 #aside { position: sticky; top: 0; } 위 내용을 css에, 아니면 html에 style 태그로 감싸서 넣어줍니다. (#aside 는 북클럽 스킨 사이드바에 지정된 아이디입니다. 필요 시 수정!).. 2020. 9. 11.
태그 - 강조 차등 적용 (+ 보너스) 원래 태그가 등록 빈도에 따라 5단계로 나눠지는거였군요?! 그렇다면 각 단계별로 다르게 표현할 수 있겠네요. ^^ 알아보니 태그에는 cloud1 부터 5 까지 순위별로 클래스가 적용될 수 있습니다. (1 = 제일 많이 등록된 태그) (북클럽 스킨에선 역시나 누락된 내용이군요... 췟..) 적용 대상 사이드 바 > 랜덤태그 목록 메뉴 > 태그 페이지 (위 두 곳 외에도 글 하단에 나오는 태그도 있죠? 그러나 거긴 빈도레벨 구분 적용이 안되서 패스합니다) 적용 방법 1. 스킨 html 수정 (북클럽 기준으로 작성한 내용입니다. 다른 스킨이고 이미 적용되어 있다면 굿!) 태그 ... ... ... 태그 위 7, 21번 줄처럼 가 들어있는 랜덤태그 목록의 태그들 끝에 [더보기] 추가하는 법 스킨 html 을 수.. 2020. 9. 7.
댓글 (+방명록) - URL 처리 (링크 및 이미지 적용) 역시나 제가 필요해서 만들게 된 아이입니다...ㅋ 주요 기능 댓글에 URL 주소가 입력된 경우, 클릭하면 새창이 열리게 만들어 줍니다. 실제 a 태그로 변환하는건 아니고 onclick 으로 안전하게 처리합니다. URL 주소가 이미지라면 해당 텍스트를 없애고 이미지를 바로 보여줍니다. 이미지를 불러오는데 문제가 생기면 그냥 url을 유지합니다. data:image 형식의 data URL도 이미지로 바꿔줍니다. 이미지 클릭 시 새창을 통해 이미지로 이동합니다. 방명록도 댓글이라 원하실 경우 동일하게 처리할 수 있습니다. 댓글/방명록의 신규 등록 및 수정시 모두 바로 바로 처리됩니다. 적용 방법 1. 스킨 html 수정 답글 ... ... ... ... ... ... 답변 ... ... ... 위 코드와 같이.. 2020. 9. 7.
CSS Counter (카운터) 활용법 요즘처럼 블로그 포스팅을 할때 h 태그를 이용해서 체계적인 글을 쓰는게 대세인 상황에서, 누군가는 제목들에 자동으로 번호가 붙여지길 원할 수도 있겠죠? (전 글을 막 써서 전혀 안필요함..ㅋ) 아마도 그럴때 유용하게 쓰일 수 있는 CSS의 counter 라는 아이가 있습니다. 아래 예시(result)와 사용된 html 및 css를 참고해 보세요. See the Pen css counter by Alex Park (@alikong) on CodePen. 키 포인트는 counter-increment: - 이용할 카운터 정의 (1씩 늘어나는걸 기본으로 하지만 증가/감소 값 지정도 가능) counter-reset: - 카운터 값 초기화 content: counter('...') - 카운터 값 표시 이렇게 3가지.. 2020. 9. 6.
북클럽 스킨 - GNB 메뉴 현위치 버그 상단 메뉴에서 현재 페이지를 강조해주는 스크립트에 오류가 있어 수정했습니다. 오류 증상 원래 의도한건지 모르겠는데 '홈'은 늘 불이 들어옵니다. (대체 왜...?? 심지어 글을 읽을때도!?) 메뉴에 페이지라던가 어떤 항목을 추가하면 추가된 메뉴엔 불이 안들어옵니다. 페이지 로딩이 다 된 후 강조가 처리되서 늦게 불이 들어오는 것도 마음에 안듭니다. 그래서 스킨의 기본 script.js 를 아래와 같이 수정했습니다. [원래 코드] $(window).on("load", function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(th.. 2020. 9. 6.
북클럽 스킨 - 포인트컬러 활용 '더' 하기 관리 > 스킨편집에 들어가서 우측의 스킨 설정 영역을 바닥으로 내려보면 포인트컬로 설정이 가능한 걸 볼 수 있습니다. 근데, 실제 이 포인트컬러가 적용된 곳을 찾아보면 몇군데 없네요. (댓글 등록 버튼, 글 내용중 링크 색상, 댓글 수 외 몇몇) 물론 북클럽 스킨이 기본적으로 워낙 모노톤이고 단정하기 때문에 이런 최소한의 사용이 더 마음에 들 수도 있습니다. 절대적으로 개인적인 취향에 따라 호불호가 갈릴 수 있는 부분이겠지만 저는 이 포인트컬러의 적용 폭을 조금 더 넓히고 싶었습니다. 이렇게 하면, 기분이나 시즌에 따라 스킨설정에서 간단하게 이 컬러만 한번 바꿔주면 내가 지정한 부분들의 색상도 한꺼번에 바뀌는 장점이 있다고 본거죠. 따라서, 필요하신 분만 적용하시면 되겠습니다. 아니면, 필요한 부분만 추.. 2020. 9. 6.
북클럽 스킨 - 댓글 버그 수정 그간 잘 안써봐서 몰랐는데... 현재 사용중인 북클럽 스킨에서 댓글을 수정/삭제할 때 약간 이상하게 작동하는 것 같은 느낌적인 느낌을 우연히 받아 좀 살펴보았더니 역시 문제가 있네요?! (저만 그런거 아니죠? 제발...) 아무래도 스킨 제작자의 실수라고 보여 집니다만, 그래도 기본 스킨 중 하나인데 좀 꼼꼼히해서 내놓으시지.. 아쉽네요. (설마 Book club 이 혹시 '부끄럽' 웠던건가...ㅡㅡ;) 문제점 댓글을 수정하면 새로 등록되는 것처럼 추가되고 기존 댓글이 화면에 남아 있음 댓글을 삭제해도 페이지를 새로고침하기 전까진 화면에 남아 있음 추가/삭제/수정의 결과가 사이드바의 '최근댓글'에 반영되지 않음 글에 첫 댓글 등록 시 삭제/수정 버튼을 보여지게 하는 '더보기' 버튼이 먹통임 방명록도 사실은.. 2020. 9. 4.
퀵점프 - 본문용 책갈피? 목차? 바로가기? 저와는 달리 글의 내용이 충실한 열정 블로거들을 위한 툴!? ㅋ 본문 내용 중 제목 문단1~3 (h1, h2, h3, h4) 을 썼거나 굵게 태그로 표시한 내용이 있다면 뽑아서 바로 가기를 제공합니다. 글의 키워드 목록이라고나 할까요? 우선, wbluke 님의 ToC (table of contents) 목차 기능을 보고 영감을 받아 만들어 보았습니다. 계층적이고 디테일한 목차가 필요하신 분은 고고! 대신 저는 개인적으로 제목 문단을 잘 사용하지 않고, 글의 구성이 단층적이며, 흐름에 끊김이 없이 쓰면서 구간별 구분을 명확히 하는 그런 스타일이 아니라고 판단해 목차보다는 단순히 키워드 추출의 느낌으로 글 내용중 중요시 되어야 하는 부분으로 바로 이동하는 것을 주목적으로 구성했습니다. 설치법 1. 스킨 편집.. 2020. 9. 2.
CSS 로 내용 넣기 (+내용 선택 안되게 만들기) 제목 정하기가 너무 어렵...ㅡㅡ; 아무튼, 골자는 이렇습니다. 다들 알다시피 css로 html 태그에 뭔가 내용을 넣어 주는 방식으로는 ::before 나 ::after 가 있습니다. 이 때, 넣어줄 내용을 태그의 data 속성에서 읽어 오는 방법이 있네요. 위 예제를 보시면 div 태그 안에는 실제 아무 내용도 없습니다. 하지만 css가 attr(data-content); 를 통해서 data-content 에 있는 내용을 div 안에 뿌려줍니다. 여기서 재미있는 점은 ::before 나 ::after 로 생성된 내용은 드레그 선택이 되지 않는다는 겁니다. 드레그 시 선택이 되면 안되는 내용을 넣을 때 유용할 수 있겠습니다. 참고로 content: 는 ::before 나 ::after 에서만 쓸 수 있.. 2020. 9. 1.
코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전) 재미삼아 추가하다보니 기능이 덕지덕지!! ㅋ 단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요. 아마도 이게 마지막이지 싶으나... (뭐 사실 아직 찾는 사람도 쓰는 사람도 없는 것 같아 부담은 없습니다만. ㅋ) 암튼, 제가 사용하고 있는 그대로 공유하는게 맞다 싶어 풀버전 올립니다. 기능 목록 줄 번호 표시 줄 시작번호 지정 가능 줄 강조 가능 ([3,5,7-10]과 같은 배열로 표시, 7-10같이 범위도 지정 가능) 자동 줄바꿈 (pre-wrap) 적용 시 바뀐줄에도 들여쓰기 (indent) 유지 코드상 색상값(예: #FFFFFF, black, rgb(125,125,125) 등)에 어떤 색인지 보여주는 컬러박스 추가 괄호({},[],()) 및 태그 (예.. 2020. 8. 31.
IE 에만 적용되는 스크립트 해외 큰 사이트들을 보면 요즘 추세가 IE를 아예 지원하지 않는거긴 합니다만... 그래도 간혹 이 IE에서만 다르게 실행되게 코드를 짜줘야 할 때가 있습니다. (특히 한국에선...) 다행히 MS의 Edge 는 해당이 안되고요. 시장조사기관 스탯카운터에 따르면 2020년3월 기준 전 세계 웹브라우저 점유율은 크롬이 69.35%로 1위고 파이어폭스 9.54%, 사파리 8.51%, 엣지 4.64% 등이 그 뒤를 잇는다. IE는 3.47%로 5위다. 반면 한국에서는 크롬이 71.56%로 1위고 IE가 13.76%로 2위다. 엣지 4.73%, 웨일 3.93%, 사파리 3.34%, 파이어폭스 1.61%가 뒤따르고 있다. 출처: 디지털 데일리 암튼, 그럴 때 아래처럼 구분하면 IE에만 해당되는 스크립트를 쉽게 짤 수.. 2020. 8. 25.
microlight.js - 독특한 단색 코드 강조 문법 강조계의 이단아!! (아.. 너무 올드한 소개 멘트네요..) 암튼, highlight.js 및 여러 코드 문법 강조 라이브러리들과는 많이 다른! 마이크로라이트! microlight.js 를 소개합니다. 색상은 단색으로 하지만 그림자와 투명도를 이용해 키워드들만 눈에 잘 보이게 강조해줍니다. 코드 언어도 지정해줄 필요 없이 왠만해선 다 알아서 중요 단어들만 강조해줍니다. 그래서 여러 언어가 섞여 있어도 됩니다. 사이트의 디자인 테마에 따라 이런 단색 강조도 필요할 때가 있을 것 같네요. 소스도 엄청 가볍고 CSS도 딱히 필요 없습니다. 제작자 홈: http://asvd.github.io/microlight/ microlight.js (2.2k) Highlights code in any programm.. 2020. 8. 25.
코드블럭 - 줄번호 표시 (라이트 버전) 난 다 필요없고 단순히 줄번호만 표시되면 좋겠다!! 하시는 분들을 위해 준비했습니다. 설치법은 풀버전과 동일합니다. 그저 소스가 매우 짧을 뿐 풀버전과의 기능적 차이는, 줄번호 감추기 불가 줄강조 불가 시작번호 지정 불가 긴 코드가 줄바꿈되었을 시, 들여쓰기(indent)가 유지되지 않음 선별적 적용 안됨 더 많은 기능은 아래 글 참고 2020/08/25 - [웹 코딩/티스토리] - 코드블럭 - 줄번호 표시하기 (풀버전) 2020. 8. 25.
코드블럭 - 줄번호 표시하기 (미들 버전) 최신버전 업데이트는 alikong.tistory.com/46 으로!! 코드블럭 - 줄번호 & 추가 기능 (v2. 풀버전) 재미삼아 추가하다보니 기능이 덕지덕지!! ㅋ 단순히 코드블럭에 줄번호 표시하기로 시작해서 이것 저것 필요한 기능들을 붙이다보니 여기까지 왔네요. 아마도 이게 마지막이지 싶으나... (뭐 � alikong.tistory.com 가급적 최신 버전을 이용해 주세요. 위 글 클릭!! 이하 미들 버전 // 코드블럭 관련 시리즈(?) 1탄 - (뭐..걍.. 내가 필요해서 건드린 부분들? ㅋ) 위에 보이는 코드블럭 삽입하기를 이용해 입력된 소스에 아래와 같이 줄번호를 자동으로 추가해 줍니다. 혹시(아마 대부분일듯) 코드 문법 강조 플러그인을 같이 사용하고 있다면 현 테마에 맞춰 줄번호 스타일도 맞.. 2020. 8. 25.
코드블럭 + SyntaxHighlighter 코드블럭 - SyntaxHighlighter 버리고 highlight.js 로 갈아타기 혹여 SyntaxHighligher (이하 SH) 가 적용되게 써둔 글이 많아서 higlight.js (이하 hljs) 를 쓰고 싶어도 못쓰는 분들이 계실까 싶어 올립니다. [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래.. alikong.tistory.com 위 글을 본 후에도 굳이 굳이 계속 계속 SyntaxHighlighter 를 쓰시겠다면.... 입력하는 방법이라도 편해질 수 있도록 새 에디터의 코드블럭 삽입 기능을 이용할 수 있게 해주는 소스입니다. [스킨 편집] > [html 편집] > [HTML] 내용중 기존 SyntaxHighlighter.all(); 가 실행되기 전 위치.. 2020. 8. 21.
코드블럭 - SyntaxHighlighter 버리고 highlight.js 로 갈아타기 혹여 SyntaxHighligher (이하 SH) 가 적용되게 써둔 글이 많아서 '코드 문법 강조' 플러그인 (=highlight.js (이하 hljs)) 를 쓰고 싶어도 못쓰는 분들이 계실까 싶어 올립니다. [스킨 편집] > [html 편집] > [HTML] 내용 하단 바로 윗줄에 아래 소스를 넣어 주세요. (제이쿼리는 추가되어 있을 것으로 간주하겠습니다. 아니면 댓글로 알려 주세요.) $("pre").each(function(i, pre) { if (!$(pre).find('code').length) { if (pre.className) { var c = pre.className.replace(/\s/g, ''); var nc = {}; var items = c.split(";"); $.each(it.. 2020. 8. 20.

티스토리툴바