블로그 웹페이지 속도 측정 분석 사이트 및 속도 향상 방법

최근 반응형 웹페이지 및 쾌적한 웹환경 구축을 위해서 웹페이지 속도를 측정하고 분석해서 최적화된 웹페이지 블로그를 만드는 것이 중요해 졌습니다. 티스토리는 서비스가입형 블로그 이지만, html 및 css의 편집을 할 수 있게 제공하여서워드프레스같은 설치형 블로그의 요소도 갖고 있습니다.그래서 완벽하게 속도 향상을 위해 사이트를 수정 하는 것은 제약이 있을 수 있지만최대한 속도 향상을 위해 최적화 하는 방법을 알아 보겠습니다! 제가 가장 자주 사용하고 추천하는 블로그 웹페이지 속도 분석 사이트를 알아보겠습니다. GTmetrix 구글의 PageSpeed 와 야후의 YSlow 두 분석 도구를 사용해서 점수화 해서 보여줍니다.테스트 서버는 캐나다 벤쿠버에 위치해 있으며 파이어폭스 브라우저를 사용해서 분석을 합니..

IT Review/Site,Social,Tech 2016. 2. 14. 02:16

[CSS]티스토리 하단 출처 이미지 넣기 및 위젯 순서 변경 정리!

안녕하세요. 오늘은 티스토리 하단 부분에 출처 이미지를 넣어 보겠습니다!! 요런식으로요!이게 간단해 보이지만 자그마치 3개의 코드 기술이 합쳐진 컴비네이션. 아니고.. 누구나 손쉽게 따라 할 수 있게 해보겠습니다! 크게 하단 부분에 이미지를 넣는 방식은 2개가 있습니다. 1). 직접 태그를 사용해서 넣는 방식2). 태그를 사용해서 박스를 만들고 backgroud CSS 속성으로 넣는 방식(jQuery를 사용하는 방식도 있긴한데 나중에 갤러리효과를 소개할 때 따로 설명하고) 두개의 방식이 비슷 하긴 하지만 아래와 같은 차이가 있습니다.하는 이미지로 인식을 하고 다른 하나는 그냥 페이지로 인식을 하고 하나는 이미지파일이 직접 노출되며 하나는 배경으로 들어가서 숨겨지게 되죠. 간혹 서식을 저장해놓고 글 작성할..

Tistory Blog/Html,Css 편집 2016. 2. 11. 00:07

[jQuery]티스토리 맨위로 버튼(스르륵 부드러운 스크롤 이동 만들기)

오늘은 일정 위치 까지 스크롤이 내려가면 스스륵 생기고부드럽게 스크롤 이동 되어 올라가는 맨위로 가기 버튼을 만들어 보겠습니다. jQuery를 사용해서 만들텐데요.jQuery는 다양하고 유용한 자바스크립들의 라이브러리라고 보시면 됩니다. 우선 jquery를 사용하기 위해서 실행(?) 선언(?)을 해줍니다.다양하게 소스를 추가 하는 방식이 있는데간편하게 외부서버 CDN을 이용해서 추가를 할 것입니다. 티스토리 블로그 대부분의 반응형 스킨을 사용하면 설정이 되어 있을 거에요.※혹시나 본인의 티스토리 블로그 스킨 HTML편집에서 jQuery가 추가 되어 있다면이작업은 건너 뛰어도 좋습니다. 만약 없다면 소스를 추가 해줘야 합니다. jQuery 소스 - [HTML]에 추가 스크립트 파일은 또는 부분에 붙혀 넣기..

Tistory Blog/Html,Css 편집 2016. 2. 10. 02:35

[티스토리]CCZ-CROSS 스킨 로딩 이미지 CSS로 변경 #2편

안녕하세요. 오늘은 제가 사용하는 블로그 스킨 흉내내기 님이 제작하신 CCZ-CROSS 스킨의 preloader 기능의 로딩 이미지를 GIF 파일이 아닌 .CSS 로 변경하는 작업 2편을 해보겠습니다! 자세한 개념이나 내용 설명은 1편을 참고 해주시구요. 이번 편은 손쉽게 따라 할 수 있게 제작을 해보겠습니다. INFO [티스토리]CCZ-CROSS 스킨 preloader 로딩 이미지 CSS로 변경 1편 download CCZ-CROSS 스킨 배포 및 소개 사용 할 예제 See the Pen xbwVXJ by brunjo (@brunjo) on CodePen. 사용할 소스입니다. 구글의 로딩 바의 형식의 코드입니다. 준비물 download Notepad++(문서편집기) - Naver software 자료실..

Tistory Blog/Html,Css 편집 2016. 2. 9. 18:35

[롤]하이눈 진 스킨 한정판매 고화질 일러스트 및 인게임 영상 소개

[롤]하이 눈 진 스킨 한정판매 고화질 일러스트 및 인게임 영상 소개 안녕하세요. 새롭게 추가된 잔혹극의 거장, 진[Jhin, the Virtuoso]의 신 스킨인 하이 눈 진 스킨 에 대해서 알아보겠습니다. [ 한정판매, 인게임, 영상 소개 ] 하이 눈 진(High Noon Jhin)1350 RP 출시와 함께 된 첫 번째 준 레전더리 스킨입니다. 하이 눈 진 한정 판매 현재 한정 판매 라고 게임내 상점에서 표시가 되고 있는데 출시기념 한정 번들 판매팩으로 뜨는 오류로 보여지며 하이 눈 진 스킨은 레거시(Legacy) 한정판 스킨이 아닙니다. 모든 스킬과 귀환 모션이 바뀌며 음성도 새롭게 추가된 준 레전더리 스킨입니다. 하이 눈 진 인게임 ..

IT Review/Game 2016. 2. 8. 22:54

[티스토리]카카오톡 공유 버튼 만들기(제목+썸네일+링크)

안녕하세요. 카톡 카카오톡 공유 버튼 만들기를 해보겠습니다. 지금 대부분의 블로그에서 카카오톡 공유 버튼이 오류일 것입니다. 바로 아래 처럼 새롭게 바뀐 카카오톡 공유 버튼을 만들어 보겠습니다. 짜잔!! 최신 버전 카카오톡 공유 버튼 만들기 2022 버전 소스코드 내용이 많이 바뀌었습니다. 아래코드만 참고하면 됩니다. 나머지부분은 다 안됩니다. //버튼 이미지를 삽입 하는 곳입니다. 본인의 이미지를 삽입하네요. 아래 코드는 옛날 코드이며 동작을 하지 않습니다. 위 코드로 손쉽게, 공유버튼을 만들 수 있으며, PC버전에서도 작동합니다. 2022-04-14 수정 ----------------------------------------------------------------------------------..

Tistory Blog/Html,Css 편집 2016. 2. 7. 17:55

[티스토리]이미지 썸네일 스킨치환자 소개(썸네일 사이즈 조절 가능)

안녕하세요. 오늘은 티스토리 블로그에 새롭게 추가된 썸네일 스킨 치환자에 대해서 알아보겠습니다. 기존에 티스토리는 썸네일 API를 공개하지 않았기 때문에포스팅 본문의 썸네일을 추출하기가 쉽지 않았습니다. 그래서 기존의 스킨 개발자 분들은 Ajax를 이용한 이미지 추출을 하였습니다.다만 이방식을 했을때는 바로 썸네일이 나타나지 않고 시간이 소요되며RSS를 전체공개 설정을 해야하는 단점이 있습니다. 그러던 중 티스토리에서 썸네일 이미지 주소의 스킨 치환자를 추가 합니다. 티스토리_스킨가이드_스킨치환자 기존의 썸네일 스킨 치환자 하지만 이 방식 또한 치명적인 단점이 있었습니다. 바로 썸네일의 크기를 조절하지 못하고썸네일의 이미지 사이즈 크기가 가로값이 750px인 썸네일로 제공된다는 점입니다. 제가 사용하는 ..

Tistory Blog/Html,Css 편집 2016. 2. 6. 05:17

[티스토리] 블로그 글꼴 웹폰트로 변경하기(나눔스퀘어)

티스토리 블로그 스킨의 글꼴을 변경하는 작업을 해보겠습니다. 블로그에서 가장 중요한 요소가 폰트 글꼴이라고 생각 되는데요.아무래도 콘텐츠 가장 가독성 시각적인 부분을 담당하는 영역이기 때문이라고 생각 합니다. 제 블로그는 흉내내기님의 제작하신 CCZ-CROSS v1.0 스킨으로반응형웹으로 제작되었기 때문에 모바일과 PC에서도 더 풍부하고 아름다운 텍스트를볼 수 있는 폰트를 사용 해야합니다. 구글 크롬 요소 검사 ctrl + Shift + i 구글 크롬에서 제공하는 요소 검사는 전지전능 하시다 현재 제 블로그는 Noto Sans CJK KR 글꼴이 적용 된 것을 알 수 있습니다. INFO Noto Sans CJK - 구글의 새로운 Pan-CJK (汎韓中日) 글꼴을 소개합니다 INFO Noto Sans(본고..

Tistory Blog/Html,Css 편집 2016. 2. 5. 22:31

[티스토리]CCZ-CROSS 스킨 preloader 로딩 이미지 CSS로 변경

[티스토리]CCZ-CROSS 스킨 preloader 로딩 이미지 CSS로 변경 오늘은 뭔가 포스팅 제목처럼 대단한건 아니지만 엄청난 것을 해보겠습니다. 흉내내기님이 제작하신 CCZ-CROSS 스킨은 몇가지 옵션을 설정 할 수 있는 트리거가 있습니다. download CCZ-CROSS 스킨 배포 및 소개 스킨 옵션 설정 var setting = { activeCate: true, //현재카테고리위치 표기 autoLink: false, //댓글,방명록 자동링크 extendThumb: false, //썸네일 확장 newIcon: true, //new 아이콘 변경여부 preloader: true, //프리로드 활성화 searchTag: true, //검색시에 우선순위태그를 보여줌 searchTagCount: 8..

Tistory Blog/Html,Css 편집 2016. 2. 4. 05:05

[티스토리] 블로그 로그인 로그아웃 버튼 만들기 및 적용 안될 때 해결법

[티스토리] 블로그 로그인 로그아웃 버튼 만들기 및 적용 안될 때 해결법 블로그 운영하면서 10년 묵은 체증이 다 풀린 것 같이 가장 기쁜 것 같습니다. 기존 마크쿼리 스켈레톤 3.0.5 스킨에서 오늘 흉내내기님이 제작하신 CCZ-CROSS 스킨으로 교체를 했습니다. download CCZ-CROSS 스킨 배포 및 소개 다양한 기능중에 로그인 / 로그아웃이 자동으로 판단 되게 되어 있는데... 유독 이블로그에서만 정상적으로 작동이 되지 않았습니다. 그동안 많은 구글링을 통해서 소스코드를 적용 시켜 봤는데 이블로그만 적용이 되지 않아서 너무 스트레스를 받았는데 오늘 새로 바꾼 CCZ-CROSS 스킨도 로그인 로그아웃 기능이 정상작동 하지 않았습니다. 아무리 로그아웃을 눌러도 계속 로그아웃으로 표현이 되어져..

Tistory Blog/Html,Css 편집 2016. 2. 3. 23:36