티스토리 북클럽 스킨의 스킨 편집에서 홈 설정을 커버로 지정하고 뉴스레터 아이템을 배치하면 썸네일이 오른쪽에 표시됩니다. 뉴스레터 아이템의 썸네일 위치를 오른쪽에서 왼쪽으로 변경하고 싶은 경우 간단한 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; ..

배경 이미지를 설정하는 경우 브라우저 폭에 맞게 너비를 100%, 높이를 auto로 맞추어 추가하는 방법..bg_banner_image { background-size: 100% auto; background-position: center top; background-repeat: no-repeat; } .bg_banner_image::after { content: ''; display:block; padding: 15%; } // 출처: https://stackoverflow.com/questions/40520604/set-background-image-width-100-height-auto 또 다른 방법.#sample-id { background: url(../images/sample.jpg) #20..

이미지 가운데 정렬 CSS 이미지를 가운데 정렬할 때 사용할 수 있는 CSS img.center { display: block; margin: 0 auto; } parent 요소에 다음 CSS를 적용하는 것도 가능하다. text-align: center; 유용한 가운데 정렬 방법 Div 내의 Div를 가운데 정렬시키고 싶은 경우 다음 글을 참고해보세요. div 내의 div를 중앙에 정렬하려면 (CSS) - 워드프레스 정보꾸러미 어떤 글에서 박스를 가운데에 정렬되게 하고 싶은 경우가 많을 것입니다. div는 align 속성을 가지고 제어가 잘 되지 않습니다. 이런 경우 다음과 같이 두 개의 div를 중첩하여 사용하여 쉽게 중앙 www.thewordcracker.com 상황에 따라 위의 글에 제시된 방법을 ..