html 코드 실행

오늘은 메모장으로 간단하게 코딩해서 페이지를 출력하는 것과 WAMP를 이용해서 페이지에 출력하는

것에 대해 알아보겠습니다.

​

1. 메모장 코딩

이 방법은 별다른 사전 작업 없이도 간단하게 html 코드의 결과를 보기 쉽습니다.

(코드는 바로 전 포스팅인 css transition의 코드를 가져왔습니다.)

​

일단 메모장에 이렇게 코드를 적어넣고 저장을 할 때 파일의 확장명을 .txt가 아닌 .html로 바꾸겠습니다.

이렇게 바꾸고 저장을 하면 탐색기에서 그 파일을 볼 때 .txt가 아닌 다른 모양의 파일이 나오게 됩니다.

이제 실행을 시켜볼 텐데, 저는 크롬 브라우저를 쓰기 때문에 크롬 브라우저를 기준으로 설명드리겠습니다.

크롬창을 켜고, 파일 탐색기에서 해당 파일을 클릭하여 브라우저 위로 올려놓거나 브라우저의 주소창에

파일의 경로를 쓰면 메모장으로 코딩했던 내용이 브라우저에 출력될 겁니다.

저는 D드라이브에 저장했기 때문에 주소창에 이렇게 뜨게 되고,

페이지의 내용도 잘 뜨는 것을 확인할 수 있습니다.

 

 

2. WAMP 이용

https://begindevelop.tistory.com/3?category=1027827 

WAMP 설치, grid와 미디어 쿼리

(WAMP를 설치하는 방법은 검색이나 제 전 포스팅을 보고 설치하시면 됩니다.)

​

설치를 완료하시면 Bitnami라는 폴더가 설치하기로 했던 위치에 생성이 될 것입니다.

순서대로, Bitnami > wampstack-8.0.11-0 > apache2 > htdocs 폴더를 따라 들어가시면

됩니다.

​

참고로 htdocs 폴더 안에 들어가면 기본으로 index.html이란 파일이 있을 겁니다.

WAMP를 설치하고 나서 보통 WAMP가 잘 작동하는지 테스트할 때 브라우저의 주소창에

localhost라고 쳤을 때

이런 창이 나오면 WAMP가 성공적으로 설치되었다고 보는 판단의 기준이 있는데,

폴더를 타고 들어가면 있는 htdocs 안의 index.html 파일이 바로 저 페이지의 내용입니다.

​

이렇게 htdocs를 발견했으면, 이제 앞으로 코딩을 하고 htdocs 폴더 안에 그 파일을 저장시킵니다.

그리고 실행할 때 localhost 뒤에 파일의 경로를 써 주시면 그 페이지가 정상적으로 실행되는 것을

볼 수 있을 겁니다.

​

예를 들어,

https://begindevelop.tistory.com/4?category=1027825 

사전 준비&페이지 header 제작(1)

제가 했던 이 페이지는 htdocs 폴더 안에 webproject01이라는 폴더를 만들고 그 안에 css라던지

html 파일, 이미지 파일들을 모아놓고 실행을 시켰었습니다.

이렇게 경로를 치고 들어가면,

해당 페이지의 내용이 잘 나오는 것을 확인할 수 있습니다.

​

​

​

​

물론 메모장으로 html 코딩을 하기엔 자동완성 기능이 없다던가 하는 불친절한 환경 때문에 에디터를

많이 쓰고 있습니다.

(저는 atom이라는 에디터를 사용합니다.)

에디터도 종류가 많으니 검색해보시고 본인에게 맞는 에디터를 사용하시는 것을 권장드리고,

오늘은 이렇게 html 코드가 어떻게 페이지에 보여지는지에 대해 다뤄보는 시간을 가졌습니다.