[개요]
티스토리 블로그는 개인 및 기업의 다양한 콘텐츠를 공유하는 데 매우 유용한 플랫폼이다.
블로그의 시각적인 요소는 방문자들에게 강력한 인상을 남기며, 스킨 편집은 그 중에서도 중요한 역할을 한다.
[기본 개념 이해하기]
HTML
HTML은 웹 페이지의 구조를 정의하는 마크업 언어이며,
웹페이지 내 요소들의 배치와 구조를 결정하고 웹브라우저가 이해하고 해석하게 사용자에게 시각적으로 표현된다.
티스토리 스킨에서는 HTML을 사용하여 블로그의 요소들을 배치하고 조직화한다.
즉, 블로그를 구성하는 곳이라 생각하면 된다.
// HTML 기본 구조 //
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지 제목</title>
</head>
<body>
<header>
<h1>헤더 제목</h1>
</header>
<nav>
<!-- 내비게이션 링크 -->
</nav>
<main>
<!-- 주요 콘텐츠 -->
</main>
<footer>
<!-- 페이지 하단 정보 -->
</footer>
</body>
</html>
여기서 <header>, <nav>, <main>, <footer> 등은 시맨틱 태그로,
각각 웹페이지의 헤더, 네비게이션, 주요 콘텐츠 영역, 푸터를 나타낸다.
CSS
CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 스타일과 레이아웃을 지정하는 스타일 시트 언어이다.
색상, 글꼴, 여백, 배경 등의 시각적인 속성을 조정하여 블로그의 디자인을 개선한다.
// CSS의 예시 //
/* 요소 선택자에 스타일 적용 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333;
text-align: center;
}
/* 클래스 선택자에 스타일 적용 */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
}
JavaScript
JavaScript는 웹 페이지에 인터랙티브한 기능을 추가하는 프로그래밍 언어이다.
스킨에 JavaScript를 활용하여 동적인 요소를 구현하거나 사용자와의 상호작용을 증진시킬 수 있다.
// JavaScript 예시 //
// 버튼 클릭 시 메시지 출력
document.querySelector('.button').addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});
// 시간에 따라 배경색 변경
setInterval(function() {
document.body.style.backgroundColor = getRandomColor();
}, 1000);
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
위와 같이 HTML, CSS, JavaScript를 조합하여 웹페이지의 구조, 디자인 및 기능을 개선하고
사용자와 상호작용하는 웹 환경을 구축할 수 있다.
[기본적인 편집 단계]
스킨 선택 및 편집 모드 진입
티스토리 관리 페이지에서
① '디자인' 탭으로 이동
② '스킨 편집' 버튼을 클릭
③ html 편집 모드로 진입
수정할 언어 선택
보통 스킨의 편집은
① HTML 편집
② CSS 편집
③ 추가 원하는 파일 업로드
순으로 진행된다.
1. HTML 수정
HTML 편집기를 사용하여 블로그의 구조를 수정한다.
로고, 헤더, 사이드바 등의 요소를 배치하고 원하는 형태로 변경할 수 있다.
2. CSS 수정
CSS 편집기를 통해 색상, 폰트, 여백 등 시각적인 스타일을 수정한다.
미리보기 기능을 통해 실시간으로 변경 사항을 확인할 수 있다.
3. JavaScript 추가 (선택 사항)
필요한 경우 JavaScript를 사용하여 블로그에 인터랙티브한 기능을 추가한다.
예를 들어, 팝업 창, 슬라이더, 버튼 등을 구현할 수 있다.
4. 파일 업로드
HTML / CSS 에서 사용할 파일을 업로드한다.
보통 배경이나 아이콘의 이미지 파일 등을 업로드한다.
<Tip>
[편집하면서 느낀점]
진정한 고수는 Tistory를 쓴다.
티스토리 스킨 편집은 다른 블로그들과는 달리, 정말로 많은 시간과 노력이 필요한 작업이다.
특히나 필자처럼 HTML, CSS, JavaScript를 처음 다루는 사람이라면, 더 많은 시간과 노력이 필요하다.
사실 FPGA 하려고 프로그래밍을 시작했는데, 어쩌다가 HTML이랑 Java까지 공부하고 있는지 모르겠다.
Polymath 호소인으로써, 오늘도 Tistory의 고수가 되는 것을 꿈꾸며,
앞으로 작성할 가이드들이 이 글을 읽는 독자들의 티스토리 스킨 편집의 기초적인 상식 향상과 개인 블로그를 더욱 멋지게 꾸미는데 많은 도움이 되길 바란다.
'# Tistory > - Skin' 카테고리의 다른 글
| [Tistory] 콘텐츠 제목 Setting - 글 제목(Article Title) 상단 고정 및 기타 기능 (0) | 2023.08.25 |
|---|---|
| [Tistory] 콘텐츠 제목 Setting - 부분 노출(제목 잘림), 제목 두께 (0) | 2023.08.24 |
