[🥸HTML/CSS]📝랜딩페이지 시맨틱 구조 분석 및 설계➰(반응형 웹페이지)

📍 개요

◾ 프론트엔드 화면을 구축하기 위해 랜딩페이지의 구조를 분석하고 코드를 작성해보는 시간을 가졌습니다.
◾ 헤더와 메인의 첫 번째 <section>을 구현하는 작업을 진행하였습니다.

---

랜딩페이지는 주로 마케팅에서 중요한 역할로 많이 사용되는 페이지인데요!
기업이나 회사의 상품이나 서비스 등을 스토리텔링 형식으로 안내하는 페이지를 말합니다.

---

📁 시맨틱 태그를 활용한 랜딩페이지 구조 분석하기

<div> 태그를 남발하지 않고 각 화면마다 어떤 의미를 가지고 있는지 구분하기 위해
시맨틱 태그를 적극적으로 활용하는 것이 좋은 방법인데요.
 
크게 header, main, footer로 나누고 헤더와 푸터에는 로고와 네비게이션,
메인은 7개의 section으로 나누어 보았습니다.
 
✅ 왜 이렇게 나누게 되었나요?
section은 페이지의 큰 주제나 구역을 나눌 때 쓰이므로
메인 이미지와 텍스트, 서브이미지와 텍스트, 지도, 구독하기를 섹션으로 주었습니다.
 

💭 기능과 내용에 따라 article,  section 선택하기

1️⃣ 갤러리 화면

4번째 section에서 갤러리처럼 보이는 요소는
section과 article 중 어떤 태그를 사용해야될 지 고민을 하였습니다.
독립적인 주제를 가지고 있다면 article을 선택하는 것이 바람직한데요.
 
여기서 "독립적" 이라는 말이 잘 이해가 가지 않았습니다.
찾아서 공부해보니 뉴스나 블로그의 글을 작성할 때 보통은 다른 주제로 포스트 합니다. 예를 들어 뉴스라면 어느 날은 경제에 대한 내용, 또 어느 날은 연예,
블로그라면 상품리뷰, 건강정보, 미용 등 글이 다 다르죠?

여러개의 콘텐츠 블록이 각자 다른 주제이지만 하나씩 어떤 내용의 콘텐츠 블록인지 이해할 수 있으면 article 태그를 씁니다.

반대로 모든 콘텐츠 블록이 동일한 주제나 연관된 내용이라면 `section`를 사용합니다.
 
👉🏻 위의 자료를 보았을 때 고양이라는 동일한 주제의 이미지(블록)들로 있어서
<section>으로 구분하였습니다.
 

2️⃣ 지도, 구독하기 화면

그렇다면 메일 주소를 입력 후 구독 버튼을 클릭하는 화면의 경우에는
독립적, 비독립적이라는 단어와 거리가 멀다고 느껴져서
어떤 태그를 사용해야될지 고민이 되었습니다.
 
이것도 찾아보니 section 태그 같은 경우에는
앞서 말씀드린 동일한 주제를 담당하는 내용을 구분하는데도 쓰이지만
기능적인 화면에 해당되어도 <section> 태그를 쓴다는 것이었습니다.

---

📌 랜딩페이지 HTML 구조 코드(시맨틱 태그)

<header>
 	<nav>
    	<!-- 헤더 네비게이션 -->
    </nav>
</header>
<main>
    <section>
       	<!-- 메인 이미지와 텍스트 -->
    </section>

    <section>
       	<!-- 서브이미지와 텍스트  -->
    </section>

    <section>
       	<!-- 텍스트 -->
    </section>

    <section>
       	<!-- 갤러리(이미지 모음) -->
    </section>

    <section>
       	<!-- 텍스트 -->
    </section>

    <section>
       	<!-- 지도 -->
    </section>

    <section>
       	<!-- 구독하기 -->
    </section>
</main>
<footer>
    <nav>
       	<!-- 푸터 네비게이션 -->
    </nav>
</footer>

 
이런 식으로 전체적인 HTML의 코드를 작성해보았습니다.
세부적으로 구역을 나눠야겠지만 헤더, 메인, 푸터를 개발할 때 자세히 다루어보겠습니다.
 

⭐ 헤더와 메인 화면 구현

✅ header
헤더에서 가장 중점을 두었던 부분은 로고와 메뉴입니다.
로고는 `h1` 태그로 감싼 후 웹접근성(스크린리더) 속성을
추가해주었으며 메뉴는 `nav` 태그와 `ul` , `li` 태그를
이용하였습니다.

안정적인 화면 배치를 위해 전체적인 레이아웃은
`display : flex`와 관련 속성들로 구성해주었습니다.

✅ main
메인에서 첫 번째 섹션에서 중점을 두었던 부분은
<h2> ~ <h6>, <p> 태그에 CSS 속성을
직접적으로 지정해주어 깔끔하게 HTML 코드를 써주었습니다.

---

⭐ 반응형 웹 페이지 구현

반응형 웹 페이지로 만드는 중인데
분량 많은 편인 것 같습니다🥵

하나 문제가 있다면 첨부한 GIF보다 길이를
더 늘리면 박스 메인 텍스트와 고양이 사이의
gap이 계속 늘어난다는 점입니다.
(반응형 웹이 원래 이런 건지 잘못된건지🤔)

그렇다고 max-width 값을 주게 되면
화면이 지정해준 값까지는 늘어나다가
width 값을 고정해준 것처럼 끊기는 듯한 현상이 발생한다.

---

📝 9일차 부트캠프 회고

1️⃣ 잘했던 점
프로젝트를 진행하면서 미처 알지 못한 부분의 문제에 직면할 수 있었습니다. 에러가 발생하는 원인을 찾기 위해 하나씩 테스트해보며 문제점과 해결방안을 찾아내는 시간을 가졌습니다.

2️⃣ 부족했던 점
요구사항과 피그마 정적 화면만 보니 반응형 화면에 대한 이해도가 떨어져 다음 시간에는 구현한 화면이 올바른 것인지 강사님께 질문해보고 확실하게 개발을 해야겠다고 느꼈습니다.

3️⃣ 향후 개선 방향
반응형 웹으로 구현된 홈페이지를 찾아보고 개발하는데 있어 참고해야겠다는 생각이 들었습니다.