음악, 삶, 개발

서버없이 로컬에서 실행가능한 단일 index.html 파일 만들기 본문

개발 Web/HTML & CSS

서버없이 로컬에서 실행가능한 단일 index.html 파일 만들기

Lee_____ 2021. 11. 25. 17:30

single page application 을 개발할때 보통 아래와 같이 html 파일을 생성한다.

/* index.html - 단일 실행 불가. server 필요 */
<html>
  <head>
    <link href="style.css">
    <script src="index.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

 

index.html 파일안에 css 파일과 index.js 파일을 로딩하는것이다.

이렇게 될 경우 index.html, style.css, index. js 3개의 파일을 함께 배포해야한다.

또한 랜더린된 화면을 보기위해서는  server 가 필요하다.

 

server 가 필요없이 그냥 내 컴퓨터안에서 index.html 파일을 더블클릭함으로써 화면을 보고싶다면

css 파일안에 모든 내용을 style 태그안에 집어놓고,

script 태그안에 index.js 의 모든 내용을 복사 붙여넣기 해줘야한다.

 

/* index.html : 단일 실행 가능, 서버 불필요 */

<html>
  <body>
  
    <div id="root">
    	<style>
            /* css codes.. */
        </style>
    </div>
    
    <script> 
        /* js codes... */
    </script>
    
  </body>
</html>

 

'개발 Web/HTML & CSS' Related Articles more