Lined Notebook

3-5-1. 블로그의 사이트 헤더 설정하기

by 프라치노

모든 웹 페이지에서 가장 먼저 보이는 것은 사이트 헤더입니다. 사이트 헤더를 꾸미는 것만으로도 블로그의 개성을 멋지게 드러낼 수 있습니다. 티스토리 스킨, 프라치노 공책은 블로거만의 개성을 확실히 표현할 수 있게 도와줍니다. 여기에서는 티스토리 스킨, 프라치노 공책의 사이트 헤더를 설정하는 방법에 관하여 알아봅니다.

스킨 옵션의 블로그 헤더 항목

사이트 헤더는 컬러가 있는 페이지의 상단 영역을 의미합니다. 이것을 설정하려면 블로그 관리 페이지에서 ‘꾸미기’ 항목의 ‘스킨 편집’으로 이동하세요. 그리고 ‘블로그 헤더’와 ‘다크 모드일 때 블로그 헤더’ 항목을 둘러보세요.


1. 헤더 제목

사이트 헤더에 표시되는 제목을 입력합니다. 값이 입력되지 않으면 블로그의 제목이 표시됩니다.

2. 헤더 설명

사이트 헤더에 표시되는 설명을 입력합니다. 값이 입력되지 않으면 블로그의 설명이 표시됩니다.

3. 배경 컬러

사이트 헤더의 배경 컬러를 지정합니다.

4. 텍스트 컬러

사이트 헤더에 있는 제목과 설명의 텍스트 컬러를 지정합니다.

5. 기본 배경 사용

사이트 헤더의 배경 사진을 프라치노 공책에서 제공하는 기본 무늬 배경으로 지정합니다. 만약 배경을 사용자화하고 싶다면 이 옵션을 꺼야 합니다.

6. 텍스트 보이기

사이트 헤더에 있는 제목과 설명을 표시하거나 숨깁니다.

7. 메인 외에는 축소

블로그의 첫 페이지가 아니라면 사이트 헤더의 높이를 축소할 것인지를 선택할 수 있습니다. 항상 축소하거나, 글 목록이나 글의 대표 사진이 없을 경우에만 축소하도록 설정할 수 있습니다.

8. 사진(기본, 2배, 3배)

사이트 헤더의 배경 사진을 지정합니다. 사진을 업로드할 때에는 고해상도(HiDPI) 디스플레이를 고려해야 하며, 각 배율에 맞는 이미지를 업로드해야 합니다.

9. 사진 위치, 반복, 크기

사이트 헤더의 배경 사진에 관한 위치와 반복 여부, 크기를 지정합니다.

10. 사용자화 사진 크기

사이트 헤더의 배경 사진 크기가 ‘사용자화’로 설정되어 있다면 이 옵션에서 스타일 시트의 background-size 속성 값을 입력하여 사진의 크기를 임의로 지정할 수 있습니다.


여러 개의 블로그 헤더 디자인

사이트 헤더의 다양한 옵션을 이용하여 개성 있고 고유한 블로그 헤더 디자인을 만들 수 있습니다. 어떤 디자인을 적용해야 할지 고민이라면 아래의 예시를 참조해 보세요.

무늬형 헤더

▶ 무늬형 헤더 디자인

도트, 줄, 동물 발자국 등 무늬를 활용하여 사이트 헤더를 꾸밀 수 있습니다.

사진형 헤더

▶ 사진형 헤더 디자인

좋아하는 인물이나 동물, 풍경 사진으로 사이트 헤더를 꾸밀 수 있습니다.

그러데이션형 헤더

▶ 그러데이션형 헤더 디자인

그러데이션 사진을 적절히 사용한다면 세련된 사이트 헤더를 만들 수 있습니다.

단색 헤더

▶ 단색 헤더 디자인

적절한 단색 컬러를 사용한 사이트 헤더는 블로그의 느낌을 차분하게 만들 수 있습니다.

반응형

블로그의 정보

프라치노 공책

프라치노

활동하기