Message

Message (메시지 컬렉션)

Message는 사용자에게 정보, 경고, 오류, 성공 같은 피드백을 전달하는 요소예요. 리스트 형태나 아이콘을 포함할 수 있고, 색상과 크기 변형으로 상황에 맞게 꾸밀 수 있어요.

출처: 문서

본문

Types (유형)

Message (메시지)

기본 메시지예요.

Changes in Service (서비스 변경 안내)

List Message (리스트 메시지)

리스트가 있는 메시지예요.

New Site Features (새 사이트 기능)
      
      
        You can now have cover images on blog pages (이제 블로그 페이지에 커버 이미지를 사용할 수 있어요)
        Drafts will now auto-save while writing (작성 중 초안이 자동 저장됩니다)

Icon Message (아이콘 메시지)

  Flexbox

메시지는 아이콘을 포함할 수 있어요.

Have you heard about our mailing list? (우리 메일링 리스트에 대해 들어보셨나요?)

우리가 그 콘텐츠를 불러오고 있어요.

Just one second (잠시만요)

Dismissable Block (닫을 수 있는 블록)

사용자가 숨길 수 있는 메시지예요.

Welcome back! (다시 오신 것을 환영합니다!)
      
      
    
    
      
      
      $('.message .close')
        .on('click', function() {
          $(this)
            .closest('.message')
            .transition('fade')
          ;
        })
      ;

States (상태)

Hidden (숨김)

메시지는 숨길 수 있어요.

Visible (보임)

메시지는 강제로 보이도록 visible로 설정할 수 있어요.

Variations (변형)

Center Aligned (가운데 정렬)

메시지는 가운데 정렬로 표시할 수 있어요.

New Version is available! (새 버전이 있습니다!)

Right Aligned (우측 정렬)

메시지는 우측 정렬로 표시할 수 있어요.

New Version is available! (새 버전이 있습니다!)

Floating (플로팅)

메시지는 관련된 콘텐츠 위에 떠 있을 수 있어요.

Compact (컴팩트)

메시지는 콘텐츠의 너비만 차지할 수 있어요.

Attached (부착)

메시지는 다른 콘텐츠에 스스로 부착되도록 포맷할 수 있어요.

Welcome to our site! (우리 사이트에 오신 것을 환영합니다!)
      
      
    
    
      
        
          First Name (이름)
          
        
        
          Last Name (성)
          
        
      
      
        Username (사용자 이름)
        
      
      
        Password (비밀번호)
        
      
      
        
          
          I agree to the terms and conditions (이용약관에 동의합니다)
        
      
      Submit (제출)
    
    
      
      Already signed up? Login here instead. (이미 가입하셨나요? 대신 여기서 로그인하세요.)

Warning (경고)

메시지는 경고 메시지를 표시하도록 포맷할 수 있어요.

You must register before you can do that! (그렇게 하려면 먼저 등록해야 해요!)
      
      Visit our registration page, then try again (회원가입 페이지를 방문한 후 다시 시도하세요)

Info (정보)

메시지는 정보를 표시하도록 포맷할 수 있어요.

Was this what you wanted? (원하던 것이 이것인가요?)
      
      
        It's good to see you again. (다시 만나서 반가워요.)
        Did you know it's been a while? (좀 오래됐다는 거 아셨나요?)

Positive / Success (긍정/성공)

메시지는 긍정적인 메시지를 표시하도록 포맷할 수 있어요.

Positive/Success and Negative/Error messages by default use similar colors, but each has their own color  variables that can be distinguished in your theme.

Positive/Success와 Negative/Error 메시지는 기본적으로 비슷한 색을 쓰지만, 각각 고유한 색 변수를 가지고 있어 테마에서 구분할 수 있어요.

You are eligible for a reward (보상을 받을 자격이 있어요)

이제 선택한 사용자 이름으로 로그인할 수 있어요.

Your user registration was successful. (회원 등록이 성공했어요.)

Negative / Error (부정/오류)

메시지는 부정적인 메시지를 표시하도록 포맷할 수 있어요.

We're sorry we can't apply that discount (죄송하지만 그 할인을 적용할 수 없어요)

There were some errors with your submission (제출에 몇 가지 오류가 있었어요)
      
      
        You must include both a upper and lower case letters in your password. (비밀번호는 대문자와 소문자를 모두 포함해야 해요.)
        You need to select your home country. (거주 국가를 선택해야 해요.)

Colored (색상)

메시지는 다른 색상으로 포맷할 수 있어요.

Red (빨강)
    Orange (주황)
    Yellow (노랑)
    Olive (올리브)
    Green (초록)
    Teal (청록)
    Blue (파랑)
    Violet (보라)
    Purple (자주)
    Pink (분홍)
    Brown (갈색)
    Black (검정)

Size (크기)

메시지는 다른 크기를 가질 수 있어요.

This is a mini message. (미니 메시지예요.)
    
    
      This is a tiny message. (타이니 메시지예요.)
    
    
      This is a small message. (스몰 메시지예요.)
    
    
      This is large (이것은 라지예요)
    
    
      This is big (이것은 빅이에요)
    
    
      This is huge (이것은 휴즈예요)
    
    
      This is massive (이것은 매시브예요)

더 알아보기 (Learn more)

Message는 사용자 피드백을 전달하는 핵심 요소예요. 폼 검증과 함께 쓰면 error 메시지 블록이 자동으로 채워지고, visible 클래스로 항상 표시되도록 제어할 수 있어요. 색상 변형으로 긍정/부정/경고/정보를 상황에 맞게 구분해 보세요.