notepad++의 경우 플러그인을 통해 추가적인 기능을 사용 할 수 있습니다.

Explorer 플러그인의 경우 윈도우의 파일탐색기와 같은 기능을

notepad++ 인터페이스 화면에 추가하여

파일의 경로를 확인하며 작업 할 수 있는 플러그인 입니다.

 

 

Explorer 플러그인이 적용된 Notepad++ 화면

 

 

 

상단 메뉴의 [플러그인]->[plugins Admin...]을 클릭 하세요

 

 

위 화면과 같은 플러그인 어드민 창이 뜨면

[Available] 탭에서 Search 부분에 'explorer'를 검색하여 찾으시거나,

스크롤을 내려 Explorer를 선택하신 후 Install 버튼을 클릭합니다.

 

 설치가 진행되면서 위와 같은 경고 창이 뜨는데요,

 notepad++를 재실행하기 위한 경고창이니 [예]를 눌러주시면

플러그인 설치가 완료 된 후 notepad++가 재실행됩니다.

 

 

메뉴바의 [플러그인]을 선택 하시면

Explorer 플러그인이 설치되어 진것을 확인 할 수 있습니다.

 

저작자표시 비영리 변경금지

'프로그램 설치' 카테고리의 다른 글

[Notepad++] HTML 개발환경 설정하기  (0) 2022.07.15
[Notepad++] Plugin Newfile&Browser 설치 및 세팅하기  (0) 2022.07.15
코딩에 적합한 Monaco Font  (0) 2022.07.15
[Notepad++] 단축키 설정하기  (0) 2022.07.15
[Notepad++] 설치하기  (0) 2022.07.15

HTML5&CSS3 코딩작업을 하기 위한 기본 환경설정 방법

 

노트패드를 설치 하신 후 바로 실행하기를 하시면 위와 같은 로그 창이 보여집니다.

 

프로그램 화면 상단의 메뉴바에서

[설정]->[스타일 설정]으로 들어 갑니다.

 

[스타일 설정]창에서 다음과 같이 설정을 바꾸어 줍니다.

 

  1. 테마 선택 : Defalt(stylers.xml)
  2. 언어 : Global Styles (글로벌 스타일) / 스타일 : Global override (글로벌 오버라이드)
  3. 글꼴 스타일 : 사용할 글꼴 선택
  4. [전역 글꼴 사용] 과 [전역 글꼴 크기 사용] 체크

 

글꼴 설정을 마치신 다음

상단 메뉴바 [언어]->[H]->[HTML] 로 선택을 해줍니다.

 

 

 

notepad++ 의 기본 html&css 환경설정이 끝났습니다:D

 

저작자표시 비영리 변경금지

'프로그램 설치' 카테고리의 다른 글

[Notepad++] Plugin Explorer 설치하기  (0) 2022.07.15
[Notepad++] Plugin Newfile&Browser 설치 및 세팅하기  (0) 2022.07.15
코딩에 적합한 Monaco Font  (0) 2022.07.15
[Notepad++] 단축키 설정하기  (0) 2022.07.15
[Notepad++] 설치하기  (0) 2022.07.15

 

 

HTML/CSS등의 코딩작업을 하다보면 

HTML 페이지의 기본 구조 및 필수로 작성해야하는

코드 등이 존재 합니다.

 

Newfile&Browser 플러그인의 경우 

notepad++ 프로그램에서 여러가지 언어로 template을 작성하여,

보다 빠른 작업을 도와주는 플러그인 입니다.

 

 

메뉴바의 [플러그인]->[Plugins Admin...]을 클릭 해주세요.

 

위 화면과 같은 플러그인 어드민 창이 뜨면

[Available] 탭에서 Search 부분에 'NewFileBrowser'를 검색하여 찾으시거나,

스크롤을 내려 NewFileBrowser를 선택하신 후 Install 버튼을 클릭합니다.

 

 설치가 진행되면서 위와 같은 경고 창이 뜨는데요,

 notepad++를 재실행하기 위한 경고창이니 [예]를 눌러주시면

플러그인 설치가 완료 된 후 notepad++가 재실행됩니다.

메뉴바의 [플러그인]->[Newfile&Browser]->[Option] 항목을 클릭 해주세요.

 

 

  1. Total Count : 사용할 템플릿의 개수를 지정하는 옵션
  2. New File no. : 사용할 템플릿의 파일넘버가 앞서 지정한 개수만큼 생성
  3. File Type : 선택한 파일의 사용 언어 설정
  4. File Name : 템플릿 파일의 이름을 지정하는 곳
  5. [Edit initial Text] : 기본 프리셋 템플릿 파일을 지정하도록 템플릿 코드창을 불러오는 버튼
  6. [Save] : 지정된 값을 템플릿으로 저장

위의 그림과 같이 1~4번을 설정 하신 후

5번 [Edit initial Text] 버튼을 눌러 템플릿 코드창을 불러옵니다.

 

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>NEW</title>
<link href="./style/.css" rel="stylesheet" type="text/css" />
</head>
<body>


</body>
</html>

위의 코드를 복사 하신 후 코드창에 붙여 넣어 주세요.

 

메뉴바의 [인코딩]->[UTF-8 (BOM 없음)로 표시]를 선택 하신 후

 [Save] 버튼을 눌러 저장 해주세요.

 

Ctrl + S를 눌러 템플릿 파일 자체를 한번 더 저장 해주세요.

 

 

File2의 경우 위의 그림과 같이 셋팅 해주신 후

[Edit initial Text] 버튼을 눌러 템플릿 코드창을 불러옵니다. 

 

@charset "utf-8";

위의 코드 1줄을 복사하여 붙여 넣어 주세요.

 

 

HTML 템플릿과 마찬가지로 

메뉴바의 [인코딩]->[UTF-8 (BOM 없음)로 표시]를 선택 하신 후

 [Save] 버튼을 눌러 저장 해주세요.

Ctrl + S를 눌러 템플릿 파일 자체를 한번 더 저장 해주세요.

 

저작자표시 비영리 변경금지

'프로그램 설치' 카테고리의 다른 글

[Notepad++] Plugin Explorer 설치하기  (0) 2022.07.15
[Notepad++] HTML 개발환경 설정하기  (0) 2022.07.15
코딩에 적합한 Monaco Font  (0) 2022.07.15
[Notepad++] 단축키 설정하기  (0) 2022.07.15
[Notepad++] 설치하기  (0) 2022.07.15

 

위의 이미지 처럼

l I 1

l(소문자 엘) I (대문자 아이) 1(숫자 일)


세 문자를 입력 한 후에

문자가 명확히 구분되어지는 폰트를 사용해야 합니다.

 

디버깅과 오타 등을 바로 잡기 위함이며

위의 궁서와 바탕체와 같이

l과1의 구분이 모호 한 경우 디버깅에 어려움을 겪기 때문에

오류와 오타를 잡아내기 쉽지 않습니다.

 

개발 전, 에디트 프로그램에 세팅 된 폰트를

반드시 확인하시고 작성 해주세요:D

 

 

 

 

코딩용 폰트 Monaco

 

Monaco.ttf
2.31MB

 

Monaco Font의 경우 맥의 기본 폰트이나

IBM Window에 설치하여 사용 가능 합니다.

저작자표시 비영리 변경금지

'프로그램 설치' 카테고리의 다른 글

[Notepad++] Plugin Explorer 설치하기  (0) 2022.07.15
[Notepad++] HTML 개발환경 설정하기  (0) 2022.07.15
[Notepad++] Plugin Newfile&Browser 설치 및 세팅하기  (0) 2022.07.15
[Notepad++] 단축키 설정하기  (0) 2022.07.15
[Notepad++] 설치하기  (0) 2022.07.15

 

%AppData%\Notepad++

 

실행 창에 위의 명령어를 입력합니다.

 

shortcuts.xml 파일을 마우스 오른쪽 버튼

[연결프로그램]-[메모장]으로 열어줍니다.

 

주석문 바깥에 아래 코드를 복사하여 붙여넣어주세요

<Command name="Launch in Chrome" Ctrl="yes" Alt="yes" Shift="yes" Key="82">chrome &quot;$(FULL_CURRENT_PATH)&quot;</Command>

 

저작자표시 비영리 변경금지

'프로그램 설치' 카테고리의 다른 글

[Notepad++] Plugin Explorer 설치하기  (0) 2022.07.15
[Notepad++] HTML 개발환경 설정하기  (0) 2022.07.15
[Notepad++] Plugin Newfile&Browser 설치 및 세팅하기  (0) 2022.07.15
코딩에 적합한 Monaco Font  (0) 2022.07.15
[Notepad++] 설치하기  (0) 2022.07.15

 

 

 

 

노트패드++ 설치 바로가기

 

32-bit Instraller 를 다운로드 받아 주세요.

 

 

다운완료 후 exe파일을 실행시켜 줍니다.

 

 

Language(언어) 선택을 [한국어]로 해주신 후 [OK]를 눌러 설치를 진행 합니다.

 

[다음]버튼을 눌러 설치를 진행 해주세요.

 

[Create Shortcut on Desktop] 을 체크 해주신 후 [설치] 버튼을 눌러주세요.

 

[설치 형태 선택] 에서 [사용자 정의]가 체크 되어 있는지 확인 후 [다음] 버튼을 눌러 주세요.

 

설치경로의 경우 추후 플러그인 등의 설정이 용이하도록 C드라이브에 설치 해주세요.

 

 

사용권 계약 [동의함] 을 눌러 주시면 설치가 완료 됩니다.

 

 

 

 

[마침]을 누르시면 설치완료됨과 동시에 Notepad++가 실행 됩니다.

저작자표시 비영리 변경금지

'프로그램 설치' 카테고리의 다른 글

[Notepad++] Plugin Explorer 설치하기  (0) 2022.07.15
[Notepad++] HTML 개발환경 설정하기  (0) 2022.07.15
[Notepad++] Plugin Newfile&Browser 설치 및 세팅하기  (0) 2022.07.15
코딩에 적합한 Monaco Font  (0) 2022.07.15
[Notepad++] 단축키 설정하기  (0) 2022.07.15

+ Recent posts

티스토리툴바