강의 대시보드 HTML 코딩 실습 환경 준비
HTML 코딩 실습 환경 준비
강의명 : 컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1
수강 기한 : 무제한
진도율 : 0강/37강 (0%) | 시간 : 0분/249분
나가기
미수강
이전수업
다음수업
아래 주소에서 프로그램을 다운로드해서 설치해주세요. https://atom.io/     왼쪽은 프로젝트에서 파일목록입니다. 오른쪽은 선택한 파일을 편집하는 화면입니다.     저는 편하게 작업하기 위해서 왼쪽에는 웹브라우저를 오른쪽에는 Atom을 배치했습니다.     먼저 할 것은 실습 파일을 저장할 폴더를 생성하는 것입니다. 이 폴더를 프로젝트 폴더라고 하겠습니다. 윈도우 탐색기를 이용해서 바탕화면에 WEB이라는 디렉터리를 생성해주세요. (동영상참고 : youtu.be/iRZJHhjh8DU?t=207)     이제 프로젝트 폴더가 아톰 왼쪽에 표시되게 해볼께요. 메뉴 → File → Add project folder를 선택해서 바탕화면에 생성한 WEB 폴더를 선택해주세요. (동영상참고 : https://youtu.be/iRZJHhjh8DU?t=281)     1.html 파일을 생성하겠습니다. WEB 폴더에서 오른쪽 클릭해서 New File을 선택합니다. (동영상참고 : https://youtu.be/iRZJHhjh8DU?t=348)     방금 생성한 파일이름을 보면 확장자가 html 입니다. MS 워드의 확장자는doc, PDF는 pdf입니다. 웹브라우저에서 볼 수 있는 웹페이지는 확장자가 html 입니다.     그럼 1.html을 웹브라우저로 열어봅시다. 웹브라우저에서 아래와 같은 단축키를 눌러보세요.
  • 윈도우 : Ctrl + O(알파벳)
  • 맥 : Cmd + O(알파벳)
파일선택 화면이 나올꺼예요. 파일선택 화면이 나오지 않으면 브라우저를 바꿔보세요. 또는 윈도우 탐색기나 맥 파인더에서 1.html 파일을 더블클릭하면 웹브라우저가 실행되면서 웹페이지가 표시 될꺼예요.     짜잔 이렇게하면 웹브라우저로 웹페이지를 열 수 있습니다.     이제 화면에 무엇인가를 표시해봅시다. 편집화면에 hello web이라고 입력하고 저장해보세요. (윈도우 : Ctrl + S, 맥 : Cmd + S) (동영상참고 : https://youtu.be/iRZJHhjh8DU?t=553)   웹브라우저를 리로드 하면 아래처럼 hello web이 출력됩니다.   축하합니다.   지금까지 웹페이지에 대한 소비자로만 살아오셨다면 이제 생산자로서 첫발을 뗀 것입니다. 신기하고 기쁘지 않나요? 더욱 흥미로운 것들이 기다리고 있습니다.    

자주 묻는 질문

atom 설치가 되지 않습니다.

atom을 꼭 써야하는 것은 전혀 아닙니다.  더 좋은 대체재들은 얼마든지 있습니다. brackets를 추천드립니다.

자동 줄바꿈을 하고 싶습니다.

메뉴에서 preference -> editor -> Soft Wrap 항목을 체크해주세요. 참고
    목차 커뮤니티