안녕하세요. 박대리입니다. 이번 포스팅에서는 CSS 속성 중 테두리(경계선, border)와 관련된 몇 가지 값들에 대해 알아보겠습니다. 예시로 아래 그림과 같이 티스토리 북클럽 스킨의 사이드바 영역에 테두리를 추가해보았습니다. .sidebar .category { margin-bottom: 36px; border: 2px solid black; } border: 2px solid black; 의 의미는 두께 2px의 검은색 실선으로 테두리를 구성하는다는 의미입니다. 여기서 ‘solid’ 라고 표시한 두 번째 속성값으로 선의 종류들을 변경할 수 있습니다. 1. soild : 기본 실선으로 표시 - 상단의 예시처럼 기본 실선으로 표시됩니다. 2. dashed : 짧은 직선으로 구성된 점선으로 표시 .sid..

안녕하세요. 이번 포스팅에서는 티스토리 스킨 편집을 할 때 크롬 개발자 도구를 활용하는 방법에 대해 알아보겠습니다. 스킨 편집을 계속하다 보면 어떤 HTML, CSS 코드를 고쳐야 할지 감이 잡히지만, 처음에는 무엇을 손대야 하는지 막막하기만 합니다. 이럴 때 크롬 개발자 도구 (단축키 F12)를 활용하면 쉽게 변경할 부분을 찾을 수 있습니다. 블로그 페이지에서 F12키를 누르면 위와 같은 레이아웃을 볼 수 있습니다. 왼쪽 영역에서 HTML을, 오른쪽 영역에서 CSS 코드 값들을 볼 수 있습니다. 이를 활용해서 북클럽 스킨 모바일 화면의 레이아웃 일부를 변경해보겠습니다. 우선 붉은색 테두리 안의 모바일 화면 보기를 클릭해 줍니다. 이제 위의 그림처럼 블로그의 모바일 화면이 어떻게 표시되는지 알 수 있습니..

안녕하세요. 이번 포스팅에서도 계속해서 북클럽 스킨 편집을 해보겠습니다. 지난 포스팅에서는 본문 - 사이드바 영역의 새로운 구분선을 추가하였습니다. 새로운 구분선을 추가하면서 기존에 편집했던 CSS 코드 부분 중 하나를 다시 손을 봐야 합니다. 기존에 사이드바 영역의 폭을 최대 300px로 맞추기 위해 CSS 코드 값을 하나 수정하였습니다. 그런데 사이드바 왼쪽에 경계선(border)을 추가하면서 경계선과 padding을 포함하여 사이드바 영역의 폭이 최대 300px로 맞춰지게 되었습니다. 기존에는 사이드바에 표시되는 글 영역의 폭이 300px였지만 구분선을 추가한 후 280px로 줄어들었습니다. 왜냐하면 왼쪽 padding을 20px 추가하였는데, padding은 경계선 안쪽의 여백이므로 자연스레 사이..

안녕하세요. 이번 포스팅에서도 북클럽 스킨 편집을 이어서 해보겠습니다. 지난 포스팅에서는 콘텐츠 영역과 겹쳐지는 본문 - 사이드바 구분선을 삭제하였습니다. 개인적으로는 포스팅 영역과 사이드바 영역의 구분선이 있는 게 보기가 편해 보입니다. 그래서 이번 포스팅에서는 붉은색 테두리 영역에 새로운 구분선을 추가해보겠습니다. 이번에도 역시 CSS를 수정해야 하므로 HTML 편집기를 열어줍니다. 해당 속성은 “#4. Layout Selector” 영역에 CSS 코드를 추가해야 하며, 이미 존재하는 사이드바 영역을 찾아서 사이드바 왼쪽 경계선(border)를 추가하는 방법입니다. Ctrl+F(맥 cmd+f) 를 눌러 #aside { 를 검색합니다. 익숙한 코드와 값들이 보이는데 예전 포스팅에서 사이드바 폭을 수정했..

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