Cozy Coding

바로 적용 가능한 11가지 놀라운 HTML 효과

바로 적용 가능한 11가지 놀라운 HTML 효과
Cozy CodingPosted On Jul 17, 20246 min read

이미지

HTML은 웹 개발의 기본이지만, CSS와 JavaScript와 결합하면 웹사이트를 한 단계 업그레이드할 수 있는 멋진 효과를 만들어낼 수 있어요. 여기에는 몇 분 안에 만들 수 있는 11가지 눈을 뗄 수 없는 HTML 효과가 있습니다. 각 효과에 대한 간략한 설명과 시작하는 데 도움이 되는 예제 코드도 함께 제공돼요.

1. Parallax Scrolling

무엇인가요: Parallax scrolling은 배경 이미지를 전경 콘텐츠보다 더 느리게 움직여, 스크롤할 때 깊이가 있는 환상을 만들어내는 기술입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .parallax {
      background-image: url('your-image.jpg');
      min-height: 500px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>
<body>
  <div class="parallax"></div>
  <div style="height:500px;">스크롤하여 효과를 확인하세요.</div>
  <div class="parallax"></div>
</body>
</html>

2. 호버 효과

무엇인가요: 호버 효과는 사용자가 요소 위로 마우스를 가져갔을 때 요소의 모양을 바꾸어 상호 작용적인 피드백을 제공합니다.

예시:

<!DOCTYPE html>
<html>
<head>
  <style>
    .hover-effect {
      width: 200px;
      height: 200px;
      background-color: blue;
      transition: background-color 0.5s ease;
    }
    .hover-effect:hover {
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="hover-effect"></div>
</body>
</html>

3. 애니메이션 모습의 진행 막대

무엇인가?: 애니메이션 모습의 진행 막대는 작업이나 다운로드 진행을 시각적으로 보여주는 역할을 합니다.

예시:

<!DOCTYPE html>
<html>
<head>
  <style>
    .progress {
      width: 100%;
      background-color: #f3f3f3;
    }
    .progress-bar {
      width: 0;
      height: 30px;
      background-color: green;
      animation: load 2s forwards;
    }
    @keyframes load {
      to { width: 100%; }
    }
  </style>
</head>
<body>
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
</body>
</html>

4. CSS Grid Layout

무엇인가요: CSS Grid은 복잡하고 반응형 레이아웃을 쉽게 만들 수 있도록 해줍니다.

예시:

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 10px;
    }
    .grid-item {
      background-color: #ccc;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>
</html>

5. 타자기 효과

무엇인가요: 타자기 효과는 문자를 한 글자씩 입력하는 것을 시뮬레이션하여 소개나 주목을 끌 때 자주 사용됩니다.

예시:

# Markdown 형식의 테이블 태그 바꾸기

예시:

# 7. Sticky Navigation Bar

무엇인가: Sticky 네비게이션 바는 페이지를 스크롤하면 화면 상단에 고정되어 네비게이션 링크에 쉽게 액세스할 수 있도록 합니다.

예시:

<!DOCTYPE html>
<html>
<head>
  <style>
    .navbar {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background-color: #333;
      padding: 10px;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="navbar">고정 네비게이션 바</div>
  <div style="padding:15px 0 2000px">
    <p>스크롤하여 고정 효과를 확인하세요.</p>
  </div>
</body>
</html>

8. CSS 모양 구분선

무엇인가요: CSS 모양 구분선은 웹페이지의 섹션 간에 세련된 구분선을 추가하는 시각적 요소입니다.

예제:

<!DOCTYPE html>
<html>
<head>
  <style>
    .shape-divider {
      width: 100%;
      height: 150px;
      overflow: hidden;
      position: relative;
    }
    .shape-divider svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="shape-divider">
    <svg viewBox="0 0 1440 320">
      <path fill="#0099ff" d="M0,64L1440,160L1440,320L0,320Z"></path>
    </svg>
  </div>
</body>
</html>

9. CSS 블렌드 모드

CSS 블렌드 모드란 요소의 배경을 부모 배경과 혼합하여 시각적으로 흥미로운 효과를 만드는 기능입니다.

예시:

<!DOCTYPE html>
<html>
<head>
  <style>
    .blend-mode {
      background-image: url('background-image.jpg');
      background-blend-mode: multiply;
      height: 300px;
      color: white;
      padding: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="blend-mode">
    <h1>블렌드 모드 효과</h1>
  </div>
</body>
</html>

10. 텍스트 그림자 효과

무엇인가: 텍스트 그림자 효과는 텍스트에 깊이와 차원을 더해 페이지에서 눈에 띄게 만듭니다.

예시:

<!DOCTYPE html>
<html>
<head>
  <style>
    .text-shadow {
      font-size: 2em;
      color: #fff;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <p class="text-shadow">아름다운 텍스트 그림자 효과</p>
</body>
</html>

11. CSS 클립 패스

무엇인가: CSS 클립 패스는 요소를 클리핑하여 복잡한 형태를 만들 수 있게 해주어 흥미로운 디자인 요소를 만들 수 있습니다.

예시:

<!DOCTYPE html>
<html>
<head>
  <style>
    .clip-path {
      width: 200px;
      height: 200px;
      background-color: orange;
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
  </style>
</head>
<body>
  <div class="clip-path"></div>
</body>
</html>

결론

이 11가지 HTML 효과는 몇 줄의 코드만으로 웹 사이트의 사용자 경험과 시각적 매력을 향상시킬 수 있는 방법을 보여줍니다. 인터랙티브 애니메이션부터 다이내믹한 레이아웃까지, 이러한 기술을 사용하면 빠르고 효율적으로 인상적인 웹 디자인을 만들 수 있습니다. 이 효과들을 실험해보고 고유한 디자인 요구에 맞게 사용자화해서 사용해보세요.