← 랜딩 초안 만들기
남은 만들기 3회
작은 브랜드를 위한 촬영 스튜디오 — 하루빛
작은 브랜드를 위한 촬영 스튜디오 랜딩. 하루 안에 끝난다는 걸 강조하고 싶어. · 예시
고칠 곳을 말해 주세요
버전 2개
누르면 그 버전으로 되돌아가 봅니다 — 지워지는 버전은 없습니다.
이 초안, 실제로 만들까요?
연락처를 남기면 스튜디오 온가 완성까지 도와드립니다.
파일 1개 · 4.1KB · JS 0건 · 외부 요청 0건
· 정화 결과 이상 없음
코드
HTML 한 장입니다. 그대로 올리면 바로 동작합니다. 자바스크립트도 외부 자원도 없습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>작은 브랜드를 위한 촬영 스튜디오 — 하루빛</title>
<style>
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
:root{--ink:#191b1f;--ink2:#585f6b;--line:#e6e8ee;--accent:#c2542f;--paper:#fffdf9}
body{background:var(--paper);color:var(--ink)}
.top{padding:88px 0 72px;background:
radial-gradient(720px 320px at 82% -10%, #f6e2d6, transparent 70%), var(--paper)}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--accent)}
h1{font-size:clamp(2.1rem,1.3rem+2.8vw,3.2rem);font-weight:800;letter-spacing:-.035em;
line-height:1.14;margin:12px 0 18px;max-width:19ch}
.lede{font-size:1.06rem;color:var(--ink2);max-width:52ch}
.cta{display:inline-flex;align-items:center;min-height:52px;padding:0 30px;margin-top:32px;
border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:.95rem}
.cta+.cta{background:transparent;color:var(--ink);border:1px solid var(--line);margin-left:10px}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:72px}
.strip div{background:var(--paper);padding:28px 24px}
.strip b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.strip span{font-size:.85rem;color:var(--ink2)}
section{padding:72px 0}
h2{font-size:1.5rem;font-weight:750;letter-spacing:-.02em;margin-bottom:28px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff}
.card .fig{height:120px;border-radius:12px;margin-bottom:18px;
background:linear-gradient(140deg,#f3ddd0,#e7e9f0)}
.card h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.card p{font-size:.92rem;color:var(--ink2)}
.price{border:1px solid var(--line);border-radius:18px;padding:30px;background:#fff;max-width:420px}
.price .n{font-size:2.2rem;font-weight:800;letter-spacing:-.03em}
.price ul{margin:18px 0 0;padding-left:1.1em;color:var(--ink2);font-size:.92rem}
.foot{padding:48px 0;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink2)}
@media(max-width:620px){.strip{grid-template-columns:1fr}.top{padding:64px 0 52px}}
</style>
</head>
<body>
<div class="top"><div class="wrap">
<p class="eyebrow">서울 성수 · 자연광 스튜디오</p>
<h1>사진 한 장이 매출을 바꿉니다</h1>
<p class="lede">제품 하나로 시작하는 브랜드를 위해 만들었습니다.
촬영부터 보정까지 하루 안에 끝내고, 쓸 수 있는 형태로 정리해 드립니다.</p>
<a class="cta" href="#price">촬영 예약하기</a><a class="cta" href="#work">작업 보기</a>
</div>
<div class="wrap"><div class="strip">
<div><b>하루</b><span>촬영부터 전달까지</span></div>
<div><b>40컷</b><span>기본 제공 보정본</span></div>
<div><b>218팀</b><span>지금까지 함께한 브랜드</span></div>
</div></div>
</div>
<section id="work"><div class="wrap">
<h2>이렇게 찍습니다</h2>
<div class="cards">
<div class="card"><div class="fig"></div><h3>제품 단독</h3>
<p>흰 배경과 그림자만으로 형태를 보여줍니다. 쇼핑몰 상세에 바로 씁니다.</p></div>
<div class="card"><div class="fig"></div><h3>연출 컷</h3>
<p>쓰이는 장면을 함께 담습니다. 광고와 SNS에서 반응이 다릅니다.</p></div>
<div class="card"><div class="fig"></div><h3>브랜드 무드</h3>
<p>색과 소재를 모아 브랜드의 결을 만듭니다. 첫 화면에 쓰기 좋습니다.</p></div>
</div>
</div></section>
<section id="price"><div class="wrap">
<h2>가격</h2>
<div class="price">
<div class="n">38만원</div>
<p style="color:var(--ink2);font-size:.92rem;margin-top:4px">하루 촬영 · 보정본 40컷</p>
<ul>
<li>제품 10점까지 (초과 시 점당 2만원)</li>
<li>스타일링 소품 · 배경 포함</li>
<li>쇼핑몰 규격으로 잘라 전달</li>
<li>재보정 1회 무료</li>
</ul>
<a class="cta" href="#" style="margin-top:24px">예약 문의하기</a>
</div>
</div></section>
<div class="foot"><div class="wrap">하루빛 스튜디오 · 서울 성동구 성수이로 12 · 010-0000-0000</div></div>
</body>
</html>
스튜디오 온이 만든 도구입니다.