이 사이트에서 문서 보는 방법
Home > Document > HTML > Introduction > 문서 보는 방법

이 사이트에서 문서를 볼 때의 일종의 저와 여러분과의 약속으로서 알아 둬야만 문서를 편하게 볼 수 있는 몇 가지 사항이 있습니다. 문서를 보는 순서는 초보자의 경우 HTML 메뉴에서 시작해서 XML 까지 차례대로 보면 되고, 어느 정도 익숙한 사용자들은 필요한 항목을 찾아 볼 수도 있습니다. 그렇지만 전체적인 순서는 앞의 내용을 충분히 이해하고 있다는 가정하에 다음 문서를 만들었기 때문에 자신이 없다면 처음 부터 보는게 좋겠군요. 그럼 이제 아래의 밑줄친 초록색 글자를 마우스로 클릭해 보세요...



1. 풍선 도움말

풍선 도움말

도움말 상자에 들어있는 도움말을 보셨져?... 일단 커저 모양이 도움말 커저로 바뀌고 클릭하면 거기에 해당하는 도움말이 나오며 마우스를 글자 밖으로 움직이면 풍선 도움말이 사라집니다. 앞으로 여러분들이 볼 모든 문서에서 같은 요령으로 보면 되겠죠... 이와 같은 방법을 사용하는 이유는 내용이 많아지면 페이지가 너무 길어져서 아래 위로 스크롤을 많이 하게 되면 손가락이 쩜 피곤하겠죠? 괄호를 쳐서 설명하기도 그렇고... 이 문서를 보는 사람들에 대한 저의 작은 성의라고 알아 주시면 좋겠습니다....^^



2. 숨겨진 내용 보기

아래의 '내용 보기' 단추를 눌러 보시죠. 그러면 아래 부분이 펼쳐지면서 감추어진 내용이 보이게 됩니다. 그리고 감추어졌다 보이는 내용물 중 가장 위에 '감추기' 라는 단추가 보이게 됩니다. 그 단추를 누르면 다시 원래대로 내용물이 숨겨지게 됩니다. 이와 같은 방법을 사용하는 이유는 아래의 두가지죠...

  • 위에서 말한 것 처럼 페이지가 너무 길어져서 스크롤하는 횟수가 많아 지는 것을 조금이나마 줄여 보려는 의도이며

  • 앞으로 소개할 HTML-Kit 라는 프로그램에 대한 사용법의 경우는 되도록이면 내용을 보이지 않게 하려고 합니다. 그 이유는 이 사이트가 프로그램 메뉴얼을 제공하는 사이트도 아니며, 이미 다른 프로그램에 익숙한 사람들까지 불필요한 내용을 보기위해 스크롤을 낭비할 필요가 없다는 판단에서 입니다.

내용 보기



감추기






3. Table(표)을 이용한 설명

앞으로 여러분들이 볼 문서에는 상당량의 표가 나오게 되는데 그 표를 보는 요령은 다음과 같습니다. 먼저 제일 위에 그 표의 제목이 들어가고 그 밑의 왼쪽에는 항목이, 오른쪽에는 그 항목에 대한 설명이 있습니다.
---- 누가 봐도 알만한 내용을 설명했나?...--- 그래도 할 건 해야겠져?...

제 목
항 목 항목에 대한 설명





4. 참고 사항, 주의 사항
참고사항이나 주의 또는 유의해야 될 내용을 지금 보고있는 Box 속에 설명합니다.





5. 부가적인 설명이나 하고 싶은 말
hkp_devf (1K) 부가적으로 설명할 내용을 지금 보고있는 Box 속에 설명합니다.





6. 예제
hkp_devf (1K) 예제 들을 지금 보고있는 Box 속에 설명합니다.



7. 입력
입력 할 Source code 지금 보고 있는 Box 속에 표시합니다.




8. 출력결과
위의 입력 Box 의 Source code 를 출력한 결과를 이 Box 에 표시합니다.





9. 말 한마디
제가 하고 싶은 말을 이 Box속에 말합니다.





10. Tag의 계층적 구조 보기 입력
- <최상위노드>
- <두번째등급노드>
- <세번째등급노드>
  <최하위노드 />
  </세번째등급노드>
  </두번째등급노드>
- <두번째등급노드>
- <세번째등급노드>
- <네번째등급노드>
  <최하위노드>여기가 끝입니다.</최하위노드>
  </네번째등급노드>
  </세번째등급노드>
  </두번째등급노드>
  </최상위노드>

위의 내용을 살펴보져... 우선 왼쪽에 (-)표시가 있는 줄 또는 (-)표시에 마우스 커저를 놓으면 링크걸린 글자처럼 손모양 커저로 바뀌게 되는데 그 상태로 클릭하면 클릭한 위치를 기준으로 접혀들어가면서 (+)표시로 바뀌게 됩니다. 이와 같이 (-)나 (+)표시를 노드(Node)라고 합니다. 그리고 누를 때 마다 상태가 바뀝니다.

이와 같이 접혀들어가서 (+)표시로 바뀌는 것을 Collapse라고 하고 반대로 (-)표시로 바뀌면서 확장되는 것을 Expand라고 합니다. 이와 같이 등급(rank)에 따른 계단식 구조를 계층형 구조(hierarchical structure)라고 합니다.





11. 좌측 메뉴 사용법

상단의 메뉴를 선택하면 화면 좌측에 메뉴가 나오게 됩니다. 위에서 설명한 것 처럼 확장(Expand)과 축소(Collapse)를 누를 때 마다 반복하게 되는데, 이 때 왼쪽의 pnode (1K)mnode (1K)를 누르면 확장과 축소만 되고 오른쪽의 글씨의 경우 화살표 커저는 확장과 축소만 되는 커저이고, 손 모양 커저가 생기면 클릭했을 때 왼쪽에 Link된 File이 출력됩니다. 또 lastnode (1K)의 글씨를 클릭하면 예외 없이 오른쪽에 Link된 File이 출력됩니다.

확장 시키기
확장 시키기




12. Link 걸린 글자에 대해서...

Link란 다른 문서와의 연결 고리와 같은 것으로, 그 글자 위에 마우스 커저를 올려 놓으면 커저가 손모양으로 바뀐다는 사실 잘 아시져?... 현재 이 사이트에서 본문의 글자색은 고 대비로 눈이 피곤해 지는 것을 약간 보완하기 위해서 검정색 보다 약간은 밝은 색(#333333)을 사용하고 배경색도 연한 회색(#EFEFEF)을 사용합니다만 색에 아주 민감한 전문가가 아니라면 잘 구분이 안되죠. 물론 저도 잘 구분이 안 갑니다.

오른쪽에 움직이는 작은 Box 의 'Top' 을 클릭하면 문서의 상단으로 이동하고 'Back' 을 클릭하면 한 단계 이전 페이지로 이동 합니다. 그리고 New 를 클릭하면 '새로고침' 입니다.



13. 검색 기능

검색 기능은 이 사이트의 문서를 보다 쉽게 찾기 위한 기능입니다. 오른쪽의 Slide 메뉴 하단의 검색을 클릭하면 오른쪽으로 검색창이 나타납니다. 검색하는 요령은 일반적인 검색 사이트에서의 방법과 같습니다. 예를 들어 font, color 등의 정확한 1개의 단어를 입력해도 되고, 완전한 단어가 생각나지 않으면 생각나는 만큼만 입력하시져. 유사한 단어를 모두 검색해 줍니다.



14. 코드 실행기

코드 실행기는 이 사이트 문서에 나오는 예제를 직접 실행해 보기 위해 마련한 단순한 기능을 가진, 흔히 말하는 HTML 연습장과 같습니다. 코드 실행기 사용법은

  1. exec_button (1K) 단추가 있을 경우에는 그냥 단추를 클릭하면 되고
  2. Source code만 있을 경우에는 소스를 드랙하여 선택하고 Ctrl + C로 복사한 다음 왼쪽 메뉴의 '코드 실행기' 를 선택하면 새 창이 뜨면서 복사한 내용이 자동으로 왼쪽 창에 붙여 넣기가 됩니다.
  3. 새창 왼쪽 상단의 '실행 결과 보기' 단추를 누르면 오른쪽 창에 결과가 나타납니다. 창을 닫을 때는 '창 닫기' 단추를 코~옥 누르면 되구요.




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

Top
Back
New
검색