[HTML/CSS] 카드형 UI 만들기

[HTML/CSS] 카드형 UI 만들기

안녕하세요.

HTML/CSS를 사용해 간단한 애니메이션이 있는 카드형 UI를 만드는 방법에 대해 알아보겠습니다. 

만들고자하는 카드형태는 둥근 모서리를 가지고 이미지 썸네일과 텍스트가 있는 형태입니다.

그리고 입체감을 위해 그림자를 넣을겁니다!

애니메이션은 마우스를 올려놓고 있으면 살짝 확대해서 보여줄 수 있도록 만들 겁니다.

위에서 말한대로 만들기 위해서 필요한 CSS 속성은 아래와 같습니다.

둥근 모서리	border-radius
그림자	box-shadow
이미지 썸네일	background-image
애니메이션	transition

만들면서 각 속성에 대해 알아보겠습니다.

border-radius

border-radius를 사용하면, 둥근 모서리를 가진 요소를 만들 수 있습니다.

border-radius에는 몇개의 값을 기술하느냐에 따라 적용되는 모서리가 다릅니다.

아래에서 확인해보시죠!

See the Pen CSS border-radius by Gren (@deveb22) on CodePen.

이제 카드에 썸네일 이미지를 넣기 위한 속성을 알아보겠습니다.

background-image

요소의 배경에 이미지를 넣기위해 background-image 속성을 사용합니다.

사용방법은 다음과 같습니다.

background-image : url(image경로.);

이미지를 적용했는데 크기가 맞지 않는 경우가 있습니다.

이럴 때 사용하는 속성이 background-size 입니다.

%를 사용해 적절히 크기를 채울 수도 있고, cover, contain 등의 키워드를 사용해서 image size를 조절할 수 있습니다.

보통 이미지를 꽉채우고 싶을 땐, 100%를 사용하거나 cover를 사용하면 됩니다.

다음으로는 그림자를 적용하겠습니다.

box-shadow

box-shadow 속성 사용법은 아래와 같습니다.

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

h-offset과 v-offset은 필수로 기술해야하지만 blur와 spread는 옵션값입니다.

color도 옵션값이지만, Safari(PC)에서는 필수입니다.

See the Pen CSS box-shadow by Gren (@deveb22) on CodePen.

이제 마지막으로 animation을 적용하겠습니다.

transition

마우스를 카드위에 올렸을 때, 해당 카드가 확대되는 간단한 애니메이션을 적용해 보겠습니다.

CSS trassition은 속성값이 변경될 때, 요소의 변화과정이 부드럽게 보일 수 있도록 돕는 속성입니다.

사용방법은 다음과 같습니다.

transition: 속성 변화시간(s);

위처럼 작성하면 속성이 변화될때, 변화시간만큼 소요되며 부드럽게 변화합니다.

속성에 all 이라고 적으면 모든 속성 변화에 대해 적용됩니다.

저는 요소에 마우스를 올렸을 때, 애니메이션이 발생하기를 원하니까, :hover(선택자)를 사용하였습니다.

:hover에 width와 height값을 적절히 설정한 후, 마우스를 올렸을 때 변화가 있는지 확인합니다.

여기서 저는 마우스 커서가 다른곳으로 이동할 때 카드가 확장되는 것을 방지하려고 합니다.

그냥 커서를 옮길 뿐인데 카드가 들쭉날쭉 커졌다 줄어들었다하면 어수선해지는 느낌입니다.

이럴 때 사용하는 속성이 transition-delay입니다.

해당 속성에 시간값을 적으면, 그 시간만큼이 지난 후에 애니메이션이 시작됩니다. 아래처럼 작성하여 사용할 수 있습니다.

transition-delay: 0.4s; /*마우스를 올려놓은지 0.4s가 지나면 width, height를 변경한다.*/

See the Pen CSS transition by Gren (@deveb22) on CodePen.

위에서 사용한 속성들을 사용한 카드 UI와 HTML, CSS는 아래에서 확인해보실 수 있습니다.

(해당 UI는 크롬에서만 동작확인 했습니다!)

See the Pen Card UI by Gren (@deveb22) on CodePen.

마치며

간단한 내용이었지만 도움이 되었으면 좋겠습니다.

다룬내용들을 응용하여 각자 멋진 UI를 만들어봅시다!

끝까지 읽어주셔서 감사합니다.

여러분들의 공감 클릭, 댓글 하나가 큰 힘이 됩니다!