[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프(프론트엔드) 4회차 과제 - 구 세이프 홈즈 랜딩페이지 퍼블리싱(HTML)

출처 : [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프

🎯 과제 요구사항

(구)세이프홈즈 랜딩페이지 퍼블리싱(HTML) 하기

 

 

💻 수행 과정

1. 먼저 랜딩페이지의 구조를 살펴보고 다음과 같이 시맨틱 태그로 각 부분들을 나눠보았다.

크게 맨 위 header와 5개의 section, 맨 아래에 footer로 구분할 수 있으며 section안에는 여러개의 article들이 있다고 볼 수 있겠다.

 

 

2. 이후 emmet 문법을 사용하여 빠르게 elements를 생성했다.

emmet 문법을 사용해 입력하면 필요한 elements를 한 번에 생성할 수 있어 시간 단축이 된다.

header+section+section>article*3^section>article*3^section4>article*2^section+footer

  <header></header>

  <section></section>

  <section>

    <article></article>

    <article></article>

    <article></article>

  </section>

  <section>

    <article></article>

    <article></article>

    <article></article>

  </section>

  <section4>

    <article></article>

    <article></article>

  </section4>

  <section></section>

  <footer></footer>

 

 

3. 세부적인 elements와 내용들을 추가하여 완성했다.

https://github.com/udemy-team18/230612_practice/blob/yueun/0613/safeHomes.html

GitHub - udemy-team18/230612_practice: 충돌 테스트

 

 

🔎 느낀 점

처음 프론트엔드 개발이라는 분야에 대해 알게되고 html을 처음 공부할 때 드림코딩의 웹사이트 분석 꿀팁 영상을 봤었다.

이 영상은 웹페이지 클론코딩을 할 때 많은 도움이 되었다.

오늘도 과제를 하면서 이 영상이 생각났고 페이지의 부분 부분을 박스로 나누어서 생각하는 박스화(?)방법을 통해 쉽게 구조화할 수 있었다.

이후 emmet 문법을 사용하여 많은 elements를 한 번에 작성했다.

클론코딩을 한 지가 너무 오래돼서 emmet 문법을 많이 까먹고 있었는데 오늘 과제를 하면서 다시 한번 복습할 수 있었다.

 

 

📋 참고 자료

https://www.youtube.com/watch?v=i0FN-OwJ7QI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=5 

 

https://velog.io/@aepee/Emmet-%EC%82%AC%EC%9A%A9%EB%B2%95

Emmet 사용법

 

 

 

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