- 일시 : 23.06.13 화요일
🌱과제 리뷰
수업 시간에 배운 html태그들을 이용하여 이미 구현이 완료된 페이지를 보고 뼈대를 잡는 작업을 했다. 사실 어떤 태그를 이용하든 나중에 css나 js를 이용하면 내가 원하는 모양이나 위치로 변경할 수 있지만 그렇게 한다면 나만 알아볼 수 있는 (혹은 나중엔 나도 알아볼 수 없는) 나쁜 코드가 될 수 있다. 좋은 코드란 가독성이 좋아야 하고 그 누가 보더라도 이해하기 쉬워야 한다. 따라서 이번 과제에서 css나 js적용이 안 된 상태에서도 최대한 가독성 있는 뼈대를 만들고자 했다. 스스로 평가해보자면, 화면 중간중간에 인라인요소 때문에 가끔 가독성을 해치는 경우를 제외하고는 대체로 텍스트만 보고도 구분이 잘 가고 어떤 내용을 표현하고자 했는지 알 수 있는 것 같다.
하지만 아직 주요 태그들을 class로 구분해 주지 않아 코드만 보면 감이 안오지만 css를 진행하면서 같은 그룹끼리 묶어 더 가독성을 높힐 예정이다.
🌱과제 내용
- 아래 사이트를 html만을 이용해 나타내기
작성한 html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>세이프홈즈</title>
</head>
<body>
<header>
<h1>세이프홈즈</h1>
<nav>
<button>문의하기</button>
<button>시작하기</button>
</nav>
</header>
<main>
<section>
내 집 보증금, 경매로 날아가면 어떻게 하지?
<button>지금 걱정 해결하기 ></button>
<img src="#" alt="main_banner" />
</section>
<!-- 아래부터 홍보 -->
<section>
<h3>세이프홈즈, 전/월세 보증금 지킴이 서비스입니다.</h3>
<table border="black">
<tr>
<td><img src="#" alt="사진" /></td>
<td><img src="#" alt="사진" /></td>
<td><img src="#" alt="사진" /></td>
</tr>
<tr>
<td>등기부등본 등을 분석한 보증금 지킴이 리포트</td>
<td>보증금 보호를 위한 Check-List</td>
<td>등기부등본 변동에 따른 실시간 알림 서비스</td>
</tr>
<tr>
<td>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</td>
<td>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</td>
<td>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</td>
</tr>
</table>
<button>지금 바로 사용하기 ></button>
</section>
<section>
<h3>부동산을 찾았지만 망설이고 계시나요?</h3>
<table border="black">
<tr>
<td><img src="#" alt="사진" /></td>
<td><img src="#" alt="사진" /></td>
<td><img src="#" alt="사진" /></td>
</tr>
<tr>
<td>부동산 중개 업자는 항상 괜찮다고 한다. 과연 그럴까?</td>
<td>절차가 이것저것 너무 많은데 빠뜨린 절차가 있지 않을까?</td>
<td>평생 힘들게 모은 보증금을 나중에 돌려 받지 못 하면...</td>
</tr>
<tr>
<td>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</td>
<td>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</td>
<td>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</td>
</tr>
</table>
</section>
<section>
<h3>세이프홈즈, 어떻게 내 보증금을 지킬 수 있을까요?</h3>
<ol>
<li>
<p>계약 전 주소 검색</p>
<p>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</li>
<li>
<p>보증금 지킴이 리포트 확인</p>
<p>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</li>
<li>
<p>체크리스트를 따라 계약 진행</p>
<p>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</li>
<li>
<p>실시간 등기 변동 알림</p>
<p>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</li>
<li>
<p>계약 기간 안심하고 살기</p>
<p>
내 보증금을 어떻게 지킬 수 있을까?라는 단계를 거쳐서 여러분들에게
계약전 보증금 지킴이 리포트 제공
</p>
</li>
</ol>
<button>조금 더 알아보기 ></button>
</section>
<!-- 아래부터 핸드폰 목업 -->
<section>
<img src="#" alt="핸드폰목업.png" />
<div>
<span>리포트</span>
<h3>등기부 등본 등을 분석한 보증금 지킴이 리포트</h3>
<p>
어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해할 수 있는 보증금
지킴이 리포트 제공
</p>
</div>
</section>
<section>
<img src="#" alt="핸드폰목업.png" />
<div>
<span>절차</span>
<h3>보증금 보호를 위한, 체크리스트</h3>
<p>
전세 사기 당하지 않기 위해 반드시 확인해야 할 체크리스트를
제공합니다.
</p>
</div>
</section>
<section>
<img src="#" alt="핸드폰목업.png" />
<div>
<span>알림</span>
<h3>등기부 등본 변동에 따른 실시간 알리미</h3>
<p>
어떤 말도 듣지 못 했는데 집 주인이 바뀌었다고? 세이프홈즈가 즉각
알려드립니다.
</p>
</div>
<img src="#" alt="문자이미지" />
</section>
<!-- 아래부터 가격표 -->
<section>
<h3>세이프홈즈, 서비스 가격은 어떻게 될까요?</h3>
<div>
<div>
<p class="price_title">전/월세 보증금 지킴이 리포트</p>
<p class="price_content">
해당 플랜은 여러분들을 위해 리포트를 제공합니다. 실제로 이
리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.
</p>
<p class="price_number">80,000 KRW</p>
<p class="price_times">1회 50,000원 / 1주 80,000원</p>
<button>지금 바로 사용하기</button>
</div>
<div>
<p class="price_title">등기부 등본 변동 알림 서비스</p>
<p class="price_content">
해당 플랜은 여러분들을 위해 리포트를 제공합니다. 실제로 이
리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.
</p>
<p class="price_number">50,000 KRW</p>
<p class="price_times">1년 50,000원 / 2년 80,000원</p>
<button>지금 바로 사용하기</button>
</div>
<div>
<p class="price_title">올 패키지 (지킴이 리포트 + 알림)</p>
<p class="price_content">
해당 플랜은 여러분들을 위해 리포트를 제공합니다. 실제로 이
리포트는 언제 어디서든지 사용할 수 있고 그렇습니다.
</p>
<p class="price_number">100,000 KRW</p>
<p class="price_times">1주 + 2년 100,000원</p>
<button>지금 바로 사용하기</button>
</div>
</div>
<button>원하시는 플랜이 없다면 문의주세요!</button>
</section>
<!-- 아래부터 후기 -->
<section>
<h3>세이프홈즈, 없었으면 큰일 날 뻔했어요!</h3>
<ul>
<li>
<div>
<img src="#" alt="프로필사진" />
<p>홍길동님</p>
<p>전/월세 보증금 지킴이 리포트</p>
<p>
공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데,
세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가
너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험
적합 대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들
것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서
계약할 수 있었습니다.
</p>
</div>
</li>
<li>
<div>
<img src="#" alt="프로필사진" />
<p>홍길동님</p>
<p>전/월세 보증금 지킴이 리포트</p>
<p>
공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데,
세이프홈즈를 통해서 리포트를 받아보니 아니나 다를까 위험요소가
너무 큰 매물이었습니다. 근저당이 너무 높게 잡혀있었고, 보증보험
적합 대상도 아니라 경매로 넘어가게 되면 보증금을 돌려받기 힘들
것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아서
계약할 수 있었습니다.
</p>
</div>
</li>
<li>
<div>
<img src="#" alt="프로필사진" />
<p>홍길동님</p>
<p>등기부 등본 변동 알림 서비스</p>
<p>
첫 부동산 계약이라 확인해야할 것이 중구난방이어서 불안했어요.
인터넷과 공인중개사에게 확인을 했지만 그래도 불안했어요. 내
전재산인데... 그런데 세이프홈즈에는 확인해야 할 것이 쉽게
나와있어서 준비물 준비하듯이 착착 할 수 있었습니다. 부동산 잘
아는 친구가 생긴 것 같아 좋았습니다.
</p>
</div>
</li>
</ul>
<button>후기 진위여부 파악하러 가기 ></button>
</section>
<!-- 홍보 -->
<section>
<h3>내 보증금, 안전하게 보호하려면 지금 시작하세요</h3>
<button>지금 바로 시작하기 ></button>
</section>
</main>
<footer>
<p>(주)세이프홈즈</p>
<ul>
<li>사업자 등록 번호 : 250-26-01109 | 대표 : 정동훈</li>
<li>
경기도 성남시 수정구 대왕판교로 815 기업지원허브 혁신기술존 260-3호
</li>
<li>문의 메일 : safehomes.kr@gmail.com</li>
</ul>
</footer>
</body>
</html>
렌더링 화면
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
쉬운게 좋은 FE개발자😺