티스토리 블로그에서는 티스토리 스킨위자드를 통해 간편하게 테마 설정을 변경하고 HTML 및 CSS 수정을 통한 디자인 커스터마이징을 할 수 있습니다. 이는 네이버 블로그와 달리 티스토리 스킨위자드를 활용해 개인의 홈페이지를 독특하게 꾸밀 수 있는 큰 장점 중 하나입니다.
티스토리 스킨위자드를 사용하면 HTML 및 CSS 지식이 없어도 다양한 디자인 요소를 수정할 수 있습니다. 스킨위자드를 활용하면 블로그의 디자인, 폰트 크기, 색상 등을 쉽게 조정할 수 있습니다. 이로 인해 사용자들은 개인 블로그에 독자적인 디자인과 이미지를 적용하여 차별화를 이뤄낼 수 있습니다. 또한 반응형 스킨을 선택하여 모바일 환경에 최적화된 블로그를 제작할 수도 있습니다.
스킨위자드를 사용하는 장점은 디자인에 제한이 없다는 것입니다. 디자인 경험이 부족하거나 포토샵, 일러스트레이터 등의 전문적인 도구 사용이 어려운 사람들도 스킨위자드를 통해 손쉽게 나만의 블로그를 꾸밀 수 있습니다. HTML, CSS 등의 언어를 알지 못해도 자신만의 독특한 블로그 디자인을 실현할 수 있습니다.
하지만 모든 스킨에 스킨위자드를 적용할 수 있는 것은 아닙니다. 티스토리 블로그 테마마다 스킨위자드를 적용할 수 있는 범위와 기능이 다를 수 있습니다. 일부 테마는 제한된 수정 기능을 가지고 있을 수도 있으므로 티스토리 스킨위자드를 적용하기 전에 테마의 특성을 확인하는 것이 중요합니다.
티스토리 스킨위자드 설정방법
모두 지원하고 있진 않지만 티스토리 기본 스킨에는 스킨위자드가 지원하고 있으며 그 외에도 많은 스킨이 지원하고 있습니다.
그리고 많은 사람들이 사용하는 Fastboot 를 이용하면 많은 정보와 애드센스 광고를 설정하는데 최적화 되어있습니다.
참고 : 티스토리 스킨 Fastboot 다운로드 수동설치 적용방법
블로그의 스킨에 정보를 클릭을 해주시면 기본적으로 스킨위자드를 지원하는지 안하는지에 확인할 수 습니다.
기본 티스토리 스킨에 대해서 오른족 하단의 점3개를 클릭해서 정보를 클릭합니다
- 스킨위자드 접속: 티스토리 관리자로 로그인한 후 블로그 관리 페이지에서 스킨위자드를 선택합니다.
- 테마 선택: 다양한 테마 중에서 원하는 테마를 선택하거나 현재 사용 중인 테마를 수정합니다.
- 기본 설정: 테마에 내장된 기본 설정을 변경하고 배경 이미지, 폰트, 색상 등을 조정합니다.
- 레이아웃 조정: 헤더, 사이드바, 본문 등의 레이아웃을 선택하고 설정합니다.
- 위젯 추가: 필요한 위젯을 추가하거나 위치를 조정하여 블로그 디자인을 개선합니다.
그럼 화면 좌측 하단에 스킨위자드라는것이 뜨는것을 볼수 있는대 이것이 뜨면 스킨위자드가 사용가능한 스킨입니다
몇 개 클릭해보시면 뜨는게 있고 안뜨는게 있는것을 알 수있습니다
그럼 스킨위자드를 통해 기본 베이스로 한 테마에서 부분적으로 커스터마이즈 할 수 있으며 기본 베이스로 스타일이 마음에 드는것을 찾아 스킨위자드로 들어가줍니다.
스킨 위자드에서는 기본적으로 여러가지의 배경 이미지와 정렬타입 그리고 배경 색상등을 제공하고 있습니다
이렇게 여러가지 조합을 조합하면 엄청난 가짓수의 컨셉디자인을 만들어 낼수 있으며 그 외에도 직접 올리기로 자신만의 이미지를 올리신다면 무한에 가까운 자신만의 디자인을 손쉽게 변경하실수 있습니다
티스토리 HTML CSS 편집 Tip
티스토리 스킨위자드 HTML 편집 및 CSS 수정을 위한 자주 사용하는 태그와 사용 방법
- HTML 편집: 스킨위자드의 HTML 편집 기능을 이용하여 블로그의 HTML 코드를 수정합니다.
- 원하는 위치에 위젯, 배너, 카드 등을 추가하거나 레이아웃을 변경할 수 있습니다.
<div>,<span>등의 HTML 태그를 활용하여 구조를 만들고 스타일을 지정할 수 있습니다.
- CSS 편집: 스킨위자드의 CSS 편집 기능을 이용하여 블로그의 스타일을 수정합니다.
- 선택자와 속성을 이용하여 텍스트 스타일, 배경, 여백 등을 조절합니다.
font,color,background,margin,padding등의 CSS 속성을 활용합니다.
티스토리 블로그의 스킨위자드에서 HTML 편집 및 CSS 수정을 할 때 자주 사용하는 태그와 사용 방법을 설명해보겠습니다.
1. <div> 태그:
<div>태그는 블록 레벨 요소로, 구역을 나누거나 스타일을 적용하기 위해 사용됩니다.- 사용 방법
<div class="custom-div">내용</div>2. <span> 태그:
<span>태그는 인라인 요소로, 특정 부분에 스타일을 적용하기 위해 사용됩니다.- 사용 방법
<span class="highlighted-text">강조된 텍스트</span>3. <a> 태그 (링크):
<a>태그는 하이퍼링크를 생성할 때 사용되며,href속성으로 링크 주소를 지정합니다.- 사용 방법
<a href="https://www.example.com">링크 텍스트</a>4. <img> 태그 (이미지):
<img>태그는 이미지를 삽입할 때 사용되며,src속성으로 이미지 파일 경로를 지정합니다.- 사용 방법
<img src="image.jpg" alt="이미지 설명">5. <ul>와 <li> 태그 (목록):
<ul>태그는 순서 없는 목록을 생성하고,<li>태그는 각 목록 항목을 생성합니다.- 사용 방법
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>6. <h1>~<h6> 태그 (제목):
- 제목을 표현하는 태그로,
<h1>이 가장 큰 제목이며<h6>이 가장 작은 제목입니다. - 사용 방법
<h1>제목 1</h1>
<h2>제목 2</h2>7. CSS 선택자:
- 스타일을 적용하기 위한 선택자로, 클래스(class)나 아이디(id) 등을 활용합니다.
- 사용 방법
.custom-div {
background-color: #f0f0f0;
padding: 10px;
}
#header {
font-size: 18px;
color: #333;
}
8. margin과 padding 속성:
- 요소의 여백을 조절할 때 사용하는 속성으로,
margin은 바깥 여백,padding은 내부 여백을 설정합니다. - 사용 방법
.custom-div {
margin: 10px;
padding: 20px;
}9. background 속성:
- 요소의 배경을 설정하는 속성으로, 색상이나 이미지를 지정할 수 있습니다.
- 사용 방법
.custom-div {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-size: cover;
}10. font 속성:
- 글꼴과 관련된 스타일을 지정하는 속성으로, 크기, 스타일, 색상 등을 조절할 수 있습니다.
- 사용 방법
.highlighted-text {
font-size: 16px;
font-weight: bold;
color: #ff0000;
}11. text-align 속성:
- 텍스트의 정렬을 설정하는 속성으로, 가운데, 왼쪽, 오른쪽 등으로 정렬할 수 있습니다.
- 사용 방법:
.center-aligned {
text-align: center;
}위의 태그와 속성은 티스토리 스킨위자드에서 HTML 편집 및 CSS 수정을 할 때 자주 사용되는 기본적인 요소들입니다. 이를 활용하여 블로그의 디자인을 원하는 대로 커스터마이징할 수 있습니다.
참고 : 티스토리 2개이상 H1태그 – 빙 검색엔진 웹마스터도구 오류
티스토리 기본 설정 꾸미기 세팅 방법
배경뿐만 아니라 타이틀 이미지도 배경화면과 같은 방법으로 자신의 취향것 꾸밀수 가 있습니다
티스토리 스킨위자드를 통해 블로그의 테마 설정을 변경하고 HTML/CSS를 수정하는 것은 블로그 디자인을 개선하고 사용자 경험을 향상시키는 중요한 작업입니다. 조정한 내용을 미리보기를 통해 확인하고, 필요한 경우 백업을 해두어 안전하게 수정 작업을 진행하세요. 이를 통해 블로그를 더욱 맞춤화된 디자인으로 꾸미며 독자들에게 더 나은 환경을 제공할 수 있습니다.