카드 구성 요소를 만드는 것은 간단해 보이지만 여러 가지 요소를 신중하게 고려해야 합니다. 처음에 접하게 되는 구성 요소에는 다양한 종류가 있으며, 사용자 인터페이스에 액세스할 수 있도록 하는 것은 웹 개발자의 권한에 속합니다.

HTML 및 CSS로 카드 요소를 구성하는 기술을 살펴보고 접근성 관련 사항 및 개인화 옵션에 대한 지식을 습득합니다.

카드 구성 요소의 HTML 구조

카드의 구성 요소는 카드 수신기, 서문, 표현 및 본문, 대체 카드 베이스로 구성됩니다.

콘텐츠 카드, 제품 카드, 프로필 카드의 세 가지 기본 구성 요소는 목적에 맞게 제작해야 합니다. 이들은 사이버 공간에서 가장 널리 사용되는 카드 종류 중 일부를 구성합니다.

HTML 마크업을 활용하여 각 카드에 할당된 특정 클래스가 있는 중첩된 `div` 태그와 각 카드의 다양한 구성 요소를 나타내는 해당 하위 요소로 구성된 컨테이너 요소를 만드는 것을 고려해 보십시오. 예를 들어 콘텐츠 카드에는 멀티미디어를 위한 `img` 태그, 제목을 위한 `h3` 태그, 텍스트를 위한 `p` 태그가 필요할 수 있습니다.

 <div class="card-container">
    <!-- Content Card -->
    <div class="content-card">
        <img src="https://images.unsplash.com/photo-145603-8e7ef71d639e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="A workspace with a keyboard notebook, cup of coffee and an earpiece">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad
       excepturi explicabo molestiae natus magnam rem...</p>
        <a href="#">Read More</a>
    </div>

    <!-- Product Card -->
    <div class="product-card">
        <img src="https://images.unsplash.com/photo-420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Headphones on a yellow background">
        <h3>Product Name</h3>
        <p>$19.99</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Aspernatur, voluptatibus.</p>
        <a href="#"><button>Add to Cart</button></a>
    </div>

    <!-- Profile Card -->
    <div class="profile-card">
        <img src="https://images.unsplash.com/photo-875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="A white male wearing a black button up shirt">
        <h3>John Doe</h3>
        <p>Web Developer</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Expedita tempora eos molestias repellat?</p>
        <a href="#" class="profile-link">View Profile</a>
    </div>
</div> 

“이것은 웹 페이지에 표시될 일부 텍스트의 예입니다.

추가 카드를 생성하거나 기존 카드에 더 많은 정보를 통합하려면 계속 진행하기 전에 해당 작업을 수행하십시오.

카드 구성 요소에 대한 CSS 스타일링

CSS(Cascading Style Sheet)를 사용하면 개별 카드의 스타일을 미적으로 지정할 수 있습니다. 범용 선택기를 사용하면 여백, 패딩 및 배치 속성을 취소할 수 있습니다. 그런 다음 패딩으로 컨테이너를 장식하여 충분한 공간을 제공할 수 있습니다.

 ​​​​​​* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.card-container {
    padding: 20px;
} 

모든 카드에 다중 선택기를 활용하고 여백을 넣어 각 카드를 둘러싼 충분한 공간을 만듭니다. 또한 디스플레이 및 플렉스 방향 속성을 구성하여 요소의 배열을 용이하게 합니다. 또한 테두리를 적용하여 카드를 구분하는 동시에 테두리 반경을 통합하여 모서리를 둥글게 만들고 최대 너비를 설정하여 다양한 화면 크기에 맞게 조정할 수 있습니다.

 .content-card,
.product-card,
.profile-card {
    margin: 20px;
    display: flex;
    flex-direction: column;
    border: 2px solid #ccc;
    border-radius: 7px;
    max-width: 250px;
} 

콘텐츠 카드는 가장 먼저 집중해야 하는 요소이므로 다양한 구성 요소 사이에 충분한 공간을 제공하기 위해 독특한 배경색과 함께 충분한 패딩을 사용해야 합니다. 이 컨테이너 내의 특정 요소를 더 쉽게 타깃팅하려면 콘텐츠 카드의 HTML 코드에 하위 선택기를 추가해야 합니다.

이미지의 최대 너비와 둥근 모서리를 설정하기 위해 CSS를 사용하여 HTML 코드의 스타일을 지정해야 합니다.

` 제목의 여백, 글꼴 패밀리 및 글꼴 크기도 지정해야 합니다. 앵커 태그의 경우 텍스트 장식을 제거하고 색상,

 .content-card {
    background: #E9724C;
    padding: 10px;
}

.content-card img {
    max-width: 100%;
    border-radius: 5px;
}

.content-card h3 {
    margin: 10px 0;
    font-family: monospace;
    font-size: 1.5rem;
}

.content-card a {
    text-decoration: none;
    color: #6f2ed8;
    margin:12px 0 7px 0;
    font-size: 1rem;
} 

추가 기능이 있기 때문에 제품 카드에 더 높은 수준의 스타일링이 필요합니다. 이를 위해서는 모든 개별 하위 요소에 대한 선택기를 생성하고 각 요소에 적합한 스타일을 적용하는 것이 좋습니다.

“버튼” 요소는 다양한 스타일 속성을 포함하므로 클릭 유도 문안 효과를 달성하는 데 매우 중요합니다. 버튼이 오른쪽에 정렬되도록 하려면 ‘앵커’ 선택기 내에서 ‘flex-end’ 값으로 ‘align-self’ 속성을 적용하세요.

 .product-card img {
    border-radius: 5px 5px 0 0;
    width: 100%;
}

.product-card h3 {
    margin: 5px 10px;
    font-family: monospace;
    font-size: 1.5rem;
}

.product-card p {
    margin: 5px 10px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.product-card a {
    align-self: flex-end;
}

.product-card button {
    width: 100px;
    height: 30px;
    margin: 10px;
    border: 1px solid #8f3642;
    border-radius: 4px;
    background-color: #FFC857;
    font-weight: 700;
    cursor: pointer;
} 

프로필 카드의 모양을 다듬어 마무리합니다. 이미지의 오른쪽 상단 및 왼쪽 상단 모서리의 테두리 반경을 컨테이너의 테두리 반경과 일치시킵니다. 필요에 따라 이미지의 크기를 수정하고 이미지가 제대로 정렬되었는지 확인합니다. 가독성을 높이기 위해 텍스트 서식에 두 가지 이상의 서로 다른 글꼴 스타일과 대비되는 색조를 활용합니다. 또한 테두리를 통합하여 앵커 태그의 콜투액션 측면을 강조합니다.

 .profile-card img {
    border-radius: 5px 5px 0 0;
    height: 200px;
    object-fit: cover;
}

.profile-card h3 {
    margin: 10px;
    font-family: monospace;
    font-size: 1.5rem;
}

.profile-card p:first-of-type {
    margin:0px 10px;
    font-family: 'Times New Roman', Times, serif;
    color: cornflowerblue;
}

.profile-card p:last-of-type {
    margin: 5px 10px;
    font-size: 0.9rem;
}

.profile-card a {
    text-decoration: none;
    margin: 5px 10px 10px 10px;
    padding: 5px 15px;
    align-self: center;
    border: 1px solid cornflowerblue;
    border-radius: 15px;
    color: black;
    font-family: monospace;
    font-weight: 500;
} 

디지털 카드는 스타일링 과정을 거친 후 제공된 예시와 유사한 시각적으로 매력적인 모양을 채택해야 합니다.

카드 레이아웃 및 유연성

여러 기기에서 사용자 인터페이스와의 중단 없는 상호 작용을 보장하는 효과는 신속한 응답성에 크게 의존합니다. 레이아웃에 CSS 플렉스박스 또는 CSS 그리드를 활용하면 이러한 목표를 쉽게 달성할 수 있습니다. 궁극적으로 반응형 디자인에 미디어 쿼리를 통합하면 전반적인 사용자 경험을 최적화할 수 있습니다.

CSS 플렉스박스 사용

카드 컨테이너 선택기에 디스플레이 속성을 추가하고 플렉스로 설정했는지 확인하세요. 또한 플렉스 랩을 적용하고 작은 화면 크기 내에서 카드를 감쌀 수 있도록 랩으로 설정합니다.

 ​​​​​​.card-container {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
} 

페이지는 읽기 쉬운 형식으로 콘텐츠를 구성하기 위해 명확한 제목과 부제목이 있는 전문적이고 잘 디자인된 레이아웃과 비슷해야 합니다. 고품질 이미지나 그래픽을 사용하면 광고하는 제품이나 서비스에 대한 중요한 정보를 전달하면서 페이지의 시각적 매력을 높일 수 있습니다.

더 큰 화면 크기에서의 반응성에 관한 논의가 마무리되었습니다. 휴대폰과 같이 작은 뷰포트의 경우 미디어 쿼리 규칙을 활용하고 최대 너비를 지정할 수 있습니다.

원하는 요소에 대해 미디어 쿼리를 수행하면 카드 컨테이너가 변경됩니다.

 @media screen and (max-width: 480px) {
  .card-container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
} 

미디어 쿼리 효과를 확인하려면 코드펜 의 코드를 확인하세요.

CSS 그리드 사용

주어진 코드 스니펫을 변환할 프로그래밍 언어를 지정해 주세요.

 .card-container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
    justify-items: center;
} 

페이지 레이아웃은 노트와 비슷하게 디자인되었으며 텍스트는 캐주얼하고 대화체 톤으로 작성되었습니다. 헤더 이미지에는 밤의 도시 풍경 일러스트가, 배경 이미지에는 멀리서 바라본 산의 풍경이 담겨 있습니다.

모바일 화면용 미디어 쿼리를 CSS 코드 내에 적용하여 활용합니다. 그리드 템플릿 열 속성을 사용하여 열 수를 조정하여 작은 뷰포트에 맞게 그리드 레이아웃을 수정합니다. 각 카드가 컨테이너의 전체 너비에 걸쳐 표시되도록 grid-template-columns를 1fr로 설정합니다. 또한 항목 맞춤 및 항목 정렬 속성을 사용하여 카드를 가로 및 세로로 중앙에 배치합니다.

 @media screen and (max-width: 480px) {
  .card-container {
      grid-template-columns: 1fr;
      justify-items: center;
      align-items: center;
  }
} 

CSS 그리드와 미디어 쿼리를 결합하면 카드가 큰 화면에서는 감싸고 작은 화면에서는 세로로 쌓여 반응형 카드 레이아웃을 구현할 수 있습니다. 미디어 쿼리 효과를 확인하려면 CodePen 의 코드를 확인하세요.

카드 구성 요소의 접근성 고려 사항

카드 구성 요소의 개발은 장애인을 포함한 모든 사용자를 포함해야 합니다. 접근성을 높이려면 특정 요소를 고려해야 합니다:

시맨틱 HTML은 페이지 콘텐츠에 대한 컨텍스트 정보를 제공하는 요소를 통합하여 기존 HTML보다 더 의미 있는 방식으로 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용되는 마크업 언어입니다.

디지털 인터페이스를 탐색하기 위해 키보드 컨트롤을 사용하는 것을 키보드 탐색이라고 합니다.

ARIA(접근 가능한 리치 인터넷 애플리케이션) 레이블 및 역할을 사용하면 웹 페이지의 다양한 요소의 기능과 목적에 대한 정보를 제공하여 장애가 있는 사용자의 웹사이트 접근성을 크게 향상시킬 수 있습니다.

대체 텍스트는 표시되는 이미지 콘텐츠에 대한 간략한 설명

제목 구조 및 서식 지침

디자인에서 뚜렷한 색상 대비를 활용하면 특정 요소에 효과적으로 주의를 끌고 시각적 흥미를 유발할 수 있습니다.

웹 디자이너는 이러한 접근성 조치를 통합함으로써 복합 요소의 포용성을 보장할 수 있습니다.

사용자 지정 및 추가 탐색

카드 요소의 개인화 가능성은 무궁무진하며, 모양과 기능을 향상시키기 위해 다음 제안을 고려하는 것이 좋습니다:

전환 및 애니메이션을 사용하면 웹 사이트의 여러 섹션 간에 부드럽고 일관된 흐름을 만들고 사용자가 인터페이스와 상호 작용할 때 시각적 흥미와 피드백을 제공함으로써 웹 디자인에서 사용자 경험을 크게 향상시킬 수 있습니다.

다양한 그래픽 요소를 통해 브랜드나 제품을 시각적으로 표현하는 것을 이미지 스타일이라고 합니다. 여기에는 로고, 타이포그래피, 색 구성표 및 회사 프레젠테이션의 전반적인 미적 매력에 기여하는 기타 디자인 요소가 포함됩니다. 이미지 스타일의 선택은 고객이 브랜드를 인식하고 상호 작용하는 방식에 큰 영향을 미칠 수 있으므로 효과적인 마케팅 전략의 필수 요소입니다.

배경과 색 구성표를 포함한 웹사이트의 시각적 미학은 조화로운 사용자 경험을 만드는 데 중요한 역할을 합니다. 적절한 색상과 패턴을 선택하면 사용자가 웹사이트를 인식하고 상호 작용하는 방식에 큰 영향을 미칠 수 있습니다. 따라서 웹사이트의 시각적 아이덴티티를 디자인할 때 이러한 요소를 신중하게 고려하는 것이 중요합니다.

그래픽 디자인에 사용할 수 있는 다양한 테두리 유형에는 실선, 점선, 점선, 이중, 점선-점선 등이 있습니다. 이러한 테두리 스타일은 컴포지션 내의 요소를 강조하거나 프레임을 구성하고 전체 디자인에 시각적 흥미와 차원을 더하는 역할을 합니다.

인터랙티브 요소는 사용자가 상호 작용하고 참여할 수 있는 웹사이트 또는 애플리케이션의 기능입니다.

카드를 개인화할 수 있는 다양한 옵션이 있으며, 이러한 가능성을 탐색해 보는 것이 좋습니다.

시각적으로 매력적이고 반응이 빠른 카드 구성 요소 만들기

카드 구성 요소의 활용은 웹사이트 내에서 보편화되어 있으며 HTML과 CSS를 사용하여 구성하는 것은 비교적 간단합니다. 그러나 이러한 구성 요소를 개발할 때 접근성 원칙을 이해하는 것도 마찬가지로 중요합니다.

다양한 시각적 효과를 낼 수 있는 필터와 블렌드 모드도 실험해 볼 수 있는 다른 CSS 효과입니다. 웹 페이지의 미적 외관을 더욱 향상시키기 위해 이러한 기능을 활용하는 연습을 하는 것이 좋습니다.