안녕하세요. @u robotics 입니다.
어제는 웹 페이지를 간단하게 띄워봤습니다.
오늘은 좀더 진도를 빼볼까 합니다.
어제는 편집기를 안 쓰고
그냥 윈도우 기본 기능을 이용해서
작업을 했는데요.
오늘부터는 좀더 빠른 작업을 위해서
에디터를 사용해보겠습니다.
제가 이번에 추천하는 에디터는
Atom 입니다.
생활코딩에서 이고잉 님이 추천해주신 에디터인데요.
제가 사용해보니깐,
웹 작업 할 때는 편하고 좋은 것 같아서
추천합니다.
(이미 텍스트 에디터에 대해서 알고 계시는 분들은
익숙하신 것을 사용하시면 되겠습니다.
서브라임 텍스트나 비쥬얼 스튜디오 코드나
여러가지 좋은 편집기가 많이 있습니다.)
Atom을 쓰려면 일단 설치를 해야겠죠.
구글 등에 Atom으로 검색하면 나옵니다.
https://atom.io/
홈페이지에 가면
바로 오른쪽 하단에 다운로드가 매우 잘 보입니다.
다운로드 해서 클릭클릭 설치해주시면 되겠습니다.
설치하신 후에
아톰을 더블클릭해서 실행해주세요.
그러면 이런 화면이 뜹니다.
뭐 쏼롸쏼라 말이 많아요.
제가 빨간 네모로 표시한 곳에
마우스를 갖다대면 X표가 나와요.
필요 없는 화면은 끄면 됩니다.
(크롬이나 인터넷 익스플로러처럼
웹화면을 끄는 거랑 똑같아요.
색깔이 달라서 이상하게 느껴질 뿐)
중요한 건
폴더 및 파일을 관리하는 쪽이랑
소스를 편집하는 곳
딱 2개만 있으면 됩니다.
일단 폴더를 하나 만들어요.
(아톰에서 폴더 추가 될 줄 알고 뒤져봤는데, 쉽지가 않군요.
그냥 밖에서 하나 만드는 걸로.)
운영체제를 윈도우를 사용하고 계시다면,
Windows 키 + E 를 누르시면
파일 탐색기가 뜹니다.
여러분이 원하는 위치에서
폴더를 하나 만들어주세요.
저는 C:\ 에서 폴더를 하나 만들겠습니다.
atom 이라고 만들었어요.
C:\ 로 이동하셔서
마우스 오른쪽 클릭하면
새폴더 만들기가 뜹니다.
이름을 바꿔주시면 됩니다.
자, 이렇게 되었으면
이제 아톰으로 돌아가봅시다.
File > Open Folder 선택해주시고요.
(파일 > 폴더 열기)
그 다음에 방금 만들었던
폴더를 찾아서 선택해줍니다.
저는 c:\atom 이었어요.
(여러분은 만드신 폴더 선택해주시면 됩니다.)
아, 그리고
웰컴하고 웰컴 가이드는 꺼주세요.
그러면 인제 코딩할 준비가 되었습니다.
왼쪽의 아톰폴더에서
마우스 오른쪽 클릭해서 New File을 선택해주세요.
그리고 이름을 1.html
(혹은 원하시는 이름하고, 파일형태만 .html로 해주시면 됩니다.)
저는 1.html로 했습니다.
아니, 근데 지금 파일이 어디있는지
잘 모르겠잖아요.
그래서 아톰 왼쪽 끝에 작은 화살표를 눌러주면요
1.html파일이 들어있다고 뜹니다.
그리고 오른쪽의 1.html에 마우스를 올려두면
위치가 뜹니다.
생각보다 설명이 길어졌어요. ㅎㅎㅎ
이제는 진짜 시작해봅시다. ㅋㅋㅋ
오른쪽에 있는
1.html 파일에서
html이라고 쓰시고요.
키보드에서 tab키를 눌러줍니다.
(혹시 tab키 몰라서 당황하시는 분들 계실까봐
오른쪽에 표시해뒀습니다. )
html 을 쓴 다음
tab키를 눌러주시면,
쨔잔.
이거슨 매직.
그다음에 다른 태그를 써봅시다.
h1 을 쓴 다음 탭을 눌러보시면
쨔잔, 방금 만큼은 아니지만,
그래도 바로 바로 문장이 완성됩니다.
엄청 쉽고 편리하겠죠? ㅎㅎㅎ
그리고 이제는 만든 것을 확인하는 건데요.
바로 그 위치에서 시작하면 편하겠죠?
1.html에서 왼쪽 클릭해서
show in explorer 를 선택해줍니다.
그러면 1.html이 있는 폴더로 바로 이동합니다.
마지막으로 더블클릭을 해주시면
최종적으로 실행이 됩니다.
편리한 에디터를 사용해서
좀더 효율적으로 개발해봐요.
감사합니다. ^^.
[웹개발1] html5
https://steemit.com/kr/@urobotics/html5-1
그리고 html5 문법은
https://www.w3schools.com/
참고해주세요.
감사합니다.
