외부활동/유데미X스나이퍼팩토리
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 9일차 - (구)세이프홈즈 랜딩페이지 반응형 퍼블리싱(html만)
주디_JUDI
2023. 6. 13. 21:26
과제
- (구)세이프홈즈 랜딩페이지 반응형 퍼블리싱(html만)하기
코드 작성
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>세이프홈즈 랜딩페이지</title>
<link href="style.css" rel="stylesheet"></link>
</head>
<body>
<!-- 헤더 -->
<header>
<nav>
<section class="logo">
<img src="./images/Shape.png" alt="세이프홈즈 로고" />
<h3 class="logoTitle">세이프홈즈</h3>
</section>
<section class="navBtns">
<a href="" class="askBtn">문의하기</a>
<button class="startBtn">시작하기</button>
</section>
</nav>
<section class="banner">
<!-- <img src="./images/architecture-2256489_1920.png" alt="배너 이미지" class="bannerImg"/> -->
<label class="bannerTitles">
<h1 class="bannerMainText">
내 집 보증금, <br />
경매로 날아가면 어떻게 하지?
</h1>
<a src="" class="enterLink">지금 걱정 해결하기 ></a>
</label>
</section>
</header>
<!-- 바디 -->
<main>
<ul class="descriptionList">
<dl class="mainSection">
<dt class="groupTitle">세이프홈즈, <span class="highlightTitle">전/월세 보증금 지킴이 서비스입니다.</span></dt>
<dl class="mainGroup">
<section class="groupList01">
<img src="./images/sample01.png" />
<dt>등기부등본 등을 분석한 <br/> 보증금 지킴이 리포트</dt>
<dd>내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</dd>
</section>
<section class="groupList01">
<img src="./images/sample02.png"/>
<dt></dt>
<dd></dd>
</section>
<section class="groupList01">
<img src="./images/sample03.png"/>
<dt></dt>
<dd></dd>
</section>
</dl>
<a src="" class="goDetail">지금 바로 사용하기 ></a>
</dl>
<dl class="mainSection">
<dt class="groupTitle"><span class="highlightTitle">부동산을 찾았지만 망설이고 계시나요?</span></dt>
<dl class="mainGroup">
<section class="groupList01">
<img src="./images/sample01.png" />
<dt>등기부등본 등을 분석한 <br/> 보증금 지킴이 리포트</dt>
<dd>내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</dd>
</section>
<section class="groupList01">
<img src="./images/sample02.png"/>
<dt></dt>
<dd></dd>
</section>
<section class="groupList01">
<img src="./images/sample03.png"/>
<dt></dt>
<dd></dd>
</section>
</dl>
</dl>
<dl class="mainSection">
<dt class="groupTitle">세이프홈즈, <span class="highlightTitle">어떻게 내 보증금을 지킬 수 있을까요?</span></dt>
<dl class="mainGroup wrap">
<section class="groupList02">
<p>#1</p>
<dt>계약 전 주소 검색</dt>
<dd class="subDescription">내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</dd>
</section>
<section class="groupList02">
<p>#2</p>
<dt>보증금 지킴이 리포트 확인</dt>
<dd class="subDescription">내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</dd>
</section>
<section class="groupList02">
<p>#3</p>
<dt>체크리스트를 따라 계약 진행</dt>
<dd class="subDescription">내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</dd>
</section>
<section class="groupList02">
<p>#4</p>
<dt>실시간 등기 변동 알림</dt>
<dd class="subDescription">내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</dd>
</section>
<section class="groupList02">
<p>#5</p>
<dt>계약 기간 안심하고 살기</dt>
<dd class="subDescription">내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</dd>
</section>
</dl>
<a src="" class="goDetail">조금 더 알아보기 ></a>
</dl>
<dl class="mainSection second">
<section class="phone">
<img src="./images/Device.png" class="device"/>
<img src="./images/Mockup.png" class="mockup" />
</section>
<section class="nextPhone">
<dt class="nextPhoneTitle">
<p class="subTitle">리포트</p>
<p class="mainTitle">등기부 등본 등을 분석한</p>
<p class="mainTitle">보증금 지킴이 리포트</p>
</dt>
<dd>어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해할 수 있는 보증금 지킴이 리포트 제공</dd>
</section>
</dl>
<dl class="mainSection second">
<section class="nextPhone">
<dt class="nextPhoneTitle">
<p class="subTitle">리포트</p>
<p class="mainTitle">등기부 등본 등을 분석한</p>
<p class="mainTitle">보증금 지킴이 리포트</p>
</dt>
<dd>어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해할 수 있는 보증금 지킴이 리포트 제공</dd>
</section>
<section class="phone">
<img src="./images/Device.png" class="device"/>
<img src="./images/Mockup.png" class="mockup" />
</section>
</dl>
<dl class="mainSection second">
<section class="phone">
<img src="./images/Device.png" class="device"/>
<img src="./images/Mockup.png" class="mockup" />
</section>
<section class="nextPhone">
<dt class="nextPhoneTitle">
<p class="subTitle">리포트</p>
<p class="mainTitle">등기부 등본 등을 분석한</p>
<p class="mainTitle">보증금 지킴이 리포트</p>
</dt>
<dd>어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해할 수 있는 보증금 지킴이 리포트 제공</dd>
</section>
</dl>
<dl class="mainSection">
<dt class="groupTitle">세이프홈즈, <span class="highlightTitle">서비스 가격은 어떻게 될까요?</span></dt>
<dl class="mainGroup plan">
<section class="groupList01 plan">
<dt>
<h4>전/월세 보증금 지킴이 리포트</h4>
<p>해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.</p>
</dt>
<dd>
<h3>80,000 KRW</h3>
<p>1회 50,000원 / 1주 80,000원</p>
</dd>
<button>지금 바로 사용하기</button>
</section>
<section class="groupList01 plan">
<dt>
<h4>전/월세 보증금 지킴이 리포트</h4>
<p>해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.</p>
</dt>
<dd>
<h3>80,000 KRW</h3>
<p>1회 50,000원 / 1주 80,000원</p>
</dd>
<button>지금 바로 사용하기</button>
</section>
<section class="groupList01 plan">
<dt>
<h4>전/월세 보증금 지킴이 리포트</h4>
<p>해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.</p>
</dt>
<dd>
<h3>80,000 KRW</h3>
<p>1회 50,000원 / 1주 80,000원</p>
</dd>
<button>지금 바로 사용하기</button>
</section>
</dl>
<a src="" class="goDetail">원하시는 플랜이 없다면 문의주세요! ></a>
</dl>
<dl class="mainSection">
<dt class="groupTitle">세이프홈즈, <span class="highlightTitle">없었으면 큰일 날 뻔했어요!</span></dt>
<dl class="mainGroup">
<section class="groupList01 slideItem">
<dt class="userProfile">
<img src="./images/userImage01.png" alt="유저 이미지" class="userReviewImg"/>
<label>
<p>홍길동님</p>
<p>전/월세 보증금지킴이 리포트</p>
</label>
</dt>
<dd class="review">공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데, 세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합 대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수 있었습니다.</dd>
</section>
<section class="groupList01 slideItem">
<dt class="userProfile">
<img src="./images/userImage01.png" alt="유저 이미지" class="userReviewImg"/>
<label>
<p>홍길동님</p>
<p>전/월세 보증금지킴이 리포트</p>
</label>
</dt> <dd class="review">공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데, 세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합 대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수 있었습니다.</dd>
</section>
<section class="groupList01 slideItem">
<dt class="userProfile">
<img src="./images/userImage01.png" alt="유저 이미지" class="userReviewImg"/>
<label>
<p>홍길동님</p>
<p>전/월세 보증금지킴이 리포트</p>
</label>
</dt> <dd class="review">공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데, 세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합 대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수 있었습니다.</dd>
</section>
</dl>
<a src="" class="goDetail">후기 진위여부 파악하러 가기 ></a>
</dl>
</ul>
<section class="mainFooter">
<section>
<p>내 보증금, 안전하게 보호하려면</p>
<p>지금 시작하세요</p>
</section>
<button>지금 바로 시작하기</button>
</section>
</main>
<!-- 푸터 -->
<footer>
<p class="business">(주)세이프홈즈</p>
<small>
<p>사업자 등록 번호: 250-26-01109 | 대표: 정동훈</p>
<p>경기도 성남시 수정구 대왕판교로 815 기업지원허브 혁신기술존 260-3호</p>
<p>문의 메일: safehomes.kr@gmail.com</p>
</small>
</footer>
</body>
</html>css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
ul,
dl {
margin: 0;
padding: 0;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
}
button {
padding: 0;
cursor: pointer;
}
main {
display: flex;
flex-direction: column;
text-align: center;
}
nav {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 0.9rem 0;
}
dd {
margin-inline-start: 0;
}
.logo {
cursor: pointer;
width: 10em;
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
text-align: center;
color: #0e7159;
font-size: 1.2rem;
}
.logoTitle {
margin-top: 0.4rem;
}
.navBtns {
width: 20%;
display: flex;
justify-content: right;
align-items: center;
gap: 10%;
font-size: 0.75rem;
font-weight: 700;
}
.askBtn {
padding: 0.5rem;
text-decoration: none;
color: black;
}
.startBtn {
border: none;
border-radius: 7px;
color: white;
background-color: #0e7159;
padding: 0.5rem 1.5rem;
}
.banner {
height: 60vh;
display: flex;
justify-content: center;
color: white;
background: url(./images/architecture-2256489_1920.png);
object-fit: cover;
background-repeat: no-repeat center;
aspect-ratio: auto;
}
.bannerTitles {
/* width: 50%; */
display: flex;
top: 20rem;
text-align: center;
justify-content: center;
flex-direction: column;
z-index: 10;
}
.bannerMainText {
font-size: 3rem;
margin: 0;
}
/* 메인 */
.descriptionList {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.mainSection {
margin: 4em 0;
display: flex;
flex-direction: column;
align-items: center;
}
.groupTitle {
font-size: 3rem;
padding: 1rem 0;
margin: 3rem 0;
}
.highlightTitle {
font-weight: 700;
}
.mainGroup {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
gap: 4rem;
text-align: start;
}
.groupList01 {
display: flex;
flex-direction: column;
width: 18%;
gap: 1rem;
}
.groupList01.slideItem {
width: 30em;
background: #f2f3f4;
border-radius: 14px;
padding: 3rem;
}
.groupList02 {
width: 20.625rem;
display: flex;
flex-direction: column;
column-count: 2;
gap: 1rem;
}
.mainGroup.wrap {
width: 1200px;
/* width: fit-content; */
display: inline-flex;
padding: 2rem 0;
flex-flow: row wrap;
align-content: stretch;
justify-content: left;
overflow-wrap: break-word;
row-gap: 14px;
}
.subDescription {
line-height: 19px;
}
.goDetail {
display: block;
margin-top: 3rem;
}
/* 두번째 메인 설명 표시 */
.mainSection.second {
display: flex;
flex-direction: row;
align-items: initial;
justify-content: center;
gap: 15%;
}
.device {
position: absolute;
}
.mockup {
position: relative;
top: 14px;
left: 19px;
}
.nextPhone {
text-align: left;
}
.groupList01.plan {
background-color: #f2f3f4;
padding: 2rem;
border-radius: 14px;
}
.userProfile {
display: flex;
flex-direction: row;
gap: 1rem;
}
.userReviewImg {
aspect-ratio: 1/1;
object-fit: contain;
}
.review {
font-size: 1.125rem;
word-break: break-all;
color: #6b7684;
}
.mainFooter {
margin-top: 2rem;
background-color: #0e7159;
color: white;
padding: 13rem 0;
}
.mainFooter p {
margin: 0;
font-weight: 700;
font-size: 3.75rem;
}
.mainFooter button {
background-color: white;
color: #0e7159;
border-radius: 8px;
border: none;
padding: 1rem;
margin-top: 2rem;
}
footer {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem 18%;
}
.business {
font-weight: 700;
font-size: 1rem;
}
small {
color: #6b7684;
line-height: 1.5rem;
}
/* 반응형 1024px부터 */
@media screen and (max-width: 1024px) {
.mainGroup.wrap {
width: 100%;
}
.descriptionList {
padding: 0 2rem;
}
.mainSection.second {
flex-direction: column;
align-items: center;
column-gap: 10%;
gap: 5rem;
}
.nextPhone {
text-align: center;
}
.mainGroup.plan {
justify-content: left;
}
.groupList01.plan {
width: 30%;
}
}과제 결과
회고
반응형 퍼블리싱을 만드는 과제로 html만 작성하라고 하셨지만, 퍼블리싱 작업부터 css를 건드리지 않으면 구조화가 되지 않는 탓에 css 파일도 만들어서 시작했다. 랜딩페이지 하나임에도 불구하고 전체적으로 시맨틱 태그와 반응형을 고려하면서 구성하다보니 작업 시간이 더 오래걸린 것 같다. 하지만 SEO 최적화와 UI/UX 편의성 증진를 위해서라면 초기부터 제대로 사용하는 것이 좋기 때문에 이것도 꼼꼼하게 작업하려는 습관을 들이는 일이라고 생각한다. html까지는 잘 만든 것 같지만 가운데 정렬을 완벽하게 구현하지 못해서 아쉽기 때문에 다음날 멘토님에게 물어보려고 한다. 최종 팀 프로젝트 시에도 이러한 반응형 구조가 어려울 것이기 때문에 처음부터 제대로 알아가지 못한다면 후반에 가서도 끊임없이 오류를 마주할 것이기 때문에 지금부터 정리를 제대로 하기를 다짐한다.
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.