준비 및 점검사항
Home > Document > HTML > Introduction > 기본기 연습

페이지 목차

본격적으로 강좌를 시작하기 전에 몇가지 점검 및 준비해야 할 것들이 있습니다.
  • 우선 어떤 문서 편집기를 사용할 것인지
  • 컴퓨터에 대한 기초적인 지식은 있는지
  • 문서를 편집할 수 있는 기본적인 능력은 뒷받침 되는지
  • 장비(마우스, 키보드) 사용에는 익숙한지
뭐 이런 것들이 되겠습니다. 자 그럼 그런 것들에 대해 점검을 해 보져...^^




1. HTML Code를 편집할 수 있는 에디터

HTML을 비롯해서 Style Sheet, JavaScript, ASP 등을 스크립트언어(Script Language)라고 합니다. 스크립트(Script)란 '필기하다' 또는 '적는다' 라는 뜻으로서 컴퓨터에서는 윈도우의 메모장이나 아래아 한글, MS Word 등과 같은 문자 편집기를 사용해서 '타자를 쳐 넣는다' 라는 뜻이죠. 즉, 우리가 알아 볼 수 있는 문자, 숫자, 기호 형태를 사용하는 언어라는 뜻이 되겠습니다.

가장 간단한 프로그램은 바로 윈도우에 기본으로 깔려있는 메모장이 되겠습니다. 흠~ 메모장이라... 메모... 이 말은 원래 간단히 몇 자 적는다는 뜻 아니겠습니까? 그러니까 메모장이라고 이름을 붙인 이유는 '간단한 메모를 하는 프로그램이다.' 라는 뜻이겠죠. 그러니만큼 그리 큰 기대는 안하시는게 좋겠습니다. 이 넘가지고 할 수 있는 할 수 있는 건 별로 없으니까요. 물론 소스보기를 한다든가 할 때 사용하지만... 그래도 없을 땐 무쟈게 아쉽죠...^^

그렇다면 나모, 드림위버, 프론트페이지 등의 WYSIWYG(What You See Is What You Got) 프로그램은 과연 어떨까요? WYSIWYG 이라는 문장 자체에서 느낄 수 있듯이 웬만한 것은 지가 다 알아서 해준다는 거죠. 즉, 그냥 워드프로세서로 문서 작성하듯이 찍어 넣으면 지가 알아서 복잡한 웹 문서를 자동으로 만들어주는거죠.

무쟈게 좋을 것 같지 않습니까? ^^ 물론 나쁘지 않습니다. 그러어~나!, BUT... 초보자이지만 정말로 전문적인 웹 프로그래머가 되고 싶다면 절대로 쓰지 마세요...^^ 아니 쓰더라도 어느 정도 실력을 갖춘 후에 써야 된다 이겁니다.

그게 왜 그렇게 되는지도 모르면서 프로그램에 의존해서 웹 문서를 작성한다는 것... 좋지 않습니다. 원리를 모르면서 그런 프로그램에 의존하다보면 금방 한계에 부딪히게 됩니다.

서양 속담에 이런 말이 있죠... Easy com easy go.

즉, 쉽게 얻는 것은 쉽게 사라진다는 뜻이겠지요...이런 WYSIWYG 프로그램들은 쉽게 홈페이지를 꾸며 주지만 그 한계가 있다는거죠. 즉, 쉽게 배울 수 있는 프로그램은 할 수 있는게 그리 많지 않다는 뜻입니다. 물론 그런 프로그램을 쓴다는 자체가 도움이 안 된다는 뜻이 아니라 원리를 알고 써야 된다는 말이죠.

그럼 이 대목에서 아마도 여러분들은 이런 의문이 생길 겁니다. "메모장 같은 프로그램도 아니고, WYSIWYG 프로그램도 아니라면 도대체 멀 쓰라는 건데 머?" 이런 의문 말입니다.^^

저는 메모장과 WYSIWYG 프로그램의 중간 정도의 프로그램을 적극 추천하겠습니다. 그러니까 완전 노가다로 입력하는 메모장같은 프로그램도 아니고 자기 멋대로 Tag을 만드는 WYSIWYG 프로그램의 중간 형태의 프로그램이 되겠습니다.

대표적인 프로그램으로 EditPlus와 같은 것이 있지만 저는 HTML-Kit 라는 프로그램을 강력히 추천합니다. 이유는 Edit Plus가 상용인데 비해 HTML-Kit는 Freeware이고, 지속적으로 Upgrade를 해주기 때문이죠. 들은 바로는 Edit Plus도 한정 평가판이기는 하지만 30일이 지난 후에도 사용하는데 제약이 없다더군요.

그리고 결정적인 이유가 하나 있는데 사실 제가 제대로 쓰는 에디터가 HTML-kit 뿐이라서요...^^ 다른 프로그램에 익숙하다면 굳이 HTML -Kit 를 사용할 이유는 없지만 처음 접하는 초보자라면 제가 적극적으로 권장하겠습니다.

프로그램을 다운 받으려면 여기를 클릭하세요.

다음은 설치 방법입니다.

소스 보기


HTML-Kit 인터페이스 보기



감추기





각 영역별 설명
Main Menu HTML-kit에서 사용되는 모든 명령어들이 들어 있는 부분
Tool Bar 자주 사용되는 명령어들을 모아 놓은 부분
Action Bar 문서를 작성하는데 필요한 기능을 모아 놓은 부분
Gutter 현재 행(Line)을 표시
Editor Window 문서를 작성하는 부분
Work Space Local Folder(자기 컴퓨터 폴더)나 Ftp 폴더와 파일을 표시하는 부분
Preview Tab 브라우저 창을 열지 않고 미리 보기를 하는 탭
Title Bar 열려져 있는 문서의 제목을 표시하는 줄(현재 작업중인 문서 제목이 음각으로 표시된다. 초록색 타원 부분)
Status Bar 현재 작업 중인 문서의 상태나 마우스가 위치한 부분에 대한 설명을 표시한다.



2. 기본적인 테크닉 : 문서 작성 능력
어떤 분야든 마찬가지지만 역시 제일 중요한 것은 기본기인 모양입니다...^^
특히 컴퓨터 자체에 초보자인 경우 몇 가지 '쌩기초'는 반드시 숙지하고 있어야 합니다.

단축키 사용법

문서 작성에 필요한 단축키(Short Cut)들
Ctrl + C 복사 하기(선택한 내용을 컴퓨터의 메모리로 복사가 됨)
Ctrl + V 붙여 넣기(메모리에 복사한 내용을 현재 커저의 위치에 붙여 넣는다.)
Ctrl + X 지우면서 복사(선택한 내용을 컴퓨터의 메모리로 복사 하면서 지운다.)
Ctrl + A 전체 선택(커저가 입력란 속에 있으면 입력란의 내용선택, 밖에 있으면 문서 전체선택)

특별한 경우가 아니면 아마 대부분 마우스 사용법은 알고 있을겁니다. 스타크래프트 해 보신적 있는지... 그걸 하다보면 고수들의 마우스 놀림은 정말 현란하지 않습니까? 하지만 문서작성에서는 그렇게까지 빠른 놀림은 필요 없습니다. 그 대신 왼손을 사용하는게 좋지요. 하긴 스타크래프트도 고수들은 왼손을 쉬지 않고 움직이져... 왼손을 사용하면 아주 편리하게 문서를 작성할 수 있습니다. 이 점에서 스타크래프트와 똑 같습니다. 컴퓨터의 고수는 파워유저(Power User)라고 부르죠...^^

위의 표(Table)에 나와 있는 것 처럼 지금부터 몇 가지 단축키를 연습해 보는데 멀리 갈 필요 없이 요 밑에 있는 TEXTAREA(입력란)에다 연습해 보시져...

사용하는 방법은 예를 들어 복사하는 단축키를 'Ctrl + C'라고 표시해 놓았으면 'ConTRoL key를 누르고 떼지 않은 상태에서 C key를 한 번 누르라'는 뜻입니다. 어떤 사람들은 컨트롤 키(키보드 좌측하단에 있음)를 한 번 콕 눌렀다 떼고 'C'키를 치는 경우도 종종 봤는데, 그렇게 하면 입력란에 'C'라는 글자가 찍히겠죠? 그러면 안됩니다. 그렇다고 계속 그 상태로 누르고 있으면 계속해서 복사가 됩니다. Key를 계속 누르고 있으면 연속해서 복사가 되져... 첨에는 익숙하지 않더라도 손놀림을 가볍게 해서 한 번만 누르면 되겠군요...


입력 연습
  1. 일단 표 아래의 입력란을 마우스로 클릭하면 깜박이는 수직 막대기가 있는데 그게 바로 커저
  2. 입력란에 'ABCDEFG' 라고 입력하면 커저는 'G'자 뒤에 있게 된다. 전체를 복사하기 위해서
  3. Shift key를 누른 상태에서 Home key를 누른다.
  4. 그래서 요런 식 → ABCDEFG 으로 보이면 일단 선택하는거 성공
  5. 그럼 드뎌 위에 설명한대로 Ctrl + C key를 눌러서 메모리에 복사...
  6. End key를 눌러서 행의 끝 부분으로 이동하고 Enter key를 쳐서 다음 행으로 이동
  7. Ctrl + V (컨트롤 key를 누른 상태에서 V자를 한 번 누른다. 성공했으면 한 줄이 복사된다.
  8. 이번에는 Ctrl + A 를 눌러서 입력란의 내용 2줄 선택하고 Ctrl + X 해서 메모리에 다시 복사하며 지우기 (선택한 내용이 지워 졌겠져?)
  9. Ctrl + V 해서 붙여넣기를 하면 원래상태의 두줄이 다시 생깁니다...^^ 충분히 익혀 두세요.
    HTML-Kit에서도 똑 같은 방법을 사용하니까요.

아래에 입력해서 연습해 보세요.





3. 마우스 사용법

마우스가 없이 컴퓨터를 한다?... 아마 상상이 가지 않을 겁니다. 그 만큼 이제는 컴퓨터를 하는데 마우스가 필수적인 장비가 되어있습니다. 사이트 소개에서 보셨겠지만 DHTML의 대부분이 마우스와 관련이 있는 것들이져. 그래서 이번에는 기본적인 마우스 사용법에 대해 알아 보겠습니다. 일반적으로 마우스는 왼쪽 버튼과 오른쪽 버튼이 있다는 사실 다 아시죠?... 그래서 왼쪽 버튼을 누르는 것을 좌클릭, 오른족 버튼을 누르는 것을 우클릭이라고 하죠. 그렇지만 자세히 구분하면 동작에 따른 구분이 분명히 있습니다. 아래의 표 참조...


Mouse의 동작에 따른 구분
onMouseOver 마우스가 지정된 영역안으로 들어가는 순간
onMouseOut 마우스가 지정된 영역안에서 빠져 나오는 순간
onMouseDown 마우스 버튼을 누르는 순간(왼쪽이나 오른쪽 모두)
onMouseUp 마우스 버튼을 누른 상태에서 버튼을 놓는 순간(왼쪽이나 오른쪽 모두)
onMouseMove 마우스가 영역에서 움직이기 시작하는 순간
onClick mousedown + mouseup 즉 눌렀다 놓는 순간
onDblClick onClick 을 연달아 두 번 하는 순간
drag mousedown 상태를 유지하며 목적하는 영역으로 마우스를 이동하는 경우 또는 원하는 영역을 선택하는 경우, 거 왜 강호동의 천생연분인가 하는 프로그램 보면 폭탄 제거할 때 질질질~ 끌고 나가져?... 예 바로 그게 drag입니다. 원래의 사전적 의미가 바로 그거구요...
drop drag 상태로 목적하는 영역에 와서 mouseup을 하는 경우
drag & drop drag + drop 끌고와서(drag) 놓는(drop) 동작

onMouseOver, onMouseOut, onMouseDown, onMouseUp은 사이트 소개의 DHTML 부분에서 보여주었기 때문에 따로 설명하지 않고 drag & drop을 한 번 연습해 보져...^^

잘 됐나요? 제대로 안됐으면 여러 번 연습해 보세요...^^ 여러분 각자가 열심히 연습할 것으로 믿고 부실하나마 일단 이 정도로 설명을 마치고 기회있을 때 마다 단편적으로 설명하도록 하져...




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색