TISTORY 꾸미기1: 기본 스킨 설정, HTML로 내용 순서 바꾸기

🟣 TISTORY 기본 스킨

1. 티스토리 설정에 들어간다.
2. 꾸미기에서 스킨 변경을 선택한다.
3. 미리 보기로 확인하여 마음에 드는 기본 스킨 중 선택한다. (Odyssey 스킨 선택)

스킨 목록

🟣 TISTORY 스킨 설정: HTML

🟣 내용 순서 바꾸기

1. 창을 2개 열어, 첫 번째 창(이후 1번 창)엔 설정 - 꾸미기에서 스킨 편집을 선택하여 창을 열고, 또 다른 창(이후 2번 창)으로 본인의 블로그 메인페이지를 준비한다.
2. 2번 창에서 F12를 눌러 개발자 모드를 연다.

F12를 누른 모습

3. class 이름 확인한다. 아래 사진처럼 화살표 모양을 눌러(Ctrl+Shift+C) 내가 바꾸고 싶은 내용을 선택한다. 아래 예시에선 Archives를 예시로 들고 있다.

element 선택

4. 우리는 Archives라는 글자만 위치를 바꾸는 것이 아니라 아래에 있는 내용까지 함께 바꿀 것이다. 글자의 위 box-archive라는 이름을 가진 div 태그 위에 마우스를 올리면 범위의 색상이 지정되는 것을 확인할 수 있다. 우리는 위치를 바꾸고 싶은 상자의 이름이 "box-archive"라는 것을 알았다.

위치 바꿀 div 선택

5. 다시 1번창으로 돌아가 html 편집 버튼을 누른다.

스킨 편집 창

6. html 창이 열리면 Ctrl+F 를 눌러 box-archive를 검색한다. 그러면 box-archive라는 이름을 가진 div 태그를 발견할 수 있다. 이 div 태그만 옮기는 것보단 한 겹 더 둘러싸고 있는 s_sidebar_element까지 포함해서 이동시켜 주면 되겠다.

box-archive 찾기

7. 이제 이 내용들을 캘린더 위에 변경할 것이다. 캘린더의 이름은 box-calendar라는 것을 1~4번을 통해 확인하였다. 그럼 box-archive의 s_sidebar_element 부분을 잘라내기(Ctrl+X)하고 box-calendar위에 붙여넣기(Ctrl+V) 한다. 그리고 우측 상단에 있는 적용 버튼을 누른다.

box-archive 잘라내기

box-calendar 위에 붙여넣기(Ctrl+V)

8. 새로고침을 누르면 바뀐 모습을 확인할 수 있다.