프로젝트/티스토리 꾸미기 6

[티스토리 꾸미기] 프로젝트 중단

티스토리 스킨 커스터마이징하는 프로젝트를 여기서 중단하려 한다. 처음 시작할 땐, 배경 툴바 등등 이것저것 만들어 완전 나만의 사이트로 꾸미려 계획했지만 열정이 식어버렸다 ㅜㅜ 마음이 떠난 이유는 1. 스킨을 새로 만드는 것이 아닌, 기존의 스킨을 수정하는 것에서 오는 한계 이미 만들어진 스킨을 편집하는 것이어서, 코드를 수정할 때 많은 사이드이펙트가 발생했다. 레이아웃이나 스타일 중 하나를 수정하면 수정할게 또 생기고, 수정하면 또 생기고, 또생기고 ... 이런 식의 꼬리에 꼬리를 무는 작업을 하다 보니 정말 진이 빠졌다. 그리고 티스토리 자체에서 삽입하는 같은 태그들을 수정할 수 없다는 한계도 있었다. 2. 몹쓸 미적감각 사실 그런 한계가 있더라도 스킨을 바꾸는 것은 가능하다. 하지만 문제는 내가 바..

[티스토리 꾸미기 4편] 다크모드 버튼 만들기

이번엔 다크모드 버튼을 만들어보자. 상단바의 검색버튼 옆에다 만들 것이고, 이번엔 기능만 구현하고 디자인은 다음에 하도록 하자. 상단바 태그 안에 버튼 태그를 만들자. 다크모드 해당 태그의 CSS를 추가해 버튼의 위치를 검색버튼 옆으로 위치시키자. 버튼을 만들 동안 배경색을 넣어서 편하게 편집하도록 하겠다. #darkModeButton { position: absolute; top: 20px; right: 80px; cursor: pointer; background-color: red; } 이제 button에 JavaScript를 추가해 다크모드 기능을 만들어 보자. 1. button을 누르면 태그의 class를 변경하는 함수를 실행시키도록 한다. 2. 해당 class의 배경색, 글자색을 정의함으로써 다..

[티스토리 꾸미기 3편] 이미지 테두리 만들기

기존의 블로그 모습이다. 이미지와 배경 구분이 잘 안돼서, 보기 조금 불편하다. 그래서 이미지의 테두리를 추가해 배경과 이미지를 잘 구분되도록 만들어보자. 개발자 도구로 이미지가 어떤 태그에 해당하는지 찾아보자. 위 사진처럼 태그에는 class나 id가 없으니, 를 포함하는 상위 태그 중 class나 id가 있는 가장 가까운 태그를 찾으면 사진에 보이는 이다. 그래서 CSS 파일에 의 class를 검새해보니 해당 선택자가 존재하지 않았다. 그리고 왼쪽 사진과 오른쪽 사진에서 의 class가 다른 것처럼, 이미지의 설정을 달리할 때마다 의 class가 달라진다. 그래서 의 CSS를 편집하는 것은 비효율적이다. 그러면 의 상위 태그 중에서 모든 를 포함하는 태그는 어떤 것일까. 상위 태그를 편하게 알 수 있..

[티스토리 꾸미기 2편] 고정된 상단바 만들기

* 기존의 스킨을 편집하는 것이어서 스킨이 다를 경우 HTML, CSS 파일이 다르게 구성되어 있을 수 있다. 내가 편집하는 스킨은 티스토리에서 제공하는 Poster 스킨이다. 스크롤을 내리면 상단바가 보이지 않는데, 유튜브 웹사이트처럼 스크롤에 상관없이 항상 보이는 고정된 상단바를 만들어보자. 우선 HTML 파일에서 상단바에 해당하는 태그를 찾아야 한다. 이때 크롬에서 지원하는 개발자 도구를 사용하면 편리하다. 구조를 보고 싶은 페이지(여기선 티스토리 블로그)에서 F12를 누르면 개발자 도구를 사용할 수 있다. Elements 메뉴에 들어간 뒤 아래 사진에 표시한 동그라미 부분을 누르거나 ctrl + shift + c 키를 누르고, 원하는 영역에 마우스를 대면 해당하는 태그를 알 수 있다. 여기선 he..

[티스토리 꾸미기 1편] HTML, CSS 분석

그렇다면 HTML, CSS 파일은 어디서 수정할 수 있을까? 블로그 관리자 페이지에 들어가서, 왼쪽 메뉴에 있는 '스킨 편집'에 들어가자. 들어가면 오른쪽에서 스킨을 편집할 수 있고, 왼쪽에서 편집한 스킨을 미리 볼 수 있다. 오른쪽에 있는 'html 편집' 버튼을 누르면 이렇게 HTML 파일과 CSS 파일을 편집할 수 있고, 필요한 파일을 업로드할 수 있다. HTML 파일을 살펴보니 같이 처음보는 코드와 처럼 생소한 태그가 있었다. 그래서 우선 이 HTML, CSS 파일을 내 VSCode로 옮긴 다음 크롬으로 열어봤다. 이런 식으로 페이지가 길게 형성되었다. 보아하니 같은 코드는 '글 제목', '블로그 제목' 등 내가 설정한 정보들을 표시하는 것 같고, 하나의 HTML 파일에 홈, 글, 카테고리 등 여..

[티스토리 꾸미기 0편] 시작하며

티스토리의 장점 중 하나는 블로그의 HTML, CSS 파일을 직접 편집할 수 있다는 점이다. 이를 통해 다른 블로그 플랫폼보다 더 자유롭게 원하는대로 디자인할 수 있다. 그래서 HTML, CSS 파일을 편집하면서 블로그를 한번 내 스타일대로 꾸며보려 한다. 지금 내 블로그 모습이다. 아무것도 꾸미지 않은 정말 기본 스킨이다. 우선 상단에 고정된 바를 만들고 싶다. 바에는 다크모드를 키고 끌 수 있는 버튼, 블로그 제목, 내 깃허브 링크를 추가할 것이다. 그리고 글 양쪽 밖에는 배경을 추가할 건데. 우리가 달리는 차에서 밖을 바라볼 때 멀리있는 물체는 천천히 움직여 보이는 것처럼, 스크롤 할 때 글과 배경이 다르게 움직이게 만들 것이다. 일단 이 정도를 목표로 한번 꾸며보자!