[CSS]티스토리 사진 이미지 테두리 적용하기 ( 추가 또는 삭제 ) 최근 블로그 글을 쓰다가 보니 집에 있는 모니터로는 확인을 못했는데.. 조금 밝은 모니터로 확인을 해보니 사진과 텍스트 경계선이 구분 되지 않아서 가독성이 많이 불편 하였습니다. 그래서 티스토리 블로그의 이미지, 사진 테두리 설정하는 방법에 대해서 알아보겠습니다. 티스토리 사진 이미지 테두리 적용하기 현재 블로그 이미지에 모든 테두리가 적용이 되어 있습니다. 테두리를 설정하는 방법은 간단합니다. 이미지 태그인 img에다가 border CSS 속성을 설정을 해주면 됩니다. border이 바로 테두리를 정하는 CSS속성이기 때문입니다. 각방향의 테두리 색상도 정할 수 있고 다양한 테두리 무늬도 표현할 수 있습니다. 현재 제블로그는 아래와 같이 설정이 되어 있습니다. img{border:2px outset r.. Tistory Blog/Html,Css 편집 2016. 5. 18. 20:20
크롬 티스토리 및 네이버 로그인 무한 로딩 현상 해결 크롬 브라우저는 캐시관리 부분 설정이 어려워서... 캐시나 쿠기가 막쌓여버리게 됩니다. 그것을 막기 위해서 고급 설정 옵션 중 [타사 쿠키 및 사이트 데이터 차단] 을 하시는 분들도 있는데 이것을 설정을 해버리면 간혹 몇몇 사이트들의 로그인 진입시 무한 로딩이 되는 현상이 발생합니다.. 그래서 차단을 해제하고 사용을 하셔야합니다. 타사 쿠키 및 사이트 데이터 차단을 하고 예외 관리를 해주어도 되긴하지만일일히 관리하기도 귀찮고... 암튼 크롬이.. 캐시나 쿠키를 따로 설정할 수 없다는게 조금 귀찮긴 하죠.. 뭐 생각이 날 때마다 Ctrl + Shift + Delete 키를 매번 지워 줄 수 도 있지만!! 아니면 램디스크를 활용해서 돌리는 방식도 많이 사용합니다. RAM! HDD하드디스크나 SSD인 보조기억.. IT Review/Site,Social,Tech 2016. 5. 16. 22:25
[CSS]티스토리 CCZ-CROSS 스킨 본문 넓이 조절 하기 안녕하세요. 오늘은 제가 사용하고 있는 스킨의 본문 넓이를 조절하는 방법에 대해서 알아보겠습니다. 지금은 줄이기 하는 방법을 알아 볼 텐데.. 조절하는 방법만 알면 본문 넓히기도 손쉽게 가능 할 것입니다. 그리고 이스킨만 아니라도 다른스킨도 쉽게 조절이 가능하구요. 우선 기본 구조를 파악 해야합니다. 반응형 웹스킨이기 때문에 그냥 무작정 고치게 되면 나중에 다 틀어지게 됩니다. 본문 좌우 배경을 없애 버리는 방법도 있긴한데 그건 다음포스팅으로!! 블로그 넓이 구조 우슨 main 영역은 1321px 1322px content 영역은 999px 마지막으로 본문 post-content 영역은 857px입니다. 즉 본문 영역인 post-content 영역을 720px로 줄여보겠습니다. 총 3가지의 방법이 있습니.. Tistory Blog/Html,Css 편집 2016. 4. 9. 00:03
[CSS]티스토리 공식 반응형웹스킨#2 아이콘 플러그인 중복 문제 수정 안녕하세요. 오늘은 티스토리 공식 반응형 웹스킨#2 아이콘 플러그인 중복 문제를 수정해보겠습니다. 플러그인 까지 생각을 안했거나, 깜빡하고 지나간 것 같아보이네요. 댓글 및 방명록 사람아이콘이 있지만. ㅠ_ㅠ 기존의 플러그인과 같이 사용하면 중복으로 뜨게됩니다. 우선, 티스토리는 플러그인을 통해 아이콘을 사용 할 수 있습니다. [환경설정] - [기본정보] 에서 아이콘을 설정하고 [플러그인 설정] 에 들어가서 아이콘 사용 설정을 해주면 됩니다.[64x64px 사용을 권장합니다.]그런데 확인을 해보니 ㅡㅡ;;;;;;아이콘이 중복해서 나타나는 문제가 발생하네요...;;;; 이것을 깔끔하게 고쳐보겠습니다. [HTML/CSS] 편집에 들어가 줍니다. 스킨 수정전에는 꼭 스킨 저장을 하시고 문제가 발생시 불러오면 .. Tistory Blog/Html,Css 편집 2016. 3. 31. 00:05
[jQuery]티스토리 반응형스킨 이미지 크기 변경(모바일에서 img src 변경)(진행중) [jQuery]티스토리 반응형스킨 이미지 크기 변경(모바일에서 img src 변경)(진행중) 안녕하세요. 오늘은 그냥 진행사항을 포스팅으로 남깁니다. 반응형웹을 사용 하면 어떻게 보면 많은 장점도 있지만 단점도 존재합니다. 단점 중에 하나가 바로 모바일 페이지에서 과도한 데이터사용(?)이랄까요? 그래서 대부분의 반응형웹은 매우 가볍게 만들어지기도 합니다. 하지만 본문의 포함된 이미지 크기까지 제어하기는 쉽지가 않습니다. 최근 자주 방문하는 오늘의유머 사이트는 모바일 페이지에서 1MB이상의 이미지는 클릭시에만 보이며, 스크롤이 내려갈때 가시영역에서만 이미지가 로드가 되게 해놓았습니다. jQuery 기반(?)의 플러그인인 lazyload.js를 사용한 것 같은데... 티스토리에 스킨에 적용을 하려고 하니 안.. Tistory Blog/Html,Css 편집 2016. 3. 29. 03:35
[jQuery] 블로그 배경화면 랜덤으로 뜨게 하기(background-image random) 안녕하세요. 블로그 꾸미기 포스팅은 오랜만에 하는 것 같네요 ㅠ_ㅠ 제 블로그의 꾸미기가 거의 다 끝나버려서.. ㅠ 소재고갈..혹시나!! 홈페이지나 블로그 꾸미기 궁금한 점이 있으면!! 언제든지!! 방명록 문의하기를 해주시면저도 열심히 방법을 찾아보도록 할게요. (面ㅅ面) 오늘은 저번에 일정 시간마다 자동으로 페이드인 페이드아웃으로 교체되는 배경화면http://cocosoft.kr/389 - 배경화면 여러개 바꾸기에 이어서 배경화면 시리즈 2편!! 랜덤 배경화면 입니다!! 오늘 만들 것은? 랜덤 배경화면!! 시작해보자 오늘 알아볼 것은 블로그의 배경화면을 랜덤으로 바꿔주는 jQuery 코드입니다. 완성된 예제 -새로고침 누를때마다 랜덤으로 배경화면이 바뀜- iframe을 지원하지 않는 브라우저를 사용하고.. Tistory Blog/Html,Css 편집 2016. 3. 27. 05:13
티스토리 블로그 꾸미기 - 드랍다운 메뉴 모듈 만들기 오늘은 간단한 드랍다운 메뉴를 사이드바에 설치하는 블로그 꾸미기 작업을 하겠습니다. 설치하는 방법을 잘 따라오시면 사이드바 뿐 아니라 상단 네비게이션 헤더 또는 확장 메뉴등다양하게 사용 가능 할 수 있을 것입니다. 제블로그에 적용된 예시 SNS 채널 구독 카카오스토리 트위터 네이버 인트로 - 사전 습득 지식 드랍박스 구조는 보기에는 단순해 보여도, 꽤 많은 사전 지식이 필요합니다.꾸미기 중급자 클래스 정도 된다고 생각하네요.그래도 천천히 보고 따라한다면 쉽게 적용 가능 할 것입니다. 왜 이번 편은 사전지식이 필요하면 드랍다운 메뉴는 다양한 박스 태그와 클래스로 타겟 설정이 되어있고설치 위치에 따라 본인의 스킨에 원래 지정된 CSS 속성과 겹쳐서 모양이 틀어질 수도 있습니다.그렇기에 본인이 직접 본인의 스.. Tistory Blog/Html,Css 편집 2016. 3. 5. 17:29
블로그 스킨 꾸미기 할 때 참고하면 좋은 사이트 소개! 이번편은 블로그 스킨 꾸미기 할 때 유용한 사이트 소개를 해보겠습니다. 티스토리 블로그 CCZ-CROSS 스킨 꾸미기 완성 #1편 과 함께 작성을 하려고 했는데 포스팅이 길어질 것 같아서 따로 글을 적었습니다. 소개해드리는 사이트는 매우 유용하니 북마크를 해두시고 사용하시면 매우 도움이 될 것이라고 생각합니다. 첫 번째 - COMPRESSOR.io https://compressor.io/ 이건 예전에도 무수히 많이 소개해드린 사이트입니다. 이미지를 무손실에 가깝게 압축을 해드립니다 여담으로 1x1 투명 gif 파일을 압축해봤는데. 42byte가 나왔습니다. 웹상에서 모든 브라우저 및 프로그램에서 오류없이 사용가능한 최소 크기만큼 줄여지는 것이죠. 바이트열 분석을 통해 더 불필요한 부분 지우면 32byte.. IT Review/Site,Social,Tech 2016. 3. 4. 01:51
마우스 우클릭 방지 및 자동 출처 표시에 대한 고찰 오늘은 마우스 오른쪽 버튼 금지 및 자동 출처 표시에 대한 고찰에 대해서 글을 적어 보려고 합니다. 인트로 - 왜 불펌 방지 기능을 사용을 생각을 했는가? 저는 마우스 오른쪽 버튼 및 드래그 방지, 선택 금지등의 불펌방지 플러그인을 사용 하지 않고 있었습니다.일러스트의 이미지 파일과 소스코드 등이 많고 요즘에는 어차피 크롬으로 마우스 우클릭은 다풀려 버리니...http://cocosoft.kr/155 - 크롬 마우스 우클릭 해제 방법[[pig toolbox]그래서 굳이 사용할 필요성을 느끼지 못했는데... 최근 이미지 플러그인의 업데이트로 인해서 불펌 방지에 대해서 한 번 생각을 하게 되었습니다.최근에 티스토리 이미지 플러그인 Light TT EX가 업데이트 되면서(잠수함패치(?)) 직접적으로 마우스 오.. Tistory Blog/Html,Css 편집 2016. 3. 1. 21:05
티스토리 블로그 CCZ-CROSS스킨 상단 헤더 꾸미기 안녕하세요. 오늘은 블로그 스킨 상단 헤더 부분 꾸미기를 해보겠습니다. 하단 부분 이미지 넣기나 티스토리 블로그 꾸미기 포스팅을 보셨던 분들이라면 손쉽게 따라 올 수 있을 겁니다. 헤더부분 꾸미기를 잘하신다면 거의 꾸미기의 정점(?) 웬만한 이미지 첨부 및 박스 태그나앞으로 꾸밀 수 있는 모든 부분에서 손쉽게 해결을 할 수 있을 것입니다. 우선 이번 강좌를 따라오기만 해도 괜찮지만 미리 사전지식을 습득하고 온다면 정말 좋습니다. 생활코딩 CSS 수업중 - 박스모델 강의 입니다.https://opentutorials.org/course/45/6 (저도 그냥 이것 저것 하나씩 붙혀넣기하다보니깐 대충 구조는 알았지만 기본용어 및 정의등개념에 대해서 정리가 없어서 시간 날 때 마다 틈틈히 기초강좌부터 보고 있습.. Tistory Blog/Html,Css 편집 2016. 3. 1. 00:01
