Unix 타임스탬프 변환기

Unix 타임스탬프를 사람이 읽을 수 있는 날짜로 즉시 변환하세요. 자동 시간대 감지, Discord 타임스탬프 지원 및 실시간 변환을 제공하는 무료 온라인 도구예요.

Open Object Storage Upload Example

현재 Unix 타임스탬프

0
연중 일수
-
연중 주차
-

내 시간대

자동 감지됨

Toast Demo

Test all toast notification types.

Modal System Demo

Try the reusable modal helper for informational and form-driven flows.

Unix 타임스탬프를 사람이 읽을 수 있는 날짜로

초 단위(10자리) 또는 밀리초 단위(13자리) 타임스탬프를 입력하세요
전체 날짜 및 시간: -
날짜만: -
시간만: -
연중 일수: -
연중 주차: -
상대 시간: -
ISO 8601: -

사람이 읽을 수 있는 날짜를 Unix 타임스탬프로

Unix 타임스탬프 (초): -
Unix 타임스탬프 (밀리초): -

Discord Timestamps

Discord에서 사용할 형식을 복사하세요. 각 사용자의 로컬 시간대로 표시돼요!
기본 (짧은 날짜 및 시간)
<t:0>
January 1, 1970 12:00 AM
짧은 시간 (:t)
<t:0:t>
12:00 AM
긴 시간 (:T)
<t:0:T>
12:00:00 AM
짧은 날짜 (:d)
<t:0:d>
01/01/1970
긴 날짜 (:D)
<t:0:D>
January 1, 1970
짧은 날짜/시간 (:f)
<t:0:f>
January 1, 1970 12:00 AM
긴 날짜/시간 (:F)
<t:0:F>
Thursday, January 1, 1970 12:00 AM
상대 시간 (:R)
<t:0:R>
54 years ago

Unix 타임스탬프란?

Unix 타임스탬프(Epoch 시간 또는 POSIX 시간이라고도 함)는 1970년 1월 1일 00:00:00 UTC(Unix epoch)부터 경과한 초 단위로 시간을 추적하는 시스템이에요. 이 표준화된 시간 형식은 전 세계의 프로그래밍, 데이터베이스 및 컴퓨터 시스템에서 널리 사용되고 있어요.

Unix 타임스탬프는 시간대와 무관하며 전 세계적으로 동일한 시점을 나타내요. 이는 시간대 변환으로 인해 복잡해질 수 있는 데이터베이스, API 및 애플리케이션에서 날짜와 시간을 저장하는 데 이상적이에요.

왜 이 Unix 타임스탬프 변환기를 사용해야 하나요?

즉시 변환

페이지 새로고침 없이 실시간 처리. 입력하는 즉시 결과를 확인하세요.

스마트 시간대 감지

자동으로 시간대를 감지하고 현지 시간으로 변환을 보여줘요.

Discord 준비 완료

메시지에 사용할 Discord 타임스탬프 형식을 즉시 생성하세요.

Unix 타임스탬프의 일반적인 사용 사례

소프트웨어 개발

개발자들은 이벤트 로깅, 작업 예약, 사용자 활동 추적, 애플리케이션의 시간 기반 작업 관리를 위해 Unix 타임스탬프를 사용해요.

데이터베이스 관리

Unix 형식으로 타임스탬프를 저장하면 다양한 시스템에서 일관된 시간 표현이 보장되고 날짜 계산이 더 효율적이 돼요.

API 통합

많은 API가 날짜 및 시간 매개변수에 Unix 타임스탬프를 사용하므로, 사람이 읽을 수 있는 날짜와 타임스탬프 간의 변환이 필수적이에요.

Discord 봇 및 메시지

Discord는 특수 형식의 Unix 타임스탬프를 사용하여 각 사용자의 현지 시간대에 시간을 자동으로 표시해요.

Custom Dropdown Examples

Enhanced dropdown select components with icons, images, badges, search, and multi-select support.

Basic Dropdown

Dynamic Options (Add Button Next to Dropdown)

Total options: 0

Dropdown with Icons

Dropdown with Badges

Searchable Dropdown

Multi-Select Dropdown

Multi-Select with Search

Full-Featured Example

Custom Dropdown Features: These dropdowns support icons, images, badges, search functionality, multi-select with checkboxes, option groups, keyboard navigation, and full accessibility. Add data-dropdown attribute to any select element to enable.

Collapse/Spoiler System Examples

Reusable collapsible sections for FAQ, extra options, and more. Features auto icons, state persistence, and multiple variants.

Basic Collapse

This is a basic collapsible section. The state is saved to localStorage by default, so it will remember if you opened or closed it when you refresh the page.

Perfect for hiding extra options, additional information, or lengthy content.

Default Open (with state saving)

This collapse starts open but still saves its state. Try closing it and refreshing the page - it will stay closed!

Add data-collapse-open attribute to start in open state.

No State Persistence

This collapse doesn't save its state to localStorage. It will always start closed when you refresh.

Add data-collapse-no-save attribute to disable state persistence.

FAQ Section

A Unix timestamp is the number of seconds that have elapsed since January 1, 1970 (midnight UTC), not counting leap seconds. It's a widely used standard for representing time in computer systems.

Simply enter your Unix timestamp in the converter above! You can also use programming languages like JavaScript: new Date(timestamp * 1000) or Python: datetime.fromtimestamp(timestamp).

Unix timestamps are timezone-independent, making them perfect for storing dates in databases and APIs. They're also easier to perform calculations with since they're just numbers.

Accordion Mode (only one open at a time)

const timestamp = Math.floor(Date.now() / 1000);
console.log(timestamp); // Current Unix timestamp
import time
timestamp = int(time.time())
print(timestamp)  # Current Unix timestamp
$timestamp = time();
echo $timestamp; // Current Unix timestamp

Color Variants

This uses the primary color scheme.

This uses the success color scheme with a badge.

This uses the info color scheme.

This uses the warning color scheme.

This uses the danger/error color scheme.

This uses a minimal, borderless style.

고급 옵션

Data Attributes

  • data-collapse-open - Start in open state (default: closed)
  • data-collapse-no-save - Disable state persistence (default: enabled)
  • data-collapse-key="unique_key" - Custom localStorage key
  • data-collapse-accordion - Enable accordion mode (close others when opening)
  • data-collapse-group="group_name" - Accordion group name
  • data-collapse-duration="500" - Animation duration in milliseconds

CSS Classes

  • .collapse-container - Main container (required)
  • .collapse-header - Clickable header (required)
  • .collapse-content - Collapsible content (required)
  • .collapse-faq - FAQ-specific styling
  • .collapse-group - Wrapper for grouped collapses
  • .variant-* - Color variants (primary, success, info, warning, danger, minimal, flush)

JavaScript API

// Get instance
const collapse = window.Collapse.getInstance(element);

// Methods
collapse.toggle();  // Toggle open/close
collapse.open();    // Open
collapse.close();   // Close

// Static methods
window.Collapse.openAll();   // Open all collapses
window.Collapse.closeAll();  // Close all collapses

// Create with options
new window.Collapse(element, {
  defaultOpen: false,
  saveState: true,
  accordion: false,
  onOpen: (instance) => console.log('Opened!'),
  onClose: (instance) => console.log('Closed!'),
  onToggle: (isOpen, instance) => console.log('Toggled:', isOpen)
});
Collapse Features: Auto-rotating chevron icons, localStorage state persistence (remembers open/close), accordion mode, color variants, badges, full keyboard navigation, accessibility support (ARIA), smooth animations, and mobile-optimized.

Tab System Examples

Tabbed content navigation with state persistence. Each tab displays different pre-written content with automatic active state management.

Basic Tabs

Welcome to the Tab System

This is the overview tab. Tabs automatically remember which tab you had selected when you refresh the page using localStorage.

Use the arrow keys to navigate between tabs, or click on them directly. The system is fully accessible with ARIA support.

Key Features

  • State persistence (remembers active tab)
  • Keyboard navigation (Arrow keys, Home, End)
  • Multiple style variants (default, pills, boxed, minimal, vertical)
  • Color themes
  • Icons and badges support
  • Deep linking with URL hashes
  • Fully accessible (ARIA)
  • Mobile optimized

사용 방법

Add the following HTML structure to create tabs:

<div class="tab-container" data-tab-key="unique_key">
  <ul class="tab-nav">
    <li><button class="tab-button">Tab 1</button></li>
    <li><button class="tab-button">Tab 2</button></li>
  </ul>
  <div class="tab-content-area">
    <div class="tab-panel">Content 1</div>
    <div class="tab-panel">Content 2</div>
  </div>
</div>

Pills Variant

Code Editor

Pills variant uses rounded, filled buttons for active tabs. This style is popular for code editors and development tools.

function hello() {
  console.log('Hello from the code tab!');
}

실시간 미리보기

This tab would show a live preview of your code. Each tab's content is pre-written and hidden until selected.

Code compiled successfully!

Configuration

Configure your preferences here. Tab state is automatically saved to localStorage.

Tabs with Badges

Inbox Messages

You have 3 new messages in your inbox. Badges can be used to show counts or status.

New message from Admin

Starred Items

12 items are marked as important. You can use badges to show counts, status, or notifications.

Deleted Items

Your trash is empty. Items are permanently deleted after 30 days.

Boxed Variant

HTML Structure

Boxed variant uses bordered, box-style buttons. Great for segmented controls and tool panels.

<div class="tab-container variant-boxed">
  <!-- Tab navigation -->
</div>

CSS Styling

.tab-container.variant-boxed .tab-button {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-small);
}

JavaScript

// Tabs auto-initialize on page load
const tabs = Tabs.getInstance(element);
tabs.activate(1); // Switch to second tab

Minimal Variant

Personal Information

Minimal variant has no borders or background, perfect for clean, minimal designs.

Security Settings

Manage your security preferences and two-factor authentication.

Notification Preferences

Choose which notifications you want to receive.

개인정보 제어

Control who can see your information and activity.

Vertical Tabs

Your Profile

Vertical tabs place navigation on the left side. Perfect for settings pages and dashboards.

Note: On mobile devices, vertical tabs automatically switch to horizontal layout for better usability.

Messages

View and manage your messages here.

알림

Stay updated with your latest notifications.

System Settings

Configure your application settings and preferences.

Color Variants

Success color variant with pills style.

Great for positive actions and confirmations.

Info color variant with pills style.

Perfect for informational content.

Warning color variant with pills style.

Use for warnings and important notices.

Danger color variant with pills style.

Use for errors and destructive actions.

Advanced Options & API

Data Attributes

  • data-tab-key="unique_key" - Custom localStorage key for state persistence
  • data-tab-default="2" - Set default active tab (0-based index, default: 0)
  • data-tab-no-save - Disable state persistence (default: enabled)
  • data-tab-no-animate - Disable animations
  • data-tab-no-keyboard - Disable keyboard navigation
  • data-tab-deep-link - Enable URL hash deep linking
  • data-tab-id="custom" - Custom ID for deep linking (on tab buttons)

CSS Classes

  • .tab-container - Main container (required)
  • .tab-nav - Navigation list (required)
  • .tab-button - Tab button (required)
  • .tab-content-area - Content wrapper (required)
  • .tab-panel - Tab content panel (required)
  • Variants: .variant-pills, .variant-boxed, .variant-minimal, .variant-vertical
  • Colors: .color-success, .color-info, .color-warning, .color-danger
  • 정렬: .align-center, .align-right, .full-width

JavaScript API

// Get instance
const tabs = window.Tabs.getInstance(element);

// Navigation methods
tabs.activate(2);     // Switch to tab at index 2
tabs.next();          // Go to next tab
tabs.previous();      // Go to previous tab
tabs.first();         // Go to first tab
tabs.last();          // Go to last tab

// Tab control
tabs.disableTab(1);   // Disable tab at index 1
tabs.enableTab(1);    // Enable tab at index 1

// State management
tabs.clearState();    // Clear saved state

// Create with options
new window.Tabs(element, {
  defaultTab: 0,
  saveState: true,
  keyboard: true,
  deepLink: false,
  onChange: (index, instance) => {
    console.log('Tab changed to:', index);
  },
  onBeforeChange: (newIndex, oldIndex, instance) => {
    // Return false to prevent tab change
    return true;
  }
});

// Listen to tab change events
element.addEventListener('tabchange', (e) => {
  console.log('Changed to:', e.detail.index);
});
Tab Features: localStorage state persistence (remembers active tab), keyboard navigation (Arrow keys, Home, End), multiple style variants, color themes, icons and badges, deep linking support, fully accessible (ARIA), smooth animations, and mobile-optimized with responsive layout.