lunamoth · June 10, 2025 10:39
diff --git a/Apple Liquid Glass UI - CSS 구현.html b/Apple Liquid Glass UI - CSS 구현.html
 <!DOCTYPE html>
 <html lang="ko">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple Liquid Glass UI - CSS 구현</title>
    <!-- 아이콘 사용을 위한 Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        /* 기본 스타일 및 배경 설정 */
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-image: url('https://images.unsplash.com/photo-1554147090-e1221a04a025?q=80&w=2670&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* 스크롤 시 배경 고정 */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            box-sizing: border-box;
            color: #ffffff;
        }

        .container {
            max-width: 600px;
            text-align: center;
            margin-bottom: 2rem;
        }
        
        h1 {
            font-size: 2.5rem;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        p {
            font-size: 1.1rem;
            line-height: 1.6;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
        }

        /* --- Liquid Glass 스타일 --- */
        .glass-container {
            /* 핵심: 배경에 블러 효과 적용 */
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%); /* Safari 지원 */

            /* 반투명한 배경색 */
            background-color: rgba(255, 255, 255, 0.1);
            
            /* 부드러운 테두리 */
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.2);

            /* 그림자로 입체감 부여 */
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
            
            /* 내부 여백 */
            padding: 30px;
            
            color: #ffffff;
            transition: all 0.3s ease;
        }
        
        /* 카드 콘텐츠 스타일 */
        .glass-container h2 {
            margin-top: 0;
            font-size: 1.8rem;
        }
        
        /* Dock 스타일 */
        .dock {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px; /* 아이콘 사이 간격 */
            margin-top: 2rem;
            padding: 15px 20px; /* Dock은 좀 더 얇게 */
        }
        
        .dock-item {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;

            /* 아이콘에도 Glass 효과 적용 (중첩 효과) */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%; /* 원형 아이콘 */
            border: 1px solid rgba(255, 255, 255, 0.25);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }
        
        /* 상호작용 효과 */
        .dock-item:hover {
            transform: translateY(-8px) scale(1.1);
            background-color: rgba(255, 255, 255, 0.35);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        /* 동적 버튼 예시 */
        .dynamic-button {
            margin-top: 1rem;
            padding: 12px 25px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            background-color: rgba(255, 255, 255, 0.8);
            color: #333;
            border-radius: 50px; /* Pill 형태 */
            border: none;
            transition: all 0.3s ease;
        }

        .dynamic-button:hover {
            background-color: rgba(255, 255, 255, 1);
            transform: scale(1.05);
        }

    </style>
 </head>
 <body>

    <div class="container">
        <h1>Liquid Glass UI</h1>
        <p>CSS의 `backdrop-filter` 속성을 사용하여 Apple의 새로운 디자인 컨셉을 구현한 예시입니다. 반투명한 유리 뒤로 비치는 배경의 흐림 효과와 부드러운 하이라이트가 특징입니다.</p>
    </div>

    <!-- 기본 글래스 카드 -->
    <div class="glass-container">
        <h2>알림 카드</h2>
        <p>이것은 리퀴드 글래스 스타일이 적용된 카드입니다. 배경의 색상과 형태에 따라 카드의 느낌이 미묘하게 달라집니다.</p>
        <button class="dynamic-button">자세히 보기</button>
    </div>
    
    <!-- Dock 예시 -->
    <div class="dock glass-container">
        <div class="dock-item">
            <i class="fa-solid fa-phone"></i>
        </div>
        <div class="dock-item">
            <i class="fa-solid fa-comment-dots"></i>
        </div>
        <div class="dock-item">
            <i class="fa-solid fa-music"></i>
        </div>
        <div class="dock-item">
            <i class="fa-brands fa-safari"></i>
        </div>
    </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Apple Liquid Glass UI - CSS 구현</title>
	<!-- 아이콘 사용을 위한 Font Awesome CDN -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
	<style>
	/* 기본 스타일 및 배경 설정 */
	body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-image: url('https://images.unsplash.com/photo-1554147090-e1221a04a025?q=80&w=2670&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
	background-attachment: fixed; /* 스크롤 시 배경 고정 */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	box-sizing: border-box;
	color: #ffffff;
	}

	.container {
	max-width: 600px;
	text-align: center;
	margin-bottom: 2rem;
	}

	h1 {
	font-size: 2.5rem;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}

	p {
	font-size: 1.1rem;
	line-height: 1.6;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
	}

	/* --- Liquid Glass 스타일 --- */
	.glass-container {
	/* 핵심: 배경에 블러 효과 적용 */
	backdrop-filter: blur(25px) saturate(180%);
	-webkit-backdrop-filter: blur(25px) saturate(180%); /* Safari 지원 */

	/* 반투명한 배경색 */
	background-color: rgba(255, 255, 255, 0.1);

	/* 부드러운 테두리 */
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.2);

	/* 그림자로 입체감 부여 */
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);

	/* 내부 여백 */
	padding: 30px;

	color: #ffffff;
	transition: all 0.3s ease;
	}

	/* 카드 콘텐츠 스타일 */
	.glass-container h2 {
	margin-top: 0;
	font-size: 1.8rem;
	}

	/* Dock 스타일 */
	.dock {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px; /* 아이콘 사이 간격 */
	margin-top: 2rem;
	padding: 15px 20px; /* Dock은 좀 더 얇게 */
	}

	.dock-item {
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;

	/* 아이콘에도 Glass 효과 적용 (중첩 효과) */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%; /* 원형 아이콘 */
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

	cursor: pointer;
	transition: all 0.2s ease-in-out;
	}

	/* 상호작용 효과 */
	.dock-item:hover {
	transform: translateY(-8px) scale(1.1);
	background-color: rgba(255, 255, 255, 0.35);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
	}

	/* 동적 버튼 예시 */
	.dynamic-button {
	margin-top: 1rem;
	padding: 12px 25px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.8);
	color: #333;
	border-radius: 50px; /* Pill 형태 */
	border: none;
	transition: all 0.3s ease;
	}

	.dynamic-button:hover {
	background-color: rgba(255, 255, 255, 1);
	transform: scale(1.05);
	}

	</style>
	</head>
	<body>

	<div class="container">
	<h1>Liquid Glass UI</h1>
	<p>CSS의 `backdrop-filter` 속성을 사용하여 Apple의 새로운 디자인 컨셉을 구현한 예시입니다. 반투명한 유리 뒤로 비치는 배경의 흐림 효과와 부드러운 하이라이트가 특징입니다.</p>
	</div>

	<!-- 기본 글래스 카드 -->
	<div class="glass-container">
	<h2>알림 카드</h2>
	<p>이것은 리퀴드 글래스 스타일이 적용된 카드입니다. 배경의 색상과 형태에 따라 카드의 느낌이 미묘하게 달라집니다.</p>
	<button class="dynamic-button">자세히 보기</button>
	</div>

	<!-- Dock 예시 -->
	<div class="dock glass-container">
	<div class="dock-item">
	<i class="fa-solid fa-phone"></i>
	</div>
	<div class="dock-item">
	<i class="fa-solid fa-comment-dots"></i>
	</div>
	<div class="dock-item">
	<i class="fa-solid fa-music"></i>
	</div>
	<div class="dock-item">
	<i class="fa-brands fa-safari"></i>
	</div>
	</div>

	</body>
	</html>