[HTML5CSS3/003] NOTEPAD++ 간단한 사용방법 및 HTML개발환경 만들기

 

Notepad++를 간단하게 사용하는 방법을 함께 살펴보겠습니다. ^^
먼저 Notepad++를 실행합니다.

 

 

 

1. 실행부터 HTML로 언어 변경까지

실행하면 위와 같이 기본 창과 함께 실행됩니다.
그리고 html 개발환경이 잘 구축되었는지 확인해보기 위해서 <font>태그를 사용해보겠습니다.

 

 

 

그냥 검정색 글씨로만 출력되는 것을 보니, Nomal Text상태인 것 같네요.
그럼 HTML코딩을 위해서 언어환경을 바꿔볼까요?

 

 

 

메뉴에서 [언어]-[H]-[HTML]를 선택합니다.

 

 

 

HTML로 선택하면, 위와 같이 스타일이 변경된 것을 확인할 수 있습니다.

 

 

 

2. 앞으로 만들게 될 새 문서에 자동으로 HTML 스타일 적용되도록 환경설정하기

HTML스타일로 변경했다고 해서, 새 문서에도 자동으로 적용되는 것은 아닙니다. 그렇기 때문에 환경설정을 통해서 새 문서를 만들 때에도 자동으로 HTML스타일이 적용될 수 있도록 설정을 해야 합니다. 차근차근 살펴보겠습니다.

 

 

 

[설정]-[환결설정]으로 들어갑니다.

 

 

 

 

'새 문서'탭에서 [프로그래밍 언어] – [HTML]을 선택하신 후 닫기를 누릅니다.
이렇게 설정해 두시면 앞으로 새 문서를 열 때 자동으로 HTML 스타일이 적용됩니다.

 

 

 

3. 실행하기

자 그럼 새 문서에 간단하게 작성해보고 실행해볼까요?
제대로 말고 대충 작성하였으니, 이해해주시기 바랍니다. ^^

 

 

 

Hello World!
Gemiblog

 

 

 

위 코드를 작성한 후 반드시 저장을 하셔야 합니다. 저장하지 않으면 실행되지 않습니다.
저장하셨으면 단축키(ctrt + alt + shift + R)을 사용하시거나 메뉴를 통해 실행합니다.

 

 

 

메뉴를 통해 실행하고 싶으시다면,
[실행] – [Launch in Chrome]을 선택하시면 됩니다.
그런데 왜 Chrome을 사용해야 할까요? 이 점에 대해서는 따로 포스팅을 하겠습니다. ^^
미리 간단하게 말씀을 드리자면, HTML5를 가장 잘 지원하는 웹 브라우저가 Chrome입니다.

 

 

 

여담이 길었네요.
저장도 했고 실행도 했으니 결과물을 볼까요?

앞으로 결과물에 대해서는 스크린 샷이 아닌, 직접 보실 수 있도록 따로 링크를 걸도록 하겠습니다.
저의 수고에 대한 작은 대가를 위해 광고도 살짝 얹었으니 참고하시기 바랍니다. ^^;

 

>> 결과 보기 <<

 

 

 

생각보다 복잡하지 않죠?
혹시 궁금하신 점이나, 지적하실 점이 있다면 언제든지 댓글을 통해서 말씀해 주시면 감사하겠습니다. ^^

 

 

 

다음 글에서는 한글이 깨지는 문제를 해결하는 방법에 대해서 알아보도록 하겠습니다.

내용이 마음에 드신다면 공감(♡)을 눌러주세요.
로그인 하지 않으셔도 가능합니다. 감사합니다!