최신 CSS 카드

요즘에는 웹사이트에 다양한 데이터를 표시하기 위해 웹사이트에 카드를 만드는 것이 매우 중요합니다. 예를 들어, TutorialsPoint 웹사이트의 홈페이지에서는 카드 형식으로 제공되는 다양한 코스를 찾을 수 있으며, 카드를 클릭하면 해당 코스의 특정 페이지로 리디렉션됩니다.

또한 Amazon이나 Flipkart 같은 전자상거래 매장에 방문하면 카드 형태로 제품이 진열되어 있습니다. 카드 제작의 가장 큰 장점은 이미지에 제품에 대한 간단한 정보를 표시하고 제품 페이지에 전체 정보를 제공할 수 있다는 것입니다.

이 튜토리얼에서는 HTML과 CSS만 사용하여 다양한 카드를 만드는 방법을 배웁니다.

예제 1(기본 CSS 카드)

아래 예에서는 단일 이미지가 포함된 'card' div 요소와 텍스트 정보가 포함된 'card-content' div 요소를 만들었습니다.

CSS에서는 카드 요소에 고정 크기를 설정했습니다. 또한 배경색, 테두리 반경, 테두리 등의 스타일을 지정했습니다. 또한 사용자가 카드 위에 마우스를 올리면 상자 그림자 효과를 적용합니다. 카드.

또한 이미지의 크기를 고정하고 상단 모서리의 테두리 반경을 설정했습니다. 또한 출력에서 ​​사용자는 결과 카드를 볼 수 있습니다. 으아악

예 2

의 중국어 번역은 다음과 같습니다.

예 2

아래 예의 첫 번째 예와 유사한 카드를 만들었습니다. 여기서는 "card-image" div 요소에 대한 배경 이미지를 설정합니다. 동시에 "Picsum" 웹사이트에서 임의의 사진을 가져와 사진을 설정했습니다. 이 카드에서는 첫 번째 예에서 했던 것처럼 "지금 가입" 앵커 태그를 추가하지 않았습니다.

으아악

예 3

아래 예에서는 추가 정보를 표시하기 위해 카드에 호버 효과를 추가했습니다.

여기서 일반 카드를 만들기 위해 먼저 카드 컨테이너를 생성하고 CSS를 사용하여 '위치: 상대'로 스타일을 지정했습니다. 카드 컨테이너 내부에 'card-first' 및 'card-second' div 요소를 추가했습니다. 카드 우선' div 요소에는 카드에 대한 정보가 포함되고, '카드 두 번째' div 요소에는 사용자가 카드 위로 마우스를 가져갈 때마다 표시되는 정보가 포함됩니다.

또한 CSS의 'card-first' div 요소에 대한 크기를 설정하고 CSS에서 'card-second' div 요소에 대한 크기를 설정하고 'transform:translate(100%)' CSS 속성을 사용하여 숨겼습니다. 두 번째 부분. 사용자가 카드 요소 위로 마우스를 가져가면 'transform:translateX(-100%)' CSS 속성을 사용하여 카드의 두 번째 부분을 표시합니다.

으아악

예 4

아래 예에서는 'parent'라는 div 요소를 만들었습니다. 그 후 이미지와 카드 설명이 포함된 여러 카드 요소를 추가했습니다.

CSS에서는 클램프() 함수를 사용하여 카드 너비를 설정합니다. 클램프() 함수는 세 개의 매개변수를 허용합니다. 첫 번째는 최소값, 두 번째는 백분율 값, 세 번째는 최대값입니다. 이 예에서 화면 크기의 20%가 300~500픽셀 사이인 경우 카드 너비는 20%가 됩니다. 그렇지 않으면 300픽셀 또는 500픽셀이 됩니다.

또한 모든 카드를 올바르게 표시하기 위해 "상위" 컨테이너를 Flexbox로 설정했습니다.

으아악

사용자는 HTML과 CSS를 사용하여 최신 카드를 만드는 방법을 배웠습니다. 세 번째 예에서는 기본 카드를 만들고, hover 효과를 사용하여 카드를 만드는 방법도 배웠습니다. 기기의 화면 크기에 따라 카드 크기를 처리하세요.

위 내용은 최신 CSS 카드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!