레이아웃의 큰 틀 대부분은 유튜브의 영상을 따라갔고
이후엔 내 취향을 듬뿍 담아 곳곳에 포인트를 넣었다.
심플함을 유지하면서 전체 그림을 한 번에 볼 수 있도록 오브젝트를 배치했다.
또 포인트 색상 하나를 골라 군데군데 적용하고
식상했던 폰트도 몇 개 수정했다.
1.
요즘 웹 개발을 공부하다 보니
평소 무의식 적으로 사용하던 웹 페이지들이 조금 다르게 보인다.
요건 이렇게 만들었겠구나, 이런 게 있으면 좋겠다. 이런 건 별로 보기 안 좋네. 등등
운영하는 블로그 디자인이 썩 마음에 들지 않았었다.
티스토리에서는 몇 가지 스킨을 제공하고 수정도 가능했지만,
GUI 환경으로 튜닝할 수 있는 요소는 한계가 있었고,
HTML CSS 편집 기능은 내 프런트엔드 지식으로는 너무 복잡하고 어려워 보였다.
유저 배포/ 판매 스킨들을 둘러보다 우연히
기본 스킨을 튜닝하는 방법을 가르쳐주는 유튜브 영상을 발견했다.
영상을 따라 하면서 그동안 공부했던 코드들이 보이기 시작했다.
2.
스킨의 코드가 어렵고 복잡해 보였던 가장 큰 이유는
코드를 IDE 가 아닌 웹의 작은 화면으로 직접 편집하려 했기 때문이었다.
평소 사용하던 IDE 위에서 정렬된 코드는 한결 보기 쉬웠다.
또한 공부했던 크롬의 Inspect를 이용하는 방법을 적용시키니
스킨의 오브젝트를 그리는 코드의 위치를 쉽게 찾을 수 있었다.
선택하고, 코드를 확인하고, 검색하고, 수정한다.
레이아웃의 큰 틀 대부분은 유튜브의 영상을 따라갔고
이후엔 내 취향을 듬뿍 담아 곳곳에 포인트를 넣었다.
심플함을 유지하면서 전체 그림을 한 번에 볼 수 있도록 오브젝트를 배치했다.
또 포인트 색상 하나를 골라 군데군데 적용하고
식상했던 폰트도 몇 개 수정했다.
3.
CSS 속성이 최종의 한 개가 남을 때까지 단계별로 지워지는 과정을 보는 것도 재밌었고.
어마어마한 길이의 코드를 작성했을 누군가에게 경외감도 들었다.
그리고 의문,
티스토리 페이지가 정적인 페이지만으로 움직이진 않을 테고.
HTML CSS 편집 기능으로 제공된 코드는 정적인 웹 문서일 뿐인데
유저가 수정하고 적용 버튼을 누르는 것만으로
웹 서버가 다시 그 코드를 읽어서 동적인 페이지를 제공하나..?
상상만 해도 아찔하다.
나도 언젠가는 이런 마법 같은 코드를 짤 수 있겠지..?
4.
수정한 블로그의 틀은 무척 마음에 든다.
배운 지식을 응용해서 아웃풋을 만들어 내는 일은 언제나 즐겁다.
조금 더 다듬고 싶은 생각이 자꾸 들지만,
언제나 부족한 건 시간이니까.
5.
참고한 유튜브 영상 링크 첨부.
감사합니다. 많이 배웠습니다.
티스토리 2탄#1 셋팅 및 커스터마이징편 - 북클럽(Book Club) 스킨을 이용한 티스토리 사용법 (아보느가 알려주는)
댓글