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);
}

미리보기

웹 데모

HTML과 CSS 코드를 입력하면 별도의 프로그램 설치 없이 웹 브라우저에서 바로 결과를 확인할 수 있는 도구입니다.

기능 소개

실시간 미리보기: HTML/CSS 코드를 입력하면 즉시 결과 확인
별도 설치 불필요: 웹 브라우저만 있으면 바로 사용 가능
코드 편집기: 문법 하이라이팅과 자동 들여쓰기 지원
반응형 테스트: 다양한 화면 크기에서 결과 확인 가능
빠른 프로토타이핑: 아이디어를 빠르게 시각화

사용법

HTML 영역에 웹페이지 구조를 작성하세요
CSS 영역에 스타일링 코드를 입력하세요
미리보기 영역에서 실시간으로 결과를 확인할 수 있습니다
코드를 수정하면 자동으로 미리보기가 업데이트됩니다

활용 예시

학습 목적: HTML/CSS 기초 학습 및 연습 프로토타이핑: 웹사이트 레이아웃 및 디자인 아이디어 테스트 디버깅: 코드 문제 해결 및 실험 교육: 웹 개발 수업이나 튜토리얼에서 활용

웹 개발 초보자부터 전문가까지 누구나 쉽게 사용할 수 있는 실용적인 웹 개발 도구입니다.

Studio NFP

웹 데모

웹 데모

기능 소개

사용법

활용 예시