티스토리 뷰

블로그 꾸미기

티스토리 상단 반응형 배너 만들기

cocoder 2024. 3. 18. 20:36
728x90

안녕하세요! cocoder 입니다. 이번엔 티스토리 상단에 고정된 배너 이미지를 만드는 방법을 알려드릴게요!!

 

일단 배너로 하실 이미지 하나를 준비해주세요. 가로비율이 넓은 이미지이면 좋을 것 같습니다.

 

제가 준비한 이미지는 

이 이미지 입니다.

 

일단 티스토리에 게시물을 하나 작성해야합니다. 게시물 내용에 이미지를 포함해서 게시물을 작성해주세요. 비공개로 작성하셔도 됩니다.

 

작성하신 게시물로 가셔서 F12를 누르면 오른쪽에 창이하나 생깁니다.

위 사진의 오른쪽상단에 빨간색 으로 표시된

< 요런 모양의 버튼이 있습니다.

 

이 버튼을 누르고 커서를 옮겨 이미지를 클릭합니다.

위 사진처럼 <img 라는게 보이고 뒤에 src="으로 시작하는 글자들이 보일겁니다.

https:// 로 시작하는 글자 내용을 더블클릭하면 전체가 범위로 잡힙니다. 컨트롤 + c  를 눌러서 복사합니다.

 

이게 티스토리에 저장된 사진파일의 위치입니다. 복사한 주소를 브라우저 창에 붙여넣기 하고 접속해보면 사진이 보여집니다.

 

 

이제 사진파일은 준비가 되었습니다. 이제 html을 수정하여 배너를 만들어 볼게요.

 

티스토리의 블로그 관리 페이지로 이동합니다.

 

사이드바의 '꾸미기 >  스킨편집' 으로 새 창을 띄웁니다.

 

새 창에서 오른쪽 상단에 'html 편집' 버튼을 클릭합니다.

 

확인을 누르고 다음으로 진행합니다.

<div style="
	background-image:url('아까복사한 사진의 url 주소'); 
	height:400px;  
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;">
	<strong style="color: #000000;
	bottom: 0;
	position: absolute;
">인사말 입력</strong>
</div>

위 코드를 복사합니다. 메모장에 붙여넣기 하고 '아까복사한 사진의 url 주소' 이 부분에 아까 복사한 사진의 주소를 붙여넣기 합니다. '인사말 입력' 이 부분에는 배너에 삽입할 문구를 입력합니다.(입력 안하셔도 됩니다. 문구가 안나올뿐입니다.)

<div style="
	background-image:url('https://blog.kakaocdn.net/dn/bgzZbw/btsFQT1GZvS/JpNgangAsSaDUse7yppZd0/img.png'); 
	height:400px;  
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;">
	<strong style="color: #000000;
	bottom: 0;
	position: absolute;
">안녕하세요 🤗 cocoder 입니다.</strong>
</div>

완성된 코드입니다.

 

이제 스킨편집 부분에서 <body> 라는 태그를 찾아야합니다.

스킨마다 다를수 있는데 저는 13번째줄에서 찾았습니다. 보통 위쪽에 위치하여 금방 찾으실수 있을겁니다. 이제 <body> 태그가 끝나는 부분에 작성한 코드를 넣어주면 됩니다.

 

꺽쇠가 닫히는 부분(>) 아래줄에 입력하셔야 합니다.

저는 이렇게 입력하였습니다.

 

이제 미리보기 버튼을 눌러서 변경하기전에 내용을 미리확인하고 적용버튼을 클릭하여 배너를 적용합시다.

 

적용이 된 후의 블로그 모습입니다.

 

이제 커스텀 할 수 있는 방법을 알려드릴게요.

 

<div style="
	background-image:url('https://blog.kakaocdn.net/dn/TfnLd/btsFRBGtkTv/oxyNateIAmqjts5eAkbLK1/img.webp'); 
	height:400px;  
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;">
	<strong style="color: #000000;
	bottom: 0;
	position: absolute;
">안녕하세요 🤗 cocoder 입니다.</strong>
</div>

 

 

 

사진의 높이를 조절할 수 있는 부분입니다. 이 숫자를 늘리거나 줄이면 사진의 세로 크기가 변경됩니다.

 

배경화면의 위치를 조정하는 부분입니다. 각각의 방향으로 사진이 위치가 정해집니다.

bottom, top, right, left, center

 

글자의 색상을 변경합니다. 색상표에서 원하는 색상을 선택한뒤 코드를 복사하여 붙여넣기 합니다.

네이버 색상표 주소를 알려드릴게요.

https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%EC%83%89%EC%83%81%ED%91%9C

 

색상표 : 네이버 통합검색

'색상표'의 네이버 통합검색 결과입니다.

search.naver.com

 

감사합니다 😘

728x90

'블로그 꾸미기' 카테고리의 다른 글

누르고 싶은 구독버튼 만들기  (4) 2024.03.20
블로그 상단 배너에 귀여운 움직이 텍스트로 꾸미기  (2) 2024.03.20
드래그로 선택된 텍스트 기본 색상 변경  (4) 2024.03.19
스크롤바 내 맘대로 변경하기  (4) 2024.03.19
티스토리 움직이는 이미지 슬라이더 배너 만들기  (7) 2024.03.18