유데미x스나이퍼팩토리 10주 완성 프로젝트 캠프 8일차

2주차 수업의 첫째날이다. 이번주는 세이프홈즈 대표님의 html, css, javascript 교육이 예정되어있다. 오늘은 웹표준, html의 개념을 팀과제를 수행하며 익히는 시간을 가졌다. 그리고 우리에게 주어진 빡센 과제,,,세이프홈즈 초기ver. html 클론하기.

피그마로 세이프 홈즈의 초기 버전의 랜딩페이지를 공유해주셨고 강의를 바탕으로 html을 구성하는 것이 과제로 주어졌다. 강의에선 아직 css 파트가 진행되지 않아 우선 html만 구성하면 된다.

나는 이 페이지를 header, section, footer 태그로 크게 나누고 진행해보았다.

우선 로고와 버튼 2개가 있는 header 부분의 html 코드이다.

헤더

<header>
  <a href="" class="logo" title="세이프홈즈 메인페이지 이동">
    <img src="/class1/image/Shape.png" />
    <span>세이프홈즈</span>
  </a>
  <a href="" class="qnaBtn">문의하기</a>
  <a href="" class="startBtn">시작하기</a>
</header>
<section class="banner">
  <h1>내 집 보증금,</h1>
  <h1>경매로 날아가면 어떻게 하지?</h1>
  <a href="">지금 걱정 해결하기 ></a>
</section>

로고가 위치한 페이지 상단의 헤더 부분을 header 태그로, 배너가 들어가는 부분은 section 태그로 구성하였다. 그리고 배너 안의 문구는 중요한 제목을 나타내는 h1 태그, 링크로 연결되는 텍스트는 a 태그로 구성하였다.

다음은 서비스를 설명하는 단락이다.

서비스설명과 이미지

<section class="aboutSafeHomesService">
  <h1>세이프홈즈, 전/월세 보증금 지킴이 서비스 입니다.</h1>
  <div>
    <article>
      <img src="/class1/image/section1/report.png" />
      <h3>등기부등본 등을 분석한 보증금 지킴이 리포트</h3>
      <p>
        내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
        계약전 보증금 지킴이 리포트 제공
      </p>
    </article>
    <article>
      <img src="/class1/image/section1/checkList.png" />
      <h3>보증금 보호를 위한 Check-List</h3>
      <p>
        내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
        계약전 보증금 지킴이 리포트 제공
      </p>
    </article>
    <article>
      <img src="/class1/image/section1/alarm.png" />

      <h3>등기부등본 변동에 따른 실시간 알림 서비스</h3>
      <p>
        내 보증금을 어떻게 지킬 수 있을까? 라는 단계를 거쳐서 여러분들에게
        계약전 보증금 지킴이 리포트 제공
      </p>
    </article>
  </div>
  <a href="">지금 바로 사용하기 ></a>
</section>
<!-- 아래 섹션 반복으로 중략 -->

각 단락은 section 태그로 구분하였고, 그 안의 대표 제목은 h1 태그를 적용했다. 그리고 세부 내용들이 독립적이라 article 태그로 묶어주었다. 내부의 제목들은 h3 태그를 주고 내용들은 p태그를 이용하였다.

다음은 실제 서비스 UI를 보여주며 설명하는 단락이다.

UI와 설명

<section class="report">
  <img src="" />
  <div>
    <p>리포트</p>
    <h1>등기부 등본 등을 분석한 보증금 지킴이 리포트</h1>
    <p>
      어려운 부동산 법률 용어가 아닌, 누구나 쉽게 이해 할 수 있는 보증금 지킴이
      리포트 제공
    </p>
  </div>
</section>

이미지를 담는 img태그, 단락을 대표할 수 있는 제목 h1 태그, 내용을 설명하는 p태그를 사용하였다.

다음은 서비스의 가격을 안내하는 단락이다.

가격

<section>
  <section>
    <h1>세이프홈즈, 서비스 가격은 어떻게 될까요?</h1>
    <article>
      <h3>전/월세 보증금 지킴이 리포트</h3>
      <p>
        해당 플랜은 여러분을 위해 리포트를 제공합니다. 실제로 이 리포트는 언제
        어디서든지 사용할 수 있고 그렇습니다.
      </p>
      <p class="price">80,000 KRW</p>
      <p>1회 50,000원 / 1주 80,000원</p>
      <a href="">지금 바로 사용하기</a>
    </article>
    <!-- 중복 -->
    <a href="">원하시는 플랜이 없다면 문의주세요! ></a>
  </section>
</section>

단락의 주된 제목을 나타내는 h1태그, 서비스 플랜마다 article 태그를 사용하여 독립적으로 묶었고 p태그에 내용을 담았다.

마지막으로 서비스의 끝단이다.

푸터

<section>
  <h1>내 보증금, 안전하게 보호하려면 지금 시작하세요</h1>
  <a href="">지금 바로 시작하기</a>
</section>
<!--  -->
<footer>
  <p>(주)세이프홈즈</p>
  <p>사업자 등록 번호 : 250-26-01109 | 대표 : 정동훈</p>
  <p>경기도 성남시 수정구 대왕판교로 815 기업지원허브 혁신기술존 260-3호</p>
  <p>문의 메일 : safehomes.kr@gmail.com</p>
</footer>

마무리로 h1 태그에 제목을, a 태그에 링크정보를, footer 태그에 사업자 및 기타정보를 담았다.

오늘은 페이지의 기본 뼈대가 되는 html만 구성해봤다. 돌이켜 생각해보면 나는 참 시멘틱 태그에 대해 부족했던 것 같다. 앞으로 css in js 문법을 사용하더라도 태그 네이밍에만 신경쓰는 것이 아니라 시멘틱 태그를 쓰려고 많이 시도해야할 것 같다.🧐

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다. #프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프

유데미x스나이퍼팩토리 10주 완성 프로젝트 캠프 8일차 - html

세이프홈즈 클론코딩