💻 (구)세이프홈즈 랜딩페이지 반응형 퍼블리싱
필수 과제 : (구)세이프홈즈 랜딩페이지 반응형 퍼블리싱 - html만 작성
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SafeHomes</title>
<style>
.phone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 334.82px;
height: 678.98px;
border-radius: 40px;
box-shadow: rgba(0, 0, 0, 0.5) 6px 2px 16px 0px;
}
.phone .phone__head {
position: absolute;
top: 10px;
width: 180px;
height: 30px;
border-radius: 20px;
background-color: #fff;
}
.phone .phone__screen {
width: 296px;
height: 642px;
border-radius: 40px;
background-color: rgba(196, 209, 215, 0.38);
}
</style>
</head>
<body>
<header>
<div>
<img
src="https://drive.google.com/uc?id=1CTCbsgTJDvVXPiHCO1_jJ5W4x_0tdpRs"
alt="logo"
width="30px"
/>
<h1>세이프홈즈</h1>
</div>
<ul>
<li>문의하기</li>
<li>시작하기</li>
</ul>
</header>
<main>
<section
style="
background-image: url(https://drive.google.com/uc?id=1aOa96Q5Xg0SJj7__DEPNLI-X67YdfO9k);
"
>
<h2>내 집 보증금,<br />경매로 날아가면 어떻게 하지?</h2>
<a href="#">지금 걱정 해결하기 〉</a>
</section>
<section>
<h3>
세이프홈즈, <strong>전/월세 보증금 지킴이 서비스입니다.</strong>
</h3>
<div>
<article>
<img
src="https://drive.google.com/uc?id=1hQjSTOne9O19o0Q9-lKbchDZ-vt6Pveb"
alt="image"
/>
<h4>등기부등본 등을 분석한<br />보증금 지킴이 리포트</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
<article>
<img
src="https://drive.google.com/uc?id=1YNC9hLrl8sDPBEMoNWrTsuPcsbW13oW4"
alt="image"
/>
<h4>보증금 보호를 위한<br />Check-List</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
<article>
<img
src="https://drive.google.com/uc?id=18uCv8mkO0XGQPnJC7Qy3uRsacYWaGFWn"
alt="image"
/>
<h4>등기부등본 변동에<br />따른 실시간 알림 서비스</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
</div>
<a href="#">지금 걱정 해결하기 〉</a>
</section>
<section>
<h3>
<strong>부동산을 찾았지만 망설이고 계시나요?</strong>
</h3>
<div>
<article>
<img
src="https://drive.google.com/uc?id=1g7OXVmE-B-l1d2rR1NaVonOhXMb8a2uk"
alt="image"
/>
<h4>
부동산 중개 업자는 항상 괜찮다고<br />
한다. 과연 그럴까?
</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
<article>
<img
src="https://drive.google.com/uc?id=16S2LB6-fwOxI_qbtURu0tu4FbKsrF3nP"
alt="image"
/>
<h4>
절차가 이것저것 너무 많은데 빠뜨<br />린 절차가 있지 않을까?
</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
<article>
<img
src="https://drive.google.com/uc?id=1-ysD9D1iXTej1frK5CWaPCvmfSzyk2rc"
alt="image"
/>
<h4>
평생 힘들게 모은 보증금을 나중에<br />
돌려 받지 못 하면 ..
</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
</div>
</section>
<section>
<h3>
세이프홈즈, <strong>어떻게 내 보증금을 지킬 수 있을까요?</strong>
</h3>
<div>
<article>
<div>#1</div>
<h4>계약 전 주소 검색</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
<article>
<div>#2</div>
<h4>보증금 지킴이 리포트 확인</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
<article>
<div>#3</div>
<h4>체크리스트를 따라 계약 진행</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
<article>
<div>#4</div>
<h4>실시간 등기 변동 알림</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
<article>
<div>#5</div>
<h4>계약 기간 안심하고 살기</h4>
<p>
내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</article>
</div>
<a href="#">조금 더 알아보기 〉</a>
</section>
<section>
<article>
<div>
<div class="phone">
<div class="phone__head"></div>
<div class="phone__screen"></div>
</div>
</div>
<div>
<div>리포트</div>
<h4>등기부 등본 등을 분석한<br />보증금 지킴이 리포트</h4>
<p>
어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해 할 수 있는 보증금
지킴이 리포트 제공
</p>
</div>
</article>
<article>
<div>
<div>절차</div>
<h4>보증금 보호를 위한,<br />체크리스트</h4>
<p>
전세 사기 당하지 않기 위해 반드시 확인해야 할 체크리스트를
제공합니다.
</p>
</div>
<div>
<div class="phone">
<div class="phone__head"></div>
<div class="phone__screen"></div>
</div>
</div>
</article>
<article>
<div>
<div class="phone">
<div class="phone__head"></div>
<div class="phone__screen"></div>
</div>
</div>
<div>
<div>리포트</div>
<h4>등기부 등본 등을 분석한<br />보증금 지킴이 리포트</h4>
<p>
어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해 할 수 있는 보증금
지킴이 리포트 제공
</p>
<ul>
<li>
<div>
<div>
<img
src="https://drive.google.com/uc?id=11dv6wiveSL6qolcYw2DOFI_L2RJgzZB2"
alt="icon"
/>
<span>세이프홈즈</span>
</div>
<div>now</div>
</div>
<div>등기부 등본이 변동되었어요!</div>
<p>
방금 전 등기부 등본이 변경되었는데, 세이프홈즈와 함께 같이
확인해보시겠어요?
</p>
</li>
<li>
<div>
<div>
<img
src="https://drive.google.com/uc?id=11dv6wiveSL6qolcYw2DOFI_L2RJgzZB2"
alt="icon"
/>
<span>세이프홈즈</span>
</div>
<div>now</div>
</div>
<div>헉! 방금 무언가 변경되었는데요?</div>
<p>
세이프홈즈가 방금 등기부 등본이 변경된 사실을 알아냈어요! 어떤
부분이 바뀌었는지 간단하게 정리해서 알려드릴게요.
</p>
</li>
</ul>
</div>
</article>
</section>
<section>
<h3>세이프홈즈, <strong>서비스 가격은 어떻게 될까요?</strong></h3>
<div>
<article>
<h4>
전/월세 보증금<br />
지킴이 리포트
</h4>
<p>
해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는
언제 어디서든지 사용할 수 있고 그렇습니다.
</p>
<div>
<span>80,000 KRW</span>
<span>1회 50,000원 / 1주 80,000원</span>
</div>
<div>지금 바로 사용하기</div>
</article>
<article>
<h4>
등기부 등본 변동<br />
알림 서비스
</h4>
<p>
해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는
언제 어디서든지 사용할 수 있고 그렇습니다.
</p>
<div>
<span>50,000 KRW</span>
<span>1년 50,000원 / 2년 80,000원</span>
</div>
<div>지금 바로 사용하기</div>
</article>
<article>
<h4>
올 패키지<br />
(지킴이 리포트 + 알림)
</h4>
<p>
해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는
언제 어디서든지 사용할 수 있고 그렇습니다.
</p>
<div>
<span>100,000 KRW</span>
<span>1주 + 2년 100,000원</span>
</div>
<div>지금 바로 사용하기</div>
</article>
</div>
<a href="#">원하시는 플랜이 없다면 문의주세요! 〉</a>
</section>
<section>
<h3>세이프홈즈, <strong>없었으면 큰일 날 뻔했어요!</strong></h3>
<div>
<article>
<div>
<img
src="https://drive.google.com/uc?id=1LegQ9nuRJWFMmA-NxTj2tEhmoqNbWMYj"
alt="avatar"
/>
<div>
<span>홍길동님</span>
<span>전/월세 보증금 지킴이 리포트</span>
</div>
</div>
<p>
공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데,
세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가
너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험
적합 대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것
같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수
있었습니다.
</p>
</article>
<article>
<div>
<img
src="https://drive.google.com/uc?id=1LegQ9nuRJWFMmA-NxTj2tEhmoqNbWMYj"
alt="avatar"
/>
<div>
<span>홍길동님</span>
<span>전/월세 보증금 지킴이 리포트</span>
</div>
</div>
<p>
공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데,
세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가
너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험
적합 대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것
같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수
있었습니다.
</p>
</article>
<article>
<div>
<img
src="https://drive.google.com/uc?id=1NiULxAS-Bw6XkEaffU4pj7MeHACxbpBR"
alt="avatar"
/>
<div>
<span>홍길동님</span>
<span>등기부 등본 변동 알림 서비스</span>
</div>
</div>
<p>
첫 부동산 계약이라 확인해야할 것이 중구난방이어서 불안했어요.
인터넷과 공인중개사에게 확인을 했지만 그래도 불안했어요. 내
전재산인데... 그런데 세이프홈즈에는 확인해야 할 것이 쉽게
나와있어서 준비물 준비하듯이 착착 할 수 있었습니다. 부동산 잘 아는
친구가 생긴 것 같아 좋았습니다.
</p>
</article>
</div>
<a href="#">후기 진위여부 파악하러 가기 〉</a>
</section>
<section>
<h2>
내 보증금, 안전하게 보호하려면<br />
지금 시작하세요
</h2>
<div>지금 바로 시작하기</div>
</section>
</main>
<footer>
<div>(주)세이프홈즈</div>
<ul>
<li>사업자 등록 번호 : 250-26-01109 | 대표 : 정동훈</li>
<li>
경기도 성남시 수정구 대왕판교로 815 기업지원허브 혁신기술존 260-3호
</li>
<li>문의 메일 : safehomes.kr@gmail.com</li>
</ul>
</footer>
</body>
</html>이번 과제는 (구)세이프홈즈 랜딩페이지 반응형 퍼블리싱하는 과제입니다.
강의를 통해 배운 웹 표준을 준수하기 위해 시멘틱 태그 사용에 중점을 두어 작성하였습니다.
🎈 내 프로필 만들기
선택 과제 : 내 프로필 만들기
- introduce.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Introduce</title>
</head>
<body>
<header>
<div></div>
<div>
<img src="" alt="profile" />
<h1>강경서</h1>
<p>내 자신을 소개하는 글, 앞으로의 목표 및 지향하는 바를 작성</p>
</div>
</header>
<main>
<section>
<div>
<h2>프로필</h2>
<ul>
<li>이름: 강경서</li>
<li>나이: 30(1994년생)</li>
<li>MBTI: INFJ</li>
<li>주소: 고양시 일산동구 백석동</li>
</ul>
<div>
<span>전화</span>
<span>010-6415-5062</span>
</div>
<div>
<span>메일</span>
<span>kks_big@naver.com</span>
</div>
</div>
<!--디자인을 위한 박스 --->
<div></div>
<!--디자인을 위한 박스 끝--->
</section>
<section>
<h3>기술 블로그</h3>
<article>
<img src="" alt="벨로그" />
<div>
<span>Vlog</span>
<p>블로그 관련 내용을 작성합니다.</p>
</div>
</article>
<article>
<img src="" alt="깃허브" />
<div>
<span>Github</span>
<p>블로그 관련 내용을 작성합니다.</p>
</div>
</article>
<article>
<img src="" alt="노션" />
<div>
<span>Notion</span>
<p>블로그 관련 내용을 작성합니다.</p>
</div>
</article>
</section>
<section>
<h3>SKill</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>SCSS</li>
<li>REACT</li>
<li>Node</li>
</ul>
</section>
<section>
<h3>포트폴리오</h3>
<article>
<img src="" alt="image" />
<div>
<span>프로젝트 명</span>
<p>프로젝트에 관한 간략한 설명을 적습니다.</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>SCSS</li>
<li>REACT</li>
<li>Node</li>
</ul>
</div>
</article>
<article>
<img src="" alt="image" />
<div>
<span>프로젝트 명</span>
<p>프로젝트에 관한 간략한 설명을 적습니다.</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>SCSS</li>
<li>REACT</li>
<li>Node</li>
</ul>
</div>
</article>
</section>
<section>
<div>
<img src="" alt="photo" />
<img src="" alt="photo" />
<img src="" alt="photo" />
<img src="" alt="photo" />
<img src="" alt="photo" />
</div>
</section>
</main>
<footer>
<h1>원하는 목표에 관한 글</h1>
</footer>
</body>
</html>위의 퍼블리싱 과제와 같이 시멘틱 태그 사용에 가장 큰 중점을 가지고 작성하였습니다.
📝 후기
평소 HTMl을 작성할때에는 시멘틱 태그를 크게 신경쓰지 않고 작성했지만, 이번 기회에 시멘틱 태그의 장점에 대해 알았습니다. 앞으로는 시멘틱 태그를 항상 신경쓰면서 HTMl을 작성하기를 마음 먹었습니다.
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
기록하고 배우고 시도하고