---

웹사이트 게시판이나 메뉴에서 새로운 게시글이나 알림이 등록되었음을 직관적으로 알려주기 위해 **NEW 아이콘(N 표시)**을 자주 사용합니다. 이번 포스팅에서는 별도의 이미지 파일 없이 Pure CSS의 ::after 가상 요소를 활용하여 깔끔한 'N' 뱃지를 구현하는 방법과 활용 예제를 소개합니다.

1. CSS 스타일시트 작성

부모 요소에 position: relative를 부여하고, ::after 가상 선택자를 이용해 동그란 원 형태의 'N' 뱃지를 절대 좌표(position: absolute)로배치합니다.

/* 새로운 글 N 뱃지 스타일 */
.ic-new {
    position: relative;
    padding-right: 25px; /* N 뱃지가 들어갈 오른쪽 여백 확보 */
}

.ic-new::after {
    content: "N";
    display: inline-block;
    background: #ff6600; /* 뱃지 배경색 지정 */
    width: 18px;
    height: 18px;
    color: #fff;
    text-align: center;
    font-size: 10px;
    line-height: 18px;
    border-radius: 100%; /* 정원 형태 유지 */
    position: absolute;
    right: 3px;
    top: 5px;
}

2. HTML 태그 적용 및 사용 예시

클래스명 ic-new를 버튼, 링크(<a>), 리스트 항목 등에 추가하여 손쉽게 'N' 표시를 노출할 수 있습니다.

<!-- 버튼에 적용하는 경우 -->
<button type="button" class="ic-new">새로운 피드</button>

<!-- 메뉴 링크에 적용하는 경우 -->
<a href="#" class="ic-new">자유게시판</a>

3. 주요 속성 및 응용 팁

위 스타일을 프로젝트 디자인 가이드에 맞게 커스텀할 때 참고할 주요 포인트입니다.

• 위치 조정: 부모 요소의 높이나 폰트 크기에 따라 뱃지 위치가 어색할 경우 top과 right 값을 수소폭 조정하여 맞춥니다.
• 배경색 변경: 브랜드 컬러나 포인트 컬러에 맞춰 background 속성값(#ff9a31, #e74c3c 등)을 변경할 수 있습니다.
• 텍스트 중앙 정렬: height와 line-height를 동일한 값(18px)으로 설정하여 'N' 문자가 세로 중앙에 올바르게 오도록 처리했습니다.