[css] CSS 투명한 아이폰 앱 디자인

26 Dec 2023

이번에는 CSS를 사용하여 투명한 아이폰 앱 디자인을 만들어 보겠습니다. 투명한 효과를 적용하여 앱 아이콘과 배경 사이에 다채로운 그래디언트가 표현되도록 만들어 보겠습니다.

디자인 요소 설정하기

먼저, 앱 아이콘 이미지와 배경 이미지를 HTML에 추가하고 CSS로 스타일을 적용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Transparent iPhone App Design</title>
</head>
<body>
  <div class="iphone">
    <div class="app icon"></div>
    <div class="background"></div>
  </div>
</body>
</html>

CSS 스타일 적용하기

body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.iphone {
  position: relative;
  width: 300px;
  height: 600px;
  border-radius: 50px;
  overflow: hidden;
  background: linear-gradient(to bottom, #89f7fe, #66a6ff);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.app.icon {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 25px;
  background: url('app-icon.png') no-repeat center / cover;
}

.background {
  position: absolute;
  top: 300px;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('app-background.png') no-repeat center / cover;
  opacity: 0.7;
}

위의 CSS 코드는 아이폰의 형상을 가지며, linear-gradient를 사용하여 배경에 그래디언트를 적용하고, 아이콘 이미지와 배경 이미지를 설정합니다.

이제, 브라우저에서 HTML 파일을 열어 확인해 보면 투명한 아이폰 앱 디자인이 완성된 것을 확인할 수 있습니다.

이렇게 CSS를 사용하여 투명한 아이폰 앱 디자인을 구현할 수 있습니다. 다양한 그래디언트 색상이나 배경 이미지를 적용하여 다채로운 디자인을 만들어보세요!

참고 자료

[CSS linear-gradient() 함수 MDN](https://developer.mozilla.org/ko/docs/Web/CSS/linear-gradient)