티스토리 메뉴에 배경화면 추가하기 (Poster 스킨수정)

티스토리 포스터 스킨을 하나씩 커스터마이징 중입니다.

지난 글에서 메뉴 펼쳐놓기와 검색창 메뉴에 추가하기를 해보았습니다.

 

티스토리 Poster 스킨 메뉴 펼침 설정하기 (포스터 스킨)

 

티스토리 좌측 메뉴에 검색창 추가 (Poster 스킨)

 

 

오늘은 메뉴탭 뒷편에 배경이미지를 넣어볼 예정입니다.

아무래도 메뉴를 열었는데 무언가 허전해서 무언가 그려주고 싶어서요.

 

Material 디자인을 선호하는 요즘은 최대한 깔끔하게 배치하는 추세입니다만,

그래도 그림을 하나 찾아 넣어놔야겠습니다.

 

그림은 김홍도 선생의 "옥순봉도"로 하기로 했습니다.

 

 

 

1. 메뉴 변경 전후비교

글쓴이 눈에는 이미지를 넣은게 더 마음에 듭니다.

이렇게 꾸며놓고 사용하다가 나중에 변경하고 싶으면 바꿀 예정입니다.

메뉴에 이미지 추가 하기 전후 비교

 

 

2. 이미지 고르기

김홍도의 "옥순봉도"는 옛날 그림이라 종이가 빛이 바래서 배경이 노란색입니다.

노란색 등 칼라가 들어간 이미지로 메뉴 배경을 설정했더니

구분이 너무 명확하게 느껴져 촌스러운 티가 좀 났습니다.

그래서 배경을 하얀색으로 변경하여 사용했습니다.

 

 

배경에 칼라가 들어간 이미지를 사용하려면 메뉴에 테두리 효과도 주고,

라운딩 효과도 주어서 "이것이 메뉴판입니다" 하는 경계감을 주는것이 좋을 것 같습니다.

 

출처: 네이버 지식백과 (https://terms.naver.com/entry.naver?docId=5672893&cid=62854&categoryId=62854)

 

 

3. 이미지 전처리

FHD를 사용하는 16:9 스케일의 모니터로 윈도우10에서 크롬을 접속한다면,

메뉴의 폭과 세로 사이즈는 348px x 969px 입니다.

 

다른 비율의 기기는 아마 알아서 이미지가 잘리거나 확대/축소 되어 보일 것입니다.

모든 기기를 고려할 수 없으니 이미지를 위에 언급한 크기로 제작하겠습니다.

 

앞서 얘기한 배경 칼라의 제거를 합니다.

348 x 969 사이즈의 아래에 그림을 배치해줍니다.

 

밑에 이미지 처럼 만들어 주었습니다.

윗 부분의 하얀 배경은 조금 잘라내고 본문에 올렸습니다.

 

 

 

4. 이미지 업로드

이미지를 티스토리 블로그에 업로드 해주어야 합니다.

관리자모드로 들어가셔서 스킨편집 → HTML편집 → 파일업로드로 들어갑니다.

 

이미지를 올려줍니다.

글쓴이는 이미지 파일명을 img_menu_background.jpg로 하였습니다.

 

당연히 이미지의 용량은 작으면 작을수록 좋습니다.

 

 

 

 

5. CSS 수정

코드를 수정해줄 차례입니다.

이번 코드수정은 어렵지 않습니다.

 

HTML편집에서 CSS 수정 탭으로 갑니다.

Ctrl + F로 아래 코드를 찾습니다.

 

#header .menu {

 

 

중괄호의 마지막 부분에 3줄 코드를 추가해줍니다.

 

background-image: url(images/img_menu_background.jpg);
background-repeat: no-repeat;
background-size: 100%;

 

 

그럼 코드의 모습은 아래와 같이 됩니다.

 

언제 수정을 했는지 주석을 남기는 것을 잊지 마세요.

안남기면 나중에 못찾습니다.

#header .menu {
	position: fixed;
	top: 0;
	left: -348px;
	z-index: 400;
	width: 348px;
	height: 100%;
	padding: 94px 40px 189px;
	background-color: #fff;
	box-sizing: border-box;
	transition: left .5s ease-in-out;
	/* 210610 스킨수정, 메뉴 배경이미지 추가 */
	/* 코드 추가 시작 */
	background-image: url(images/img_menu_background.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	/* 코드 추가 끝 */
}

 

 

6. 완성 및 확인

"적용"버튼을 누르고 티스토리로 접속합니다.

F5를 누르고 이미지가 적용되는지 확인합니다.

 

이미 캐시로 받아진 이미지 때문에 변경한 이미지가 안먹힌다면

Ctrl + F5 를 누르면 됩니다.

 

그림을 좌우 반전 시켜서 가운데로 올 수록 집중이 되는 구조로 만들고 싶은데,

우상향 느낌을 남겨두고 싶어서 원본 구도 그대로 두었습니다.