※ 스킨 교체 삽질 기록용
으어.. 드디어.......... 드디어..........!! 드디어......!!!!!!!!!!!!!!!
반응형으로 블로그 스킨을 바꿨습니다.^^........ㅋㅋㅋ큐ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ으아 넘나 삽질을 많이 해대서 눙무리............ㅠㅠㅠㅠㅠ
촤잔.
티스토리 스킨은 바꿀 때마다 너무 많은 시간 소비와.. 삽질과.... 병신짓을 동반하기 때문에 자주 못하는데, 그래도 몇개월~1년에 한 번씩은 계속 바꿨었습니다-만. 바로 이전 스킨은 꽤 오래썼죠. 2년 반 정도 된 것 같네요. 2014년 초에 바꿨으니까..ㅋㅋㅋㅋ
흙흙. 정든 스킨을 보내주기 위해 기념 스샷을 남겨놔야징.
이 스킨을 2년도 넘게 쓴 이유는 여러가지가 있었는데,
첫째.
깔끔해서 안 질리고 마음에 들었다.
둘째.
바꾼다면 반응형 스킨(웹이든 모바일이든 디바이스 크기에 따라 알아서 최적화 뷰를 보여주는 스킨)으로 하고 싶은데, 마음에 드는 것이 넘나 없었다.... (+ 반응형 스킨들은 수정할 때 내가 손대기에 너무 어려워 보였다.)
셋째.
이거저거 다 집어치고, 반응형이면서 사이드바 접기-펼치기를 제공하는 스킨이 없었다!!! - 이거 아마도, 반응형은 보통 창크기가 작아지면 사이드바는 알아서 접혀 들어가고 토글버튼이 뜨거나 하는 식이라.. 사이드바 자체를 깔끔하게 정리할 필요성이 적어서 그런 것 같은데.....
나는 원래 쓰던 스킨의 카테고리, 최신글, 최신덧글을 클릭으로 접었다 폈다 할 수 있는 기능이 너무너무 좋았다..ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 왜냐하면 그게 훨씬 깔끔하기 때무니다.........ㅂㄷㅂㄷㅂㄷㅂㄷㅂㄷ
그리고 메뉴기능(티스토리 내에서 지원하는 사이드바 링크 기능. 특정 페이지나 카테고리로 연결되도록 메뉴를 만들 수 있음) 지원해줬으면 좋겠긔..ㅠㅠ
그렇다, 제가 사이드바에 바라는 것이 드럽게 많았던 거십니다.
사실 쓰던 스킨도 메뉴 기능은 제공하지 않는데, 삽질 와중에 태그입력기로 수동으로 매뉴바 만드는 것에 성공해서 쓸 수 있었던 것............ㅎㅎ
스킨이야 언젠가 바꿔야지 하고는 있었어도, 원래 지금 당장 바꿀 생각은 없었는데.. 최근 티스토리의 개같은 업뎃(신고버튼 강제 삽입) 때문에 빡쳐서 이짓 저짓하다가 적당한 반응형 스킨을 발견해서.. 오랜만에 스킨도 바꾸자! 하는 마음으로 시작. .......무덤을 파기 시작.........크흡orz.
지금 적용되어 있는 스킨의 원래 모습은 놀랍게도(?) 이렇습니다.
....html 태그나 css를 잘 모르는 저같은 문맹(?)이 이걸 현상태로 바꾸는 데에 얼마나 많은 시간과 삽질이 동반되는지는 조금이라도 만져보신 분들은 아실 듯...........orz........... 그래서 항상 스킨 만들고 나면 포스팅하게 됨. 내 고생이 아까워서.. 하.. 뭐, 보통은 그냥 캡쳐만 올리고, 스킨 바꿨다!! 하고 마는데, 이번엔 너무 삽질을 한 나머지 그냥 이대로 독학해서 웹디자이너도 할 수 있겠다 싶기까지 했으니까 그냥 죄다 적을 것입니다......ㅠㅠㅠㅠㅠㅠㅠ
이 스킨을 고른 이유는, 일단 최대한 내가 원하는 것에 가깝게 깔끔하고... 무엇보다 수정이 용이했기 때문.
그도 그럴 게, 이거 티스토리 스킨 공모전에서 대상 받은 스킨이기도 한데...... 만드신 분이 피드백이나 수정관련 정리를 너무 잘해 놓으셔서........ 따로 자주 묻는 질문을 정리해 놓아 진짜 웬만한 부분의 수정은 바로바로 할 수 있을 정도. 최근에는 피드백을 안 하시는듯 하지만 몇 개월동안 덧글이며 뭐며.. 쌓인 게 굉장히 많아서 웬만한 정보는 거기서 다 볼 수 있었다.(http://wallel.com/209)
(+ 신고버튼을 없앨 수 있는가!! 하는 문제도 매우 중요했는데, 지금에 와선 어떤 스킨이든 신고버튼 따위 다 없애버릴 수 있는ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ이해도를 갖게 되었으나(삽질의 효과ㅠㅠ) 여튼 초반에 해보니 대강 되어서 선택.)
처음엔 대상탄 버젼 바로 적용시키려 했는데(티스토리 메뉴에 떠 있어서), 보다보니 이분이 계속 업뎃하다가 파이널 버전을 만들어 둔 게 있어서 그것으로 적용. 그리고 삽ㅈ....... 수정 시작.
이후부턴 수정한 부분 소스 기록입니다.
안 읽으셔도 됩니다. 그냥 저를 위한 기록.(기억 + 나중에 수정 대비)
폰트 크기나 색깔, 각 영역의 마진/패딩값 조정 등 자잘한 것들은 빼고 씀.(사실 이 스킨은 세부적인 마진/패딩 값이나 각 위치요소들은 처음부터 깔끔한 편이라.. 많이 만지지도 않았음.)
+ 태그 입력된 부분은 글쓰기에 바로 쓸 수가 없어서 입력기를 이용했는데, 얘가 스크립트 소스라 그런지 반응형으로 알아서 줄어들지 않습니다. 모바일로 보면 글씨가 잘려 보임.
- 뭐든 수정은 큰 구조부터 고치고 봐야하는 것.
- 특히 신고버튼을 가리려면 본문 레이아웃 수정이 먼저 선행되어야 했다. 이건 본문 말미에 강제 삽입되어 있고, 절대적인 위치가 지정되어 있는 식이라, 각각의 스킨 구조가 중요하다.(즉 내가 넣은 소스를 다른 블로그에 그대로 넣는다고 작동하는 게 아님)
본문 - (신고) - 본문 다음 요소
이런 식으로 되어 있어서, 가리려면 "본문 다음 요소"를 움직여서 신고 버튼을 덮어버리는 식으로 없앨 수 있음. 스킨마다 본문 다음 요소가 다르므로 자기 스킨에 맞게 소스를 작성해야 함.
혹은, css의 가상 선택자를 이용해서 본문 이후의 요소를 선택하는 식으로 할 수도 있는데, 왠지 이건 적용이 안되는 것 같음. 덧글 영역 신고버튼도 그렇고...... 어쨌거나 소스는 그냥 넣어둠.
- 다시 레이아웃 문제로 돌아가서, 저 본문 다음요소라 하면, 원래는 덧글 영역이었는데..
난 이 스킨에서 본문 제목 다음에 나오는 포스팅 날짜와 태그 영역을 아래로 내리고 싶었음. 태그 기능은 내가 전혀 쓰지 않기 때문에 필요 없었지만.. 왠지 혹시 모르니까??? 지우지는 않고 그냥.. 날짜와 함께 아래쪽으로 내렸다.
내리는 방법은, 태그를 아래로 내리는 방법을 제작자가 써두었기 때문에, 응용해서 같이 내림.
이랬던 것을!!
지금처럼 이렇게 본문 아래로..ㅎㅎ
사실 이건 간단하다.. html에서 날짜 - 태그 - 본문 순서인 것을 본문 아래로 다 옮겨주면 됨.
원래 이런 순서였던 것을,
이 순서로 바꿈..
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ이러고 나니, 날짜에 있던 저 리본택이 저절로 사라졌는데, 지금 보니 div head 클래스 안에 있던 걸 저것만 덜렁 꺼내와서 body-entry로 포함시켜서 그렇게 된 거 같은데, 수정 초반이었던 이때는ㅋㅋㅋㅋㅋㅋㅋ 이유를 잘 몰랐음. 근데 리본은 어차피 없앨 생각이었기 때문에 저절로 없어져줘서 앗싸 고맙다(?) 하고 넘어감. 대신 제작자 블로그 보니.. 리본 수정 방법 올려둔 게 있어서.. 그 부분을 css에서 찾아서 주석처리함. 난 필요없는 속성이므로.
이후로 날짜와 태그, 수정/삭제버튼까지 복합적으로 세부적인 위치 조정이 필요했고,
그건 필연적으로 "신고버튼 없애기"와도 관련있는 것이었기 때무네..(왜냐하면 날짜 부분을 내림으로써 이 스킨의 본문 다음 요소는 포스팅 날짜가 되었으므로. (본문 - (신고) - 날짜 <<- 이런 식.) 바로 신고버튼 처리 단계로 go go.
+ 본문 영역 바깥에 옅게 색이 들어가 있는 것, 본문 가로 크기 등등도 이 단계에서 바꿈.
보다시피 흰색으로, 본문영역이 900정도? 설정되어 있던 것을 원래 쓰던 대로 750(전체)-730(글) 픽셀로 조정.
그러나 이런 쿠다라나이 한 것까지 태그를 옮기진 않겠돠.
정말 디자인 요소라고는 눈꼽만치도 없고, 블로거들에 대한 배려조차 없는 신고버튼 강제 삽입에 몇주 동안이나 빡쳐 있던 나로서는 이걸 없앨 수 있게 된 것이 이렇게 기쁠 수가 없다........ㅡㅡ
위에서 태그로 레이아웃은 수정했으므로, 구체적인 위치값들은 css를 손보면 된다.
-1.레이아웃에서 태그를 보면, 날짜는 head-date 란 클래스가 적용되고 있는데, 이걸 찾아서 고쳐줘도 되지만 그냥 따로 또 써도 적용이 된다. 그래서 구분을 위해 따로 css를 작성, 색깔이나 크기도 지정해주고, 중요한 건 top, margin값임. 이걸 조정해서 신고버튼을 덮어버렸...............ㅡㅡ. 숫자를 바꾸면 바로 드러남.ㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗ
-덮었을 때 한가지 문제가 있는데, 신고창 띄우는 링크는 저절로 사라지지만, 요소가 기본적으로 날짜를 써주는 텍스트다보니 신고 글씨가 바탕에 그대로 보임.ㅋㅋㅋㅋㅋ 즉, 클릭은 안되지만 글씨가 겹쳐보이는 현상이 일어남. 뭐, 처리 방법은 간단하다. 그래서 백그라운드 속성으로 흰색을 넣었다.^^^^^^^^^^^^^^^^^^^^^* 아웅 신나^*^
-덧글도 하는 김에 같이 써둔다.
덧글 영역의 신고버튼은 원래 이런 모습이었음.
지혼자 이러고 한글로 나오는데, 그렇게 흉측할 수가 없다. 그나마도 내가 지금 url ~ 이 부분을 날짜 옆으로 옮겨놔서 이렇지, 옮기기 전엔 더 흉측했음.
보면 날짜 서식에 영향을 받아서, 신고 버튼도 기울임체로 나온다는 것을 알 수 있음. 즉, 이 버튼은 덧글 영역 날짜 요소에 엮여 있다는 뜻임.
처음엔 이걸 마지막 요소를 골라주는 가상 선택자를 이용해서 (덧글날짜 class + div:last-child) 없애보려고 했는데, 안 없어짐..ㅠㅠㅠ 왜냐하면 이게 자식요소의 마지막 놈으로 인식이 안되기 때문임. 날짜랑 그냥 완전 한몸인 거!!!!!!!!!!! 만약 가상선택자로 이 부근을 선택한다고 해도, 어차피 날짜랑 한뭉태기로 인식이 될 것이 뻔함. 예를 들어, 가상 선택자 'before'를 이용해서 뒤쪽 컨트롤 버튼들 앞쪽을 건드리도록 하더라도, 날짜까지 영향을 받아서 날짜도 사라지게 되는 것. 크흡........ㅠㅠㅠ 정말 좆같다.(어, 이거 지금 생각하니 그럼 애초에 지정하는 클래스를 한단계 높은 걸 해서.. 그러니까 날짜 클래스를 지정한 div 말고.. 덧글 영역 자체를 지정해서 거기서 몇번째 요소.. 하는 식으로 가상선택자로 골라주면 가능하지 않을까 하는 생각도 든다. 하지만 지금 방법이 훨씬 간단 깔끔할듯..)
그러나 방법은 있다.
보면 날짜와, 신고버튼의 차이는.. 날짜와 달리 신고버튼엔 링크가 걸려있다는 것임. 바로 <a>태그.
같은 div클래스 안이 더라도 a태그는 따로 걸려 있으니, 이것만 선택이 가능.
그것이 바로 위에 보이는 "#communicate .communicateList .date a" 부분이다.
커뮤니케이트 아이디의, 커뮤니케이트리스트 클래스의, 날짜 클래스 속의 <a> 태그는 "display: none;"
한마디로 나타내지 말란 말임.
후후후.. 그리고 그 지긋지긋한 놈은 깔끔하게 사라졌읍니다..
(이걸 응용하면 각 블로그에도 적용할 수 있다. 하지만 만약 신고버튼이 엮인 녀석들이 다 링크 걸린 요소들이면... 어케 되는 건지.. 못하는 건지.. 잘 모르겠음. 하지만 다른 요소에 링크가 걸려있어도 신고버튼에는 <a>태그가 독립적으로 걸려 있을 것 같은데... 그럼 가상선택자 + <a>태그 지정. 하는 방식으로 없앨 수 있지 않을까..)
혹시나 해서 써두는데, 신고버튼 없애는 거 법적으로 아무 문제 없습니다.
지금까지 문제 없던 게 갑자기 생겨서 그 어떤 publisher들도 안 하는 걸 티스토리만 하고 있는 것일 리 없으니까요.
티스토리 측에서 답변한 것에서도 충분히 드러나고. 완전 자기들 재량으로 넣은 것입니다.
거기다 애초에 1픽셀 하나하나까지 만질 수 있는 이런 형식의 서비스에서 완전한 강제삽입은 불가능.
신고버튼이 법적으로 불가침 영역이면 티스토리는 강제삽입이 아니라 그냥 없어져야 하는 서비스나 마찬가지임.-_-..
아......... 벌써부터 눈물이 앞을 가리.........orz.......
이무슨 짤이 필요하다. /이무슨....................................
원래 이 스킨의 사이드바는 이렇게 생겼음.
현재모습.
후후.. 정말 가장 많은...... 변화와..... 삽질이 있었던 영역.
바꾼 부분들과 관련 부분들을 정리하면 대강 다음과 같다.
1. 배경 이미지 넣기 -> css
2. 스크롤바 형태 바꾸기 -> jQuery
3. 공지/카테고리/최신덧글 영역 접기-펼치기 효과 삽입 -> java script // 5번과 연결됨
4. 하단에 아이콘 넣기 -> css, html, fontAwesome
5. 메뉴들에 사이드바 요소들과 같은 수준의 서식을 적용하기 + 태그 입력기로도 똑같이 만들기 -> css, html
.........?
.......????????
...????????????????????
제이쿼리가 뭔가요.. 자바스크립트가 뭔가요.. 폰트어썸은 뭐죠.........?
시발............ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 시발...!!!!!!!!!!!!ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅋㅋㅋㅋㅋㅋㅋㅋㅋ큐ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 아오ㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 웹디자이너 하시게요?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
애초부터 꿈이 너무 컸읍니다.. 뭐 결국 다 했지만...... 하..........orz.....
중요한 건 이걸 알고 덤빈 게 아니라, 하고 싶은 걸 구현하려다보니..
아 이걸 알아야 하는구나.. -> 제이쿼리
아.. 이걸 써야 하는구나.. -> 자바스크립트
아...... 아이콘이 이미지가 아닌 게 있다고...? -> 폰트어썸
이렇게 됐다는 것................ 그냥 이 자체로 미친 삽질임..........ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
5번은 완전히 이전에 쓰던 스킨처럼 사이드바를 나누고 싶어서, 라는 이유가 작용한 결과인데...
다른 부분들도 그렇지만, 진짜 여기선 엄청난 삽질을...... 왜냐하면 쉬울 줄 알았던 게.. 온갖 css 요소들을 뒤죽박죽 만들어야 했던 부분이라서임....... 지금도 어케 성공은 했지만 그 결과로 css 양이 엄청나게 늘어남..ㅋㅋㅋ큐ㅠㅠㅠ
제일 쉬운 건 1번. 소스는 생략.
그냥 이미지를 크기에 맞춰서, css에 이미지 주소만 넣어주면 됨.
이 과정에서 적당하고 괜찮은 사이드바 넓이를 정함. 420px.
그림은 물론 그린 분께 허락 맡고 사용.ㅇㅇ
블로그 제목 위치나.. 색깔 지정이나 등등등 진짜 이런 건 일도 아님. 다 생략.
[#M_3-2. 스크롤바 형태 바꾸기|접기|
이건 원래 생각을 못했었는데, 이 스킨의 1.x버전에는 스크롤바 모양을 바꿀 수 있는 옵션을 제공하고 있었음. 그러나 2.x 이후부터는 어떤 이유에선지 빠져 있었고. 내가 적용한 파이널 버전에서도 제외. ......뭐든 최신버전이 좋으니까 파이널버전으로 하고는 싶은데 스크롤바도 바꾸고 싶다.........orz............ 몰랐으면 모를까 바꿀 수 있단 걸 아는데 안 바꿀 순 없다.......... 바꾼게 훨 이쁘다.......ㅠㅠㅠ 적용이 됐던 거면 어케든 만들 수 있겠지....orz...
.....하고 멋모르고 덤빔ㅡㅡ.
사실 아직도 jQuery나 자바 스크립트 문법은 1도 모르겠지만(전문가들도 어려워 하는;;;), 이거 하기 전엔 진짜 기본의 ㄱ의 ㅡ획도 몰랐기 땨문에 진짜 쌩삽질을 했다.
결론부터 말하면, jQuery는 자바스크립트를 쉽게 쓸 수 있도록 제공하는 플러그인 라이브러리다.
자바가 그냥 프로그래밍 언어를 지칭하는 말이라면, 제이쿼리는 그걸 이용해서 만든, 특정 기능을 하는 스크립트 덩어리들. 그러므로 개인이 만들어서 쓸 수도 있고, 배포할 수도 있음.
이 스킨 1.x버전에 적용되었던 것도 어디선가 제작한 스크롤바 라이브러리였던 것.....
사용방법
1. 사이드바 플러그인의 css, js 파일을 받아 스킨에 업로드한다. (cdn 주소를 이용할 수도 있음)
2. css 파일 경로를 헤드 영역에서 링크 시킨다.
3. 자바스크립트(js) 파일을 그 경로나, CDN 주소(웹로드)를 통해 html문서 하단 </body> 전에 선언.(<head>내에 선언해도 되지만 보통 바디 마지막을 권장, 이 스킨도 처음부터 자바스크립트 선언이 바디 태그 마지막에 있었다.)
4. 선언된 줄 아래쪽에 넣고 싶은 선택요소(스크롤바 범위)와 사이드바 스타일의 이름을 적용시킨 스크립트 태그 삽입.(사이트에서 제공해주므로 원하는 사이드바 스타일 이름만 제자리에 써주고 복붙하면 됨.)
5. 사이드바를 적용시킬 영역 앞뒤로 해당 태그를 넣어줌(역시 사이트에서 친절하게 제공.)
사이트 주소 : http://manos.malihu.gr/jquery-custom-content-scroller/
영어긴 하지만 설명이 친절하게 잘 되어 있다.
존나 눈깔 빠져가라 읽어가며 잘 따라하면 큰 어려움 없이 적용할 수 있다.
내가 삽질했던 이유는, 이 영어를 눈깔 빠져라 읽고 있기가 싫어서 걍 초록창에 이거저거 검색하는 짓을 했기 때문인데, jQuery에 대한 개념이 제대로 없어서 가능한 짓이었다. 이 플러그인 자체를 두고 설명해둔 곳은 없었고, 다른 플러그인으로 설명을 해둔 곳이라면 그 소스를 그대로 복사해서 쓰면 당연히 작동 안 한다.......orz...... 하지만 난 그짓을 몇번 했고.. 다른 플러그인들을 적용시켜보려고도 했음. 쌩초반엔 파일 업로드도 없이 소스만 넣는짓도 했고..ㅋ...ㅋㅋㅋㅋ... 지금 생각하면 진짜 바보짓ㅠ 여튼 다 실패했다가 이 사이트로 돌아가서 차분히 읽어가며 했더니 바로 됨. ㅡㅡ;;;;;;;;;;;;; 영어도 읽는 것을 생활화하쟈 나년........ㅗㅗ
여튼 그래서 소스는 이러함.
여기서 중요한 것!!!
원래 html이 그렇지만 자바스크립트도 "순서"가 매우 중요하다!! 처음엔 저걸 원래 스킨에 있던 스크립트 소스 아래에 넣었던가 그랬는데...... 화면크기를 조정할때 사이드바보다 본문영역의 일부(최근 포스팅 부분이라든가)가 더 위에 뜨는 현상 발생.. 뭔가 지가 더 밑으로 기어들어감. 우선 적용되게 순서를 위로 올렸더니 해결되었다.
$("선택요소").mCustomScrollbar();
이 부분도 중요한데, 내가 스크롤바로 지정하고 싶은 부분의 css 요소를 찾아주어야 한다. 그래야 얘가 난 그녀석이랑 @#$%^& 할 거임!! 하는 명령이 되는 것. 이 스킨은 사이드바 영역 전체에 #sidebar 아이디가 적용되고 있으므로, 이 아이디를 넣어주면 된다.
"minimal"이 내가 적용한 스크롤바 이름인데, 1.x버젼에는 이 소스가 다 들어 있어서 저 부분의 이름만 바꿔주면(스크롤바 스타일과 이름은 위 사이트에서 볼 수 있고) 원하는 스퇄의 스크롤 바를 적용시킬 수 있었다. 왜냐하면 업로딩한 저 플러그인 파일 자체가, 스크롤바 하나하나에 해당하는 파일이 아니라 제공하는 모든 스크롤바 스타일을 포함하고 있기 때문임. 태그에서 불러온 애만 골라서 나오는 거.
그 다음 "mouseWheelPixels: 700,"는 스크롤 속도. 이게 그냥 적용하면 보통 속도보다 느려서, 그 속성값을 정해주었다. 사실 이딴 거 전혀 모르는데 검색질로 삽질하다가 알게 되어 적용.
이후, 사이드바 전체 태그 영역 앞뒤로 스크롤바 태그를 싸준다.
이렇게 쓰니 완전 간단해 보이지만 대단한 삽질이었다.....
그래서 결과물...
스킨 시험용 블로그서 그냥 캡쳐했더니......
덧글들이 넘나 의식의 흐름 + 어디선가 마구잡이 복붙이라......... 좀 가렸.. -0-......
모른척 해주는 센스 (찡긋..
걍 잘라버리면 되는데 내남좌 카카시를 자를 수가 없어따ㅠㅠ 크으앙ㅠㅠ
여튼 스크롤바 완성.
공지사항, 카테고리, 최근 덧글 메뉴에 적용된 기능이다.
나의 스킨 고르기 기준 1순위는 바로 이 기능, 혹은 이 이 기능을 내가 넣을 수 있을 것 같은가.....였다. 서두에 말했듯이, 이 스킨은 비록 적용 안되어 있더라도 제작자가 수정 방법들을 꽤 많이 올려두어서 접근성이 높아 보였음.
여튼.. 접기/펼치기 기능은 html 태그로도 구현할 수 있지만, 보통 자바스크립트로 만든다.
내 자신이 다룰 수 있는 건 태그가 훨 쉽지만, 자바를 쓴 이유는.. 단순히 원래 쓰던 스킨에서도 자바로 적용하고 있었기 때문임.......orz.. 여차하면 보고 존나 삽질하면서 베껴보자.. 생각하고 있었기 때무네........
이 자바스크립트에 대한 글들은 찾기 어렵지 않다.
그런데 나는 너무 헤맸다........ 왜냐면 자바스크립트 언어를 진짜 1도 모르기 때무니다..
각 부분들이 뭔지도 모르겠고 기호들이 무슨 뜻인지도 젠젠 모르겠고.. 그렇다고 이걸 공부하고 있을 수는 없고..
결국 여기저기 글에 소개된 것들 하나하나 해보다가 그냥 운좋게 얻어걸려? 된.....(.......)
기준은 이전 스킨이었다. 이전 스킨은 그 부분을 자바스크립트 파일로 따로 올려두고 로딩하고 있었다(내가 스크롤바를 적용한 것처럼). 그 파일을 열어보니 엄청 짧고 간단한 소스던데, 굳이 왜 로딩시켜놓았는지 사실 잘 모르겠고.. 여튼 그 소스와 가장 비슷한 걸 올려둔 글을 찾아서..... 적용했더니 어찌어찌 됐다!!
나는 직접 html 문서 안에 씀.
(지금 태그를 구문들은 스크립트 소스로 변환해주는 사이트 이용해서 넣고 있는데, 이 소스는 자꾸 사라져 버려서 이미지로 대체. 앞으로도 그런 소스는 이미지로 대체.)
잘은 모르지만..........ㅡㅡ 대강 보면 클릭시 디스플레이가 block <-> none 상태를 왔다갔다 하도록 되어있음.
이걸로 끝이 아니고, 이제 이걸 작동시킬 태그를 접기/펼치기 하고 싶은 곳 앞뒤로 싸줘야 한다. + 이 소스에서 중요한 건 적용 기준이 "id"라는 것임. id는 고유한 값이기 때문에 같은 아이디를 여기저기 넣을 수가 없음.
그런데!!!!!!!!!!!!!!!!
문제는 이 스킨은 처음에 사이드바에 모두 똑같이 widget 클래스가 적용되어 있었다는 것이어따.
문제........?랄까. 내가 잘 모르니까 문제인 것임.....(.............)
여튼 애초에 각 사이드바엔 아이디가 적용되어 있지도 않았고, 그래서 난 각각 id를 만들어 줘야 했고.............
거기다가, 공지사항/카테고리/최근덧글 다 다른 아이디를 적용해야 했다.
사실 아이디나 클래스라는 개념 자체를, 이걸로 삽질하면서 어느 정도 깨닫게 됨.........(.............) 후후..
우선 <공지사항> 부분.
클릭시 일어나는 이벤트이므로, <a>태그가 기본 적용되고 있고, "showHide('notice')" 부분에서 notice란 아이디를 사용했으므로 그 다음 내용에 실제 이 아이디가 적용되어 있어야 한다. 그래서 다음 div 태그 안에 id = "notice"를 넣어주고.. 원래 적용받던 클래스인 widget도 넣어주고..... "style="display:none""은 최초 노출값. 맨 처음엔 접혀 보인다. none을 block으로 바꾸면 기본적으로 펼쳐져 보인다. 실제 css에 notice란 아이디는 읎다.. 딱히 정해준 값이 없는 골빈 녀석(?)임..
+ 여기가 3-5번이랑도 겹치는 부분.
<h3> 태그를 -> <h4>로 바꿔 적용..
이게 너무 애매했는데, 왜냐하면 css로 정의되어 있는 이 <h3>태그가 만들어주는 게 바로
요기서 저 하늘색 제목부분들이었기 때문임.. 나는 저것들이 필요가 없어서, 이 스킨이 옵션으로 제공하는 클래스를 적용해서 없앰. 그러나 사실 필요 없는 건 "+menu" 부분 때문이고 카테고리나 노티스는 필요한뎅.....?ㅠㅠㅠㅠㅠ(난 각 메뉴를 카테고리/공지 등등과 같은 레벨로 만들고 싶었기 때문에.. 그러나 원래 상태는 보다시피 "+category", "+recentcomments"는 제목 레벨이고, 각 메뉴인 'tags', 'local', 'guestbook'은 그보다 레벨이 하위에 속한다.)
걍 태그를 하나 더 만들쟈......
가 된 것.
사실 h3 css속성을 싹 뜯어 고치고 뭐.. 하면 되었을 텐데 이것저것 실험해볼 땐 그냥 복사해서 태그 이름만 바꿔주며 해보는 게 더 빨라서.. 단순히 클래스 적용으로 사라지는 게 편해서......(....) 어쩌다보니 저리 됨ㅎ 그리고 링크 같은 사이드바는 아예 건드리지도 않아서..h3태그가 그대로 남아있고......(......) 뭐, 보이는 건 태그문서가 아니니까 내방처럼 어질러놨다 <<..
이후로는 태그 자체는 크게 다른 게 없음. 같은 원리.
<카테고리>
<최신 덧글>
글씨 색이나 메뉴 간격 등등 css를 많이 바꿨는데 그건 3-5번에서..
접기/펼치기 적용 끗.
이 부분데스요네;
- 손을 자를 수 없어서 같이 캡쳐.......ㅋㅋㅋㅋㅋㅋㅋ
- 메뉴 // 관리자 메뉴를 구분하고 싶었던 게 아이콘 넣은 1차 목적.
방명록도 성격상 애매한 구석이 있어서 아이콘으로 넣기로(관리자 메뉴랑은 구분해서). 그리고 홈버튼..은, 사실 딱히 넣을 게 없는데 보기에 아이콘 3개보다 4개가 더 안정감 있어숴........ 뭐든 넣었다. 나중에 추가하고 싶은 기능 있음 넣지 뭐.=3
-아이콘은 fontawesome 이라는...... 아이콘? 같은 텍스트를 이용하여 넣었다.
반응형 스킨들 소스 볼 때 내가 의아하게 생각한 점이 있었는데... 그건 바로 이미지를 쓴 것 같은데 업로드된 파일에 해당 파일이 안 보인다!! 란 점이었다. 거기다 css를 아무리 훑어봐도 (당연히) 불러온 것도 없다!! 뭐징?? 어떻게 한 거징??? 하고 의문만 갖고 뭐가 뭔지는 정확히 모르는 상태였음. ...아이콘 넣다보니 저절로 알게 되어따.
처음엔 이걸 전혀 몰라서 일단 아이콘부터 구글링해서 다 찾아놨었.........orz..........
여하튼 정리를 하면.
fontawesome은 이미지가 아니라 이름대로 "폰트"처럼 이용할 수 있도록 만들어진 아이콘들이다.
즉, 텍스트에 적용되는 모든 태그와 css 속성이 적용되고, 폰트 크기를 키우거나 줄이거나 할 때 이미지처럼 경계선이 깨지지 않는다는 장점이 있다. 그리고 가볍다.
원래 아이콘들은 이미지들이라 적용할 때 깔끔해 보이려면 각 크기에 맞는 파일이 따로 있어야 하거나, 벡터형식 파일을 받아서 수정해 줘야 함.(그렇다보니 유료 아이콘도 많고) 블로그나 이런 웹디자인 소스를 만들 땐 계속 화면에 구현된 상태를 확인해야 하는데, 이미지들은 그때그때 수정해서 업로드 확인 - 수정, 업로드, 확인 - 수정 업로드 확인 - 막 이과정이 무한반복되는 것. 단순 노동에 삽질 ㅡㅡ;
fontawesome은 그럴 필요가 없어서 편하다. html과 css만 수정하면 되기 때무니다......
사용방법.(jQuery와 원리는 같음)
1. 사이트(http://fontawesome.io/)에서 파일 다운로드 or 메일 주소를 입력하여 CDN주소를 받는다.
2. 파일이면 스킨에 업로드한 뒤 그 경로를, 웹로드할 cdn주소를 받았다면 그 주소를 <head>영역에 링크시킨다.
3. html 문서 내에서는 원하는 아이콘의 이름을 "class" 형식으로 적용시킨다. 기본 <i>태그를 사용함. "fa '아이콘 이름'" -> 이게 기본 클래스 이름.
4. css 문서 내에서는 해당 아이콘의 unicode로 불러와 스타일을 지정해주고 원하는 클래스로 설정한다. -> html문서 내에서 적용하면 됨. (아이콘 이름이나 unicode는 사이트에서 각 아이콘 클릭하면 확인할 수 있다.)
5. 이 모든 것 역시 사이트를 차근차근 읽어보면 알 수 있다......
html 아이콘 영역 소스
-클래스를 여러 개 적용시켜서 복잡해 보이는데, 아이콘을 불러온 클래스는 각각 fa fa-cog, fa fa-pencil, fa fa-envelope, fa fa-home 이 부분이다.
-그리고 여기서도..ㅋㅋㅋ 개 미친 삽질을 했는데.
처음엔 리스트 태그에 inline-block 속성을 주고, css에서 각각 마진/패딩값을 적절히 줘서 사이드바 하단에서 일정 간격을 유지해 나열되도록 했다. div 태그도 쓰지 않았다. 근데 그렇게 하면 문제가 한가지 있었음.......
우선 화면에서 가장 이뿌게 보이는 간격이, 가로 폭이 좁은 편에 속하는 내 아이폰6에서는 레이아웃이 망가져 보임. 즉, 마지막 아이콘이 아랫줄로 떨어져 보이는 것......... 아이콘 각각이 고유 간격을 갖고 있다보니 좁아지면 좁아지는대로 반응을 못하고.......ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 아랫줄로 줄줄이 떨어지는 현상.
이거 지금 생각하면, css에서 <li>에 width값을 20~25% 정도로 주면(가운데 정렬) 간단하게 해결되지 않을까 싶은데..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이때의 나는 그것을 떠올리지 못했다....... 몰랐다기보다 이 시점에 알았던 사실인데 왜 못떠올린 거지..? 나란년은 바버야........... 태그도 모르는 바버.............큽.
여튼 내가 원하는 건...
이렇게 정렬되어 있다가, 사이드바보다도 폭이 좁아지면
이렇게 알아서 간격이 조절되며 가운데 정렬이 되는 것이었다!!!!
그리고, 이녀석들이 아이코닉한 "폰트"라면, 그 성질을 갖고 있는 건 내가 아는 한에서는 text-align : justify 속성이었다. 양쪽 끝을 일정하게 맞추는 정렬 방식.
그래서 css에 그렇게 속성을 넣어줬는데.......... 씨발 작동을 안해!! 상시 저렇게 자기들끼리 다닥다닥 붙어 있게 변해버렸어!!!!!!!!! 대체 왜ㅇ애ㅐ애애애에에에!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 이때부터 멘붕..ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 내가 그렇게 많은 걸 바란 고니?ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
그리고선 검색질을 하다가 큰 깨달음을 얻음;
justify 속성은 (당연하게도) 줄바꿈이 일어나야 적용이 된다..!!!! 한줄로는 적용이 안돼......ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 생각해보니 당연한 것이었다. 줄바꿈이 일어나는 긴 글에 적용되고, 만약 문단 마지막 줄이 중간쯤에서 글이 끝나거나 하면, 그 줄은 좌측정렬 되는 게 justify 속성의 기본이다. 만약 그렇지 않다면 마지막 줄이 한 열 글자로 끝나면 정렬이
이 따 위 로 되 는 현 상 이 일 어 나 지 않 겠 니 나 새 끼 야 ? ? ? ? ?
but, 이부분에서 만큼은 내게 필요한 게 바로 저따위 현상이었다..ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 한줄이지만 적용되어주면 안되겠니??
..........스킨 만지면서 느낀 건데, 그래도 html이나 css를 잘만 이용하면(+자바) 웹상에서 불가능한 건 없어보였음....... 그냥 머리쓰고 응용하기 나름의 문제인 것.
이 문제도, 어떤 고마운 분이.. 약간의 꼼수(?)를 올려두셨다. 즉 뒤쪽에 보더 속성을 쭉 넣어서 내용이 넘쳐 강제로 줄바꿈 되도록 만드는 것!!!! 그 분은 그렇게 해서 메뉴 밑에 밑줄까지 넣었지만, 난 그건 바라지 않으므로 간단하게 투명도 처리로 없애버림^^ 이걸 위해서 div태그를 써줄 필요가 생겼음.
즉, 아이콘 아랫줄엔 눈에 보이지 않는 얇은 줄이 들어가 있는 것이다...
아이콘에 적용된 css 부분
- 보면 ul에 가상 선택자 :after를 넣어 ul태그가 끝나는 곳 뒤쪽으로 줄하나가 쭉 그어지도록 해두었다. 픽셀수치는 그냥 한줄이 넘치게 될 정도 한에서 아무렇게나 넣으면 됨.
- justify 속성은 저렇게 죄다 넣지 않아도............될 텐데........ 하도 이짓저짓 하다보니 죄다 넣어놨...
- 아래서부터 4개의 클래스들이 각 아이콘에 해당하는 폰트 속성들. content: 에 엮여 있는 값이 각 아이콘의 unicode이다.
- 내용을 정리해서 쓰다보니.. 내 자신이 엄청 정리된 상태로 이짓을 한 거 같은데..
계속 말하지만 미친 삽질의 연속이었음..ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 나중에 고칠 일 있거나 할 때 또 까먹을까봐 써둔다.. 나새끼.........orz........... 이 부분은 뭘 수정한 게 아니라 내가 100% 만들어 넣은 것이라 뭔가 감회가 새롭...
아이콘 넣기 끗.
슬슬 귀찮아진다.
태그 정리한다는 것도 보통일이 아니군........orz.
-문제 : 원본 스킨의 사이드 바에는 h3태그 외에, 하위 메뉴에 widget이란 클래스가 일괄적으로 적용되고 있었다.
그러나 나는 메뉴 기능의 각 요소들을 한단계 위의 요소로 올렸고, 그 외 카운터나 검색바 등등도 또 따로 간격을 조정하고 싶었으므로 한가지 클래스로 일괄적용하는 식으로는 불가능. 이를테면, 이 캡쳐에선 위 fiction을 메뉴 기능으로 넣은 것인데, 이게 박스안에 들어간 카테고리나 하위 메뉴들 형식으로 출력되면 안되능 것..
-해결 방법은 간단하다. 그냥 css에서 클래스를 분리해주면 됨. 카운터, 검색바에도 따로 값이 있어야 해서 widget 클래스를 세개까지 늘렸다..
설명 쓰기 귀찮다....
나중에 봐도 알아볼 수 있겠지 뭐..........<<.........
메뉴 수정 끗.
망할 사이드바 끗..ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
_M#]
여기선 맨 처음 정리한 레이아웃 외에, 큰 변화가 있었던 두 영역만 정리한다.
바로 1.덧글 영역과 2.최신 포스트 영역.
[#M_4-1. 덧글 영역|접기|
원래 이 스킨의 덧글 영역은 이러했음.
-리리플이 마진 없이 적용중, 대신 리리플은 위쪽에 진한 보더가 생기지 않음.
-수정/삭제 영역이 덧글 내용 아래쪽에 생김.
깔끔은 한데......... 이 레이아웃은 은연중에(?) 아래쪽 수정/삭제 부분이 강조되고 있어서 시선이 자꾸 쏠림. 사실 수정/삭제야 글쓴 본인이 필요시에 사용하는 2차 기능이므로, 찾았을 때 멀쩡히 잘 있으면 되지 처음부터 특별하게 위치하고 있어야 할 이유는 없다고 봄. 나에겐 덧글 내용이 더 강조되는 게 중요.
난 이것을 윗줄 날짜 영역 옆으로 옮기고 싶었다.......
이거 하는 것에도 삽질이 있었는데........
일단 이 작업의 문제점은, 각 요소를 한줄에 넣어야 하기 때문에.. 태그 자체가 inline 속성이든가, 아니라면 inline-block 속성을 더해줘야 한다는 점이었다. 여기까지 자체는 큰 문제가 아님........
문제는 그렇게 하면 이것들이 오른쪽 정렬 되지 않고, 이름 옆에 또 다 다닥다닥 달라붙는다는 점!!!!!!!!!!!!!!!!
아이콘 넣을 때와 문제가 비슷하다.. 기본 inline 속성인 span태그를 써도 그렇고, 리스트 태그에 inline-block 먹여도 마찬가지이며, 무엇보다 아이콘 때처럼 text-align: justify 를 쓸 수도 없다.
즉, 이름/날짜/수정버튼 부분이 한 줄로 쭉 들어가되, 이름은 좌측 정렬, 날짜&수정버튼은 오른쪽 정렬. 해야하는 상태..
뭐.... 사실 해결방법은 의외로(?) 간단하다.
div 태그로 날짜/수정버튼 부분을 한번 더 묶어주고, 그 div를 오른쪽으로 보내버리면 됨.
css와 html 모두 약간씩 손봄.
먼저 css
중요한 건 마지막 줄.
이게 날짜와 수정버튼을 싸준 div 태그 클래스이다. display : inline-block; 과 float : right; 로 둘을 한번에 오른쪽으로 띄움. 원래 스킨에선 .date 부분에 플롯 값이 right로 적용되어 있던 것으로 기억.... .name엔 left 값이 적용된 걸 볼 수 있다.
html
div info 클래스 안에 새로 만든 dc_box클래스를 div로 넣고 그 안에 span으로 날짜(date), 수정버튼(control)을 넣음.
div가 기본 block 성질이기 때문에 display : inline-block; 을 넣음.
스킨 수정하면서 느낀 점 중 하나는, 바로 display 속성만 잘 이용해도 정말 많은 일을 할 수 있단 것이었다.
이 부분 외에 방명록이나 리리플영역 등등도 따로 소스를 고쳐줘야 하지만 비슷하므로 다 넣진 않았음.
덧글 영역 수정 끗.
원래 스킨의 최신 덧글 영역은 이런 식이었다.
-대표 이미지가 있으면 이미지가 출력되지만, 없으면 빈 상태임.
-텍스트로만 글을 쓰는 경우도 있는 나로서는 이 상태가 마음에 들지 않음. 각 영역이 구분도 안되고...
텍스트만 있는 글엔, 이미지가 없음을 직관적으로 표시해주고 싶었다.
현재상태.
이것을 하는 방법엔 크게 두가지가 있었다.
1. fontAwesome을 이용한다.
2. 아이콘을 넣는다.
둘 다 가능했는데, 내가 선택한 건 2번이다.
왜냐하면 fontAwesome에 이런 아이콘이 없었기 때문이다...
거기다 아이콘은 포토샵으로 직접 만들었다.
왜냐하면 구한 아이콘 중에 색과 크기가 완전히 마음에 드는 게 없었기 때무니다..ㅡ,.ㅡ
적용방법.
1. 아이콘을 구한다 or 만든다.
2. 스킨에 업로드한다.
3 css에 넣어준다.
수정된 css
여기서 중요한 부분은 background-image: url('./images/48text.png'); background-repeat: no-repeat; 이 부분!
이 스킨엔 원래 blank 값의 이미지가 이 부분에 백그라운드로 들어가 있다. 그 파일 이름 대신에 아이콘 이름으로 대체해주고, 이미지가 반복되지 않게!! 저 뒤의 값을 꼭 넣어주어야 함. (안 그러면 아이콘이 최신덧글 영역에서 무한반복으로 나오는 현상을 목격하게 됨ㅡㅡ)
첨엔 저 노리핏 값을 넣는 법을 잘못 알아가지고 안 되는 줄 알고 쌩삽질함; 싯팔 알려주려면 제대로 알려주지 지식인들 ㅡㅡㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗㅗ
이 부분은 html은 딱히 수정할 게 없다. 이 부분을 생각하면 여기는 적당한 이미지만 있다면 fontAsome 사용하는 것보다 이게 더 간단한듯.
이밖에 마우스 올렸을 때 색이라든지 등등도 수정했지만, 색 코드만 찾아서 바꾸면 되는 것이니 생략.
잘 찾으면 투명도나 뭐나 등등 다 바꿀 수 있다. 난 색만 바꿨지만.
최신 포스트 영역 끗.
사이드바에서 실컷 삽질해서 그런지, 비교적 쉽게 끝났던 본문영역 수정 끗.
_M#]
1.
이 스킨의 가장 마음에 안 드는 부분은 사실 폰트였음. 이건 데모 사이트를 봐도 그렇고, 애초에 글자가 좀 찌그러지고 깨져서 나오는 것 같았다.......... 이유를 알 수가 없었는데, 이것저것 해본 결과 결국 "폰트" 때문으로 판명.
2. Spoqa Han Sans
이 스킨의 기본 폰트는 Spoqa Han Sans 으로 설정되어 있다. 사실 이게, 메뉴나 뭐 기타.. 제목같은 간단한 영역들에서는 꽤 깔끔하고 보기 좋아서, 나도 결국 빼지는 않았다. 찾아보니 영어와 한글 모두에서 깔끔히 출력되는 고딕체의 폰트로 개발된 것 같았는데.. 내가 이래저래 실험해본 결과 얻은 결론은 이렇다.
영어는 깔끔하지만 한글은 깨진다.
-한글의 글씨가 크면 잘 나오는데, 일정 크기 이상 줄어들면 ㄹ이라든가, ㄹ같이 복잡한 자음이 ㅗ,ㅜ, 등등 가운데 삽입되는 모음과 겹치면 더더욱 뭉개져서 보이는 현상이 있다. 좆같음. 그리고 "ㅎ"의 꼭다리가 세워져 있는 게 맘에 안듦;
-일례로, 난 제목을 20이하로 줄였더니 거지같이 나와서 스킨 수정하는 내내 스트레스 받았다ㅡㅡ.
3. 나눔폰트
그럼 대안으로 쉽게 생각할 수 있는 건, 네이버에서 만든 나눔폰트이다. 나눔고딕, 나눔바른고딕.
이 스킨은 첫 폰트는 Spoqa Han Sans지만, 그 다음 대체 폰트로는 나눔바른고딕으로 설정되어 있다. 즉, 보는 사람의 컴에 Spoqa Han Sans폰트가 없고, 나눔바른고딕이 있다면 그렇게 보인다. 없다면 또 그 다음 폰트, 그 다음 폰트.. 그런 식이다.
아무튼 이놈의 나눔폰트는 대체가 가능한가?? 결론은 이렇다.
한글은 괜찮지만 영어는 쉣이다.
영어로 제목을 적는 경우는 거의 없지만, 내가 실험하는 블로그의 글 중에 영어제목도 있어서 확인을 해보면.. 진짜.. 나눔바른고딕의 영어 정렬은 그렇게 거지같을 수가 없다. 어떻게 높낮이가 파도타기 하면서 그렇게 다를 수가 있지??? 실소가 나올 지경임. 그렇다고 한글 제목을 주로 쓰는데 Spoqa Han Sans를 쓸 수도 없고, 나눔바른고딕의 영문출력 꼬라지를 보고도 그걸 쓸 수도 없고........ㅡㅡ 나눔고딕도 거지같긴 마찬가지.
4. 맑은고딕 만세.
아.. 어떡하지? 하다가 한동안 잊고 지냈던 폰트가 떠올랐다. 맑은고딕;;;;;; 적용해보니 영어 한글 다 깔끔하게 출력된다. 자간이 좀 펑퍼짐한 건 맘에 안들지만, 눈에 거슬릴 정도는 아니다. 만세! 제목폰트로 낙점.ㅠㅠ
그래서 결론은..........
메뉴들은 여전히 Spoqa Han Sans고,
덧글 영역은 나눔바른고딕이고, 본문영역은 나눔고딕이다.
그리고 제목은 맑은고딕이다.
폰트라는 건 참 예민하고 어려운 영역인듯..............(그리고 내가 개까탈스러움;)
5. 희대의 미스테리.
원래 쓰던 스킨에 나는 나눔고딕을 웹폰트로 적용시키고 있었다.
이 스킨에도 그 기능이 있다. 처음 받으면 주석처리 되어 있기 때문에, 그것만 풀어주면 웹로드가 된다.
근데 이게 웃긴 게........ 똑같이 적용된 나눔고딕인데........ 다르다..........
글씨가 다른 부분들이 있다.........
내가 이걸 왜 아냐면, 이 스킨에서 유난히 뭉개져보이는 글씨가 있기 때문이다.
"홈", "용" 자 같은 거........................
싯팔 이거 여전히 미스테리임. 왜 같은 폰트인데 이렇게 뭉개져보이는 게 생기죠?
정말 별짓을 다해가며 비교해도 같은 폰트인 건 맞는 것 같은데.. 시발.........
웹폰트 다시 찾아서 내가 해봐야 하나? 아니 이전꺼랑 소스 비교해봐도 똑같은데 왜 그러냐고........
하........................
미스테리임.......
음...... 잘 적은 건가. 정리하려니까 딱히 할 게 없다.
1. html과 css는 재밌고 어렵다;
2. display 속성만으로도 요상한 것들이 가능해지는 게 신기하다.
3. head부분에 필요한 파일들 링크 넣어주는 것이 중요하다. 빼먹지 뫄라 나새끼.
4. 부모요소 - 자식요소 구분 중요. 좀 헷갈리 때가 있다......
5. 자바스크립트는 함부로 건드리는 게 아니라는 교훈. <<......
6. 폰트 씨바라. 대체 왜 그러니.
7. 내남자 이뿌다.
조흔 그림 주신 분께 무한감사.
8. 안 질리고 오래 쓸 수 있었으면.
9. 언젠가 스킨 만들어보고 싶다.
사이드 메뉴에서 블로그 제목이나, About 클릭하면 대략적인 메뉴 설명이 되어 있습니다.
참고해서 보시고 혹시 뭔 이상한 오류가 나면 이야기해 주세요!!
흐흐..........
블로그 스킨도 바꿨겠다 앞으론 좀 더 부지런히 포스팅하고 싶네용...크흡. orz...
이놈의 편두통 죽어버리겠다........
번역/식자 시작도 못했는데............orz.................