메뉴 건너뛰기

안녕하세요~ 관리자입니다!

이번엔 웹 프로그래밍 세계에 막 발을 디디는 초보 프로그래머들을 위한 글을 적고자 합니다.

본 글로 초심자분들의 답답함이 해소되었으면 좋겠네요. ㅎㅎ

 

자, 이제 본론으로 들어가봅시다. 웹 프로그래밍이란 뭘까요?

웹 프로그래밍은 인터넷 브라우저를 통해 보여주고 싶은 내용과 기능들을 코드로 기술하는 행위를 말하는 것입니다.

그런데 코드라는 것은 내용은 복잡해도 결국 문자열이기 때문에, 글을 적을 수 있는 모든 프로그램에서 작성이 가능합니다.

예를 들어 가장 간단한 문자열 편집기인 메모장(Notepad)에서도 웹 프로그래밍을 할 수 있고, 그 외 기타 여러 워드프로세서 상에서 편집 및 작성이 가능합니다.

 

하지만, 프로그래머들이 모양 빠지게 메모장같은걸 켜두고 웹 프로그래밍을 하진 않겠죠?

프로그래머들은 프로그램 개발을 위해 메모장보다 훨씬 멋지고 많은 기능들을 제공하는 편집기를 사용해야 합니다.

여기서 많은 기능들이라 하면 여러가지가 있는데 오타를 지적해주거나, 가독성을 높여주거나, 자동 완성 기능을 제공하는 등의 기능을 말합니다.

이 글을 읽으시는 분들께서도 나중에 웹 프로그래밍을 공부하시다보면 알겠지만.. 이런 기능들은 프로그래머들로 하여금 엄청난 능률 향상을 가져다 준답니다.

 

그럼 어떤 편집기를 사용해야 될까요? TV같은데 보면 시커먼 화면에서 뭘 잔뜩입력하고 그러던데 말이죠. 어디서 뭘 받아야 나도 그럴수가 있을까요?

시중에 출시된 편집기는 정말 많습니다. 그중에는 유료도 있고, 무료도 있습니다. 종류만큼 기능도 천차만별이고, 프로그래머들은 이 편집기중 마음에 드는것을 사용합니다.

하지만 우리는 아직 뭐가 좋은지, 뭘 써야하는지 잘 모르는 상태이기 때문에 그냥 다짜고짜 사람들이 제일 많이 쓰는 것을 사용해보도록 하자구요.

 

자, 그래서 이제 우리가 사용할 편집기의 이름은 서브라임 텍스트(Sublime Text)입니다. (혹시 다른 편집기들에 대해서도 조금 더 알고자 하신다면 여기를 참고해주세요.)

서브라임 텍스트는 웹 프로그래머들에게 가장 대중적으로 이용되고 있는 편집기입니다. 그러니 우리도 이 편집기로 웹 프로그래밍을 시작해보도록 해요.

 

서브라임 텍스트는 여기에서 받을 수 있습니다.

제목 없음.png

위 스크린샷을 참고해주세요. 서브라임 텍스트 홈페이지에 접속하신 다음 페이지 중앙 하단에 있는 Download for Windows를 누르시면 다운로드가 시작됩니다.

(만약 운영체제가 윈도우 환경이 아니라 Mac이나 Linux 등의 다른 환경이라면 다운로드 버튼의 이름이 약간 다를 수 있답니다.)

 

설치과정은 아주 간단한데요, 다음 다음 진행하시다가 중간에 설치 경로를 묻는 창이 나옵니다. 경로 지정하고 설치를 시작하시면 됩니다.

설치가 끝나면 이제 바탕화면에 Sublime Text 아이콘이 하나 생겼을 것 입니다.

캡처.PNG 

앞으로 이 편집기가 메모장 대신 사용할 웹 프로그래밍 도구입니다.

한번 실행을 해보도록 할까요?

 

캡처2.PNG

실행을 하면, 위 사진처럼 뭔가 시커먼 메모장이 다짜고짜 하나 실행됩니다. 뭐 어떻게 하라는걸까요?

우선 서브라임 텍스트는 최소화 버튼을 눌러 아래로 내려주시고, 바탕화면에 폴더를 하나 만들어봅시다.

그리고 폴더의 이름은 HelloWorld 라고 적어봅시다.

캡처3.PNG

그 다음 최소화 되어있는 서브라임 텍스트를 다시 띄우고 File - Open Folder... 를 눌러주세요.

그리고 방금 만든 HelloWorld를 선택하도록 합시다.

캡처4.PNG

 

앗, 그랬더니 서브라임 텍스트 왼편에 뭔가 생겨났습니다.

캡처5.PNG

방금 선택한 폴더가 왼쪽에 떠있습니다. 지금 우리는 무엇을 하고 있는 걸까요?

지금 한 작업은 작업공간(Workspace)을 만드는 과정이였습니다. 모든 코드는 작성전에 이처럼 작업 공간을 먼저 지정해주어야 한답니다.

이 작업 공간상에 내가 작성하는 모든 코드들이 저장되게 됩니다.

 

자, 이제 왼쪽에 열려있는 HelloWorld 폴더에 마우스를 올려두고 오른쪽 클릭을 합니다.

그 다음 New File을 눌러주세요. 그러면 untitled라는 이름의 탭이 하나 열리게 됩니다.

캡처6.PNG

 

그 다음, 이 상태에서 File - Save를 눌러 파일을 저장합니다.

파일의 이름은 hello_world.html 로 해주세요. 이름 뒤에 있는 .html도 반드시 적어주셔야 합니다!

캡처7.PNG

 

그럼 이제 아래처럼 되어있을 것입니다. 여기까지 따라오셨으면 개발준비 완료입니다.

캡처8.PNG

 

이제 html 소스를 작성해볼까요?

열려있는 hello_world.htmlhtml이라고 입력한 뒤 tab키를 한번 눌러봅시다.

캡처9.PNG

위 상태에서 tab키를 한번 누르면..

 

캡처10.PNG

짜잔~ 자동으로 기본적인 내용들이 입력됩니다. 위에 있는 내용들은 웹 프로그래밍을 하기위한 가장 기본적인 내용들이며,

html을 적고 tab키를 누르면 자동으로 내용이 작성됩니다. 이처럼 메모장이 아닌 전문 편집기를 이용하면 다양한 편리한 기능들을 이용하실 수 있답니다.

 

여기에 간단한 내용들을 추가로 입력해보도록 합시다. 아래 보이는 그림처럼 내용을 추가하신 뒤 File - save를 통해 저장해주세요.

캡처11.PNG

 

저장하셨다면 아까 바탕화면에 만든 HelloWorld 폴더를 열어주세요. 방금 작성한 html문서가 있을 것 입니다.

사용하시는 기본 브라우저가 어떤 것이냐에 따라서 아이콘 모양이 조금씩은 다르겠지만.. 하여튼 html 파일이 하나 있을거에요.

캡처12.PNG

 

두근두근.. 이제 한번 실행해봅시다. 더블클릭하여 실행해주세요.

캡처13.PNG

짠~~ 드디어 나만의 첫번째 웹 페이지 완성!! 여러분들도 모두 여러분만의 첫번째 웹 페이지를 만드는데 성공하셨겠죠?

아직은 간단한 예제밖에 실행을 못하지만, 명품 웹 프로그래밍을 차근차근 공부하다보면 엄청 재미있는 다양한 기능들을 사용할 수 있답니다.

교재에 있는 모든 내용들도 이런 방식으로 작성하시면서 학습을 하시면 되구요, 교재에 나와있는 예제들을 실행해보고 싶다면

여기에서 별도 코드 작성없이 직접 실행해볼 수도 있답니다!

 

어때요, 참~ 쉽죠? 여기까지 초심자를 위한 웹 프로그래밍 스타팅 가이드라인 이였습니다. 긴 글 읽으시느라 수고 많으셨습니다. (_ _)

?
  • ?
    kang 2017.09.12 21:04
    크롬으로 열면 한글이 제대로 나오는데, 익스플로러로 열면 �굹�쓽 泥ル쾲吏� �쎒 �럹�씠吏� 이렇게 깨져서 나옵니다. 이거 왜그런거죠?
  • ?
    황기태 2018.02.08 12:06
    늦었지만 답을 올리는 것은 다른 분들에게 도움이 되도록 함입니다.
    한글이 깨져 보일 때
    HTML 파일에
    <head>와 </head> 사이에
    <meta charset="utf-8"> 을 넣어세요.
    그리고 HTML 파일을 반드시 utf-8 타입으로 저장하세요.

    즉 HTML 파일이 utf-8 인코딩 다입으로 저장되어 있고,
    <meta charset="utf-8"> 태그를 이용하여 브라우저에게 utf-8 타입으로 해석하도록 지시하면
    모든 브라우저에서 문제없이 출력됩니다.
  • ?
    dos 2017.12.14 22:28
    감사합니다~
  • ?
    Soyoyum 2018.02.07 21:55
    안녕하세요! 웹프로그래밍 1도 모르는 인문계 전공자인데요 1장 공부하고 있는데 진짜 너무 자세하게 설명이 나와있어서 좋아요!! 설명 감사합니다 :)

Admin's Blog

관리자의 블로그입니다.

  1. No Image 23Aug
    by 관리자2
    2018/08/23 by 관리자2
    Views 213 

    Array의 sort() 메소드를 이용하여 정렬하기

  2. 집 안의 PC를 몽구스 웹 서버로 만들고 외부에서 접속하기

  3. 웹페이지를 그래서 어떻게 만들라는거야? 웹프로그래밍 스타팅 가이드라인

  4. 초간단! 5분만에 내 컴퓨터를 웹 서버로 만들어보자

목록
Board Pagination Prev 1 Next
/ 1
위로