<section id="header-top"> 구현하기

구현하기 | Notion"> 구현하기 | Notion">

<목표>

<내가 파악한 html 구조>

<section id="marketing">
- <section class="contents">
  - <div class="text">
    - <h3>
    - <p>
  - <img>
  - <section class="today_items">
    - <h5>
      - <a>
    - <ul>
      - <li>
        
        <a>

<실제 html 구조>

<section id="header-top">
- <div id="header-title-wrap">
  - <h1 id="header-title>
  - <p id="header-title-desc">
  - <div id="header-image">
  - <section id="top-keywords">
    - <h3 id="top-keywords-title">
      - <a id="top-keywords-link" href="#">
    - <ul id="top-keywords-list">
      - <li>
        
        <a href="#">
        
        <p class="rank">
        
        <span class="changed_rank">

<aside> 💡 정답을 보지 않고 생각한 HTML 태그로 구현한다.

</aside>

<html 작성>

<중간 과정>

index.html
main.css

<aside> ❓ 여기까지는 맞췄는데, '오늘의 인기 검색어'를 위로 올릴 수가 없다. 무작정 height를 높여버리면 이미지도 따라 세로로 늘어나며 변형된다. 이래서 원본 코드에서 background를 사용해서 img를 넣은 건가 싶다... positon을 제대로 할 자신이 없어서 일부러 <img>를 사용한 건데, 막상 만들어보니 제목과 '오늘의 인기 검색어' 두 box만 position: absolute로 배치하는 게 훨씬 편했을 것 같다.

</aside>

<aside> ⭐ <div class="contents>는 그대로 두고, 대신 position: relative로 바꾼다. 그리고 내부 요소(3개)를 각각 position: absolute로 배치한다. 그러면 중앙 정렬 문제와 그 외 배치 문제가 모두 해결된다.

</aside>