반응형 ▸티스토리 이야기/•티스토리 꾸미기47 티스토리 꾸미기 | CSS를 이용 한 테이블 여백 조정하기 CSS를 이용한 테이블 여백 조정하기오늘은 글 작성 시 자주 이용되는 '표(테이블, table)'의 안쪽 및 바깥쪽 여백을 조정하는 방법에 대해 알아보도록 하겠습니다. 구버전 북클럽 스킨의 기본 세팅은 표 안쪽 여백의 상하가 일치하지 않고 좌우 여백이 없으며, 표 바깥쪽 여백 또한 상하가 일치하지 않습니다. 이로 인해 글 작성 시 다소 불편한 부분이 있어 여백을 조정해 보겠습니다. 최근 새롭게 스킨을 적용한 분들은 따로 설정하지 않으셔도 됩니다. 기본 테이블보통 글 작성 시 에디터에서 테이블을 삽입하면 기본 테이블은 아래처럼 글쓰기에서는 여백이 정상처럼 보입니다. 그러나 미리보기를 통해서 보면 아래처럼 테이블 상①, 하단②이 다르게 보이며, 내부③ 여백도 라인에 붙어 있는 걸 확인할 수 있습니다. 이에 .. 2024. 5. 10. 티스토리 꾸미기 | 다양한 밑줄과 HTML 속성으로 텍스트 강조하기 다양한 밑줄 관련 text 태그의 종류 알아보기 오늘은 다양한 종류의 밑줄을 CSS 수정이 아닌 본문에서 태그를 이용해 HTML로 직접 넣어 주는 방법에 대해서 알아보겠습니다. 다소 복잡하고 난해한 설명이라 이런 게 있다는 정도만 알아두어도 블로그 작성에 도움이 될 수 있습니다. 기존의 획일적인 밑줄이 아니라 조금 더 강조하거나 특별하게 꾸미고 싶은 부분에 사용해 보세요. 참고한 블로그: 코딩에브리바디 (codingeverybody.kr) 다양한 HTML과 CSS, JavaScript까지 자세히 설명되어 있으니, 코드에 관심이 있으시면 꼭 한번 방문해 보시기 바랍니다. 텍스트 강조하기 폰트 크기 및 굵기로 강조하기 폰트의 크기와 굵기를 변경해 간단하게 텍스트를 강조할 수 있습니다. font-size:1e.. 2024. 4. 21. 티스토리 북클럽 스킨 | 본문 상단 브레드크럼 옆에 URL 복사버튼 추가하기 목차 본문 상단 브레드크럼 옆에 URL 복사버튼 추가오늘은 본문 상단 '브레드크럼' 옆에 URL 복사버튼을 추가하는 방법과 '브레드크럼'을 설정하지 않았을 때 URL 복사버튼을 추가하는 방법에 대해 알아보겠습니다. URL 복사는 보통 상단의 주소창에서 바로 복사하거나 하단의 공감버튼 옆의 SNS 공유버튼에서 복사를 해도 되지만 본문 상단 제목 위에 URL 버튼을 만들어 줌으로써 좀 더 쉽게 게시물의 URL을 공유할 수 있도록 해줍니다. 항상 그렇듯 제 글이 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 'URL 버튼'을 적용할 수 있으니 차근차근 따라 해 보시기 바랍니다. 본 내용은 제가 사용하는 '북클럽 스킨' 위주로 작성 되었습니다. URL 복사버튼 추가하기URL 복사버.. 2024. 3. 19. 티스토리 북클럽 스킨 | 사이드바 카테고리 밑줄 넣기 및 마우스 오버 색상 변경 목차'북클럽 카테고리' 밑줄 넣기 및 마우스 오버 색상 변경이번에는 조금 밋밋해 보이는 티스토리 북클럽 사이드바의 카테고리에 밑줄을 넣는 방법과 마우스를 올렸을 때 밑줄 없이 색상이 변경되는 방법에 대해 알아보겠습니다. 적용 예제는 아래 미리보기를 참고하세요.미리보기 '북클럽 카테고리' 폰트 키우기먼저 작아 보이는 듯한 카테고리의 폰트를 아래처럼 조금 크게 만들어 줍니다. 카테고리 수정을 하려면 먼저 CSS 탭으로 이동합니다.1. '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다. 2. Ctrl + F를 이용해 .sidebar .category ul li {를 검색 후 아래처럼 CSS코드를 수정하고 '저장'을 눌러 마무리합니다..sidebar .category ul.. 2024. 3. 7. 티스토리 꾸미기 | 프로필 카드 꾸미기 및 삭제 방법 티스토리 '프로필 카드' 꾸미기 및 삭제 방법.티스토리 '프로필 카드'는 티스토리 블로그에서 사용자의 정보와 프로필을 간략하게 보여주는 작은 카드 형식의 UI를 말합니다. 이 카드는 블로그의 하단에 표시되며, 주로 사용자의 프로필 사진, 사용자명, 소개 문구 등을 보여줍니다.이를 통해 방문자들은 블로거에 대한 간단한 정보를 쉽게 파악할 수 있습니다.최근 '프로필 카드' 기능이 기존에 모바일 환경에서만 보이던 것을 업데이트를 통해 PC 환경에서도 보이도록 설정되었습니다. 업데이트된 '프로필 카드'가 내가 사용하고 있는 스킨과 어울린다면 크게 상관없지만 그러지 않으신 분들은 조금 꾸며보거나, 보이지 않도록 수정하는 것이 좋겠습니다. '프로필 카드' 꾸미기 미리보기.기존의 밋밋한 '프로필 카드'를 아래처럼 스.. 2024. 2. 29. 티스토리 북클럽 스킨 | 스크롤 프로그레스 바(Progress Bar) 초간단 적용 목차 블로그 상단에 스크롤 진행 프로그레스 바 적용하기. 다른 분들의 블로그를 보다 보면 블로그 상단에 눈에 띄는 이상한 그래프 게이지가 있습니다. 스크롤을 내리면 상단에 막대가 늘어났다 스크롤을 다시 올리면 줄어들었다 하면서 끝까지 내리면 막대가 끝까지 채워지더라고요. 그래서 궁금해 검색을 해보니 '프로그레스 바(Progress Bar)'라는 UI였습니다.. 좀 더 검색을 해보니 역시 많은 분들이 '프로그레스 바'의 코드를 올려 주셨으나 왠지 북클럽 스킨에는 적용이 되지 않더라고요, 그래서 이 코드 저 코드를 다 적용해 보며 코드를 조합해 북클럽 스킨에도 적용 가능한 초간단 코드를 만들어 봤습니다. 제 블로그 상단을 보시면 상단에 '프로그레스 바'가 나오는 걸 확인할 수 있습니다. 프로그레스 바(Pro.. 2024. 2. 28. 티스토리 북클럽 스킨 | 카테고리 탐색경로 브레드크럼(breadcrumb) 목차 북클럽 스킨, 카테고리 탐색경로 브레드크럼(breadcrumb) 티스토리 최적화를 검색하다 검색 엔진 최적화(SEO)에 도움이 되는 브레드크럼(breadcrumbs)이라는 게 있다는 걸 알게 되었습니다. 아래처럼 검색 엔진 최적화(SEO) 등 여러 가지 장점들이 있지만 제 경우는 일단 멋져 보여서 적용을 해봤습니다. ^^ 항상 그렇듯 제 글이 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '브레드크럼(breadcrumb)'을 적용할 수 있으니 차근차근 따라 해 보시기 바랍니다. 브레드크럼(breadcrumb)은 SEO 최적화 방법 중 하나로 사이트나 앱에서 사용자가 현재 어느 위치에 있는지를 보여주는 내비게이션 요소입니다. 이러한 요소의 주요 장점은 다음과 같습니다: .. 2024. 2. 28. 티스토리 꾸미기 | F12 개발자 도구 차단하기 F12 개발자 도구 차단하기 이번에는 개발자 도구(F12)와 소스코드 검사를 방지하는 스크립트에 대해 알아보겠습니다. 제가 이 스크립터에 관심을 가지게 된 이유는, 웹 서핑 중 우연히 들어간 블로그에 제가 포스팅한 '소제목 서식모음'이 거의 그대로 관련 출처도 없이 포스팅되어 있는 것을 보고 불펌을 막아야겠다는 생각이 들어서입니다. 물론 저도 여기저기 검색을 해서 가져온 코드들도 있고, 그분도 일부 코드들은 가져다 사용할 수 있지만 썸네일부터 설명에 사용된 표, 글색까지 그렇게 가져다 사용하는 건 아니라고 생각합니다. 검색을 해보니 많은 분들이 불펌 차단에 관련된 스크립트들을 올려 주셨고 그중 두 가지 스크립트를 소개해 들릴까 합니다. 사실 스크립트로 개발자 도구 창을 막는 방법은 정상적인 방법은 아니라.. 2024. 2. 16. 티스토리 꾸미기 | 북클럽 스킨 상단 메뉴 고정하기(CSS) ▤ 목차 북클럽 스킨 상단 메뉴 고정하기(CSS) 티스토리 블로그 북클럽 스킨에서 상단 메뉴 고정 방법에 대해 포스팅한 많은 글이 있는데, 간단하게 구현하는 방법을 공유합니다. 수정 방법은 CSS에서 #header, #aside, #dimmed 세 부분만 수정하면 되는 간단한 작업입니다. 항상 그렇듯 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '상단 메뉴 고정하기'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다. 북클럽 스킨 상단 메뉴 고정하기 1. '블로그관리의 꾸미기 > ①스킨 편집 > ②html 편집 > ③CSS'로 들어갑니다. CSS코드 수정 1. 헤더 부분 수정 : #header css탭에서 Chift + F를 이용해 #header를 검색합니다. (118.. 2024. 2. 2. 이전 1 2 3 4 5 6 다음 반응형
