블로그스팟 헤더 변신! 풀스크린 배경 이미지 & 비디오 주소 넣는 법 (초보자용)

블로그의 첫인상을 바꾸는 '풀스크린 헤더' 적용법

블로그에 접속하자마자 시선을 사로잡는 풀스크린 헤더! 코딩을 몰라도 어느 부분의 주소만 바꾸면 되는지 핵심만 알려드립니다.

1단계: 배경 이미지 설정 (CSS)

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

아래 코드에서 빨간색 주소 부분을 본인의 이미지 링크로 교체하세요.

.header-outer { /* 🚩 아래 작은따옴표(' ') 사이에 이미지 주소를 넣으세요 */ background: url('https://example.com/my-photo.jpg') no-repeat center center; background-size: cover; height: 60vh; display: flex; align-items: center; justify-content: center; color: #ffffff; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); }

💡 이미지 주소(URL)는 어떻게 얻나요?
1. 구글 드라이브나 무료 이미지 호스팅 사이트(Postimages 등)에 사진을 올립니다.
2. 올린 사진 위에 마우스 오른쪽 버튼을 클릭합니다.
3. [이미지 주소 복사]를 클릭하면 https://...로 시작하는 주소가 복사됩니다. 이 주소를 위 코드의 빨간 부분에 붙여넣으세요.

---

2단계: 배경 비디오 넣기 (HTML)

📍 위치: [테마] → [HTML 편집] → <header> 태그 바로 아래

파란색 비디오 주소와 초록색 블로그 문구를 본인 것으로 수정하세요.

<div class="video-background"> <video autoplay loop muted playsinline> <!-- 🚩 mp4 형식의 비디오 주소를 넣으세요 --> <source src="https://example.com/video.mp4" type="video/mp4"/> </video> <div class="header-content"> <h1>내 블로그 제목 입력</h1> <p>여기에 멋진 소개 문구를 적으세요</p> </div> </div>

⚠️ 주의사항
파일 주소가 반드시 .jpg, .png, .mp4처럼 확장자로 끝나야 정상적으로 작동합니다. 주소 끝에 확장자가 없다면 파일이 불러와지지 않으니 꼭 확인해 주세요!