반갑습니다.
무언갈 배우기에 앞서 저 뿐만 아니라 대부분의 사람들이 책을 새로 산다던지, 강의를 새로 수강한다던지, 혹은 운동을 처음 시작하려고 할때 새로 장비를 사거나 헬스 수강권을 등록하고 새로운 마음으로 운동을 시작합니다.
개발도 마찬가지라고 생각합니다. 우리가 개발을 하려고 한다면 당장에 메모장을 열어서 할 수도 있습니다. 하지만, 시간도 오래걸릴 뿐더러, 각종 오류나 수정하고 싶은 부분이 생길 때 메모장(notepad) 에서 작업을 수행하기엔 가능은 하지만 거의 모든 개발자들이 notepad 에서 작업하는 무모한 행동은 하지 않습니다.
우리는 처음 접해보는거라 '메모장에서도 만들수 있구나' 정도 이해하고 넘어가면 되겠습니다.
메모장을 띄워 다음과 같은 코드를 작성하여봅시다.
<!DOCTYPE html>
<html>
<head>
<title>안녕하세요</title>
</head>
<body>
Hello world!
</body>
</html>
이처럼 메모장(notepad)에서도 가능하다는 것을 보여줍니다. 우리는 여기서 벗어나야합니다. 제가 지금부터 개발하는데 필요한 에디터를 소개하겠습니다. 꼭 이 에디터를 써라! 이런건 없습니다. 다른 에디터도 소개를 따로 할테니 그때 가서 알아보도록 하고 지금은 제가 사용하는 것을 소개하겠습니다.
가. Visual Studio Code
Visual Studio Code(visual code) 는 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기 입니다. 크기도 크지 않을 뿐더러 HTML 을 작성하는데 저에겐 편리하게 사용해 왔기 때문에 앞으로 HTML을 하는데엔 이 에디터를 사용할 것입니다.
1)설치하기
google.com에 visual code 을 입력 최상단에 페이지 클릭 하여 본인 OS에 맞는 것을 설치해 주시면 됩니다.
설치과정은 그냥 따라 가기만 하면 되니 설명드리진 않겠습니다. 실행후 하라는 데로 따라가시면 됩니다.
2)설정
이제 우리는 폭팔적인 HTML코딩을 할 수 있습니다. 여기서 우리 유저에게 조금더 편하게 사용할수 있도록 설정을 해 보도록 하겠습니다.
- Prettier
prettier는 코드를 보기좋게 해주는 프로그램입니다.
클릭하시면 검색창이 뜰겁니다. prettier 검색 Prettier-Code formatter 클릭 install 클릭 하시면 됩니다.
- HTML Snippets
HTML Snippets 는 재사용할 코드들을 미리 정의되어 있어 빠르게 사용 가능하게 도와주는 기능을 가지고 있습니다.
여기 까지 install 후 간단하게 예제 코드를 작성하여 보도록 하겠습니다.
마찬가지 검색창에 HTML Snippets 검색 install
나. 코드 작성해보기
menu->new file-> 파일이름.html 로지정
html작성후 ctrl+space 를 누르면 위와같은 목록이 뜹니다. html:5 선택
짜잔~ html의 기본 틀이 눈깜짝 보다 빠르게 작성되었습니다. 이것이 편집기의 장점입니다. 단축키 만으로 코드를 작성하는데 훨신 수월해졌습니다. 안의 내용들은 추후 다룰 예정이니 일단은 지금은 편집기를 이용하여 간단하게 html을 작성해 보도록 하겠습니다.
html 의 내용은 <body></body> 에 들어가야합니다. 지금은 이점만 기억 하시도록 하세요.
<body>
Hello World!
반갑습니다 헬리니개발자입니다.
</body>작성후 chrome 을 실행 상단파일 이름을 끌어다 chrome 에 놓으면 바로 실행화면을 볼 수 있습니다.
(인터넷 익스플로러나 엣지, 파이어폭스 등 다른 브라우저를 사용해도 무방합니다. 하지만 각각의 차이점이 있으니 그 내용은 다음에 다뤄보도록 하겠습니다. )
실행화면 모습입니다. 어? 우리는 Enter 를 입력하여. 줄띄우기를 하였지만 제대로 작동되지않았습니다. 이부분은 추후 다루도록 하겠습니다.
자! 우리는 이렇게 해서 Html 을 작성하는데 초석을 다졌습니다. 앞으로 여러가지 내용을 다룰 터이니 자주 놀러와 주시면 감사하겠습니다.
'IT' 카테고리의 다른 글
| 03.HTML 기본,요소,속성 (0) | 2020.03.25 |
|---|---|
| 02.Eclipse 설치 (JAVA 개발환경 구축) (0) | 2020.02.11 |
| 01.JAVA 개발 사전 준비 (0) | 2020.02.10 |
| 02.HTML 시작 (0) | 2020.02.10 |
| 00. JAVA 를 시작하기앞서서 (0) | 2020.02.09 |
댓글