프로젝트 1일차 : 메인페이지 HTML 작성

JuNo_12 2025. 4. 7. 21:06

간단하게 배경을 만들어보자!

약간 요런 느낌인데 버튼 왼쪽에 있는 곳에 이미지 주소를 아직 안넣어놔서 많이 휑해보이긴 하네...

이제 코드를 하나씩 쪼개서 봐보자. 우선 body부터!

<body>
  <div class="team-section">
    <div class="team-header">V8</div>

    <div class="background-strip bg-1"></div>
    <div class="background-strip bg-1"></div>
    <div class="background-strip bg-2"></div>
    <div class="background-strip bg-3"></div>
    <div class="background-strip bg-3"></div>

    <div class="team-member pos-1">
      <img src="..." alt="..." />
      <div class="member-info">
        <div class="name">...</div>
        <a href="#" class="view-btn">View More</a>
      </div>
    </div>

  </div>
</body>

</html>

일단 body를 보자. 포스트에 이름을 빼놔서 뭐가 뭔지 햇갈리긴하지만,

우선! 나는 배경색 위에 프로필들을 얹히고 싶고, 색을 3가지 정도 사용하고 싶었다.

카드는 뭐 만드는건 간단하니까 넘어가고 배경색을 입혀줄 공간을 div class= " "로 5개로 나눠줬다.

그 후에 style을 보면,

  <style>
    .team-header {
      position: absolute;
      top: 100px;
      left: 80px;
      font-size: 28px;
      font-weight: bold;
      color: white;
    }

	/* 배경색 간격? 크기? 조정 */
    .background-strip {
      height: 400px;
    }
    
    /* 배경색 */
    .bg-1 {
      background-color: #1c1c24;
    }

    /* 각 인물프로필 위치 조정 */
    .pos-1 {
      top: 160px;
      left: 25%;
    }

몇 가지만 추려 온건데, .team-header는 팀명이다. top과 left를 변경하면서 위치 조정을 할 수 있고,

background-strip은 아까 위에 body에서 본 배경색들이 위치한 공간이다. 여기서 각 배경색들의 간격을 조정해줬다.

그리고 pos-1은 5까지 있는데 첫 번째 프로필을 지칭한다. top과 left를 변경하면서 위치 조정을 할 수 있다.

느낀점

사실 다 만들고 나서 정리해보면 그렇게 어려운 것 같지는 않은데, 저걸 직접 만들려고 하니까 순간순간 뇌정지?가 오긴 하더라... 점점 검색 실력이 느는거같은데... 전에 컴퓨터공학과 친구가 해준 말이 학년이 오를수록 검색 실력이 느는거라고 했는데 진짜 그렇게 될거같다.