HTML 구조 🏗️

<div class="portfolio">
  <header class="header">
    <div class="logo">My Portfolio</div>
    <nav class="nav">
      <a href="#">Home</a>
      <a href="#">Projects</a>
      <a href="#">Skills</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <section class="hero">
    <div class="hero-content">
      <h1>안녕하세요, 저는 웹 개발자입니다</h1>
      <p>그리드와 플렉스박스로 멋진 웹사이트를 만듭니다</p>
      <button class="cta">프로젝트 보기</button>
    </div>
    <div class="hero-image">
      <!-- 이미지 -->
    </div>
  </section>

  <section class="projects">
    <h2>프로젝트</h2>
    <div class="project-grid">
      <div class="project wide">프로젝트 1</div>
      <div class="project">프로젝트 2</div>
      <div class="project tall">프로젝트 3</div>
      <div class="project">프로젝트 4</div>
      <div class="project">프로젝트 5</div>
      <div class="project wide tall">프로젝트 6</div>
    </div>
  </section>

  <section class="skills">
    <h2>스킬</h2>
    <div class="skills-container">
      <div class="skill">HTML</div>
      <div class="skill">CSS</div>
      <div class="skill">JavaScript</div>
      <div class="skill">React</div>
      <div class="skill">Node.js</div>
    </div>
  </section>

  <section class="contact">
    <h2>연락처</h2>
    <div class="contact-container">
      <form class="contact-form">
        <input type="text" placeholder="이름">
        <input type="email" placeholder="이메일">
        <textarea placeholder="메시지"></textarea>
        <button type="submit">보내기</button>
      </form>
      <div class="contact-info">
        <p>이메일: example@example.com</p>
        <p>전화번호: 010-1234-5678</p>
      </div>
    </div>
  </section>

  <footer class="footer">
    <p>© 2025 My Portfolio. All rights reserved.</p>
    <div class="social-links">
      <a href="#">Twitter</a>
      <a href="#">GitHub</a>
      <a href="#">LinkedIn</a>
    </div>
  </footer>
</div>

CSS 스타일링 🎨

/* 기본 스타일 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.portfolio {
  display: grid;
  grid-template-columns: 1fr min(1200px, 90%) 1fr;
  grid-template-areas:
    ". header ."
    ". hero ."
    ". projects ."
    ". skills ."
    ". contact ."
    ". footer .";
}

.portfolio > * {
  grid-column: 2;
}

/* 헤더 스타일링 */
.header {
  grid-area: header;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 20px 0;
}

.nav {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: end;
  gap: 20px;
}

/* 히어로 섹션 */
.hero {
  grid-area: hero;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 60px 0;
}

.hero-content {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 20px;
  align-content: center;
}

/* 프로젝트 섹션 */
.projects {
  grid-area: projects;
  padding: 60px 0;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  gap: 20px;
  margin-top: 40px;
}

.project {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  display: grid;
  place-items: center;
}

.wide {
  grid-column: span 2;
}

.tall {
  grid-row: span 2;
}

/* 스킬 섹션 */
.skills {
  grid-area: skills;
  padding: 60px 0;
}

.skills-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.skill {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

/* 연락처 섹션 */
.contact {
  grid-area: contact;
  padding: 60px 0;
}

.contact-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.contact-form {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 20px;
}

/* 푸터 */
.footer {
  grid-area: footer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 40px 0;
}

.social-links {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 20px;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
  }
  
  .contact-container {
    grid-template-columns: 1fr;
  }
  
  .wide {
    grid-column: auto;
  }
  
  .tall {
    grid-row: auto;
  }
  
  .header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .nav {
    justify-content: start;
  }
  
  .footer {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}