#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