[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 9일차 - 세이프 홈즈 클론 코딩(HTML)

들어가기

2주차 첫 강의는 프론트엔드 개발의 입문 단계인 HTML 강의였다. 이미 알고 있는 내용이었지만, 초심으로 돌아가 하나하나 열심히 한다는 생각으로 수업에 임했다. 오늘은 2주차 첫 과제인 세이프홈즈 클론 코딩에 대해 블로깅 할 것이다.

세이프 홈즈 클론 코딩

페이지 구조

세이프홈즈의 랜딩페이지 구조는 다음과 같다.

HTML 코드

Nav

	...

    <nav>
      <img src="./asset/logo.png" alt="logo" />
      <a href="#">문의하기</a>
      <a href="#">시작하기</a>
    </nav>

	...

Header

	...

    <header>
      <img src="./asset/headerbackground.png" alt="background" />
      <p>내 집 보증금, 경매로 날아가면 어떻게 하지?</p>
      <a href="#">지금 걱정 해결하기</a>
    </header>

	...

Section1

	...

    <section>
      <article>
        <h2>세이프홈즈, 전/월세 보증금 지킴이 서비스입니다.</h2>
        <div>
          <img src="./asset/article1-1.png" alt="article" />
          <p>등기부등본 등을 분석한 보증금 지킴이 리포트</p>
          <p>
            내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
            계약전 보증금 지킴이 리포트 제공
          </p>
        </div>
        <div>
          <img src="./asset/article1-2.png" alt="article" />
          <p>보증금 보호를 위한 Check-List</p>
          <p>
            내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
            계약전 보증금 지킴이 리포트 제공
          </p>
        </div>
        <div>
          <img src="./asset/article1-3.png" alt="article" />
          <p>등기부등본 변동에 따른 실시간 알림 서비스</p>
          <p>
            내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
            계약전 보증금 지킴이 리포트 제공
          </p>
        </div>
        <a href="#">지금 바로 사용하기</a>
      </article>
      
      ...
      
    </section>

	...

Footer

	...

    <footer>
      <p>(주)세이프홈즈</p>
      <p>사업자 등록 번호 : 250-26-01109 | 대표 : 정동훈</p>
      <p>경기도 성남시 수정구 대왕판교로 815 기업지원허브 혁신기술존 260-3호</p>
      <p>문의 메일 : safehomes.kr@gmail.com</p>
    </footer>

	...

전체코드

진행상황

이번 과제의 목표는 HTML코드를 작성하는 것이었다. 과제 목표에 맞게 스타일링은 진행하지 않았다. 또한, class, id 역시 스타일링과 함께 작성할 예정이다.

마치며.

지금까지 수 많은 html코드를 작성해봤지만 시멘틱하게 작성해본것은 오랜만인거 같다. 머리로는 알지만 귀찮다는 이유로 div태그로 퉁쳐서 작성했었는데 시멘틱하게 작성하니 코드 읽기가 편해진거 같은 느낌이든다.

남은 기간도 목표를 향해 화이팅!!

---

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.