📝숙제 : html 클론코딩 해보기
(구) 세이프홈즈 랜딩페이지 figma보고 html로 클론코딩하기
🧩결과
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul{ list-style:none; } .notice { background: rgba(245, 245, 245, 0.6); backdrop-filter: blur(27.1828px); border: 1px solid ; } .lastP{ background: #0E7159; } </style> </head> <body> <header> <h1>세이프 홈즈</h1> <div>문의하기</div> <b>시작하기</b> </header> <hr> <!-- --------------------------------------------------- --> <main> <!-- 단락0 --> <h2>내 집 보증금, 경매로 날아가면 어떻게 하지?</h2> <p><a href="https://safehomes.kr/">지금 걱정 해결하기></a></p> <hr> <!-- 단락1 --> <div>세이프홈즈, 전/월세 보증금 지킴이 서비스입니다.</div> <ul> <li> <img src="./img/1-1.svg" alt="해변이미지"> <div>등기부등본 등을 분석한 보증금 지킴이 리포트</div> <div>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</div> </li> <li> <img src="./img/1-2.svg" alt=""> <div>보증금 보호를 위한 Check-List</div> <div>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</div> </li> <li> <img src="./img/1-3.svg" alt=""> <div>등기부등본 변동에 따른 실시간 알림 서비스</div> <div>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</div> </li> </ul> <div><a href="https://safehomes.kr/">지금 바로 사용하기> </a></div> <hr> <!-- 단락2 --> <div>부동산을 찾았지만 망설이고 계시나요?</div> <ul> <li> <img src="./img/2-1.svg" alt="해변이미지"> <div>부동산 중개 업자는 항상 괜찮다고 한다. 과연 그럴까?</div> <div>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</div> </li> <li> <img src="./img/2-2.svg" alt=""> <div>절차가 이것저것 너무 많은데 빠뜨린 절차가 있지 않을까?</div> <div>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</div> </li> <li> <img src="./img/2-3.svg" alt=""> <div>평생 힘들게 모은 보증금을 나중에 돌려 받지 못 하면 ..</div> <div>내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공</div> </li> </ul> <hr> <!-- 단락3 --> <ul> <li> <div>리포트</div> <div>등기부 등본 등을 분석한 보증금 지킴이 리포트</div> <div>어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해 할 수 있는 보증금 지킴이 리포트 제공</div> </li> <li> <div>절차</div> <div>보증금 보호를 위한, 체크리스트</div> <div>전세 사기 당하지 않기 위해 반드시 확인해야 할 체크리스트를 제공합니다.</div> </li> <li> <div>알림</div> <div>등기부 등본 변동에 따른 실시간 알리미</div> <div>어떤 말도 듣지 못 했는데 집 주인이 바뀌었다고? 세이프홈즈가 즉각 알려드립니다.</div> <div class="notice"> <div>메신저 아이콘</div> <div>등기부 등본이 변동되었어요! <br>방금 전 등기부 등본이 변경되었는데, 세이프홈즈와 함께 같이 확인해보시겠어요?</div> </div> </li> <hr> <!-- 단락4 --> <h3>세이프홈즈, 어떻게 내 보증금을 지킬 수 있을까요?</h3> <table> <tr> <td> <strong>#1<br>계약 전 주소 검색</strong> <br> 내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공 </td> <td> <strong>#2<br>보증금 지킴이 리포트 확인</strong> <br> 내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공 </td> <td> <strong>#3<br>체크리스트를 따라 계약 진행</strong> <br> 내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공 </td> </tr> <tr> <td> <strong>#4</strong> <br><b>실시간 등기 변동 알림</b><br> 내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공 </td> <td> <strong>#5</strong> <br><b>계약 기간 안심하고 살기</b><br> 내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게 계약전 보증금 지킴이 리포트 제공 </td> </tr> </table> <hr> <!-- 단락5 --> <div>세이프홈즈, 서비스 가격은 어떻게 될까요?</div> <ul> <li class="notice"> <div>전/월세 보증금 지킴이 리포트</div> <div>해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.</div> <div>80,000 KRW</div> <div>1회 50,000원 / 1주 80,000원</div> <div>지금 바로 사용하기</div> </li> <li class="notice"> <div>등기부 등본 변동 알림 서비스</div> <div>해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.</div> <div>50,000 KRW</div> <div>1년 50,000원 / 2년 80,000원</div> <div>지금 바로 사용하기</div> </li> <li class="notice"> <div>올 패키지 (지킴이 리포트 + 알림)</div> <div>해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.</div> <div>100,000 KRW</div> <div>1주 + 2년 100,000원</div> <div>지금 바로 사용하기</div> </li> </ul> <div><a href="https://safehomes.kr/">원하시는 플랜이 없다면 문의주세요!> </a></div> <hr> <!-- 단락6 --> <div>세이프홈즈, 없었으면 큰일 날 뻔했어요!</div> <ul> <li class="notice"> <div>홍길동</div> <div>전/월세 보증금 지킴이 리포트</div> <div>공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데, 세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합 대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수 있었습니다.</div> </li> <li class="notice"> <div>홍길동</div> <div>전/월세 보증금 지킴이 리포트</div> <div>공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데, 세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가 너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험 적합 대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들 것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서 계약할 수 있었습니다.</div> </li> <li class="notice"> <div>홍길동</div> <div>등기부 등본 변동 알림 서비스</div> <div>첫 부동산 계약이라 확인해야할 것이 중구난방이어서 불안했어요. 인터넷과 공인중개사에게 확인을 했지만 그래도 불안했어요. 내 전재산인데... 그런데 세이프홈즈에는 확인해야 할 것이 쉽게 나와있어서 준비물 준비하듯이 착착 할 수 있었습니다. 부동산 잘 아는 친구가 생긴 것 같아 좋았습니다.</div> </li> </ul> <div><a href="https://safehomes.kr/">후기 진위여부 파악하러 가기> </a></div> <hr> <!-- 단락 마지막 --> <div class="lastP"> <div>내 보증금, 안전하게 보호하려면 지금 시작하세요</div> <div><a href="https://safehomes.kr/">지금 바로 시작하기</a></div> </div> <hr> </main> <!-- --------------------------------------------------- --> <footer> <div>(주)세이프홈즈</div> <div>사업자 등록 번호 : 250-26-01109 | 대표 : 정동훈 경기도 성남시 수정구 대왕판교로 815 기업지원허브 혁신기술존 260-3호 문의 메일 : safehomes.kr@gmail.com</div> </div> </footer> </body> </html>내가 한 css를 뺀 html 모습
📍숙제를 하면서 느낀 점
시작하기 전에는 무에서 유를 창조해내야 하는 느낌이라 막막했다. 하지만 월요일에 배운 것들을 10개 이상 적용해보려고 노력하면서 하니 2시간 정도만에 끝낼 수 있었다.
지금은 css가 없어서 허전하지만 html, css 이 두 가지 만으로도 그럴듯한 홈페이지를 만들 수 있구나 생각하였고 그와 동시에 Bootstrap이 얼마나 도움을 주는 건지도 새삼 깨닫게 되었다.🤣
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#IT개발캠프 #React #개발자부트캠프 #리액트 #리액트캠프 #부트캠프 #스나이퍼팩토리 #웅진씽크빅 #유데미 #인사이드아웃 #프로젝트캠프 #프로젝트캠프후기
느리더라도 꾸준히 확실하게.