안녕하세요. 이번 포스팅에서는 HTML로 글 상자 서식을 만들어보겠습니다. 블로그 글을 쓰다 보면 강조하고 싶은 부분이나 구분하고 싶은 부분에 글 상자를 사용하는 경우가 있습니다. 위와 같이 글 상자를 만들 경우 티스토리 글쓰기에서 쉽고 빠르게 글 상자를 추가하는 방법을 알아보겠습니다. 티스토리 글쓰기의 서식 기능을 활용하여 글 상자 HTML 코드를 저장해두는 방식입니다. 우선 티스토리 관리창에서 콘텐츠 -> 서식 관리로 들어갑니다. 우측 상단의 서식 쓰기를 클릭합니다. 원하는 서식 제목을 입력하고 HTML 편집창을 열어줍니다. HTML 편집창에 위의 서식 값들을 입력하고 다시 기본 모드로 돌아옵니다. 위 서식 값은 배경은 white, 상자와 글 여백은 10px, 테두리 두께는 5px, 테두리 색상은 파..

안녕하세요. 박대리입니다. 이번 포스팅에서는 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 { 를 검색합니다. 익숙한 코드와 값들이 보이는데 예전 포스팅에서 사이드바 폭을 수정했..