위와 같은 그리드 형태의 티스토리 스킨을 쓰다보면 깔끔하고 좋지만 약간의 디자인이 들어가면 좋겠다는 생각이 듭니다. 개인 취향이지만 저는 이미지의 테두리가 둥글둥글한 것이 더 마음이 가는데요. 사용하는 스킨에서 옵션이 있는 경우도 있지만 없는 경우에는 직접 편집을 해주어야 합니다. html은 들어봤는데 css는 뭐지..? 하는 분부터 들어는 봤는데 직접 하기엔 좀.. 이런 분들도 할 수 있는 간단한 매뉴얼을 준비해보았습니다.
스킨마다 조금씩 차이가 있을 수 있는데요, 저는 정상우님이 제작하신 hELLO스킨을 사용 중입니다. 몇가지 스킨을 사용해보았는데 가장 최적화가 잘 되어있고 잘 짜여있어 조금씩 수정해서 사용하기도 좋은 스킨이라고 생각합니다.
hELLO 티스토리 스킨을 소개합니다.
hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기
pronist.dev
먼저, 스킨을 수정하기 전에 저 이미지 부분이 어디에 해당하는지를 알아야 합니다. 저는 브라우저로 크롬을 사용해서 확인해볼텐데요.
윈도우에서는 Ctrl + Shift + I, 맥에서는 Command + Option + I 를 누르면 개발자 도구가 나타납니다.
보통은 화면 하단에 나오는데, 톱니바퀴에서 옵션을 바꾸면 이렇게 오른쪽으로 배치를 할수도 있습니다. 저는 작업을 할 때 이게 훨씬 보기가 좋더라고요. 개발자도구의 상단을 보면 아이콘이 있는데 가장 왼쪽에 있는 아이콘을 클릭해봅니다.
마우스를 올려두면 '검사할 페이지 요소 선택' 이라고 설명이 뜹니다. 이 아이콘을 클릭하고, 커서를 이동해볼까요?
이렇게 화면에 커서를 올려보면 요소마다 파란창으로 선택창이 뜨며 원하는 곳을 클릭할 수 있게 됩니다. 이 중 둥글게 처리하고 싶은 이미지 위에 커서를 올리고 클릭해봅니다.
그러면 개발자 도구에서 이미지 쪽을 구현하는 쪽으로 이동하네요.
확인하면
list 라는 클래스네임을 가진 div 태그 안에,
post 라는 클래스네임을 가진 div 태그 안에,
thumbnail 이라는 클래스네임을 가진 a 태그 안에,
img태그라는 것을 알 수가 있습니다.
(대략 이런 느낌이라는 것만 아시면 됩니다)
이렇게 클래스네임과 위치를 확인하는 이유는, 모든 img태그를 수정하면 원하는 이미지 뿐 아니라 블로그에 있는 모든 이미지에 일괄 적용되기 때문입니다. 사실 그래도 괜찮다면 더 쉽게 적용할 수는 있지요. 하지만 여기서는 그리드 화면에 썸네일만 라운드 처리를 해보도록 하겠습니다. 이제 위치를 확인했으니 티스토리 관리자 화면에 들어가서 스킨편집 => html편집 => css 를 차례대로 클릭합니다.
겁내지 마시고, 혹시 잘못 건드렸다가 큰일이 날까봐 걱정이 되는 분은 전체 선택해서 메모장에 복사를 해두신 후에 수정을 하기를 권합니다.
여기서 Ctrl + F (맥은 Command + F) 를 눌러 위에서 나온 클래스 네임을 검색해봅니다. 저는 thumbnail로 검색해보겠습니다. 그랬더니 총 5개가 나오네요. 그 중 하나하나 유심히 살펴보니..
post 클래스 안에 thumbnail 클래스 안에 img 를 설정하는 css가 여기있네요. (영문 앞에 .이 달린 경우가 클래스 네임, 없는 경우는 일반적인 태그라고 보시면 됩니다)
여기 선택해둔 세번째 줄은 제가 새롭게 기입한 코드입니다.
border-radius: 1em;테두리에 라운드를 해주는 속성이고, 뒤에 1은 수치, em은 단위를 말합니다. 보통은 px(픽셀)도 많이 쓰는데 저는 em을 선호합니다. 1em이 기본 폰트의 사이즈(보통 10px)를 나타내는 것이라고 생각하시면 됩니다. 2em 이라고 한다면 약 20px정도가 되는 것이고요.
위 코드를 추가해주신 다음 적용을 누르고, 화면에 있는 새로고침 버튼을 클릭해봅니다.
이렇게 반영이 됐다면 완료!
만약 되지 않았다면 잘못된 위치를 잡으셨을 수도 있습니다. 다시 원상태로 되돌리고 더 검색해보면서 하나씩 코드를 입력해보고 반영이 되었는지 확인해봅니다.
위에 방법은 너무 어렵고 무섭다. 그냥 안전하게 모든 이미지에 걸고 싶다는 분을 위해서도 적어봅니다.
img {
border-radius: 1em;
}위 코드를 css 화면 아무 곳이나(맨 위에 두는 것이 편하실거에요.) 삽입을 한다면 모든 img태그에 border-radius : 1em 이 반영되는 것을 볼 수 있습니다.
이렇게 몇번 시도해서 성공을 해보시면 감이 오고 용기가 생겨 다른 것도 도전해보고 싶은 마음이 생길 겁니다. 다들 즐거운 티스토리 생활이 되시길 바라며 글을 마칩니다.
위와 같은 그리드 형태의 티스토리 스킨을 쓰다보면 깔끔하고 좋지만 약간의 디자인이 들어가면 좋겠다는 생각이 듭니다. 개인 취향이지만 저는 이미지의 테두리가 둥글둥글한 것이 더 마음이 가는데요. 사용하는 스킨에서 옵션이 있는 경우도 있지만 없는 경우에는 직접 편집을 해주어야 합니다. html은 들어봤는데 css는 뭐지..? 하는 분부터 들어는 봤는데 직접 하기엔 좀.. 이런 분들도 할 수 있는 간단한 매뉴얼을 준비해보았습니다.
스킨마다 조금씩 차이가 있을 수 있는데요, 저는 정상우님이 제작하신 hELLO스킨을 사용 중입니다. 몇가지 스킨을 사용해보았는데 가장 최적화가 잘 되어있고 잘 짜여있어 조금씩 수정해서 사용하기도 좋은 스킨이라고 생각합니다.
hELLO 티스토리 스킨을 소개합니다.
hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기
pronist.dev
먼저, 스킨을 수정하기 전에 저 이미지 부분이 어디에 해당하는지를 알아야 합니다. 저는 브라우저로 크롬을 사용해서 확인해볼텐데요.
윈도우에서는 Ctrl + Shift + I, 맥에서는 Command + Option + I 를 누르면 개발자 도구가 나타납니다.
보통은 화면 하단에 나오는데, 톱니바퀴에서 옵션을 바꾸면 이렇게 오른쪽으로 배치를 할수도 있습니다. 저는 작업을 할 때 이게 훨씬 보기가 좋더라고요. 개발자도구의 상단을 보면 아이콘이 있는데 가장 왼쪽에 있는 아이콘을 클릭해봅니다.
마우스를 올려두면 '검사할 페이지 요소 선택' 이라고 설명이 뜹니다. 이 아이콘을 클릭하고, 커서를 이동해볼까요?
이렇게 화면에 커서를 올려보면 요소마다 파란창으로 선택창이 뜨며 원하는 곳을 클릭할 수 있게 됩니다. 이 중 둥글게 처리하고 싶은 이미지 위에 커서를 올리고 클릭해봅니다.
그러면 개발자 도구에서 이미지 쪽을 구현하는 쪽으로 이동하네요.
확인하면
list 라는 클래스네임을 가진 div 태그 안에,
post 라는 클래스네임을 가진 div 태그 안에,
thumbnail 이라는 클래스네임을 가진 a 태그 안에,
img태그라는 것을 알 수가 있습니다.
(대략 이런 느낌이라는 것만 아시면 됩니다)
이렇게 클래스네임과 위치를 확인하는 이유는, 모든 img태그를 수정하면 원하는 이미지 뿐 아니라 블로그에 있는 모든 이미지에 일괄 적용되기 때문입니다. 사실 그래도 괜찮다면 더 쉽게 적용할 수는 있지요. 하지만 여기서는 그리드 화면에 썸네일만 라운드 처리를 해보도록 하겠습니다. 이제 위치를 확인했으니 티스토리 관리자 화면에 들어가서 스킨편집 => html편집 => css 를 차례대로 클릭합니다.
겁내지 마시고, 혹시 잘못 건드렸다가 큰일이 날까봐 걱정이 되는 분은 전체 선택해서 메모장에 복사를 해두신 후에 수정을 하기를 권합니다.
여기서 Ctrl + F (맥은 Command + F) 를 눌러 위에서 나온 클래스 네임을 검색해봅니다. 저는 thumbnail로 검색해보겠습니다. 그랬더니 총 5개가 나오네요. 그 중 하나하나 유심히 살펴보니..
post 클래스 안에 thumbnail 클래스 안에 img 를 설정하는 css가 여기있네요. (영문 앞에 .이 달린 경우가 클래스 네임, 없는 경우는 일반적인 태그라고 보시면 됩니다)
여기 선택해둔 세번째 줄은 제가 새롭게 기입한 코드입니다.
border-radius: 1em;테두리에 라운드를 해주는 속성이고, 뒤에 1은 수치, em은 단위를 말합니다. 보통은 px(픽셀)도 많이 쓰는데 저는 em을 선호합니다. 1em이 기본 폰트의 사이즈(보통 10px)를 나타내는 것이라고 생각하시면 됩니다. 2em 이라고 한다면 약 20px정도가 되는 것이고요.
위 코드를 추가해주신 다음 적용을 누르고, 화면에 있는 새로고침 버튼을 클릭해봅니다.
이렇게 반영이 됐다면 완료!
만약 되지 않았다면 잘못된 위치를 잡으셨을 수도 있습니다. 다시 원상태로 되돌리고 더 검색해보면서 하나씩 코드를 입력해보고 반영이 되었는지 확인해봅니다.
위에 방법은 너무 어렵고 무섭다. 그냥 안전하게 모든 이미지에 걸고 싶다는 분을 위해서도 적어봅니다.
img {
border-radius: 1em;
}위 코드를 css 화면 아무 곳이나(맨 위에 두는 것이 편하실거에요.) 삽입을 한다면 모든 img태그에 border-radius : 1em 이 반영되는 것을 볼 수 있습니다.
이렇게 몇번 시도해서 성공을 해보시면 감이 오고 용기가 생겨 다른 것도 도전해보고 싶은 마음이 생길 겁니다. 다들 즐거운 티스토리 생활이 되시길 바라며 글을 마칩니다.
