안녕하세요. 인터넷을 돌아다니다 보면 사이트의 모든 내용이 로딩되지 않고 일부는 보이지 않는 경우가 있습니다. 텍스트는 용량이 적어서 그런 경우가 거의 없습니다. 하지만 이미지의 경우에는 용량이 너무 크거나, 연결된 링크가 깨졌을 경우 혹은 PC 설정에 따라 화면에 표시되지 않는 경우가 종종 있습니다. 이미지가 뜨지 않으면 위의 그림처럼 흔히들 엑박이라고 불리는 상태로 화면에 표시됩니다. 단순히 x표시만 되어 있어서 어떤 사진인지 전혀 알 수가 없습니다. 하지만 alt 속성을 사용하면 대략 어떤 이미지인지는 유추가 가능합니다. 위의 그림처럼 이미지에 대해 alt 속성을 지정하면 이미지 설명이 x표시 부근에 나타나게 됩니다. (위의 그림은 예시로 만든 그림입니다.) 즉, 이미지에 대체 텍스트를 추가하는 것..

안녕하세요. 티스토리 Letter 스킨 메인 화면의 포스팅 목록에서는 각 포스팅 간에 구분선이 없이 목록이 표시됩니다. CSS 속성 기본값에 구분선이 포함되어 있지 않은 것입니다. 위의 그림과 같이 기본 메인 화면에 목록 간의 구분선이 없는 것이 Letter 스킨의 기본값입니다. 개인 취향에 따라 목록 구분선이 있는 것을 선호하는 분도 계실 테고, 없는 것을 선호하는 경우도 있으실 겁니다. 목록 간에 구분선이 있는 것을 선호하시는 분들을 위해, 이번 포스팅에서는 구분선을 간단하게 추가해보겠습니다. 우선 개발자 도구를 활용하여 포스팅 목록을 선택합니다. 그리고 CSS 창을 보면 속성을 편집해야 할 영역이 나타납니다. CSS 속성의 1144행 부분을 편집해야 하는 것을 알 수 있습니다. 티스토리 HTML 편..

안녕하세요. 티스토리 Letter 스킨의 본문 제목 폰트 크기는 PC와 모바일 화면 모두 36px로 설정되어 있습니다. PC 화면에서는 폰트 사이즈가 적당해 보이지만, 모바일 화면에서는 너무 큰 것처럼 느껴집니다. 이번 포스팅에서는 모바일 화면 본문 제목의 폰트 사이즈를 바꾸는 방법을 알아보겠습니다. 크롬 개발자 도구의 선택 도구를 활용하여 본문 제목을 선택해보면 PC, 모바일 모두 36px의 크기로 설정되어 있음을 알 수 있습니다. (크롬 개발자 도구의 화살표 모양의 선택 도구 옆에 있는 아이콘을 클릭하면 모바일 화면 확인이 가능합니다.) 본문 제목을 선택하여 개발자 도구의 CSS 창을 보면 본문 제목의 속성은 위의 그림과 같이 설정되어 있습니다. 여기서 font-size를 모바일 화면에서는 다른 값으..

안녕하세요. 티스토리 블로그를 처음 사용할 때만 하더라도 사진은 한 줄에 한 장씩만 넣을 수 있는 줄 알았습니다. 하지만 한 줄에 최대 3장의 사진을 넣어 정렬시킬 수 있습니다. 블로그 본문의 양을 늘리기 위해서 일부러 한 줄에 한 장씩만 넣는 분들도 계시겠지만, 사진이 계속해서 이어지면 포스팅 내용에 집중이 잘 안됩니다. 많은 양의 사진을 넣어야 할 경우, 한 줄에 여러 장의 사진을 넣는 방법을 알아보겠습니다. 우선 티스토리 편집기에서 사진 첨부를 클릭합니다. * 원하는 사진을 편집기 화면으로 드래그해도 되지만, 썸네일이 보이지 않는 현상을 줄이려면 사진 첨부 기능을 활용하시는 것이 좋습니다. 티스토리 썸네일 누락은 100% 해결하지는 못하지만, 티스토리에서는 해당 방식을 권장하고 있습니다. 원하는 사..

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