HTML, CSS 및 JS 온라인 실행

하나의 편집기에서 HTML, CSS, JavaScript를 사용하여 완전한 웹페이지를 작성하세요.

소개

최신 웹 페이지는 구조를 위한 HTML, 스타일을 위한 CSS, 상호작용을 위한 JavaScript라는 세 가지 핵심 기술로 구축되었습니다. 우리의 온라인 코드 실행기는 단일 편집기에서 세 가지를 모두 지원합니다. 완전한 웹 페이지를 작성하고 즉시 렌더링되는 것을 확인하세요.

HTML, CSS, JS를 함께 작성하는 방법

HTML Code Runner에서 CSS와 JavaScript가 인라인으로 포함된 완전한 HTML 문서를 작성합니다. 함께 작동하는 방법은 다음과 같습니다.

  • HTML — 페이지의 구조와 콘텐츠를 정의합니다.
  • CSS — 에서
  • 자바스크립트 —

예: HTML, CSS 및 JavaScript 결합

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 2rem; }
    button { padding: 0.8rem 2rem; font-size: 1.1rem; cursor: pointer; }
    #counter { font-size: 3rem; margin: 1rem; color: #6C5CE7; }
  </style>
</head>
<body>
  <h1>Click Counter</h1>
  <div id="counter">0</div>
  <button onclick="count()">Click Me</button>
  <script>
    let n = 0;
    function count() {
      n++;
      document.getElementById('counter').textContent = n;
    }
  </script>
</body>
</html>

당신이 만들 수 있는 것

  • 유효성 검사가 포함된 대화형 양식
  • 애니메이션 방문 페이지
  • 데이터 시각화 대시보드
  • 게임 프로토타입
  • CSS 아트 및 애니메이션
  • API 연결 애플리케이션(외부 데이터 가져오기)

다중 언어 코드에 대한 팁

  • FOUC(스타일이 지정되지 않은 콘텐츠의 플래시)를 방지하려면 에 CSS를 넣으세요.
  • 끝에 JavaScript를 넣거나 defer를 사용하세요.
  • 콘솔 출력 패널을 사용하여 JavaScript 오류 디버그
  • 브라우저 창 크기를 조정하여 반응형 디자인을 테스트하세요.

자주 묻는 질문

예. CDN에서 외부 리소스를 로드하려면 CSS용 링크 태그와 src 속성이 있는 스크립트 태그를 사용하세요.

예. HTML 헤드 섹션에 Bootstrap CDN 링크를 포함하면 모든 Bootstrap 클래스가 미리보기에서 작동합니다.

예. jQuery CDN 스크립트 태그를 포함하면 코드에서 jQuery 구문을 사용할 수 있습니다.

관련 자료