웹 데모

스튜디오 NFP 홈 작업을 위한 전문 도구 모음

웹 데모 뷰어 텍스트 카운터 이미지 압축기 QR코드 생성기 워터마크 생성기 이미지 포맷 변환 이미지 크기 조절 이미지 자르기 이미지 분할기 이미지 맵 생성기 컬러 조합기 컬러 팔레트 생성기 (조화) 컬러 팔레트 생성기 (랜덤) 단색 컬러 카드 그라데이션 컬러 카드 이미지 컬러 추출기 그라데이션 2컬러 팔레트 그라데이션 3컬러 팔레트 커스텀 QR코드 생성기 더미 텍스트 생성기 단위 변환기 폰트 변환기 날짜 계산기 사이즈 계산기 그리드 계산기 base64 인코딩/디코딩 URL 인코딩/디코딩 PDF 압축기 PDF 분할기 PDF 합치기 가위바위보 두더지 잡기 탁구 게임 벽돌깨기 플래피 버드 스네이크 게임 로또 번호 생성기 강화 시뮬레이터 오늘 뭐먹지? 오늘의 운세

HTML과 CSS 코드를 실시간으로 작성하고 결과를 바로 확인할 수 있는 온라인 코드 에디터입니다.
웹 개발 학습, 프로토타입 제작, 코드 테스트에 활용해보세요.

실시간 미리보기 • HTML/CSS 탭 전환 • 새 탭으로 열기 • 코드 다운로드 지원

코드 에디터

HTML

CSS

body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin: 0;
padding: 40px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.container {
    background: white;
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

h1 {
    color: #333;
    margin-bottom: 20px;
    font-size: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

p {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

.btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

미리보기