티스토리에는 자체적으로 지원하는 스킨들이 있습니다. 모두 멋진 모습을 하고 있지만, 부분적으로 마음에 들지 않는 부분 수정을 해야 합니다. 티스토리 블로그의 경우 html과 css편집을 지원하고 있습니다. 취향을 반영해 html편집기로 티스토리 스킨 css를 수정할 수 있습니다.
일상에서 흔히 웹사이트, 블로그, 카페 등 플랫폼의 형태로 그 의미를 달리하는 경우가 많습니다. 겉모습에서부터 큰 차이를 보이고 있지만, 이 모든 것은 사이트의 영역으로 웹페이지라고 할 수 있습니다.
개인이 직접 제작한 웹사이트의 페이지는 아니지만, 코드에 접근할 수 있다면 css편집을 통해 충분히 수정 및 보완할 수 있습니다. 배경, 글씨, 그림, 효과 등 외관으로 볼 수 있는 대다수의 모습은 css가 담당하는 영역이며, 이 부분을 수정한다면 보다 멋진 웹사이트를 운영할 수 있습니다.
🟥 티스토리 스킨 html & css 편집에 앞서 주의하세요.
- 기존 티스토리 스킨을 백업하세요.
- 스킨을 편집하면, 코드 내용이 달라집니다. 기존의 스킨으로 롤백하기가 쉽지 않습니다. 또한, 오류가 발생했을 때를 대비하여 미리 백업해두시는게 좋습니다.
- 외부에서 가져온 코드는 따로 보관하세요.
- 예를 들어, 애드센스 코드, 서치콘솔 코드, 네이버 코드 등이 있습니다. 만약, 오류 발생 시 백업이 없다면 순정으로 돌아가야 합니다. 경우에 따라서는 다시 외부 코드들을 가져와야 합니다. 결과적으로 귀찮은 일이 발생할 수 있습니다.
🟥 티스토리 스킨 html & css 편집하는 방법.
1️⃣ 티스토리 스킨 편집기로 접근하기
가장 기본적인 방법입니다. 티스토리 스킨 편집기를 이용하는 방법이죠. 플랫폼에서 자체적으로 지원하기 때문에 편리한 점이 많습니다. 가장 대표적으로 적용한 css를 바로 확인해 볼 수 있다는 장점이 있습니다.
그 밖에도 css관련 코드에 대한 지원이 있습니다. 예를 들어, 정확한 코드가 생각이 안난다고해도 걱정할 필요가 없습니다. 편집기에서 관련 있는 명령어들을 보여주고 있습니다. 이전에는 없던 기능 같은데 편리해졌습니다.
ⓛ 티스토리 블로그 관리자 페이지로 이동.
② 꾸미기 메뉴 중, 스킨 편집 선택.
③ 오른쪽 스킨 편집에서 'html편집' 선택.
④ 상단 html, css, 파일업로드 중 필요한 메뉴를 선택.
⑤ 자신의 입맛대로 티스토리 스킨 html & css 편집.
위의 과정으로 css편집창으로 넘어갑니다. 이제부터는 본격적으로 본인이 원했던 css효과를 적용할 수 있습니다. css에는 여러 가지 효과가 존재합니다. 그중에서 원하는 효과를 잘 선택해 블로그의 분위기를 바꿀 수 있을 것입니다.
간혹, 웹서핑 중 만날 수 있는 사이트들의 멋진 모습을 보며 '내 블로그에도 적용해볼까.'란 생각을 해보셨나요. 그렇다면 과감하게 css 편집에 도전하는 것이 좋은 선택이 될 수 있습니다. 분명, 중요한 '백업'을 미리 하셨다면, 더 이상 망설일 필요가 없겠죠.
티스토리 스킨 백업 기능 또한 '관리자 메뉴'에서 찾을 수 있습니다.
- 관리자 메뉴 > 스킨 변경 > 스킨 저장
css를 변경하는 방법을 알아도 css관련 문법과 속성을 모르면 의미가 없을 수 있습니다. 기본적으로 css를 html에 어떻게 적용하는지, css에 존재하는 문법(규칙)과 속성은 어떻게 찾으면 되는지를 알아두면 좋습니다.
2️⃣ 티스토리 스킨 편집기에서 css 분법 도움을 받다.
개인적으로 티스토리 스킨 편집기는 여느 코딩 에디터들에 비해 나쁘지 않다고 생각합니다. 과거에는 그저 메모장 같은 느낌이 강했습니다. 머릿속에 있는 내용을 그저 옮기는 느낌이랄까요.
아무 도움 없이 코드를 활용하기란 쉽지 않습니다. 그 많은 코드들과 속성들을 외우고 있어야 하니까요. 주로 사용하지 않는 것은 잊혀지기 마련이잖아요. 이제는 그럴 걱정은 안 해도 될 것 같습니다.
스킨 편집기에 접근해 아무 알파벳이나 적어 볼까요.
위 사진에서 보시는 것 처럼, a로 시작하는 코드, 관련 코드들의 목록을 보여주고 있습니다. 이제는 적용할 효과에만 집중할 수 있겠습니다. 어렵게 코드를 외우기보다는 적용한 효과와 적용 방법을 익히면 누구나 쉽게 접근할 수 있겠습니다.
3️⃣ 타 웹사이트에 적용된 css, 어떻게 알 수 있을까.
모든 디자인은 모방에서 시작될 수 있습니다. css를 공부해도 실제 적용한 모습을 상상할 수 있으려면, 다양한 경험과 경력이 필요한 법입니다. 이제 블로그를 접한 우리는 어떻게 css를 찾아서 적용시키면 될까요.
웹브라우저, 예를 들어 '크롬'을 사용하는 경우라면 '개발자 도구'를 활용할 수 있습니다. 알고 싶은 웹사이트에서 개발자 모드를 활성화시키면 html, css, javascript등의 정보를 알 수 있습니다.
- 크롬에서 개발자도구 활성화시키는 방법.
- F12
- ctrl + shift + c
- 마우스 우클릭 후, 검사 선택
사진과 같은 html코드를 확인할 수 있는 창이 활성화됩니다. 여기서, 원하는 요소를 선택하시면, 해당되는 요소의 html, css 등의 정보를 확인할 수 있습니다. css 문법을 확인한 후, 속성을 변경하면서 블로그에 적용시킨다면 티스토리 스킨 편집을 성공적으로 마칠 수 있습니다.
댓글