티스토리 스킨의 변화과정제 티스토리 블로그의 스킨 히스토리를 되짚어 보면, 가장 먼저 사용한 것은 cc-cross 스킨입니다. 이후 여러 번의 스킨 변경과 스타일 변화를 통해 블로그의 디자인과 기능성을 개선해왔습니다. 오랜 기간 동안 사용해왔던 스킨은 바로 hello 스킨입니다. 실제로 '스킨 편집' 카테고리를 열어보면 hello 스킨에 대한 언급이 많습니다. 제가 마지막으로 사용한 hello 스킨의 모습은 제 개인적으로 완성형에 스킨에 가까웠습니다. 여러 차례 자잘한 수정을 거듭하며 최적화하였고, 특히 스킨의 기본 베이스가 탄탄해서 수정 작업이 비교적 수월했습니다. 다만 사이드 광고 설정과 몇 가지 디자인 측면에서 아쉬움이 남았는데, 스킨 개발자 분이 제공한 티도리 프레임워크 스킨 덕분에 사용자 편..
이번 포스팅에서는 제가 블로그 프로필로 사용 중인 '톰과 제리'의 톰 이미지를 어떻게 만들어냈는지 소개해드리려고 합니다. 새롭게 AI로 생성한 프로필 이미지로 바꾸는 과정이 흥미로웠기에, 같은 관심을 가진 분들께 도움이 되길 바랍니다. 이전에도 톰과 제리의 톰 이미지를 프로필로 사용해 왔고, 톰과 제리에 대한 애정 때문에 지금까지도 계속 사용하고 있습니다.물론, 톰과제리의 제리도 무척 좋아합니다. 이미지 생성 과정이번 프로필 이미지 변경에서는 인공지능 이미지 생성 모델을 사용했습니다. AI의 발전 덕분에 이제는 복잡한 디자인 기술 없이도 직접 원하는 이미지를 쉽게 만들어낼 수 있습니다. 이미지 생성하기이미지를 생성하기 위해 사용한 모델은 구글에서 개발한 이미지 생성 모델인 '이미잰3'입니다. 이미잰3 ..
문제점'hello스킨'을 이용한 지 벌써 일 년이 훌쩍 넘은 거 같습니다. hello정상우(링크)님의 스킨 공유에 매번 감사드리고 있습니다.얼마전 제 블로그의 내용을 참고하고자 모바일 페이지로 블로그에 접속했는데 글을 읽으면서 몇 가지 불편점이 있었습니다. 기존 페이지PC와 모바일로 접속할때의 차이점이 보이시나요? 모바일 페이지에서 글의 내용이 많이 작성된 페이지에 접속하면 글자 본문의 우측 너비에 여백이 많이 생기는 걸 알 수 있습니다. 수정전 --> ...... -->'Header'태그가 끝나고 시작되는 본문을 감싸고있는 클래스를 살펴보면 스타일이 설정되어 있었습니다.제가 예전에 'style태그'를 따로 준거 같은데 px에는 pdd..
hello스킨 코드블럭 스타일 적용 hello티스토리 편집 code highlight 적용안될때 해결법 | 코드블럭 스타일 적용하기HELLO스킨 코드블럭 스타일적용 2023.01.08일 자로 hello스킨을 무료로 배포해주셔서 수정하여 잘 사용하고 있습니다 다만 코드블럭(codeblock)을 사용할 때 하얀색으로 나오거나 배경색이 맘에 들지 않newstroyblog.tistory.com티스토리에서 개발관련 게시물을 작성하다 보면 코드블럭의 스타일을 사용하면 사용자에게 조금 더 시각적으로 보기 좋은 코드를 제공합니다. 코드블럭의 다양한 스타일을 적용하기 위해서는 code highlight를 사용하면 되지만 hello스킨의 일부 버전에서는 적용되지 않을 수 있습니다. 이럴 때는 제가 작성한 게시물 내용을 확..
hello스킨 이미지크기가 본문영역을 벗어남 티스토리글을 모바일에서 작성하는 경우는 거의 없기 때문에 사실 모바일버전의 환경에 항상 신경을 쓸 수가 없었습니다. 우연히 제 블로그를 모바일에서 접속하여 잘못된 기능이 없는지 확인을 하고있었는데 이미지의 크기가 본문영역의 크기보다 크면 아예 화면 범위 밖으로 비율이 커져서 이미지의 전체 부분을 확인할 수 없었습니다. 블로그 스킨편집 이미지에 관한 부분은 스킨에따라서 코드가 다르지만 hello스킨(4.13버전 사용중)에서는 간단하게 수정할 수 있습니다. 블로그 관리의 스킨편집으로 이동하여 css부분으로 이동해 주세요. [변경 전] #content .contents_style figure.imageblock.alignCenter, #content .content..
오늘은 hello 스킨을 사용하면서 본문에 게시되는 이미지에 테두리를 추가하는 방법에 대해 알아보겠습니다. 이전에 사용한 스킨에서는 이미지의 테두리가 자동으로 적용되었지만, hello 스킨은 이미지의 테두리가 없어서 배경이 흰색인 이미지의 경우 본문 글과 겹쳐서 보기 지저분해집니다. 적용전 / 후 비교 위의 이미지는 이미지 테두리가 적용되기 전 상태입니다. 이렇게 이미지와 본문의 내용을 구분하기 위해 테두리선을 추가하려고 합니다. 이미지 style 아이디명 알아내기 이미지에 마우스 우클릭 후 검사를 클릭하면 크롬 개발자 도구를 통해 해당 페이지의 HTML 코드와 스타일 코드를 분석할 수 있습니다. 개발자 도구를 열어 확인해보니 이미지 태그의 ID명이 #tt-body-page figure.imagebloc..