"웹 기술로 앱 개발자 되기" 시리즈 입니다.
스스로 그 동안 사용하던 웹 기반 기술들에 대한 복습을 겸한 강의여서 html -> css -> javascript 의 순으로 먼저 정리하고,
추가로 es6 -> react -> graphql + mongodb -> react native 의 순으로 진행해 볼까 합니다. 기간은 두어달 정도로 예상을 해 봅니다.
웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 정리해 보도록 하겠습니다.
이번 포스트는 HTML 을 본격적으로 작성해 보기 전에 편집 도구에 대해서 알려드리도록 하겠습니다.
< 앞으로 사용할 CodePen >
HTML 편집도구 준비
웹 사이트는 사실 전문적인 편집도구들을 통해 작업이 됩니다. Dreamweaver 니 Namo 웹 에디터(너무 올드하군요. 나모웹 에디터는 흠..) 나 Intelij 같은 전문 편집도구로 작업을 합니다.
전문적인 도구는 정말 편리한 반면, 내가 입력하지도 않은 HTML 태그들을 알아서 관리해 주기 때문에 HTML 을 처음 배우는 입장에서는 적합하지 않습니다.
기본기가 생명인데, 시동도 켤 줄 모르는 사람한테 F1 포뮬러 자동차를 주면 안되겠죠?
시동 거는 법부터 차근차근 배우도록 하겠습니다. 있어보이는 편집도구들은 모두 잠시 접어두고 기초기초기초 에디터 툴을 준비하도록 하겠습니다.
기초 에디터 툴을 통해 html 파일을 만드는 법을 확인한 뒤에는 웹에서 편리하게 파일을 편집하고 결과까지 바로 확인할 수 있는 온라인 에디터 사이트를 추가로 알아보도록 하겠습니다.
간단한 에디터 도구로 HTML 파일 편집하기
우선 모든 PC 에 설치되어 있는 Notepad (윈도우) 로 html 파일 편집하는 법을 알아보겠습니다. 맥에는 TextEdit 이라는 기본 에디터 도구가 있긴 한데, 절대로 TextEdit 은 사용하지 마시기 바랍니다.
이유는 직접 한번 써 보시면 알게 됩니다. 절대 TextEdit 을 html 편집용도로는 쓰지 마세요!.
에디터 도구로 HTML 파일을 작성하고 결과를 확인하는 순서는 다음과 같습니다.
- 파일을 만듭니다.
- 파일에 HTML 를 작성합니다.
- 파일을 .htm 또는 .html 확장자로 저장합니다.
- 저장된 .htm 또는 .html 파일을 브라우저로 엽니다.
간단하죠. 슈퍼 스피디 하게 실습해 보겠습니다.
1. 파일 만들기
윈도우에는 역사와 전통을 자랑하는 메모장(Notepad) 가 있습니다.
윈도우 시작버튼에서 메모장을 찾아서 실행합니다.
시작-> 윈도우 보조프로그램 -> 메모장 순으로 클릭해서 실행합니다.
너무 복잡하죠? 그냥 키보드에서 윈도우 키와 R키를 눌러줍니다.
그러면 '실행'창이 뜨고 여기에 notepad 라고 입력하고 확인을 누릅니다.
쉽죠?
2. 파일에 HTML 내용 입력하기
새로 만들어진 또는 열린 편집창에 아래와 같이 HTML 내용을 입력합니다.
<!DOCTYPE html>
<html>
<body>
<h1>첫 번째 제목</h1>
<p>첫 번째 내용</p>
</body>
</html>
프로그래밍에서는 거의 모든 분야에서 영어가 쓰이기 때문에 불편하더라도 영문 OS(영문 OS 설치 후에 한글 입력기를 추가) 를 사용하거나 아무튼 영어에 익숙해 지셔야 합니다.
아래와 같이 영문으로 입력하겠습니다. 한영 키 전환하는 것도 번거로우니.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
3. 작성한 파일을 .htm 확장자를 가진 파일로 저장 - 메모장
메모장 프로그램은 그냥 저장 버튼을 누르면 확장자(확장자란 파일명 끝에 붙는 파일 종류를 지정하는 보통은 . 이후의 세글자의 문자임) 를 기본으로 .txt 로 저장합니다. 저장한 파일이 Text 파일이란 뜻이지요.
하지만 우리는 html 파일을 만들고 싶기 때문에 .htm 또는 .html 확장자로 변경해서 저장하여야 합니다.
.html 확장자로 변경해서 저장하려면
- 다른이름으로 저장'
- 파일형식 모든파일로 변경
- 파일명 지정
- 저장
의 순으로 작업해야 합니다.
< 파일-> 다른이름으로 저장을 클릭합니다. >
< 파일 확장자를 txt 가 아닌 다른 파일로 저장하기 위해 파일 형식을 모든 파일로 변경합니다. >
< 마지막으로 파일이름을 index.htm 으로 변경하고 저장합니다. >
4. 저장된 .htm 파일을 브라우저로 열기
마지막으로 자주 사용하는 브라우저로 방금 저장된 파일을 탐색기 찾아서 열어주면 됩니다.
작성한 HTML 이 잘 출력되었네요. 축하합니다. html 개발자가 되셨습니다. !
온라인 에디터 이용하기
PC 에서 메모장에 파일 내용입력하고 저장하고 다시 브라우저로 여는 이런 방식은 사실 아무도(?) 사용하지 않습니다. 너무도 불편하기 때문인데, 정말 피치 못할 사정으로 인터넷도 안되는 곳에서는 메모장이라도 사용할 수 밖에 없는 경우(실제로 국내에 이런곳이 좀 있답니다. ㅠㅠ) 에 사용하실 수 있도록 방법만 알려드린 것이구요.
이후 실습은 실시간 온라인 에디터 (웹 상에서 실시간으로 편집하고 결과를 알려주는 온라인 버전의 에디터) 를 이용할 예정입니다.
온라인 에디터는 많이 있는 데요, 저희는 https://codepen.io 을 사용하겠습니다.
이유는 html / css / javascript 를 모두 병행해서 손 쉽게 편집할 수 있고 작성된 파일을 쉽게 공유도 할 수 있기 때문입니다.
이 외에도 jsbin 이니 babel 에서 제공하는 editor 등등 다른 서비스를 이용하여도 됩니다.
codepen 을 이용해서 html 파일 작성하고 결과 보기
코드펜을 이용해서 html 파일을 작성하는 순서는 아래와 같습니다.
- 접속
- 내용입력 즉시 결과 확인
간단하죠?
1. 코드펜에 접속
https://codepen.io/pen/ 에 접속합니다.
< HTML, CSS, JAVASCRIPT 를 한 화면에서 편집할 수 있습니다. >
2. HTML 을 입력하고 결과를 확인
HTML 창(가장 왼쪽 창)을 선택하고 html 내용을 입력합니다.
< 내용을 입력하면 입력된 내용에 대한 출력이 화면 하단에 즉시 Rendering 됩니다 >
CodePen 사용시 주의
codepen 의 HTML 창에는 <!DOCTYPE html> 선언을 입력하지 않아야 합니다.
codepen 자체가 웹 사이트, 즉 웹 페이지이다 보니 이미 <!DOCTYPE html> 선언이 최상위의 부모에게 선언이 되어 있기 때문이지요. <!DOCTYPE html> 선언은 모든 페이지에 단 한번만 선언이 되어야 합니다.
< <!DOCTYPE html> 선언이 있을 경우 적색 오류 발생 >
따라서 CodePen 을 사용하실 경우에는 <!DOCTYPE html> 선언을 지우고 작성하시기 바랍니다.
< 요렇게 <!DOCTYPE html> 선언을 제거하면 오류가 없어집니다 >
이번 포스트에서는 간단히 메모장을 이용해 html 파일을 생성해 보았고, codepen 을 통한 에디터 사용법도 알아 보았습니다.
앞으로는 codepen 을 통해 여러 실습을 진행할 예정이니 참조하시기 바랍니다.
다음 포스트에서는 HTML 기본 문법부터 다뤄보도록 하겠습니다.
'Programming JavaScript > HTML' 카테고리의 다른 글
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 제목 태그 (0) | 2018.05.28 |
|---|---|
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 태그 속성 (0) | 2018.05.26 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 기본구성요소 (0) | 2018.05.25 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 기본 태그 (0) | 2018.05.24 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 이란? (0) | 2018.05.23 |