안녕하세요. 티스토리 Letter 스킨의 본문 레이아웃 기본값은 블로그 제목과 포스팅 제목 사이에 여백이 설정되어 있습니다. PC 화면 기준으로 여백이 설정되어 있는데, 모바일 화면에서는 여백이 설정되어 있지 않습니다. 이번 포스팅에서는 위의 그림과 같은 블로그 제목과 포스팅 제목 사이의 여백을 모바일 화면처럼 줄이는 방법을 알아보겠습니다. 크롬 개발자 도구의 선택 도구를 사용하여 본문 영역을 선택합니다. 그리고 개발자 도구의 CSS 창을 보면 상단 margin 100px, 상단 padding 54px 값이 CSS 속성 2149행부터 설정되어 있음을 확인할 수 있습니다 티스토리 HTML 편집기에서 CSS 편집창으로 들어갑니다. 그리고 편집할 영역인 2149행을 찾습니다. 그럼 이제 padding 값을 삭..

안녕하세요. 티스토리 Letter 스킨의 레이아웃 기본값은 메뉴, 검색 버튼 위치가 포스팅 영역에 비해 멀리 떨어져 있습니다. 개인 취향에 따라 버튼을 포스팅 영역에 맞추어 이동시키고 싶은 경우 어떻게 CSS 속성을 편집하는지 알아보겠습니다. 블로그 기본 레이아웃입니다. 위의 그림처럼 메뉴, 검색 버튼이 각각 좌측, 우측으로 쏠려있습니다. 먼저 크롬 개발자 도구의 선택 도구로 포스팅 영역을 선택하여 CSS 속성 값을 확인해보면 최대 넓이가 1024px로 설정되어 있습니다. 다음으로 제목 영역을 선택해보면 최대 넓이가 1600px로 설정되어 있는 것을 확인할 수 있습니다. 그리고 해당 속성 값은 CSS 517행부터 시작되는 것을 알 수 있습니다. 티스토리 HTML 편집기에서 CSS 속성 517행 영역을 찾..

안녕하세요. 지난 포스팅에서는 Letter 스킨 블로그 메인화면의 포스팅 요약 내용 표시를 2줄에서 3줄로 늘렸습니다. PC 화면 기준으로 편집을 하였기 때문에 모바일 화면에서도 문제없이 표시되는지 확인이 필요합니다. 크롬 개발자 도구를 사용하여 블로그의 모바일 화면을 확인하면, 위의 그림과 같이 포스팅 요약 내용이 3줄로 표시됨을 확인할 수 있습니다. 하지만 작은 모바일 화면에서 요약 내용이 3줄로 표시되다 보니 레이아웃이 복잡해 보입니다. 이번 포스팅에서는 모바일 화면에서 포스팅 요약 내용을 2줄로 다시 바꾸는 방법을 알아보겠습니다. 즉, PC 화면은 3줄, 모바일 화면은 2줄로 표시되도록 편집해보겠습니다. 크롬 개발자 도구의 선택 도구를 사용하여 모바일 화면의 포스팅 요약 부분을 선택합니다. 선택 ..

안녕하세요. 이번 포스팅에서는 Letter 스킨 메인 화면에서 포스팅 요약 내용을 더 많이 표시될 수 있도록 늘려보겠습니다. 티스토리 메인 페이지에서 본문 요약 내용은 위의 그림처럼 2줄로 표시되도록 기본값이 설정되어 있습니다. 개인 취향에 따라 요약 내용을 더 늘리고 싶은 경우에 CSS 속성을 어떻게 편집하는지 알아보겠습니다. 먼저 크롬 개발자 도구를 실행시킵니다. 선택 도구를 사용하여 내용 요약 부분을 선택합니다. 개발자 도구의 CSS 창을 보면 CSS 속성 1128행부터 해당 속성이 시작됨을 알 수 있습니다. 여기서 편집해야 할 부분은 max-height와 -webkit-line-clamp 속성 값입니다. 개발자 도구 CSS 창에서 -webkit-line-clamp 값을 3으로 바꿉니다. 즉 포스팅..

안녕하세요. 티스토리 Letter 스킨의 포스팅 본문 영역 폭은 최대 800px로 설정되어 있습니다.이번 포스팅에서는 포스팅 본문 영역의 폭을 변경하는 방법에 대하여 알아보겠습니다. 우선 크롬 개발자 도구의 선택 도구를 활용하여 본문 영역을 선택합니다. 본문 영역을 선택하게 되면 왼쪽 그림과 같이 개발자 도구의 HTML창에 부분이 선택되어 있습니다. 여기서 2줄 아래에 있는 를 클릭합니다. 그럼 블로그에 포스팅 영역과 마진이 구분되어 표시됨을 확인할 수 있습니다. 개발자 도구의 CSS 창을 보면 602행부터 선택한 영역의 속성 값이 시작됨을 알 수 있으며, max-width : 800px로 최대 가로 폭이 800px임을 알 수 있습니다. 그럼 이제 티스토리 HTML 편집기에서 CSS 편집으로 들어가 60..