지난 시간에 Postcss와 Tailwind 설치 그리고 설정 방법 등에 대해 알아보았습니다. 이번 시간에는 Tailwind를 Postcss에서 보다 효율적으로 사용할 수 있는 Postcss 플러그인들을 설치하고 설정하는 방법을 알아보려고 합니다. 꼭 Tailwind 사용이 아니더라도 Postcss 설치와 플러그인 설치 설정 방법은 동일하니 참고해 보시기 바랍니다. Postcss 설치 우선 작업할 폴더를 준비하고 npm init 해 줍니다. npm init -y 준비가 되었으면 postcss와 postcss-cli를 설치합니다. npm install -D postcss postcss-cli 설치가 완료되면 루트 경로에 postcss.config.js 파일을 미리 빈 파일로 만듭니다. Tailwind 설치..
Tailwind를 PostCSS에 플러그인으로 설치하는 과정입니다. Tailwind만 설치해 사용해도 되지만 PostCSS 통해 유용한 플러그인들을 활용할 수 있어 좋습니다. Tailwind만 단독으로 설치하는 방법은 Tailwind에 자세히 설명되어 있으니 참고하시기 바랍니다. Using Tailwind without PostCSS PostCSS에 Tailwind를 설치하는 방법도 설명되어 있습니다. Installing Tailwind CSS as a PostCSS plugin Tailwind 설명을 따라 해 보았지만 정상적으로 작동되지 않았고 Postcss는 설명이 친절하지가 않았습니다. 이런저런 시도 끝에 대략 4시 만에 성공한 방법을 정리해 보았습니다. 작업 폴더 생성 작업할 폴더를 만들고 아래 ..
티스토리 인기 스킨 중 하나인 오디세이 스킨은 "카테고리 글 더보기" 플러그인을 설치해도 본문 하단에 "카테고리의 다른 글" 보기가 나타나지 않게 되어있습니다. 오디세이 스킨 개발자분께서 "카테고리의 다른 글" 보기를 대신해 "이전 글/다음 글"을 설치해 두어 그런 것 같습니다. 그 외에 관련 글도 있고요. 하지만 "카테고리의 다른 글" 보기가 필요하신 분들도 있겠지요. 카테고리의 다른 글 보이게 우선 "카테고리 글 더 보기" 플러그인을 사용으로 활성화합니다. 그리고 CSS 편집으로 가서 숨김 처리한 코드를 찾아 삭제하는 방법도 있지만 여기서는 기존 코드는 그대로 두고 덮어쓰는 방법으로 하겠습니다. CSS 편집 창 가장 하단에 아래 코드를 넣어 주면 "카테고리의 다른 글"이 본문 하단에 나타납니다. .a..
광고를 블로그 사이드에 고정해 광고를 조금 더 효과적으로 볼일 수게 하는 방법으로 흔히 플로팅 광고라 부르기도 합니다. 여기서 소개해 드릴 사이드바 광고는 완전 고정이 아닌 반고정이라고 해야 할 것 같습니다. 고정되어 있다가 본문이 끝나는 시점에서 고정이 풀라는 방식입니다. 코드 자체는 짧고 별거 아니지만 제 블로그 댓글란에 사이드바 고정 광고 질문이 많아 포스팅으로 답변을 대신하려고 합니다. 티스토리에서 배포하는 북클럽 스킨과 매거진 스킨 그리고 담따201 라이트 스킨에 적용하는 방법을 설명합니다. 그 외 스킨은 아래 내용을 참고해 적용하시길 바랍니다. 참고 : 오디세이 스킨은 아래와 같은 방식으로는 적용이 안 됩니다. 구글에서 "오디세이 스킨 사이드바 고정"으로 검색하시면 다른 방식으로 적용하는 포스..
아래 소제목처럼 꾸미는 방법입니다. 스킨에 따라 클래스 명이 다르기 때문에 모든 스킨에 적용되지는 않습니다. 아래 코드는 티스토리에서 제공하는 반응형 스킨에 적용됩니다. 소제목 적용 방법 아래 코드를 복사해 CSS 편집 창 하단 빈 곳에 넣어 줍니다. 북클럽(Book Club) 포스터(Poster) 왓에버(Whatever) /* 본문 소제목 꾸미기 */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content > h4 { padding: 3px 5px; border-bottom: 3px solid; /* 하단 선 두께 3px */ border-left: 15px solid; /* 좌측 선 두께 15px */ border-color: ..
티스토리 카테고리 구조에 맞게 CSS로 작성된 드롭다운 내비게이션 바입니다. 티스토리 스킨 대부분이 서브 메뉴가 있는 내비게이션 메뉴바가 없는 것 같아 기본 베이스로 만들었습니다. 티스토리 카테고리 구조 HTML 전체보기 메뉴1 메뉴2 메뉴3 서브메뉴1 서브메뉴2 서브메뉴3 메뉴4 스킨에 적용 하기 html 편집창 css 편집창 .tt_category li a.link_tit { display:none; } .top-navbar { padding: 26px 0; font-size: .875rem; } .top-navbar ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #ffffff; } .cate..
