[자바스크립트+html] Font Awesome 아이콘과 Popper.js를 조합하여 깔끔한 UI를 구현 (알람 내용 확인해 주세요) 구현

위와 같은 메시지창이 우측하단에서 메일이나, 쪽지가 올때 나오는 것을 우린 종종 봅니다.

이런것을 우리도 만들수 있을까?

여기서 출발합니다.

chatGPT를 통해서 이 코드를 만드는 과정을 담아봅니다. 누군가에게는 도움이 될 것 같습니다.

시작)

<div class="f-s-12 p-7 p-b-15 height-full width-full" style="border: 1px solid rgb(80, 108, 158); background: rgb(18, 22, 25); text-align: left; vertical-align: top; border-radius: 5px;"><div class="width-full m-b-5 p-5 bg-black4 text-center"><span class="text-white"><strong><i class="fa fa-star text-red905"></i> 알람 내용 확인하세요
              <i class="fa fa-star text-red905"></i></strong></span></div> <div id="stickyinner" class="v-box2-orange11 p-5 width-170 text-warning"><div class="clear-both width-full height-full cursor"><span><i class="fa fa-envelope fa-4x text-info f-s-80 m-b-5"></i> <br>
              쪽지가 3통 도착했습니다.
            </span></div></div></div>

위의 코드는 화면의 우측 하부에 모달창처럼 나오는 코드이다.

popper.min.js를 사용해서 만든 코드 같은데, 이 사용법에 대해서 설명해줘.

Popper.js는 툴팁, 드롭다운, 팝오버 같은 UI 요소를 동적으로 위치시키는 데 사용되는 JavaScript 라이브러리입니다. 주로 요소를 특정 대상과 연관 지어 배치하거나, 위치를 조정하는 데 사용됩니다. 위 코드처럼 화면의 특정 위치에 고정된 알림창이나 팝업 UI를 만들 때 활용할 수 있습니다.

Popper.js의 주요 개념

Popper: 툴팁, 알림창 등 배치할 요소.
Reference: Popper가 배치될 기준이 되는 요소.
Placement: Popper가 기준 요소에 대해 배치되는 방향 (예: top, bottom, right, left 등).

Popper.js 사용법

1. Popper.js 포함

HTML에 popper.min.js를 포함해야 합니다. CDN을 사용할 수 있습니다.

2. 기본 구조

<div id="referenceElement">기준 요소</div>
<div id="popperElement" style="background: lightblue; padding: 10px; border-radius: 5px;">
  Popper 요소
</div>

3. JavaScript 코드

Popper.js를 사용하여 Popper를 Reference에 연결하고 위치를 지정합니다.

const referenceElement = document.querySelector('#referenceElement');
const popperElement = document.querySelector('#popperElement');

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'top', // top, bottom, left, right 가능
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 10], // Popper의 오프셋
      },
    },
  ],
});

4. Options 설명

placement: Popper가 기준 요소에 대해 배치될 위치를 지정합니다.
- 기본값: bottom
- 값: top, bottom, right, left 등
modifiers: 배치를 수정하거나 위치를 조정하는 데 사용됩니다.
- offset: Popper와 Reference 간의 간격을 설정.
- preventOverflow: Popper가 화면 밖으로 나가지 않도록 제어.

5. Popper.js로 알림 UI 적용

위의 HTML과 Popper.js를 조합하여 알림창을 화면의 우측 하단에 고정하는 방식을 구현하려면 다음과 같이 작성할 수 있습니다:

<div id="stickyinner" style="position: absolute; background: #121619; color: #ffcc00; border: 1px solid #506c9e; border-radius: 5px; padding: 10px;">
  <i class="fa fa-envelope fa-2x text-info"></i> 쪽지가 3통 도착했습니다.
</div>

<script>
  const stickyinner = document.getElementById('stickyinner');
  
  const popperInstance = Popper.createPopper(document.body, stickyinner, {
    placement: 'bottom-end', // 화면 우측 하단 고정
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 10], // 아래로 10px 이동
        },
      },
      {
        name: 'preventOverflow',
        options: {
          boundary: document.body, // 화면 내에서 제한
        },
      },
    ],
  });
</script>

주요 사용 예

툴팁: 버튼 위에 간단한 안내문 표시.
팝업: 특정 이벤트(클릭, 호버 등)에 따라 열리는 창.
알림창: 위 코드처럼 화면 특정 위치에 배치되는 고정 창.

Popper.js를 활용하면 위와 같은 동적 레이아웃을 손쉽게 만들 수 있습니다. 필요하다면 추가적인 사용자 지정 설정도 가능합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script> 위의 코드를 이미 선언되었다고 가정하고 예제를 초보자들이 쉽게 알 수 있도록 친절하게 존댓말로 설명해줘.

Popper.js는 웹사이트에서 툴팁, 팝업, 알림창과 같은 UI 요소를 쉽게 배치하도록 도와주는 도구입니다. 여러분이 화면의 특정 위치에 고정된 요소를 만들고 싶다면, Popper.js를 사용하면 매우 편리하게 구현할 수 있습니다. 이제 간단한 예제를 통해 Popper.js를 사용하는 방법을 자세히 설명드릴게요.

기본 구조 설명

웹 페이지에 팝업처럼 보일 요소(Popper)와 그 요소가 기준으로 삼을 다른 요소(Reference)가 필요합니다.

HTML 코드

<button id="referenceElement">기준 버튼</button>
<div id="popperElement" style="background: lightblue; padding: 10px; border-radius: 5px;">
  Popper의 내용입니다!
</div>

#referenceElement: Popper가 위치를 기준으로 삼을 버튼입니다.
#popperElement: Popper로 사용할 창(예: 알림창, 툴팁 등)입니다.

JavaScript로 Popper 생성하기

이제 Popper.js를 이용해 위 두 요소를 연결하고, Popper가 기준 요소에 따라 배치되도록 설정하겠습니다.

JavaScript 코드

// 기준 요소와 Popper 요소를 가져옵니다.
const referenceElement = document.querySelector('#referenceElement');
const popperElement = document.querySelector('#popperElement');

// Popper.js를 사용해 기준 요소와 Popper를 연결합니다.
Popper.createPopper(referenceElement, popperElement, {
  placement: 'top', // Popper가 버튼의 위쪽에 나타납니다.
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 10], // Popper와 기준 요소 사이에 간격을 추가합니다.
      },
    },
  ],
});

주요 옵션 설명

placement: Popper가 기준 요소의 어느 방향에 배치될지 설정합니다.
- 가능한 값: top, bottom, right, left, auto 등
- 예: placement: 'bottom' → 기준 요소 아래에 Popper가 표시됩니다.
modifiers: 위치를 더 세밀하게 조정하거나, 화면을 벗어나지 않도록 보정하는 옵션입니다.
- offset: Popper와 기준 요소 사이의 간격을 조정합니다.
```
modifiers: [
  { name: 'offset', options: { offset: [0, 10] } }
]
```
- preventOverflow: Popper가 화면 밖으로 나가지 않도록 제한합니다.
```
modifiers: [
  { name: 'preventOverflow', options: { boundary: 'viewport' } }
]
```

완성된 예제

아래 코드는 버튼 위에 팝업(Popper)이 나타나도록 구현한 간단한 예제입니다.

HTML 코드

<button id="referenceElement">알림 보기</button>
<div id="popperElement" style="background: lightblue; padding: 10px; border-radius: 5px; display: none;">
  새로운 알림이 있습니다!
</div>

JavaScript 코드

const referenceElement = document.querySelector('#referenceElement');
const popperElement = document.querySelector('#popperElement');

// 버튼 클릭 시 Popper를 표시
referenceElement.addEventListener('click', () => {
  popperElement.style.display = 'block'; // Popper를 보이게 설정
  Popper.createPopper(referenceElement, popperElement, {
    placement: 'top', // Popper가 버튼 위쪽에 나타납니다.
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 10], // Popper와 버튼 사이 간격
        },
      },
    ],
  });
});

실행 결과

버튼을 클릭하면 Popper가 버튼 위에 나타납니다.
Popper.js가 화면 크기와 기준 요소를 계산해 Popper의 위치를 적절하게 배치합니다.
Popper는 항상 버튼과 올바르게 정렬되며, 간격이나 위치를 조정하려면 modifiers 옵션을 활용하면 됩니다.

결론

Popper.js는 복잡한 UI를 만들 때 꼭 필요한 도구입니다. 초보자분들도 위 코드를 따라 하면서 placement, modifiers 옵션을 변경해보시면 금방 익숙해질 수 있습니다. 필요한 위치에 정확히 Popper를 배치해 보세요! 😊

<div class="f-s-12 p-7 p-b-15 height-full width-full" style="border: 1px solid rgb(80, 108, 158); background: rgb(18, 22, 25); text-align: left; vertical-align: top; border-radius: 5px;"><div class="width-full m-b-5 p-5 bg-black4 text-center"><span class="text-white"><strong><i class="fa fa-star text-red905"></i> 알람 내용 확인하세요 <i class="fa fa-star text-red905"></i></strong></span></div> <div id="stickyinner" class="v-box2-orange11 p-5 width-170 text-warning"><div class="clear-both width-full height-full cursor"><span><i class="fa fa-envelope fa-4x text-info f-s-80 m-b-5"></i> <br> 쪽지가 3통 도착했습니다. </span></div></div></div>

위의 코드처럼 좀더 화려한 UI로 만드는 코드는?

화려한 UI를 만들기 위해, 현대적인 디자인과 애니메이션 효과를 추가할 수 있습니다. 아래는 기존 코드를 개선하여 더 시각적으로 매력적인 알림창 UI를 만드는 예제입니다.

개선된 HTML/CSS 코드

<div class="notification-container">
  <div class="notification-header">
    <span><i class="fa fa-star text-red905"></i> 알람 내용 확인하세요 <i class="fa fa-star text-red905"></i></span>
  </div>
  <div id="stickyinner" class="notification-body">
    <div class="icon-container">
      <i class="fa fa-envelope fa-4x"></i>
    </div>
    <div class="message-container">
      <h4>새로운 메시지가 도착했습니다!</h4>
      <p>쪽지가 3통 도착했습니다. 확인해보세요!</p>
    </div>
  </div>
</div>

CSS 디자인

/* 전체 컨테이너 */
.notification-container {
  width: 300px;
  border: 1px solid rgba(80, 108, 158, 0.8);
  background: linear-gradient(135deg, #2e3440, #3b4252);
  color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: fixed;
  bottom: 20px;
  right: 20px;
  animation: slide-in 0.5s ease-in-out;
  z-index: 1000;
}

/* 상단 헤더 */
.notification-header {
  background: rgba(46, 52, 64, 0.9);
  text-align: center;
  font-size: 16px;
  padding: 10px;
  font-weight: bold;
  color: #ffffff;
  border-bottom: 1px solid rgba(80, 108, 158, 0.8);
}

.notification-header i {
  color: #ff4500;
  margin: 0 5px;
}

/* 본문 내용 */
.notification-body {
  display: flex;
  align-items: center;
  padding: 15px;
}

/* 아이콘 섹션 */
.icon-container {
  flex: 1;
  text-align: center;
  animation: bounce 2s infinite;
}

.icon-container i {
  color: #00bcd4;
  font-size: 50px;
}

/* 메시지 섹션 */
.message-container {
  flex: 2;
  padding-left: 10px;
}

.message-container h4 {
  margin: 0;
  font-size: 18px;
  color: #ffcc00;
}

.message-container p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #e0e0e0;
}

/* 애니메이션 */
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

개선된 특징

헤더 디자인: linear-gradient 배경과 강조된 텍스트로 모던한 느낌을 강조.
아이콘 애니메이션: bounce 효과로 눈길을 끄는 시각적 효과 추가.
입장 애니메이션: 알림창이 화면에 등장할 때 slide-in 효과 적용.
그림자 효과: box-shadow로 깊이감을 추가해 UI를 입체적으로 보이게 만듦.

추가 JavaScript 코드

팝업을 일정 시간 후 자동으로 닫거나, 닫기 버튼을 추가할 수 있습니다.

// 일정 시간 후 알림창 닫기
setTimeout(() => {
  const notification = document.querySelector('.notification-container');
  if (notification) {
    notification.style.opacity = '0';
    setTimeout(() => notification.remove(), 500); // 애니메이션 후 제거
  }
}, 5000);

실행 결과

알림창이 화면의 우측 하단에 등장하며, 슬라이드 효과로 표시됩니다.
fa-envelope 아이콘이 위아래로 살짝 움직이며 시각적 포인트를 줍니다.
헤더와 본문 디자인은 세련된 색상과 배경 효과를 사용했습니다.

이 코드는 사용자의 웹사이트에 화려하고 매력적인 알림창을 추가하는 데 적합합니다. 필요에 따라 색상과 내용을 조정하실 수 있습니다. 😊

popper.js라는 라이브러리로 위와 같이 멋진 쪽지를 만든 다는 것은 좋네요~

디자인도 이쁘고 아주 마음에 듭니다.

저작자표시 비영리 변경금지 (새창열림)

'IT tech Coding > javascript' 카테고리의 다른 글

조직도를 그리는 방법과 우리가 가져야 할 자세 (0)	2024.12.06
JavaScript에서 opener를 호출할 때 안전하게 다루는 방법 (0)	2024.12.04
Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies. 의미는 무엇인가? (0)	2024.11.27
첨부파일, 첨부이미지 멀티로 구글드라이브에 올리는 코드 개발 (0)	2024.11.22
웹개발시 자주 사용하는 파일업로드시, 저장시 등 활용모달 (0)	2024.11.19

My Coding World

[자바스크립트+html] Font Awesome 아이콘과 Popper.js를 조합하여 깔끔한 UI를 구현 (알람 내용 확인해 주세요) 구현

Popper.js의 주요 개념

Popper.js 사용법

1. Popper.js 포함

2. 기본 구조

3. JavaScript 코드

4. Options 설명

5. Popper.js로 알림 UI 적용

주요 사용 예

기본 구조 설명

HTML 코드

JavaScript로 Popper 생성하기

JavaScript 코드

주요 옵션 설명

완성된 예제

HTML 코드

JavaScript 코드

실행 결과

결론

개선된 HTML/CSS 코드

CSS 디자인

개선된 특징

추가 JavaScript 코드

실행 결과

'IT tech Coding > javascript' 카테고리의 다른 글

티스토리툴바

[자바스크립트+html] Font Awesome 아이콘과 Popper.js를 조합하여 깔끔한 UI를 구현 (알람 내용 확인해 주세요) 구현

Popper.js의 주요 개념

Popper.js 사용법

1. Popper.js 포함

2. 기본 구조

3. JavaScript 코드

4. Options 설명

5. Popper.js로 알림 UI 적용

주요 사용 예

기본 구조 설명

HTML 코드

JavaScript로 Popper 생성하기

JavaScript 코드

주요 옵션 설명

완성된 예제

HTML 코드

JavaScript 코드

실행 결과

결론

개선된 HTML/CSS 코드

CSS 디자인

개선된 특징

추가 JavaScript 코드

실행 결과

'IT tech Coding > javascript' 카테고리의 다른 글

관련글

티스토리툴바