HTML 및 CSS를 사용하여 웹사이트를 위한 간단하고 아름다운 UI 카드 구성요소를 디자인하는 방법을 배웁니다. 또한 카드를 너무 어둡게 만들지 않으면서 텍스트를 약간 더 돋보이게 하는 선형 그라데이션 "비법"도 배우게 됩니다.

UI 카드는 웹 사이트에서 일종의 에피타이저 역할을 하는 UI 구성 요소입니다. 일반적인 UI 카드에는 텍스트, 사진, 아이콘 및 하나 이상의 대화형 요소(예:버튼 또는 링크)가 포함되어 있습니다.

UI 카드는 필요에 따라 간단하거나 복잡할 수 있습니다.

오늘 우리는 매우 단순한 UI 카드를 디자인하고 있습니다.

이 UI 카드에는 풍경의 배경 이미지, 두 개의 텍스트 요소(제목 및 설명), 클릭 가능한 하나의 큰 인터페이스가 있습니다. 전체 카드는 링크입니다.

무료를 많이 찾을 수 있습니다. Unsplash.com의 아름다운 풍경 사진.

1단계:HTML

이 HTML을 문서에 추가합니다(<body> 내부 요소):

<a class="card-link" href="#">
  <div class="card">
    <div class="card-overlay"></div>
    <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" alt="Landscape photography of the Northern Sea of Denmark" />
    <div class="card-text-container">
      <div class="card-text-wrapper">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful & dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>
  </div>
</a>

위의 HTML 마크업에서 중요한 부분은 앵커 요소 안에 전체 카드를 래핑한다는 것입니다. 우리는 전체 사용자 인터페이스가 하나의 큰 클릭 가능한 링크가 되기를 원하기 때문에 이 특정 카드에 대해 이 작업을 수행합니다.

올바른 블로그 게시물에 대한 앵커 링크를 만들려면 기사(링크하려는 모든 콘텐츠)가 자리 표시자 속성(href="#" ) 실제 슬러그 사용(예:href="/northern-sea-of-denmark") .

2단계:CSS

먼저 UI 카드 예제에 사용된 CSS를 제공하고 아래 코드에서 가장 중요한 부분을 설명하겠습니다.

.card {
  position: relative;
  height: 350px;
  max-width: 400px;
}

.card-thumbnail {
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.card-text-container {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-text-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 300px;
  color: white;
}
.card-title {
  font-size: 1.45rem;
  margin-bottom: 0;
}
.card-description {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-top: 0.5rem;
}

.card-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  z-index: 1;
}

CSS 작동 방식:

.card :UI 카드를 반응형으로 만들기 위해 최대 너비가 400px입니다. 이것은 카드의 너비를 동적으로 만듭니다. 400px보다 넓게 확장되지는 않지만 화면 너비가 400px보다 작으면 자동으로 축소(좁아짐)됩니다. 카드의 높이 고정(height: 350px ) 화면 크기에 관계없이 변경되지 않습니다.
.card-thumbnail :카드의 종횡비가 변경될 때 배경 이미지가 종횡비(스트레치)를 잃지 않도록 하기 위해 object-fit: cover를 사용합니다. . 그것을 제거하고 무슨 일이 일어나는지 보십시오(좋지 않음).
.card-text-container :UI 카드를 보는 기기에 관계없이 텍스트 요소의 위치와 간격(공백)이 일관되게 유지되도록 bottom: 10%를 사용합니다. . 카드 높이가 고정 350픽셀로 설정되어 있으므로 카드 하단에서 텍스트 요소의 거리를 100%에 가깝게 일관성 있게 유지하기 쉽습니다. z-index: 1; 오버레이 상단에 텍스트 요소를 유지합니다.
.card-text-wrapper :이 클래스는 두 텍스트 요소(제목 및 설명)의 최대 너비를 제어합니다. 카드 너비를 넘어서는 것을 원하지 않으므로 300px 값으로 설정합니다. , 카드의 최대 너비(400px)보다 25% 작습니다. ). 또한 약간의 왼쪽 및 오른쪽 패딩(1rem ), 따라서 텍스트 요소와 화면 테두리 사이에는 항상 약간의 간격이 있습니다(소형 장치에서 중요).
.card-overlay :밝은 배경의 흰색 텍스트는 작동하지 않으므로 어두운 대비가 필요합니다. 그러나 전체 이미지를 너무 어둡게 만들고 싶지 않습니다(그러면 요점이 무엇입니까?). 따라서 linear-gradient를 사용합니다. 이미지의 위쪽 절반(텍스트가 없는 경우)에는 약간의 어둠이 있지만 아래쪽 절반에는 텍스트가 튀어나올 만큼 충분한 어둠이 있는 명암 오버레이를 만드는 기능입니다.

팁 및 아이디어

사진이 이야기의 큰 부분을 차지하는 이와 같은 UI 카드에서는 카드를 너무 복잡하게 만들지 않는 것이 중요합니다(예:텍스트 크기 고려). 이것은 CSS로 스타일을 지정할 때 염두에 두었습니다. 디자인하는 카드의 특정 컨텍스트를 항상 고려해야 합니다.

이 튜토리얼의 스타일을 지침으로 사용하지만 UI 카드 디자인에 대한 엄격한 규칙은 아닙니다. 다음은 UI 카드 디자인에 대한 몇 가지 보편적/객관적 지침입니다.

간격이 중요합니다. 여백이 부족하면 디자인이 복잡하고 밀실 공포증처럼 보입니다. UI는 호흡해야 합니다. 당신이하는 것처럼. (물론 근접의 법칙을 어기지 않고) 벗어날 수 있는 만큼의 간격(여백, 여백, 줄 높이)을 사용하십시오.
서체: 텍스트 요소의 형식(글꼴 선택, 글꼴 크기, 줄 높이 등)에 관계없이 모든 화면 크기에서 텍스트를 쉽게 읽을 수 있어야 합니다. 글꼴 크기를 늘리는 대신(그리고 더 많은 공간을 차지함) .card-overlay에서와 같이 텍스트와 배경 사이의 색상 대비를 높이십시오. 수업.
쉽게 클릭할 수 있는 인터페이스: 카드의 요소를 클릭해야 하는 경우 누구나 쉽게 클릭하거나 마우스나 엄지손가락으로 누를 수 있도록 충분히 크게 만드십시오.

그 외에는 UI 카드 디자인의 규칙이 없으며 컨텍스트만 있습니다.

웹사이트를 위한 간단하고 아름다운 UI 카드를 디자인하는 방법

1단계:HTML

2단계:CSS

CSS 작동 방식:

팁 및 아이디어