찜 : 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로 구성되어 있다고 쉽게 생각하시면 됩니다.
소스 맨 위에 두번째 줄을 보면 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 지식만 잘 이해했다면 "href"란 태그가 링크를 거는 태그이고 그 다음에 오는 target 이라는 옵션이라는 것을 생각할 수 있습니다. _blank는 새 창에서 링크가 걸린 창을 띄우라는 뜻이구요 만약 편집기에서 옵션을 새 창이 아니라 현재창을 선택했다면 target이 없는 것을 볼 수 있습니다. 없다면 현재 창에서 링크된 창으로 연결이 되겠지요^^
네 여기까지 HTML을 이해하느라 수고하셨습니다. 앞에서도 이야기 했듯 HTML을 모두 이해할 필요는 없습니다. 하지만 이 정도의 지식만 가진다면 웹 페이지와 블로그 그리고 인터넷에 대해서 좀 더 깊은 이해를 하셨다고도 자부심을 느껴도 되실 것입니다. 앞으로 많은 블로깅들을 통해서 스킨의 HTML 소스를 이해할 수 있고 또 소스보기를 통해 자기가 궁금한 기능의 HTML 소스를 보고 이해할 수 있는 경지에 오르시길 바라며^^
'소셜미디어 유통' 카테고리의 다른 글
| 블로시스30 / 2009년 4월 18일 세 번째 강의 내용 정리 (2) | 2009.04.18 |
|---|---|
| 블로시스30 / 2009년 4월 11일 두 번째 강의 내용 정리 (0) | 2009.04.18 |
| 블로시스30 / 2009년 4월 4일 첫 강의 내용 정리 (0) | 2009.04.05 |
| 블로그 유통 (1) | 2009.03.31 |
| 블로그 궁금한 것 정리 (2) | 2009.03.27 |
