안녕하세요. 티스토리 스킨 편집을 하다 보면 HTML보다 CSS 편집이 훨씬 많이 일어납니다. CSS 편집 중에 가장 많이 접하는 스타일 속성이 margin과 padding입니다. margin과 padding은 간단히 이해하면 어떤 콘텐츠 영역의 주변 여백을 지정하는 스타일 속성입니다. 웹사이트에 접속해서 크롬의 개발자 도구를 열고 (단축키 F12), 어떠한 콘텐츠 영역을 마우스로 선택해보면 위의 그림을 볼 수가 있습니다. 파란색 1080x1236px 영역이 콘텐츠 영역의 크기이고 padding 20px + margin 236.5px = 256.5px의 좌/우 여백을 가지고 있는 형태입니다. 마진과 패딩의 차이점은 경계선(border)을 기준으로 나뉩니다. 경계선 외부의 여백을 마진, 내부의 여백을 패딩..

안녕하세요. 이번 포스팅에서도 북클럽 스킨 편집을 이어서 해보겠습니다. 지난 포스팅에서는 사이드바 영역의 폭을 조절했는데 사이드바 구분선이 겹치는 문제가 있었습니다. 이번 포스팅에서는 붉은색 테두리 안에 있는 겹쳐지는 사이드바 구분선을 삭제해보겠습니다. CSS를 수정해야 하므로 HTML 편집기를 열어줍니다. 전체적인 레이아웃에 속하는 속성이므로 “#4. Layout Selector” 영역에 CSS 코드가 숨어있습니다. Ctrl+F(맥 cmd+f) 를 눌러 #container .content-wrap:before 를 검색합니다. 319행부터 329행까지가 포스팅 영역 - 사이드바 구분선을 구성하는 코드들입니다. 이 영역에 있는 코드들을 모두 삭제하거나 비활성화 시키면 구분선이 사라지게 됩니다. 모두 삭제하..

안녕하세요. 이번 포스팅에서도 계속해서 북클럽 스킨 편집을 해보겠습니다. 지난 포스팅에서는 포스팅 영역의 폭을 수정하였는데 이번에는 사이드바 영역의 폭을 조절해보겠습니다. 위 그림의 붉은색 테두리 영역이 수정할 영역입니다. 이번에도 CSS를 수정해야 하므로 HTML 편집기를 열어줍니다. 포스팅 영역과 동일하게 “#4. Layout Selector” 영역에 CSS 코드가 숨어있습니다. Ctrl+F(맥 cmd+f) 를 눌러 #aside { 를 검색합니다. 포스팅 영역과 마찬가지로 사이드바의 폭은 % 비율로 맞춰져 있습니다. 개인적으로 추천드리는 사이드바 폭은 300px입니다. 그럼 전체 영역에서 300px는 얼마의 비율인지 계산해보면 300px / 1080px = 27.777777777777778% 입니다...

안녕하세요. 이번 시간에도 계속해서 북클럽 스킨 편집을 해보겠습니다. 지난 포스팅까지는 블로그 메인 화면의 상단 여백을 조절하였고, 이번에는 포스팅 영역의 폭을 수정해보겠습니다. PC 화면 가로폭 1080px를 기준으로 붉은 테두리 영역의 최대 폭을 728px로 조절하려고 합니다. 티스토리 북클럽 스킨은 기본적으로 블로그 영역(포스팅+사이드바)의 최대 폭이 1080px로 지정되어 있습니다. 포스팅 영역은 너무 크지도 작지도 않아야 하는데 저는 728px 정도가 글 쓸 때나 보기에도 좋아서 728px를 선호합니다. 이번에도 HTML 편집기를 활용하여 CSS 코드를 수정해야 합니다. 지난 시간에 이어 이번에도 해당 부분은 레이아웃에 해당되는 영역이라 “#4. Layout Selector” 영역에 CSS 코드..

안녕하세요. 지난 포스팅에 이어 북클럽 스킨 편집을 계속해서 해보겠습니다. 이번 포스팅에서는 상단 여백을 조정해보겠습니다. 지난 시간에는 상단 메뉴를 비활성화 시켰습니다. 메뉴를 삭제하고 보니 블로그 제목과 전체 글 문구 사이의 간격이 너무 넓은 것 같습니다. 부분의 CSS 코드를 수정해서 간격을 좁혀보겠습니다. 티스토리 HTML 편집기에서 CSS 탭을 선택합니다. 해당 부분은 레이아웃에 해당되는 영역이라 “#4. Layout Selector” 영역에 CSS 코드가 숨어있습니다. Ctrl+F(맥 cmd+f) 를 눌러 #content { 를 검색합니다. 제일 처음으로 나오는 337행의 content 영역을 수정해야 간격이 줄어듭니다. content 영역에서는 전체 화면에서 차지하는 포스팅 영역의 비율도 조..