티스토리 스킨 만들기 강좌 #001 - 1단 스킨(1) 메인 레이아웃 변경하기

이 강좌는 티스토리 스킨 편집을 처음 해보는 왕초보를 위해 만들었습니다.

 

대상

• 나만의 티스토리 스킨을 만들고 싶은데 강좌가 없고 있어도 너무 어려워요.
• 정말 간단한 스킨/기능만 필요한데 뭐가 뭔지 모르겠어요.

목표

• 베이직 1단 스킨을 만든다.

저희는 메뉴와 컨텐츠가 있는 아주 간단한 베이직 1단 스킨을 만들거에요.

기간

• 하루에 1 강의씩 진행할 경우 최대 7일

 

 

1. 기본 베이직 스킨으로 변경하기

• 블로그 설정 - 꾸미기 - 스킨변경 메뉴에서 Letter 스킨을 적용 합시다.
• 사용중인 스킨 - 편집을 눌러 편집 화면으로 이동 합시다.
• html 편집 버튼을 눌러 스킨 편집을 시작 합시다.

 

다른 스킨을 수정해도 상관없지만 가장 미니멀한 Letter 스킨을 커스텀 하면서 시작하겠습니다.

적용했으면, 상단의 사용중인 스킨에서 편집을 눌러 편집화면으로 이동합니다.

우측에 있는 html 편집 버튼을 눌러줍니다.

 

 

2. 컨테이너 크기 변경하고 / 배경색 적용하기

• CSS 탭으로 이동하여 .inner_index 의 컨테이너 크기/배경색을 변경하세요.
• 미디어쿼리를 사용해서 작은 화면에서는 .inner_index 의 크기 제한을 풀어주세요.

 

이제 메인 화면에서 여러분이 원하는 컨테이너 크기로 변경할 차례입니다.

inner_index 가 바로 메인 컨테이너를 감싸는 박스 입니다.

 

메뉴 상단의 탭에서 CSS 탭으로 이동하고, inner_index 를 검색하여 CSS 를 수정해줍니다.

저는 800px * 500px 로 만들었고, 높이가 작으면 스크롤이 생겨야 하니 overflow 를 auto 로 바꿔줍니다.

또 배경색은 흰색으로 바꿨습니다.

 

.inner_index {
  position: relative;
  width: 800px;
  height: 500px;
  margin: 0 auto;
  overflow: auto;
  background: #fff;
}

 

그리고 해당 코드 밑에 다음 코드를 추가합시다. 이 코드는 페이지 전체 배경색을 변경하는 코드입니다.

body {
 background: #dfdfdf;
}

 

그러면 이렇게 아래 화면처럼 메인의 컨테이너 크기(파란색 영역)가 변경되고, 내부에 스크롤이 생깁니다.

 

 

그런데 이렇게 하면 모바일에서도 높이가 500px 로 제한되므로,

아래 코드를 추가하여 브라우저 화면 820px 미만(컨테이너 800+양옆 여백10)에서는 크기 제한을 풀어줍니다.

 

@media screen and (max-width: 820px) {
  .inner_index{
    width: auto;
    height: auto;
  }
}

 

 

3. 하단에 쓸데없는 요소 삭제하기

• html 탭으로 이동하여, .sidebar 와 #footer 영역을 지웁니다.

 

이번 1단 스킨에서는 인기글, 자기소개, 링크, 카피라이트 등이 필요가 없습니다.

대충 이정도 영역을 지울거에요.

 

먼저 사이드바를 지울게요. HTML 탭으로 이동하여 sidebar 를 검색합니다.

주석으로 <!-- aside --> <!-- // aside --> 되어있는 영역을 지웁니다.

 

 

이제 하단의 푸터 영역을 지워줍니다.

주석으로 <!-- footer --> <!-- // footer --> 되어있는 영역을 지웁니다.

 

 

그러면 이제 스킨을 적용해서 잠시 내 블로그를 보세요. 이렇게 나옵니다!

 

 

여기서 뭔가 이상하게 보인다면? 위에서부터 단계별로 다시 천천히 해보세요.

 

 

 

다음 글에서 계속 적겠습니다.