워드프레스 일기의 CSS 16

티스토리에서 소제목 스타일을 변경하고 싶은 경우 CSS 코드를 사용하여 원하는 대로 설정하는 것이 가능합니다. 이 블로그의 경우 기본 스킨 중 하나인 오디세이(Odyssey) 스킨을 사용하고 있으며 CSS 코드를 추가하여 헤딩 태그(H2, H3, H4)의 스타일을 변경했습니다. 이 글에서는 오디세이 스킨과 북클럽 스킨에서 티스토리 소제목 스타일을 변경하는 방법에 대하여 살펴보겠습니다.티스토리 소제목 스타일 변경하기티스토리 소제목 설정티스토리 소제목(H2, H3, H4 등) 스타일은 사용자 CSS를 사용하여 원하는 대로 설정할 수 있습니다.티스토리에서 헤딩 태그는 글 편집 화면에서 본문2로 표시된 드롭다운을 클릭하여 제목1, 제목2, 제목3을 선택할 수 있습니다.여기에서 제목1~제목3은 H2~H4 태그에 ..

워드프레스에는 다양한 무료 및 유료 목차 플러그인이 있으며 쉬운 목차(Easy Table of Conents)는 현재 50만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 목차 플러그인입니다.쉬운 목차 플러그인을 사용할 경우 목차를 표시할 위치를 선택할 수 있으며, 경우에 따라 아래 요소와 너무 가까이 붙어서 보기 싫은 경우가 있을 수 있습니다. 그런 경우에는 CSS를 사용하여 목차 상자의 아래 여백을 조정하여 적당히 간격을 줄 수 있습니다.워드프레스 쉬운 목차 플러그인: 목차 상자가 아래 요소와 너무 가까운 경우 간격 조정하기쉬운 목차를 설치한 경우 설정 » 쉬운 목차 » 일반에서 목차를 표시할 위치와 목차를 언제 표시할 것인지(예: 4개 이상의 소제목이 있을 경우에만 표시) 지정할 수 있습니다.기본..

티스토리 북클럽 스킨의 스킨 편집에서 홈 설정을 커버로 지정하고 뉴스레터 아이템을 배치하면 썸네일이 오른쪽에 표시됩니다. 뉴스레터 아이템의 썸네일 위치를 오른쪽에서 왼쪽으로 변경하고 싶은 경우 간단한 CSS 코드를 사용할 수 있습니다. 티스토리 북클럽 스킨: 커버 뉴스레터 아이템 썸네일 위치 변경 방법 티스토리 북클럽(Book Club) 스킨에서 홈 설정을 커버로 설정하고 뉴스레터 아이템을 추가하면 다음 그림과 같이 썸네일이 오른쪽에 표시됩니다. 바로 옆에 사이드바가 있기 때문에 답답해 보인다면 썸네일을 왼쪽으로 이동시키는 것을 고려해볼 수 있습니다. 뉴스레터 아이템의 썸네일을 오른쪽에서 왼쪽으로 이동시키려면 다음과 같은 CSS 코드를 사용할 수 있습니다. /* 북클럽 스킨: 첫 페이지 썸네일 위치 변경..

로고나 이미지를 연속적으로 회전시키는 애니메이션 효과를 주고 싶은 경우 다음과 같은 CSS 코드를 활용할 수 있습니다. HTML 코드: CSS 코드:#rotating_img { -webkit-animation: rotation 2s infinite linear; } @-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);} } 실제 작동을 다음 jsfiddle에서 확인해볼 수 있습니다. http://jsfiddle.net/1uj0e74r/ 위의 코드는 다음 Stackoverflow 글에서 인용했습니다. 다음 글에서 자세한 내용을 살펴보시기 바랍니다. CSS3 Conti..

제목이나 인용구의 모든 글자가 대문자로 표시되는 경우가 있습니다. 그런 경우 CSS의 text-transform 속성을 사용하여 소문자로 변환할 수 있습니다. text-transform 속성을 이용하여 대문자 또는 소문자로 변환하더라도 본래의 텍스트는 그대로 유지됩니다. (즉, 브라우저상에서만 대문자 또는 소문자로 변환되어 표시됩니다.) text-transform 속성 정의 및 사용법 text-transform 속성은 텍스트의 대소문자 표시 형식을 제어합니다. 기본 값: none 상속: Yes 버전: CSS1 JavaScript 문법: object.style.textTransform="uppercase" 한글에서는 대소문자가 없으므로 이 속성은 한글에는 영향을 미치지 않습니다. 브라우저 호환성 CSS 문..

이 블로그에는 현재 지난주에 공개된 Book Club이라는 스킨이 적용되어 있습니다. Book Club 스킨에서 사이드바에 '최근 댓글' 위젯을 표시하면 댓글들이 리스트 불릿(List Bullet) 없이 표시되어 댓글들을 구분하는 것이 조금 불편하게 되어 있습니다. 댓글들을 쉽게 구분할 수 있도록 리스트 불릿(리스트 마커)를 CSS로 추가해보았습니다. 하지마 크롬에서는 리스크 불릿이 정상적으로 표시되었지만 IE에서는 불릿 뒤에 줄바꿈(line-break)이 추가되어 엉성하게 보였습니다. 이 문제에 대해 리서치해보니 문제의 원인이 댓글에 적용된 링크(hyperlink) 때문이라는 것을 알게 되었습니다. 다음과 같이 anchor 요소에 display: inline;을 적용하니 문제가 해결되었습니다.ul li..

티스토리 블로그나 워드프레스에서 긴 URL을 본문에 붙여넣기 하면 라인을 벗어나서 표시될 수 있습니다. CSS를 사용하여 긴 URL / 긴 문자 강제 줄바꿈 (단어가 영역을 벗어나는 경우) 위의 그림과 같이 URL이 본문 영역을 벗어나서 보기가 좋지 않습니다. 이 경우 다음과 같은 CSS 코드를 사용할 수 있습니다. .skin_view .area_view { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever..

오늘 티스토리 스킨을 기본 스킨 중 하나인 #1으로 바꾸고 사이드바를 억지로 추가했습니다. 티스토리 스킨을 기본 스킨 중 하나인 #1으로 다시 변경했습니다 그리고 '최근 댓글' 위젯을 만들어서 사이드바에 배치했습니다. 하지만 이상하게 IE에서 불릿과 텍스트 사이에 줄바꿈이 삽입되는 현상이 나타났습니다. 구글 크롬이나 Opera 등 다른 브라우저에서는 이상이 없었습니다. 이와 같이 예상치 않게 불릿 뒤에 줄바꿈이 삽입되는 경우 먼저 li 태그 내에 display:block 같은 속성이 적용되고 있지 않은지 확인해보면 좋을 것 같습니다. 이 문제를 해결하느라 시간을 조금 허비했습니다. 알고 보니 댓글 리스트에 링크되는 태그 내에 display:block 속성이 추가되어 이런 문제가 발생했습니다.ㅠㅠ 이와 관..

워드프레스를 처음 시작할 때 Hueman이라는 무료 테마를 이용한 적이 있습니다. 이 Hueman은 flexbox를 이용하여 매우 효율적으로 코드가 작성되어 있습니다. 개인 블로그 운영에 적합한 워드프레스 테마 - Hueman, Simple Life, OceanWP, Newspaper 등 이 분야의 전문가가 "float를 아직 배우지 않았다면 배우지 말고 flexbox를 배우라"고 하네요. 구글을 검색하면 flexbox에 대한 다양한 글이 검색됩니다. CSS Flexbox - https://www.w3schools.com/css/css3_flexbox.asp A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexb..

티스토리에 비밀댓글을 달면 보기 싫은 아바타 이미지가 표시되어 이미지를 교체하는 방법이 없을까 고민하다가 간단한 CSS 코드를 사용하여 바꾸어보았습니다.티스토리의 비밀댓글 아이콘 바꾸기 (CSS로 이미지 교체하기)방법은 CSS-TRICKS의 "Replace the Image in an with CSS"라는 글의 코드를 사용했습니다..banner { display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url(http://notrealdomain2.com/newbanner.png) no-repeat; width: 180px; /* Width of new image - 새 이미지의 폭 */ height: 236px; ..