본문 바로가기

웹 코딩54

대표이미지 본문에서 감추기 어떤 이미지를 글에는 넣기 싫으나 대표이미지로는 지정하고 싶을 때, 다들 아시다시피 글 저장 직전에 대표이미지만 따로 지정해서 업로드 하면 됩니다. 저도 늘 그렇게 해왔었죠. 그런데... 그게 개인적으론 붙여넣기 업로드가 안되는 불편함이 있었더랬죠. 그러다 어느날 우연히 알게 된건데요... (혹시 모르시는 분 계시면 유용하길 바라며..) 글 본문에 대표이미지로 이용될 이미지를 추가하고, 그 이미지의 우상단 대표를 체크해주고, 본문에서 과감히 지워버리면!! 지워버린 이미지인데도 글 저장시 대표이미지에 추가된 상태로 나오고, 글 저장하니 썸네일로 잘 나오네요. 오~ 주로 붙여넣기 방식으로 이미지를 추가하는 저에겐 나름 꿀팁! 2020. 10. 28.
포스팅 내 테이블 자동 정렬 검색을 해보면 쉽게 가져다 쓸만한 '테이블을 동적으로 정렬'하는 스크립트나 플러그인이 정말 많습니다. 보통은 헤더를 클릭하면 작동하고, 오름순 내림순 반복 처리할 수도 있습니다. (아래 이미지 처럼) 하지만 이미 널려 있는 걸 저까지 또 만들 필요는 없을 것 같고, 지극히 개인적으로, 그저 가끔이라도 포스팅할 때 내용에 어떤 목록이 필요해서 테이블을 썼는데 다 쓰고보니 이왕이면 정렬해서 보여주면 좋을 것 같을 때가 종종 있길래 (글 쓸 때 이미 머리속에 정렬된 순서대로 쓰는게 아닌 이상...) 그런 포스팅 시에 간단히 사용할 수 있는 스크립트와 적용 방법을 공유하려 합니다. 사실 뭐.. 별건 아니고 그냥 해보니 이런 것도 되더라... 정도? (뒷북이라면 뭐... 어쩔수 없.....ㅋ) 주 기능은... 글.. 2020. 10. 28.
CSS로 스크롤바 꾸미기 간혹 스크롤바가 생기는 고정된 크기의 Div를 써야 할 때 기본 스크롤바는 너무 크고 못생겼다는 생각이 들 때가 있습니다. 이럴때 사용할 수 있는 CSS 입니다. 스크롤바를 원하는대로 꾸밀 수 있게됩니다. See the Pen Custom Scrollbar styling by Alex Park (@alikong) on CodePen. 위에서 CSS 탭을 눌러 보시면 원하는 모양의 스타일 번호와 코드를 찾으실 수 있습니다. 그 외 비슷한 용도로 스크롤바를 만들어주는 여러 js 라이브러리들도 있지만 css로는 모양만 꾸며주고 기본 스크롤바를 쓰는게 좋은 것 같습니다. 이 외에도 검색해보시면 더~ 많은 소스들이 있겠지만.. 왠만해선 전 위 애들중 하나 골라서 색상좀 만져주고 끝냅니다. 2020. 10. 14.
clipboard.js - 클립보드로 복사하기 웹 페이지 개발 중 페이지 내 텍스트를 클립보드로 복사하는 기능이 필요할 때, 간단히 가져다 쓸 수 있는 라이브러리를 소개합니다. 추억을 거슬러 가보면... 웹 초창기엔 플래시를 쓰기도 했고, 한동안 화면밖에 textarea를 만들어 텍스트 선택 후 복사시키는 꼼수를 쓰기도 했고, 요새는 클립보드에 직접 접근하는 방법도 있습니다만... 이게 안되는 걸 되게하는 건 아니지만 별거 아닌 간단한 기능 때문에 코드에 시간을 투자하는 것 보단 깔끔하면서 가볍고 이미 검증된 라이브러리를 쓰는게 속 편하거든요. ^^ 설치 및 사용: 1. 사이트에서 소스를 다운 받거나 cdn 서비스에서 제공되는 js 파일을 페이지의 body 하단에 추가합니다. 2. 복사 기능을 담당할 버튼의 선택자를 전달하며 스크립트를 실행합니다. .. 2020. 10. 7.
애드센스 인피드 광고 - 글 목록 내 배치 (Adsense / in-feed ad) 본문 내부나 사이드바에 광고를 개시하는건 그닥 어렵지 않습니다. 그쵸? 그저 광고를 생성하고 (보통은 디스플레이 광고를 선택하겠죠?), 생성된 광고의 코드를 가져다 원하는 위치에 넣어주면 되니까요. 심지어 본문 상/하단 광고 개시는 티스토리 플러그인로도 지원하고 있어서 매우 수월합니다. 그래서 딱히 이와 관련해선 글을 쓸 필요도 없을 것 같습니다. 그러나 이 인피드 광고는 글 목록의 일부로 보여지게 하는게 목적인 광고라... 스킨의 어디에 넣어야 할지 살짝 난감할 수 있습니다. 게다가 어디에 넣을지 알게되어도 목록의 시작이나 끝이 아니라면 추가적인 처리가 적용되어야 원하는 순번에 나올 수 있게 됩니다. 그리고 목록에서 너무 튀지 않게 다른 글들과 유사한 스타일로 만들어 줄려면 광고 생성시에도 자잘하게 설.. 2020. 10. 1.
사이드 바 - 달력 / 글 보관함 / 링크 스킨마다 있을 수도 있고 없을 수도 있는 사이드 바의 각 아이템들 중에... 북클럽 스킨에는 달력 / 글 보관함 / 링크 가 없네요... 쩝... 달력은 월별 / 일별로 글을 모아 보기에 편하고... (스스로에겐 1일1포스팅이 잘 되고 있는지도 알 수 있고. ㅋ) 글 보관함은 지난 6개월간 월별로 글수를 볼 수 있고... 링크는... 뭐 외부 링크들을 주욱 모아 놓으니 좋고... 이런저런 이유로 혹시 이들이 필요하다면 (어떤 스킨이건) 간단히 추가 할 수 있습니다. 방법 관리 > 스킨편집 > html 에서 를 찾아 그 위에 아래 내용을 넣어줍니다. 달력 월별 포스팅 () 링크 ... ... 그리고 CSS에 스타일을 추가합니다. .sidebar .archive, .sidebar .calendar, .sid.. 2020. 9. 28.
댓글/방명록 이모티콘 - 장려하기? 어차피 댓글도 잘 안달리는데 이모티콘이 무슨 소용이겠냐만...ㅠㅠ 공식 이모티콘 플러그인이랍시고 고작 :) ;) :P 8D :( --; 6개만 지원하는데 뭔 의미가 있겠냐만... 그래도!! 이모티콘 플러그인을 사용중이라면, (즉, 관리 > 플러그인에서 [댓글/방명록 이모티콘 표시] 플러그인을 활성화했다면!) 댓글 쓰는 사람에게 이를 알려주고, 더 나아가 편리하게 이모티콘을 입력할 수 있게 해주면 좋겠죠?!!! Why not?! ㅋ 적용 방법 스킨편집 > html 편집 > html 내용중에 댓글/방명록 입력폼 두곳을 찾아 아래처럼 코드를 추가합니다. 이모티콘: .... .... .... 이모티콘: .... .... .... .... .... .... 잘보시면 2020. 9. 24.
북클럽 스킨 - 커버 갤러리 (설명 및 버그 수정) 홈 화면에 주로 사용되는 커버 갤러리에 대해 살펴보았습니다. (뭐가 뭔지 매번 적용해서 보고 수정하고 하는게 자증나서..ㅋ 공부하는 차원으로...) 커버 갤러리1 커버 갤러리2 한 화면 노출 글 수: PC (5), Mobile (2) (그 이상은 슬라이더로 처리됨) 한 화면 노출 글 수: PC (3), Mobile (1) (그 이상은 슬라이더로 처리됨) 표시 항목: 이미지 + 제목 표시 항목: 이미지 + 제목 + 본문3줄 + 댓글 수 + 작성일 CSS 클래스명: cover-thumbnail-3 CSS 클래스명: cover-thumbnail-4 위는 북클럽 스킨의 목록 스타일로 제공되는 커버 갤러리1과 2의 비교 표입니다. 각기 스타일도 다르고 아이템의 크기도 다르니 잘 살펴보시고 필요에 따라 적당히 골라.. 2020. 9. 24.
placeholder - 임시 이미지 제공 서비스 위 이미지는 https://via.placeholder.com/150/FFFF00/000000 로 만들었습니다. 테스트용 이미지가 필요하거나, 기타 웹 작업할 때, placeholder라고 하죠? 임시 이미지들을 제공하는 유용한 서비스입니다. 급히 텍스트를 이미지로 넣어야 할 때도 쓸 수 있습니다. 주소만 기억했다가 2020. 9. 23.
북클럽 스킨 - 메뉴 확장 상단 메뉴를 꼭 확장해서 써야 한다면.... (보여줄 페이지가 많다거나 해서...?) 메뉴들을 수동으로 관리할지언정 난 이렇게 펼치는 메뉴가 필요해! 그렇다면.. 간단히 가능한 방법이 있어 올립니다. 적용 방법 관리 > 스킨 편집 > html 편집에서 아래 3줄을 찾아서 (샾은 #으로...ㅋ) ... [샾샾_blog_menu_샾샾] 아래 내용으로 덮어 버리시면 가능합니다. 홈 서브메뉴 1 서브메뉴 222222 서브메뉴 3 태그 섭섭이 메뉴 1 섭섭이 메뉴 2 태그2 섭섭이 1 섭섭이 2 방명록 jQuery 버리기 자~ 이제부터 상단 메뉴는 수동 관리 체제에 돌입합니다. ㅋ 메인 메뉴 구성하실 때 참고할 부분은.. 이렇게 첫 메뉴과 끝 메뉴에는 클래스명에 first / last 를 넣어주세요 서브 메뉴는 .. 2020. 9. 18.
이미지 클릭 시 다른 이미지 보여주기 포럼에 답변하기 위해 작성하는 포스팅! 라이트 박스 플러그인 사용중이고 본문 이미지 클릭 시 다른 이미지가 보여지길 원한다면! (보통은 이럴 필요가 전혀 없지만..) 스킨편집 > html 편집으로 가서 하단 윗줄에 아래 내용 추가 그리고나서 글 작성 시에는, 일단 평소처럼 이미지를 모두 올리며 글을 쓴 후 저장하기 전에 html 모드로 변경해서 이미지당 아래처럼 클릭 시 대신 보여질 이미지의 주소를 data-alt 로 추가해줌 ....height="NaN" data-alt="....대체할 이미지 주소..." data-ke.... 이렇게요. 아래는 실제 적용 사례 (클릭해 보세욤) 조금 수작업이지만... 그래도 이 방법말고는 없을 듯 합니다. 그리고 대체 이미지도 업로드해야 한다면 일단 그냥 보이게 업로드.. 2020. 9. 17.
제이쿼리 버리기 - Bye jQuery 장점도 많고 알아두면 매우 편리한 jQuery. 나에게 코딩의 즐거움을 선사했고 너무나도 유용하게 잘 썼던 제이쿼리. 그러나 그간 브라우저들도 많이 좋아져서 제이쿼리가 아니어도 충분히 어렵지 않게 많은 것들을 구현할 수 있게 되었고, 제이쿼리 기반으로 뭔가를 뚝딱 만들어 나눌 때 이용자의 환경에도 꼭 제이쿼리가 설치되어 있어야 한다는 전제가 있는 것도 좀 불편하고, 설치되어 있는 제이쿼리 마저도 버전에 따라 문제가 발생할 수도 있고, 제이쿼리가 워낙 제공하는 기능이 많다보니 처리 속도 면에서는 조금 느린 듯 하고, 이제 브라우저는 최저 IE11 까지만 지원을 고려하면 될 것도 같고, 그래서, 이런저런 이유로인해 최근엔 제이쿼리를 가급적 안쓸려고 하고 있네요. 또한, 개인적으로는 개발속도나 소스가 조금 길.. 2020. 9. 17.
Odyssey 오디세이 스킨 - 사이드 바 고정 코드 재활용 및 저장 차원에서.... 혹시 나중에 나도 스킨을 바꿀지 모르니까.... 오디세이 스킨에서도 사이바 고정을 원한다면... 1. 스르륵 따라오는 버전 @media screen and (max-width:1060px) { aside.area-aside { margin-top: 0 !important; } } .main { align-items: flex-start; } aside.area-aside { transition: margin-top 0.5s ease-in-out 0s, right .5s; } //// 아래 offset 함수는 퀵점프에 이용된 함수라, 이미 html상 존재한다면 삭제해도 됨 function offset(el) { var rect = el.getBoundingClientR.. 2020. 9. 16.
Odyssey 오디세이 스킨 - 사이드 바 위치변경 새로나온 오디세이 스킨을 2단으로 사용할 경우, 사이드 바는 우측에 나오는게 기본입니다. 그런데 이게 굳이 왼쪽에 나오길 원하신다면... html 편집으로 전체를 내부 최상단으로 이동하고 margin값만 조정하면 됩니다. 그러나, 소스상 원래 구조를 건드리고 싶지 않다면 아래와 같이 간단히도 해결이 가능합니다. 스킨편집 > html 편집 > 하단 가 끝나기 전에 아래 코드 추가. 조정하고 나면 이렇게 됩니다. 2020. 9. 15.
Odyssey 오디세이 스킨 - 상단 메뉴 고정 새로운 스킨 '오디세이'(Odyssey)가 나왔죠? 포럼에 어떤분이 올리신 질문에 답변으로 쓴건데.. 없어지면 아까우니 포스팅으로도 남겨봅니다. 이 스킨을 사이드 바가 가려진 1단으로 쓰고 있는 경우, 아래 코드를 스킨편집 > html 편집 으로 가서 하단 가 끝나기 전에 넣어 주면 상단 메뉴가 늘 화면 위에 붙어 있게 됩니다. (아니면 요롷게 스타일로만으로도 고정이 되서 다행입니다. 2020. 9. 15.
현재 접속자 현황 - whos.amung.us 오늘 얼마나 놀러들 오셨나~ 이번주는 방문자가 몇이나 되나~ 늘 관심이 가는 내용이죠? 그러나 이런것 외에도... 지금 당장 롸잇나우 몇명이나 내 블로그를 보고 있지?!! 이런게 궁금할 때 쓸 수 있는 무료 서비스(위젯)가 있어 소개합니다. whos.amung.us - free real-time stats! Free real-time analytics for your website or blog! No account required. Customize your free widget and get started! See where your visitors are from and what pages are most popular on your website. whos.amung.us 가입도 필요 없고, 설치.. 2020. 9. 14.

티스토리툴바