Menu

디자인 요소 확인

그라데이션 애니메이션이 적용된 테두리

 

전체 코드
전체 코드 확인하기

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.card {
isolation: isolate;
}

.media-object {
--border-width: 1px;
--radius: 24px;
position: relative;
border-radius: var(--radius);
border: var(--border-width) solid transparent;
}

.media-object::before {
content: " ";
position: absolute;
inset: calc(var(--border-width) * -1);
z-index: -1;
border: inherit;
border-radius: inherit;
background-image: conic-gradient(from var(--angle), #381D6A 80%, #E0D1FF 88%, #E0D1FF 92%, #381D6A 100%);
background-origin: border-box;
-webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
mask: linear-gradient(black, black), linear-gradient(black, black);
-webkit-mask-clip: content-box, border-box;
mask-clip: content-box, border-box;
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: spin 3s linear infinite;
}

@supports not (background: paint(something)) {
.media-object::before {
background-image: conic-gradient(#381D6A 80%, #E0D1FF 88%, #E0D1FF 92%, #381D6A 100%);
}
}

.media-object:hover::before {
animation-play-state: paused;
}

@property --angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}

@keyframes spin {
to {
--angle: 1turn;
}
}

html {
box-sizing: border-box;
scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
html {
scroll-behavior: none;
}
}

html *,
html *::after,
html *::before {
box-sizing: inherit;
}

body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background-size: cover;
background-position: center;
background-image: url("https://i.imgur.com/YvUPGUK.jpg");
font: 100%/1.6 'Open Sans', sans-serif;
}

.card {
--text-color: #fff;
--text-color-2: #F3F8FA;
--bg-color: #0F0620;
--border-color: #381D6A;
display: flex;
flex-direction: column;
gap: 24px;
width: 644px;
padding: 32px;
border-radius: 24px;
color: var(--text-color);
background: var(--bg-color);
border: 1px solid var(--border-color);
font: 100%/1.6 'Open Sans', sans-serif;
}

.card__title {
margin-block: 0;
font-family: 'Sora', sans-serif;
font-size: 33px;
font-weight: 700;
line-height: 44px;
}

mark {
background: linear-gradient(270deg, #D42F4A 0%, #F82BBF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: #0000;
-webkit-box-decoration-break: clone;
}

.card__description {
color: var(--text-color-2);
line-height: 24px;
margin-block: 0;
}

.card__actions {
display: flex;
gap: 24px;
}

.card__button {
display: block;
padding: 16px 32px;
border: 1px solid var(--border-color);
border-radius: 24px;
text-decoration: none;
color: inherit;
flex-grow: 1;
text-align: center;
font-weight: 600;
line-height: 16px;
}

.media-object {
display: flex;
justify-content: space-between;
align-items: end;
padding: 24px;
gap: 24px;
}

.media-object__title {
font-size: 18px;
font-weight: 600;
margin-block: 0;
}

.media-object__description {
margin-block: 0;
line-height: 24px;
}
</style>
</head>

<body>
<div class="card">
<h2 class="card__title">예시 카드 레이아웃</h2>
<p class="card__description">This is an example card layout with media objects and buttons. It's styled using CSS and can be customized to fit different needs.</p>
<div class="card__actions">
<a href="#" class="card__button">예시 버튼</a>
<a href="#" class="card__button">예시 버튼</a>
</div>
<div class="media-object">
<div>
<h3 class="media-object__title">Media Object</h3>
<p class="media-object__description">This is a media object with some text content. It can be used to display images, videos, or other media.</p>
</div>
<div>
<!-- Media Content Goes Here -->
</div>
</div>
</div>
</body>

</html>

웹사이트 제작 문의하기
예시 코드 설명)

이 프로젝트에서 사용된 HTML, CSS 및 JavaScript 코드를 자세히 설명하겠습니다. 

HTML

HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 이 코드에서는 다음과 같은 요소들이 사용되었습니다.

1. `<!DOCTYPE html>`: HTML 문서 유형을 정의합니다.
2. `<html lang=”en”>`: HTML 문서의 기본 언어를 영어로 설정합니다.
3. `<head>`: 문서의 메타 데이터와 스타일 시트 링크를 포함하는 섹션입니다.
4. `<meta charset=”UTF-8″>`: 문서의 문자 인코딩을 UTF-8로 설정합니다.
5. `<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>`: 반응형 디자인을 위한 viewport 설정입니다.
6. `<title>Document</title>`: 문서의 제목을 설정합니다.
7. `<body>`: 실제 콘텐츠가 표시되는 부분입니다.

CSS

CSS는 HTML 요소의 스타일을 지정하는 스타일 시트 언어입니다. 이 코드에서는 다음과 같은 스타일이 적용되었습니다.

1. `.card`: 카드 요소의 스타일을 정의합니다.
2. `.media-object`: 미디어 객체의 스타일을 정의합니다.
3. `.card__title`, `.card__description`, `.card__actions`, `.card__button`: 카드 내의 텍스트 및 버튼 요소들의 스타일을 정의합니다.
4. `.media-object__title`, `.media-object__description`: 미디어 객체 내의 텍스트 요소들의 스타일을 정의합니다.
5. `@keyframes spin`: 회전 애니메이션을 정의합니다.

JavaScript

JavaScript는 웹 페이지의 동적인 기능을 구현하는 프로그래밍 언어입니다. 이 코드에서는 JavaScript가 사용되지 않았습니다.

코드 이해하기

1. 카드 레이아웃: 이 부분은 웹 페이지의 주요 콘텐츠를 표시하는 카드 레이아웃을 정의합니다. 카드는 제목, 설명, 작은 미디어 객체 및 작업 버튼을 포함합니다.

2. 미디어 객체: 이 부분은 이미지나 동영상과 같은 미디어 콘텐츠를 표시하는 데 사용됩니다. 제목과 설명이 포함되어 있어 사용자에게 해당 미디어에 대한 정보를 제공합니다.

3. CSS 스타일링: CSS는 각 요소의 스타일을 지정합니다. 색상, 폰트, 여백 및 배치와 같은 요소들이 스타일링됩니다.

4. JavaScript 애니메이션: 이 코드에서는 JavaScript를 사용하여 회전 애니메이션을 만들었습니다. 이 애니메이션은 미디어 객체의 배경에 적용되어 회전하는 효과를 줍니다.

이렇게 HTML, CSS 및 JavaScript가 함께 작동하여 웹 페이지의 모양과 동작을 결정합니다. 

문의하기
문의하기