lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter5Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>CSS 총정리</title>
  </head>
  <body>
    <header class="flex-header">
      <div class="logo">CSS 총정리</div>
      <nav>
        <a href="https://example.com">홈</a>
        <a href="https://example.com">포트폴리오</a>
        <a href="https://example.com">서비스</a>
        <a href="https://example.com">연락처</a>
      </nav>
    </header>

    <div class="hero">
      <h1>CSS 연습</h1>
      <p>웹사이트를 멋지게 꾸며보세요 👩🏻‍💻</p>
    </div>

    <div class="grid-container">
      <aside class="sticky-sidebar">
        <h2>최신 뉴스</h2>
        <ul>
          <li><a href="https://example.com">뉴스 1</a></li>
          <li><a href="https://example.com">뉴스 2</a></li>
          <li><a href="https://example.com">뉴스 3</a></li>
        </ul>
      </aside>
      <main>
        <section class="card-section">
          <div class="card">
            <img
              src="https://via.placeholder.com/300x200"
              alt="샘플 이미지 1"
            />
            <h3>프로젝트 1</h3>
            <p>프로젝트 1 설명</p>
          </div>
          <div class="card">
            <img
              src="https://via.placeholder.com/300x200"
              alt="샘플 이미지 2"
            />
            <h3>프로젝트 2</h3>
            <p>프로젝트 2 설명</p>
          </div>
        </section>
      </main>
    </div>

    <footer class="flex-footer">
      저작권 © 2023. 코드프렌즈. All Rights Reserved.
    </footer>
  </body>
</html>

# CSS 총정리

지금까지 HTML, CSS에 대해 배운 내용을 하나로 모아 간단한 프로필 카드를 만들었습니다.

코드 에디터에서 HTML, CSS가 어떻게 적용되고 있는지 꼼꼼히 확인하고, 학습한 내용을 다시 한 번 복습해 보세요 🙂