티스토리 블로그 반응형 스킨 변경(포트폴리오 portfolio 스킨 수정)

오랜만에 티스토리 블로그 스킨을 변경했습니다. 2020년 8월 24일에 JB Skin(유료스킨)으로 변경 후 다시 순정 스킨으로 돌아왔습니다.

 

야매로 배운 스킬로 JB Skin을 요리조리 수정하고 재밌게 사용하면서 정말 정이 들었었습니다. 어느 날 스킨을 수정하면서 반응형 코드를 어딘가 잘못 건드렸는지 모바일에서 접속 시 메인화면에 가로로 스크롤이 생기는 문제점이 있었습니다.(화면이 모바일 화면에 딱 맞지 않고 건들건들 거리는 현상이랄까요?)

 

다행히 글을 읽을 때는 이런 현상이 발생하지 않아 아쉬운대로 그냥 적용하다가, 갑자기 블로그 뽐뿌가 와서 한번 고쳐봐야겠다! 고 생각하고 오리지널 JB Skin을 다시 적용했습니다. 근데 이게 웬걸... 기존에 튜닝해놓은대로 다시 하나하나 수정하려니 생각보다 많은 작업이 필요할 것 같았습니다.

 

메인화면에 영상도 넣고, 애드센스 광고도 적절한 곳에 잘 배치했던 것 같고, 무엇보다 글을 읽을 때 집중이 참 잘 되는 스킨이었기에 다시 작업을 시작해보려고 했지만, 갑자기 새로운 스킨을 적용해보고 싶은 생각이 들었습니다. 그래서 블로그 코드가 다 꼬일 수도 있는(?) 위험을 무릅쓰고... 과감하게 순정스킨 적용 버튼을 눌렀습니다.

 

이번에 굴리고 굴리는 블로그에 새로 적용한 스킨명은 포트폴리오 스킨(Portfolio 스킨) 입니다. 티스토리에서 제공하는 기본 스킨 중 하나인 바로 아래 그림의 스킨으로 반응형입니다.

 

굴리고 굴리는 블로그에 새로 적용한 포트폴리오 스킨!

 

---

참고로 현재 티스토리에서 제공하는 반응형 기본 스킨에는 오디세이(Odyssey), 포스터(Poster), 왓에버(Whatever), 레터(Letter), 포트폴리오(Portfolio), 북클럽(Book Club), 메거진(Magazine) 의 총 7가지가 있습니다. 참 다양하기도 하고, 각각의 스킨이 모두 개성이 있습니다.

 

 

0123456

티스토리에서 무료로 제공하는 7가지 반응형 스킨

---

티스토리 포트폴리오 스킨(Portfolio 스킨)을 적용한 굴리고 굴리는 블로그 첫 화면입니다. 기존 스킨에서는 메인화면에 동영상과 여러 글들을 주제별로 배치한 반면, 이번 스킨에서는 커다란 슬라이더 화면을 전면 배치해보았습니다. 

 

포트폴리오 스킨에서 제공하는 '슬라이더' 기능을 이용해 제 블로그의 한 섹션인 '투자의 대가' 관련 글들을 넘기면서 볼 수 있게 해보았습니다.

슬라이더만 선택해서 적용을 시킨 후, 블로그 첫 화면을 보면 슬라이더 아래부분이 약간 떠서 스크롤이 생기는데, 이 스크롤은 바로 'footer' 부분이 빈 공간으로 차지하고 있기 때문입니다. 블로그를 크게 3등분 했을 때, 머리 부분은 header, 몸통 부분은 body, 발 부분은 footer로 구분할 수 있습니다. 이 중에서 footer 부분이 기본 스킨에서 아래와 같이 설정돼있기 때문에 스크롤이 생기는 것이므로, html에서 이 footer부분을 주석처리 하여 비활성화시켰습니다.

 

 

참고로 html에서 주석처리는 <!-- 솰라솰라 --> 이고, css에서 주석처리는 /* 솰라솰라 */ 입니다. 이렇게 html과 css에서 주석처리를 해놓으면 실제 코드로 인식하지 않게됩니다.

 

블로그에서 다른 카테고리를 보시려면 오른쪽 상단의 메뉴 모양(삼선으로 된 세 줄 모양)의 아이콘을 클릭하시면 이와 같이 블로그 카테고리가 펼쳐집니다. 여기서 다른 카테고리의 글들을 보실 수가 있습니다.

 

블로그 스킨을 바꾸면서 새로 발행된 글이나 다른 카테고리의 글들을 메인화면에서 볼 수 없게 설정해놓았지만, 약간의 디자인적인 측면에서(?) 부득이 이렇게 꾸며놓았습니다.(ㅠ_ㅠ) 좀 더 야매 코딩 실력을 늘려서 슬라이더 화면 밑을 멋진 공간으로 만들도록 해보겠습니다.^^