Tistory (12)

일치하는 콘텐츠 목록 특정 글 고정 또는 차단 설정 및 기간 설정

일치하는 콘텐츠 : 노출되는 게시글 기간, 차단글, 선호하는 콘텐츠 설정 애드센스 사이트 메뉴의 일치하는 콘텐츠 메뉴에서 광고 세부 설정하는 방법을 소개합니다. 이 메뉴가 언제부터 있었는지 모르겠지만, 오늘 들어가 보니 유용한 옵션인 것 같아 소개합니다. 이 메뉴를 사용하면 일치하는 콘텐츠 목록에 표시되는 게시글의 기간 설정, 차단글 설정, 고정 표시글 설정이 가능합니다. 애드센스 일치하는 콘텐츠 사이트 설정 애드센스의 일치하는 콘텐츠 광고는 아래와 그림들과 같이 광고와 사이트의 게시물 목록을 함께 표시해주는 광고입니다. 광고 수익 창출 할 수 있을 뿐만 아니라, 페이지 조회수 및 사이트 이용시간을 늘리는 효과도 함께 있습니다. 권한 이 포스트의 일치하는 콘텐츠 설정은 광고단위에 일치하는 콘텐츠 광고 사..

Tistory 2020. 12. 14.

티스토리 highlight.js 설정 및 Syntax Highlight 플러그인 언어 추가

티스토리 highlight.js 사용법 및 편하게 사용하는 팁 이번 포스트는 티스토리 구문 강조를 위해 highlight.js 를 사용하는 방법 을 설명합니다. 추가로 기존 Syntax Highlight 플러그인 테마를 그대로 사용하기 위한 방법 도 함께 소개합니다. highlight.js 티스토리에서 코드 하이라이팅을 하기 위해 Syntax Highlight 플러그인을 사용할 수 있습니다. 기본 제공되는 플러그인으로 쉽게 코드 구문 강조를 할 수 있지만, 지원되는 언어의 종류가 적어 포스팅 하는 언어의 코드가 없는 경우가 있습니다. 이런 경우 highlight.js를 사용하면 Syntax Highlight 플러그인에 없는 언어와 다양한 테마를 적용 할 수 있습니다. highlight.js 설정 방법 추..

Tistory 2020. 12. 1.

#7 CSS Sticky 속성으로 사이드바 내부 일부 영역 화면에 고정 하기

Sidebar CSS Sticky 포지션으로 상단 고정 현재 제작 중인 스킨은 상단의 Navigation 메뉴바와 왼쪽 사이드바 일부 영역은 CSS Sticky 속성을 사용하여 화면에 고정하도록 구상을 하였습니다. 이번 포스트는 Sticky 포지션을 이용하여 사이드바를 화면에 고정하는 방법 을 소개합니다. 레이아웃 구성 PC 화면에 적합하다고 생각하는 3단 레이아웃을 구상하였습니다. 아래 그림에서 배경색을 표시한 상단 메뉴바와, 왼쪽 사이바 부분의 일부 영역은 스크롤을 내리면 화면에 고정하도록 구상을 하였습니다. Sticky Position 사용 방법 및 주의 사항 사용방법 스크롤에 따라 화면에 고정되는 Sticky 속성은 아래 코드와 같이 Position 속성과 top, bottom, left, rig..

Tistory 2020. 11. 26.

#6 CSS Position Sticky 으로 Navi 메뉴바 스크롤 내릴 때 상단 고정

Nav 메뉴바 CSS Sticky 속성으로 상단 고정 현재 제작중인 스킨은 상단의 Nav 메뉴바와 왼쪽 사이드바의 일부 영역은 Position:sticky; 속성을 사용하여 상단에 고정하도록 구상을 하였습니다. 이번 포스트에서는 상단 Nav 메뉴바를 Sticky 속성을 사용하여 상단에 고정하는 방법 을 소개합니다. 레이아웃 구성 PC에 적합한 스킨을 제작하기 위해 아래 그림과 같이 3단 레이아웃을 구상하였습니다. 아래 레이아웃에서 붉은 색으로 표시한 부분은 화면 상단에 고정할 영역입니다. 상단에 고정할 요소는 CSS의 Sticky 속성을 사용할 예정입니다. Position Sticky CSS Fixed? Sticky? CSS 포지션(Position)에서 화면을 고정하는 방법은 Fixed 속성과 Stick..

Tistory 2020. 11. 26.

#5 CSS Flex 로 반응형 3단 레이아웃 구성하기

CSS Flexible Box로 반응형 3단 레이아웃 구성하기 지난 포스트에서는 CSS Grid의 Grid template areas 속성을 사용하여 반응형 3단 레이아웃을 구성하는 방법을 소개하였습니다. 이번 포스트에서는 CSS Flex(Flexible Box)로 반응형 3단 레이아웃을 구현하는 방법 에 대해 소개합니다. 반응형 레이아웃 구상 아래 반응형 3단 레이아웃 구성은 현재(2020년 11월) 스킨에 적용된 레이아웃입니다. 구현 초기에 CSS Grid의 grid-template-areas 속성으로 구현하려 했으나, IE호환이 되지 않아 다른 방법을 고민하다가 모바일 접속률은 낮고, 불필요한 내용이 들어가면 로딩 속도가 느려지니 본문만 표시하는 방식으로 바꾸었습니다. 아래 그림과 같이 HTML 요..

Tistory 2020. 11. 25.

#4 CSS Grid의 Grid template areas 속성으로 반응형 3단 레이아웃 구성하기

grid template areas 속성으로 3단 레이아웃 구성 CSS Grid의 Grid template areas 속성은 비전공자인 제가 느끼기에 웹페이지 2차원 레이아웃을 구성하는 방법 중에 가장 직관적이고 쉬운 방법으로 느껴졌습니다. 이 포스트는 Grid-template-areas 속성을 사용하여 반응형 3단 레이아웃을 구성하는 방법 에 대해 소개합니다. 반응형 레이아웃 구상 티스토리 스킨을 제작을 해야겠다 생각하고 아래와 같은 페이지 레이아웃을 구성하였습니다. PC에서는 3단, Tablet 크기에서는 오른쪽 사이드바가 Article의 아래, 모바일에서는 왼쪽 사이드바를 보이지 않도록 구성하였었습니다. 타블릿이나 모바일에서 Right Side 바에 있는 일부를 하단으로 보여주기 위해 구상하였습니다..

Tistory 2020. 11. 25.

#3 티스토리 스킨 제작 레이아웃 구상 Part.2 사이드바, 본문 활용 방안

레이아웃 구상2 : 사이드바, 본문영역지난 포스트에서는 제작할 스킨에 기대하는 효과와 구현 방법에 대해 설명하였습니다. 이번 포스트는 제작할 스킨의 사이드바와 본문 영역의 레이아웃 구성에 대해 작성하였습니다. 지난 글 요약직접 스킨을 제작하면서 기대하는 효과는 아래와 같고, 블로그의 상단부에서 그 나마 할 수 있는 레이아웃을 구상하고 설명하였습니다. 이탈율 감소체류시간 높이기세션당 페이지수 높이기적절한 광고 배치 가능한 환경 왼쪽 사이드바왼쪽 사이드바는 크게 두 가지 영역으로 나누었습니다. 위쪽의 영역은 일반적인 포지션을 가지고, 아래쪽 영역은 Sticky 한 옵션으로 스크롤을 내리면 상단에 고정되는 박스로 실제로 블로그 스킨은 아래와 같은 용도로 사용 할 수 있도록 구상을 하였습니다. (상단) Side..

Tistory 2020. 11. 23.

#2 이탈율 감소, 체류 시간을 높이는 레이아웃 구상 Part.1 구현 방향과 헤더 영역

제작 스킨 기대 효과에 따른 레이아웃 구상1지난 포스트에서는 적절한 스킨이 요구되는 이유와 스킨 제작을 결심하게 된 이유에 대해 설명하였습니다. 이번 포스트는 제작할 스킨에서 어떤 효과를 기대하는지 정리하고, 스킨 레이아웃에서 그 효과를 구현 할 수 있는 방안에 대해 작성하였습니다. 포스트의 내용이 길어 이번 포스트에서는 기대 효과와 스킨 레이아웃 타이틀영역의 구현 방법, 다음 포스트는 나머지 레이아웃 영역의 세부 구현 방안계획에 대해 작성하였습니다. 제작할 스킨의 기대 효과제작 스킨에 기대하는 효과는 아래와 같이 정리하였다. 아래 4가지는 모두 블로그 수익과 직접적으로 연관되는 요소라고 생각되기 때문이다. 이탈율 낮추고, 세션당 페이지수를 늘려 방문자의 체류시간이 올라가게 되면 블로그가 좋은 평가를 받..

Tistory 2020. 11. 23.

#1 티스토리 스킨 제작 : 블로그 운영 문제점과 스킨의 요구사항

티스토리 스킨 제작 개요이 글은 저와 같이 웹프로그래밍 비전공자이면서 나에게 맞는 티스토리 스킨을 제작하거나, 수정하는데 관심 있는 분들을 위해 작성하였습니다. 적절한 스킨을 만나면 평균 세션 시간을 높여주고, 효율적인 광고로 수익을 높일 수 있고, 블로거가 마주하는 일부 문제를 해결해 줄 것이라 예상합니다. 저는 비전공자로 하나씩 알아가면서 스킨을 만드는 과정을 진행해서 오류가 많을 수 있으니 참고로 봐주세요. 좋은 블로그가 되기 위해 필요한 사항이 블로그는 내가 작성할 수 있는 기술 관련 자료나, 내가 잘 사용하는 생산성 향상 도구 및 자료를 되도록 시리즈 물로 제작할 목적으로 개설하였습니다. 공통적인 사항이 대부분이지만, 이런 테마에 맞는 블로그가 수익이 좋은 블로그가 되기 위해 필요한 사항은 정리..

Tistory 2020. 11. 23.

구글 무료 저작권 이미지 검색 팁 - 크레이티브 커먼즈 라이선스(CCL) 필터링

Google Image Search - Creative Commons License언제부터 인지 모르겠지만 구글 이미지 검색하는 방법이 달라져, 구글에서 무료 저작권 사진을 검색하는 방법을 소개합니다. 저작권에 대해 잘 이해하고, 잘 활용하여 좋은 창작 활동 및 업무에 도움이 되셨으면 합니다.내가 사용하는 무료사진 저작권 사이트구글 검색 팁에 앞서 저는 아래와 같은 무료 사이트를 사용합니다. 이 내용은 검색 포털사이트에 무료 저작권 사진 등의 키워드만 검색해도 많은 자료가 있으니 참고해주세요. 아래 사이트 대부분 상업적 용도로 사용 가능하지만, 반드시 최종적으로 사용할 사진의 저작권 라이센스를 확인하셔야 합니다. 픽사베이(Pixabay) : https://pixabay.com/ 해당 사이트 검색 후 Sp..

Tistory 2020. 9. 5.