안녕하세요. Letter 스킨 메인 화면의 썸네일 위치는 왼쪽에 위치하는 것으로 기본값으로 설정되어 있습니다. 취향에 따라 썸네일 위치가 왼쪽보다 오른쪽을 선호할 수 있습니다. 이번 포스팅에서는 썸네일 위치를 변경하는 방법에 대하여 알아보겠습니다. Letter 스킨의 메인 화면 기본값은 위의 그림과 같이 썸네일이 왼쪽에 있습니다. 크롬 개발자 도구를 실행시키고 선택 도구로 썸네일을 선택합니다. 개발자 도구 CSS 창을 보면 위의 그림과 같이 두 가지 속성을 확인할 수 있습니다. 1101행부터는 썸네일의 크기와 썸네일 주위의 마진이 설정되어 있고, 1095행부터는 썸네일 위치가 설정되어 있습니다. 이 두 가지 속성 값을 변경해주면 됩니다. 우선 티스토리 HTML 편집기에서 CSS 탭을 선택합니다. 그리고 ..

안녕하세요. 지난 포스팅에서는 티스토리 Letter 스킨의 모바일 화면 여백을 조절하였습니다. 전체 글 문구의 상/하 여백을 조절하였는데 폰트 사이즈는 조절하지 않았습니다. Letter 스킨의 전체 글 문구의 경우 PC 화면과 모바일 화면의 폰트 사이즈가 구분되어 있지 않습니다. 따라서 PC 화면의 폰트 사이즈가 모바일 화면에도 동일하게 적용되도록 기본값이 설정되어 있습니다. 이번 포스팅에서는 Letter 스킨 모바일 화면의 전체 글 문구의 폰트 크기를 PC 화면과 다르게 조정해보겠습니다. 크롬 개발자 도구를 실행시키고 선택 도구로 전체 글 문구와 포스팅 제목을 선택합니다. 그럼 위의 그림과 같이 전체 글 문구의 폰트 크기가 포스팅 제목의 폰트 크기보다 훨씬 크다는 것을 알 수 있습니다. 전체 글 문구의..

안녕하세요. 앞선 포스팅들에서 티스토리 Letter 스킨 메인 화면의 여백을 조절하였습니다. 그동안 편집했던 내용들은 PC 화면에만 적용이 되고 모바일 화면에서는 적용이 되지 않습니다. 반응형 스킨이기 때문에 PC 화면의 CSS와 모바일 화면의 CSS가 나누어져 있기 때문입니다. 이번 포스팅에서는 Letter 스킨의 모바일 화면의 여백을 조절해보겠습니다. 먼저 블로그 메인 화면에서 크롬 개발자 도구를 실행시키고, 모바일 화면 보기를 클릭합니다. 위의 그림과 같이 모바일 화면이 표시됩니다. 주관적인 의견으로는 모바일 화면에서 블로그 제목의 여백은 적당하다고 느껴지나 전체 글 문구의 여백은 너무 넓게 느껴집니다. 그럼 이제 CSS 편집을 통해 전체 글 문구의 여백을 margin 속성을 사용하여 상측 20px..

안녕하세요. 이번 포스팅에서는 블로그 본문에 포함된 그림의 테두리에 그림자 효과를 추가해보겠습니다. 스킨마다 편집해야 할 부분이 상이하여, 우선 Letter 스킨 기준으로 설명드리겠습니다. 포스팅 본문에 추가하는 이미지의 배경이 어두운 경우 이미지의 구분을 확실히 할 수 있고, 본문 글과 명확히 차이가 나서 글과 이미지 모두 집중하기 좋습니다. 하지만 이미지의 배경이 흰색일 경우 그림의 여백이 많아 보이고 본문 글과 구분도 힘들어집니다. 만약 이미지 테두리에 그림자가 표현된다면 흰색 배경의 이미지라도 본문 글과 확실히 구분됩니다. 위의 그림은 흰색 이미지가 추가된 포스팅 본문의 기본 화면입니다. 이처럼 그림의 배경의 흰색일 경우 이미지와 본문 글 사이의 여백이 너무 커 보입니다. 이제 여기에 그림자 속성..

안녕하세요. 그동안 티스토리 Letter 스킨을 편집하면서 PC 화면 기준으로만 편집하고 확인을 하였습니다. 반응형 스킨은 PC와 모바일 레이아웃이 서로 다르게 설정되어 있습니다. 따라서 PC 기준으로 편집을 한 뒤, 모바일 화면도 설정을 변경해줘야 합니다. 그러기 위해서는 내 블로그의 모바일 화면을 확인해야 하는데, 이번 포스팅에서 어떻게 모바일 화면을 확인하는지 알아보겠습니다. 우선 티스토리 꾸미기 설정에서 확인해야 할 부분이 있습니다. 꾸미기 설정에서 모바일을 클릭하여 모바일 꾸미기로 들어갑니다. 그런 다음 티스토리 모바일웹 자동 연결이 사용하지 않습니다로 체크되어 있는지 확인합니다. 반응형 스킨을 사용하시는 분들께서는 이 설정을 사용하지 않습니다로 반드시 변경해주셔야 합니다. 위의 그림은 현재까지..