티스토리를 운영하다 보니 본격적으로 블로그를 꾸미고 싶은 욕구가 마구 들었습니다.저는 아이콘을 좋아하는데, 예전 네이버 블로그 퍼스나콘을 기억하시나요?지금은 사진설정이 가능하지만 10년 전에는 퍼스나콘으로 자신을 표현했었습니다. 그래서 아이콘 정하느라 한두 시간을 쓴 적도 있었지요. 파비콘은 구글 검색이나 북마크, 사파리 즐겨찾기에서 내 블로그 주소 옆에 보이는 아이콘입니다.검색시 눈에 들어오는 아이콘이 있다면, 유저들의 클릭을 유도하기도 좋겠지요. 그래서 구글검색을 하면 제 블로그의 아이콘이 보이도록 적용해보록 하겠습니다. 먼저 아이콘을 만들어야 하는데요, 두 가지 방법이 있습니다. favicon.io 사이트 이용favicon.io 사이트는 기본적인 틀은 제공하며 텍스트만 입력하면 손쉽게 파비콘을 만들..
우연히 티스토리 앱을 설치했다가 아래 화면을 보게 되었습니다.스킨의 페이지 로딩화면이 계속 나올 뿐 포스트 내용이 보이지 않았습니다.분명 pc나 모바일에서는 제대로 보이므로 서버 문제는 아니고 스킨의 문제라고 생각했습니다. 혹시나 해서 손가락으로 화면을 축소해 보니 아래와 같이 페이지는 제대로 로드되었지만 로딩화면이 사라지지 않는다는 것을 확인했습니다.그래서 html css코드에서 로딩 화면 시간을 수정 해보거나, 혹시나 티스토리 정책이 바뀌게 되어서 오류가 생긴 걸까 확인해 보았지만 모두 아니었습니다. 원인은 바로 처음 블로그를 만들 때 설정해 둔 모바일에서 접속 시 pc버전 url로 리다이렉트 되게 설정해 둔 게 문제를 일으킨 것이였습니다.티스토리는 모바일에서 블로그에 접속할 때 기본적으로 모바일웹..
저는 주로 포스팅할 때 스크린샷 위주의 이미지를 사용하는데요.사진이 하얀색, 블로그배경색도 하얀색이라 그 둘의 경계가 구분되지 않아 포스팅을 읽을 때 사진에 집중이 약간 떨어지는 느낌을 받았습니다. 그래서 사진은 사진이다 딱 구분을 하기위해 사진에 그림자를 넣어보기로 했습니다. css의 box-shadow 속성을 사용합니다. box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px 3px; /*색상(rgb코드,rgb코드,rgb코드,투명도) 수평오프셋,수직오프셋,흐림,확산*/수평 오프셋 : 그림자의 좌우 위치를 설정수직 오프셋 : 그림자의 상하 위치를 설정흐림 : 그림자의 가장자리가 선명 - 흐림 정도를 설정확산 : 그림자의 넓이를 설정그런데 위 처럼 한줄로만 그림자를 만들면..
hello 스킨을 사용하면서 수정했던 부분들을 모아보았습니다. 표의 테두리 보이게 하기 글머리 기호 다음줄 자동 들여 쓰기 로딩화면 없애기 또는 수정하기 1. 표의 테두리 보이게 하기 헬로스킨은 기본적으로 표의 테두리가 bottom에만 테두리가 실선으로 세팅되어 있습니다. 모든 테두리를 실선으로 보이게 수정을 했습니다. 스킨편집 -> CSS에 들어가 'td'로 검색을 합니다. #content. contents_style table td, th의 border-bottom-width: 1px; 부분을 주석처리하거나 지웁니다. 다음, border-width 값을 1px로 바꾸어 줍니다. 적용 후 새로고침을 하면 모든 테두리가 다 보이는 것을 확인할 수 있습니다. 다크 모드에서도 잘 적용됩니다. 2. 글머리 기..
해당글은 hello 스킨을 기준으로 작성되었습니다. 서론 블로그의 스킨을 바꾸면 포스트의 이미지와 본문 폭이 안 맞는 경우가 있습니다. 이런 식으로 이미지가 본문폭을 벗어나 더 크게 나와서 가독성을 해치는 경우가 있습니다. 이런 경우 티스토리에서 기본 제공하는 기능을 이용해서 이미지 사이즈를 조정할 수는 있지만, 포스트 작성 화면에서는 이미지가 본문폭보다 큰지 알 수 없어 미리 보기를 왔다 갔다 해야 한다는 번거로운 점이 있습니다. 그렇다고 모든 이미지를 일괄적으로 으로 지정하게 되면 크기가 본문폭 보다 훨씬 작은 이미지의 경우 강제로 크기가 커져 가독성을 해치게 됩니다. 그렇다면 항상 을 사용하면서 본문폭 보다 큰 사이즈의 이미지만 크기를 줄이도록 해야 합니다. 이미지 사이즈 조절을 위한 코드 수정하기..
