찜 : 8.6 에디터에서 HTML로 수정하기
이름 : 어복민
블로그 포스팅 주소 : http://fishabm.tistory.com/30
역할 : 필진

Blogger's Survival  
- 블로거들이 모여 하루만에 블로그 입문서 쓰기 출판2.0 프로젝트


----------------------------------------------------------------------

안녕하세요 에디터에서 HTML로 수정하기 Part를 집필하게 된 어복민 입니다.
홈페이지를 만들 때에는 HTML에 대해서 반드시 알아야 했던 시절이 있었는데요
블로그 시대로 넘어와서는 HTML에 대해서 전혀 모른다고 하여도 현재 블로그를 만들고 운영하는데 있어서 전혀 문제가 되지 않습니다.^^ 하지만 HTML에 대해서 조금만 알고 이해하면 우리가 접속하는 모든 웹 페이지들과 블로그에 대해서 많은 이해와 도움을 얻을 수 있습니다. 

소개 순서~
1.  HTML 소개
2. 에디터로 편집하고 HTML 이해하기
3. HTML 소스를 에디터에서 편집해보기
4. 에디터 편집에 유용한 몇 가지


1. HTML 소개

HTML을 한 번도 못 보신 분 있으신가요? 아닙니다~
인터넷을 이용하고 계신 분이라면 HTML을 보고 있는 것입니다.
우리가 .doc 파일을 읽고 편집하기 위해서는 마이크로소프트의 워드 프로그램을 사용합니다. 그리고 .hwp 파일을 편집하기 위해서는 아래한글 프로그램을 사용하는 것 처럼 html 은 웹 브라우져에서 볼 수 있도록 최적화된 형식의 파일입니다. 즉, 우리가 익스플로러와 같은 인터넷 브라우져를 통하여서 보고 있는 모든 화면들은 HTML로 구성되어 있다고 쉽게 생각하시면 됩니다.


예를 하나 들어보겠습니다. naver 첫 화면에서 마우스 오른쪽 버튼을 눌러 보면 "소스 보기(V)" 메뉴가 있는 것을 보실 수 있습니다. 여기서 소스란 source, 즉 원천이란 뜻으로~ 이 화면이 대체 어떤 원리로 나오는지를 볼 수 있는 것을 의미합니다. 소스 보기 메뉴를 선택해보면 복잡한 내용들이 메모장에서 열리는 것을 볼 수 있는데요, 바로 이 복잡한 내용들이 naver 첫 화면을 구성하는 html 소스입니다. 

소스 맨 위에 두번째 줄을 보면 html 이라고 써있는 것이 보이시죠?
그리고 뒤를 이어 많은 내용들이 "<" 과 ">" 로 둘러 쌓여 있는 것이 보이실 겁니다~ 이것이 바로 HTML 의 형식들인데요~ 지금은 대충 아! 우리가 인터넷을 통해서 보는 내용들이 모두 HTML 로 이루어져 있구나~ 하는 정도만 이해하고 넘어가겠습니다.

HTML은 무엇의 약자일까요? Hyper Text Markup Language 로 마크업 언어입니다.
마크업이란 문서에서 특정 부분을 표시하고 특별한 의미를 부여하는 것인데요. 그래서 마크업 랭귀지는 익스플로러와 같은 웹브라우저에서 화면에 정해진 규칙대로 특정한 부분에 의미와 기능을 부여하는 것입니다.
Hyper Text는 Text (글자들 정도?)에 어떤 기능을 부여한 것을 뜻합니다. 익스플로러에서 어떤 링크가 걸린 문자들을 클릭했을 때에 그와 관련된 정보로 연결이 되는 것들을 보셨지요? 바로 그런 것이 Hyper Text 입니다.

HTML 문서는 태그로 이루어져 있는데요 HTML에서의 태그는 웹문서 상에서 어떤 기능을 해줄 것인가에 대한 명령어 입니다. HTML 태그를 사용할 때에는 꺽쇄인 "<"  과  ">" 사이에 들어가게 되고 <태그> .... </태그> 의 형식으로 사용하게 되는데요~ 예를 한 번 들어보겠습니다. 우리가 에디터에서 "블로그기반 출판2.0 프로젝트" 라고 글을 쓰고 "블로그기반" 이라는 단어를 두껍게 하고 싶을 때는 어떻게 하나요?  에디터에서는 블로그기반을 마우스로 드래그하여 선택한 뒤에 ctrl + b 버튼을 누르거나 굵게 버튼을 누르게 됩니다. 그런다음 HTML 에디터 타입을 클릭해보세요~ "블로그기반" 앞 뒤에 <b>와 </b> 가 생긴 것을 볼 수 있습니다. 두껍다 라는 뜻을 가진 "bold" 의 앞글자를 딴 b 라는 태그 입니다^^ 단축키인 ctrl + b 도 마찬가지로 bold의 약자인 b 버튼을 사용하는 것이겠죠?
(티스토리에서는 strong 이라는 태그를 사용합니다^^)


2. 에디터로 편집하고 HTML 이해하기

 에디터가 무엇일까요? 블로그에서 글을 쓸 때에도 글자의 크기를 키우거나, 밑줄을 긋거나 또는 중간으로 정렬을 하거나 사진을 첨부하거나~ 이런 모든 것들을 손쉽게 해주는 프로그램이 에디터 입니다. 이미 에디터 사용하기 챕터에서 상세히 들으셨을 것입니다^^  에디터에는 텍스트 기반의 텍스트형 에디터와 브라우져에서 그래로 출력되는 위지윅(WYSIWYG) 방식의 에디터가 있습니다. 우리가 블로그에서 글을 쓸 때에는 위지윅 방식의 에디터를 사용하게 됩니다.

(참고로 위지윅이란 What you see is what you get 의 약자로 본 것대로 얻는다라는 뜻입니다.)

 그런데 여기서는 다른 방법으로 조금 더 깊이 정의를 내려보겠습니다.
 제가 익스플로러에서 보여지는 모든 화면이 HTML로 구성되어 있다고 말씀 드렸죠?  네 맞습니다~ 위지윅 에디터는 바로 이 HTML을 쉽게 만들어주는 프로그램이라고 생각하시면 됩니다. 우리가 HTML에 대해서 잘 몰라도 손 쉽게 웹을 편집할 수 있는 이유가 바로 위지윅에디터가 하는 일이 우리가 보여지는 대로 편집을 하면 편집기가 알아서 HTML을 생성해주었기 때문입니다. 실제로 우리가 편집을 하고 저장을 할 때에 서버에서는 모두 HTML 형태로 저장되게 됩니다. 그리고 웹브라우져에서도 HTML로 인식을 해서 우리에게 화면을 보여주는 것이구요~ 이것은 마치 우리가 전화 통화를 할 때에 우리의 음성정보가 모두 1과 0의 전기적 신호로 변환하여서 전달되지만 받는 쪽에서는 다시 이 0과 1의 정보들을 조합하여 우리의 목소리를 재현해내는 것과 비슷하다고 이해하시면 됩니다 살짝 어렵죠? ~ 그냥 그런가 보다 하고 넘어가겠습니다^^

 티스토리, 네이버 모두 편집기 우측 상단에 보면 HTML 체크 박스가 있는 것을 볼 수 있습니다. 편집기에서 글을 편집하다가 이 버튼을 눌러보면 HTML 소스를 직접 확인할 수 있습니다^^

 그럼 편집기에서 편집을 해보다가 이 HTML 소스 버튼을 눌러 태그를 몇 가지 배워보도록 하겠습니다.


  편집기에서 사진과 같이 블로고수 HTML TEST 를 작성하고 편집기를 이용하여 
ㄱ. 센터정렬 ㄴ. 폰트사이즈를 조절 ㄷ. 블로고수에 밑줄 쫙~ 하고 그어보시기 바랍니다^^

다음엔 편집기 우측 상단의 HTML 체크팍스를 클릭해보면 우리가 작성한 글에 대한 HTML 소스를 확인할 수 있습니다.

<DIV style="TEXT-ALIGN: center"><SPAN style="FONT-SIZE: 24pt"><U>블로고수</U> HTML <SPAN style="FONT-SIZE: 12pt">TEST</SPAN></SPAN></DIV>

이렇게 확인이 되는데요~ 하나씩 살펴보면
ㄱ. DIV style="Text-ALIGN : center 라고 되어 있습니다. align이 정렬이라는 뜻이 되니까 태그로 둘러쌓인 내용들을 가운데로 정렬하라는 이야기 입니다^^
ㄴ. style="FONT-SIZE: 24pt : 이것은 FONT 가 글자라는 뜻이니까  크기를 24로 한다는 뜻이네요 상대적으로 뒤에 Test는 size가 12로 되어 있으니 블로고수 HTML 보다 크기가 절반이죠?
ㄷ.<U>블로고수</U>: 블로구수에는 밑줄이 쳐져있는데 "U" 라는 태그로 둘러쌓여 있네요 이것은 Underline의 약자로 밑줄을 긋는 태그입니다.


3. HTML 소스를 에디터에서 편집해보기

 그럼 이번에는 에디터에서 거꾸로 HTML 소스로 편집을 해보도록 하겠습니다. 앞에서 배운 태그들을 중심으로 한 번 작성해 볼게요. 끌쓰기 버튼을 누르시고 바로 HTML 체크 박스를 눌러주세요



그러면 <br/> 이렇게 되어 있는 것이 보이는데요~ br은 break의 약자로 한 줄 띄라는 뜻입니다.
어쨌든 우리가 배운 소스들을 동원해서 한 번 작성해 볼게요
 
<center><u>나는</u> 이미<br><b>블로고수</b></center>

이렇게 작성하고 나서 다시 HTML 체크 박스를 누르면 편집기에 어떤 모양으로 나타날까요?
머리속에 그려지시는 분은 이미 HTML 이 어떤 원리인지 알게되고 블로고수에 한 걸음 나아가셨다고 생각하면 되십니다^^



4. 에디터 편집에 유용한 HTML 지식 몇 가지

어떤가요? HTML 소스가 어떤 의미인지 이제 살짝 이해가 되시죠? 다시 요점만 복습하자면~

 1) 우리가 화면에서 보는 모든 것은 HTML 이다.
 2) 우리가 글을 작성할 때에는 편집기를 주로 사용하는데 바로 이 편집기가 HTML을 작성해주는 역할을 하는 것이다^^

그럼 마지막으로 우리가 자주 사용하는 HTML 소스 링크걸기를  살펴보고 마치도록 하겠습니다.

   편집기로

HTML 소스

우리가 앞에서 다루었던 HTML 지식만 잘 이해했다면 "href"란 태그가 링크를 거는 태그이고 그 다음에 오는 target 이라는 옵션이라는 것을 생각할 수 있습니다. _blank는 새 창에서 링크가 걸린 창을 띄우라는 뜻이구요 만약 편집기에서 옵션을 새 창이 아니라 현재창을 선택했다면 target이 없는 것을 볼 수 있습니다. 없다면 현재 창에서 링크된 창으로 연결이 되겠지요^^

네 여기까지 HTML을 이해하느라 수고하셨습니다. 앞에서도 이야기 했듯 HTML을 모두 이해할 필요는 없습니다. 하지만 이 정도의 지식만 가진다면 웹 페이지와 블로그 그리고 인터넷에 대해서 좀 더 깊은 이해를 하셨다고도 자부심을 느껴도 되실 것입니다. 앞으로 많은 블로깅들을 통해서 스킨의 HTML 소스를 이해할 수 있고 또 소스보기를 통해 자기가 궁금한 기능의 HTML 소스를 보고 이해할 수 있는 경지에 오르시길 바라며^^


Writer profile
author image  백성들에게 복을 나누어주라는 이름의 어복민[魚福民] 입니다.
  제 소원은 복을 유통하며 사는 것입니다.
  유통이란 좋은 것을 널리 전하는 것인데요, 제가 유통하고자 하는 복이
  우연히 일어나다란 뜻의 happen이 어원인 행복(happiness)이 아니라
  피흘리다라는 뜻의 bleed가 어원인 축복(blessing)이 되길 기도합니다.
  http://shareblessing.com
                       IT분야에 관심이 많으며 현재 KT 미디어본부에서 근무하고 있습니다^^
Posted by 어복민

댓글을 달아 주세요

  1. Favicon of https://ebizstory.tistory.com 강팀장 2009.03.29 00:42 신고  댓글주소  수정/삭제  댓글쓰기

    ^^ 화이팅 입니다.

    함께 할 수 있어 너무나 좋습니다. 홍홍홍~

  2. Favicon of https://erla.tistory.com 어라 2009.04.10 01:22 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요? 불로고수 공동편집장 현웅재입니다.
    그날 토즈에서 만나서 반가웠습니다.

    그 글 주제는 해당 찜하시분과 조율하시고 저에게 알려주시면 될 것 같습니다. ^^

    이사는 잘 되시죵? ㅎㅎ

    • Favicon of https://shareblessing.com 어복민 2009.04.10 15:10 신고  댓글주소  수정/삭제

      네 방문 감사드립니다^^
      이사하느라 엄청 고생하고 있습니다 @_@
      그래도 앞으로 함께하고 정을 팍팍 줄~ 블로그라 도메인도 연결하고 정성을 드리고 있습니다 ㅋ
      얼릉 마무리하고 다음주 불로고수 책 나올 때에는 필진의 한 명으로 이사가 완료된 블로그를 보여주는게 제 작은 바램입니다 ㅋ
      앞으로 자주 뵐게요~

  3. Favicon of https://socialpr.tistory.com 보노정 2009.04.10 18:21 신고  댓글주소  수정/삭제  댓글쓰기

    댓글 어디다 달아야 할 지 고심하다...여기에 남깁니다.

    사회적기업과 PR을 주제로 포스팅할 블로그 - www.socialpr.tistory.com 이렇게 바꿨습니다.

    바꾸면 알려달라 하셔서...그럼 내일 뵐께요~

    • Favicon of https://shareblessing.com 어복민 2009.04.14 13:22 신고  댓글주소  수정/삭제

      넵^^ 제 블로그에서 관련 링크는 수정해 두었습니다
      블로그 잘 꾸며가고 계신지요?
      저는 블로그 이사 때문에 아직 분주하네요
      얼릉 이사 끝내서 배운 것 처럼
      양질의 컨텐츠 생산에만 신경쓰는 단계를 맞고 싶어요^^

  4. Favicon of http://yangcoach.com 양정훈 2009.04.19 11:45  댓글주소  수정/삭제  댓글쓰기

    어복민님, 잘 봤습니다.

    대부분 사람들이 모두 평이하게 이해할 것 같게 정말 잘 쓰셨네요. 그런 대전제하에 농어촌에 계신 분들을 대상으로 다음 단어만 조금 어려울 것 같지 않나해서 사견을 조금 넣어봅니다.^^

    1. "어떤 링크가 걸린 문자들을 클릭했을 때에 그와 관련된 정보로 연결이 되는 것들을 보셨지요? "
    -> 마우스 화살표를 가져가면 갑자기 손 모양으로 바뀌게 되는 글자가 있지요? 그것을 누르시면 다른 창이 뜨는 것을 보신 적이 있으신지요?

    '링크'와 '클릭' 이라는 단어 정도만 개인적으로 풀어보았습니다.^^

    2. "편집기에서 사진과 같이 블로고수 HTML TEST 를 작성하고 편집기를 이용하여
    ㄱ. 센터정렬 ㄴ. 폰트사이즈를 조절 ㄷ. 블로고수에 밑줄 쫙~ 하고 그어보시기 바랍니다^^"

    -> 그림에 어느것이 센터 정렬이고 폰트 사이즈 조절인지를 다른 그림처럼 표시해 준다면 초보자도 더 쉽게 알 수 있을 것 같습니다. (물론 블로그 한번이라도 해 보신 분들이라면 대부분 아시겠지만)


    전반적으로 나름 기술적 이야기가 풀어가시는 부분인데, 아주 섬세하게 다뤄주셨네요. 파워유저이신 것 같아 부럽습니다. ^^