프로필 카드

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 32번째.

챌린지

쉬움

유명한 비행사인 Amelia Earhart에 관한 전체 HTML 페이지가 제공됩니다. 페이지에는 이미 구조와 콘텐츠가 포함되어 있지만, 모바일과 더 큰 화면 모두에서 보기 좋게 만들기 위해 CSS 스타일링이 필요합니다.

여러분의 작업은 누락된 CSS 스타일을 추가하여 디자인을 완성하는 것입니다.

기본 색상(primary color), 텍스트 색상(text color), 배경(background)을 위한 CSS 변수를 정의하세요. 이를 카드의 배경, 텍스트, 제목 및 버튼에 적용하세요.
더 큰 화면 레이아웃(min-width: 768px) 스타일을 지정하세요:
- 이미지는 왼쪽에, 텍스트는 오른쪽에 표시하세요 (flex-direction: row 사용).
- 이미지와 콘텐츠에 적절한 너비를 설정하세요.
더 큰 화면에서 이미지가 보기 좋게 크기가 조정되도록 object-fit: cover;를 적용하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Explorer Profile Card</title>
  <style>
    /* Variables */


    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }

    .card {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      max-width: 600px;
      display: flex;
      flex-direction: column;
    }

    .card img {
      width: 100%;
      height: auto;
    }

    .card-content {
      padding: 20px;
      color: #000;
    }

    .card-content h2 {
      margin-top: 0;
      color: #555;
    }

    .card-content p {
      line-height: 1.5;
      margin-bottom: 20px;
    }

    .card-content button {
      background-color:#555;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .card-content button:hover {
      background-color: #1b4f72;
    }

    /* Larger screens → side by side */
   

  </style>
</head>
<body>

  <div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Amelia_Earhart_standing_under_nose_of_her_Lockheed_Model_10-E_Electra%2C_small.jpg" alt="Amelia Earhart">
    <div class="card-content">
      <h2>Amelia Earhart</h2>
      <p>Amelia Earhart was a pioneering American aviator who became the first woman to fly solo across the Atlantic Ocean. She inspired generations with her courage and adventurous spirit.</p>
      <button>Read More</button>
    </div>
  </div>

</body>
</html>