2020. 7. 17. 01:20ㆍ웹개발 기초과정/HTML
1. 에디터 준비하기
이미 여러분의 컴퓨터에는 에디터가 존재한다.
윈도우에는 메모장 , 맥에는 TextEdit , 리눅스는 Gedit 등이 이미 설치되어 있다.
여러 에디터 중에 본인에게 맞는 것을 찾는 것도 중요하지만 이제 시작하는 사람들에게는
어떤 에디터가 나에게 맞는건지 찾기가 힘들다.
또한 에디터들의 사용방법이 다 다르기 때문에 통합해서 설명하기가 쉽지 않다.
그래서 준비한게 여러분들이 코드를 작성하는데 최적화되어 있는 프로그램을 사용하기로
했다.
바로 ATOM이란 에디터 프로그램이다.
아래 그림을 클릭해 설치해 보자.
어렵지 않으니 보통 프로그램 설치하는 대로 하면 된다.
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
설치 후 화면 입니다.
화면 위쪽에 보시면 열려있는 화면들이 보이는데 다 닫아 주시면 됩니다.
이 화면 상태로 준비를 해 주세요.
2. HTML 파일 만들기
1) 바탕화면에 폴더 만들기
"web"이라는 폴더를 하나 만들어 줍니다.
우리가 지금부터 만들 웹브라우저의 모든 파일은 이 폴더에 저장을 하도록 하겠습니다.
2) 폴더 선택하기
atom에 가서 파일(file)->오픈 폴더(open foder)를 선택한 후 1번에서 만든 "web"폴더를 선택해 줍니다.
3) 파일 만들기
프로젝트에 "web"이라는 폴더가 하나 생성되어 있습니다.
마우스를 가져다 놓고 오른쪽 버튼을 클릭 후 new file을 선택 "1.html"이란 파일을 만들어 줍니다.
4) 브라우저를 사용해서 파일 열기
1.html이란 파일이 만들어졌으면 브라우저를 사용해 화면을 띄워보자.
단축키 ctrl+o(영문)를 누르면 탐색기 창이 열립니다.
"web"폴더를 찾아서 1.html 파일을 누르면 웹 브라저 창이 열립니다.
브라우저는 크롬이나 인터넷 익스플로러를 사용해 열어줍니다.
그 외 브라우저는 잘 안 열릴 경우가 있습니다.
5. atom에 "hello web" 써보기
아톰에 hello web이란 글자를 쓴 후 저장(ctrl+s)을 한 후 브라우저에서 새로고침(F5)을 해서 글자가 나타나면
여러분들은 웹 페이지를 만드는데 성공한 것입니다.