[HTML 기초] 간단하게 HTML의 기본개념 이해하기
[HTML 기초] 간단하게 HTML의 기본개념 이해하기
안녕하세요~ 친절한효자손 이에요~!
이곳은, HTML의 기초 지식을 습득하게 될 공간이에요^^
지금 이 포스팅을 쓰는 저도 HTML에 대해 전혀~모르고 있는 상태에요.
...엥? 근데 뭘 알려준다는거지???
저번에, 포토샵 처음 포스팅때도 그랬듯~!
제가 하나하나 배우는 과정을 낱낱히 포스팅을 할 것이기 때문에,
아마 장담컨데! 제가 모든 과정을 수료후에는 이 포스팅이 완전 완성도가 올라가 있을 것이며,
아무나, 제 포스팅대로만 꾸준히 습득을 하신다면! 저랑 아니~ 저보다 더 잘하실 수도 있을거에요^^
html 을 다루는데 별도의 특출난 프로그램이 있는것이 아니오라,
메모장이나, 노트패드 같은 프로그램만 있으면 웹페이지를 만들 수 있고, 편집도 가능해요^^
그러나, HTML을 능숙히 다루기 위해선, 우선 언어들을 알아야 겠죠??
우리가 미국에서 의사소통이 잘 되려면, 영어회화를 잘 배워야 하고, 기본적으로 회화는 단어의 조합이니,
가장 기초인! 영단어 숙지가 필수여야 할 것이에요.
HTML도 마찬가지~!
HTML을 능숙히 다루려면, 문법도 알아야 하지만, HTML 언어에 쓰일 몇가지 명령어 단어들이 있어요.
그것만 잘 기억하신다고 하면, HTML을 사용하시는데 전~혀 지장이 없을거에요^^
NotePAD v6.7.5.zip윈도우에 있는 메모장으로 쓰셔도 무방하지만,
기왕이면 좀 더 쓰기 편한 프로그램이 좋겠죠? ^0^
노트패드 플러스 플러스 구요~ 첨부파일에도 있으니 다운 받으셔서 사용해 보시면 되시겠어요~!
우선, 첫시간은, 간단히 HTML 문서를 만드는 방법,
그리고 헤드와 타이틀, 바디의 기본 역할개념 정도로 학습이 있었어요^^
이것이 첫날 배운 기본 HTML 구성이구요,
메모장 혹은 노트패드처럼 위의 문구를 글자 하나 틀리지 않고 그대로 적어놓구 저장을 하게 되면,
끝~! 완성~! 완전 쉽지요???
<여기서 나온 HTML 언어>
meta charset → 언어의 인코딩을 어떤식으로 할것인지를 정하는 것이에요. 보통 유니코드, UTF-8 이 있는데, 가장 많이 쓰는것이 UTF-8 이에용~
title → 타이틀! 대표문구를 말하는 것이죠. 홈페이지 접속시 탭 부분에 보이는 문구 설정 명령어지요.
head → 신문으로 치면 헤드라인 부분! 이 영역에는 주로 위의 2가지인 meta charset 이나, title 같은 명령어가 쓰이지요.
body → 머리 다음 몸통이잖아요? 헤드 부분을 다 꾸몄으니, 이제 주 내용으로 체워질 부분이에요. HTML 퀄리티에 따라 많은 언어가 들어갈 수 있어요.
img src → 이미지소스 라는 명령어로서, 그림이나 사진파일을 띄울때 사용되지요.
P → 글씨를 넣을 때 사용되는 명령어에요.
역슬러시 "/" 는 해당 명령어를 종료 하고자 할때 사용되어요. 즉! 모든명령어를 사용했으면, 반드시 </사용명령어> 를 해 주셔야 해요.
대략, 이렇게 HTML명령 기본틀이 구성이 되요^^
스타트는 느낌표후, doctype 이라고 써있는데, 이게 뭔고 하니,
더큐먼트 타입 이라고 써있는 것이구요~~!
바로 밑에 언어는 어느것으로 할것인지 지정해 주는 명령어가 보이네요.
KO 는 코리아의 약자~! 한국어 라고 지정해 준 거에요.
이 커다란 우리 안에, 2개의 작은 우리가 더 들어 있는데,
각각을 헤드와 바디 라고 하죠.
신문에 보시면, 헤드라인이 항상 1면을 잔뜩 메우고 있죠?
그 이유는 뭐겠나요? 가장 잘 눈의 띄는 장소 라서 그렇지요^^
저 Head (헤드) 안에, 타이틀이 들어갈 문구를 넣고,
Body (바디) 안쪽에 뭐 각종 이미지나 여러가지 글들이 앞으로 들어가게 되겠죠??
실질적으로 바디 안쪽에 각종 HTML언어들이 많이 들어가게 될꺼에요~!
이번에 예시를 든 것은, 헤드 안에 타이틀 문구가 들어가고, 문구 이름은 [ 기초 프로그래밍 1일차 ] 라고 넣었고요,
바디 안에는 가로 960픽셀, 세로 540픽셀 크기의 이미지가 열리게끔 HTML 명령어가 들어갔어요.
참고로, 이미지 원본파일 그대로 열리게끔 하려면, 가로세로 명령문구만 지우시면 되요^^
그리고, P 명령어를 써서, 첫번째 예제 이미지 출력 이라는 문구도 이미지 밑에 들어가게 해 줬어요.
그럼, 노트패드로 HTML 작성한 것을 저장하시구요~! 중요한것은,
저장한 HTML 파일과 이미지 파일이 같은 폴더안에 들어 있어야 한다는 것이에요.
또한, 노트패드에 적어놨던 이미지파일명과 실제로 같이 있는 이미지파일명이 둘다 같아야 한다는 점~!
잊지 마시구요~!
그러면, 이렇게 test.html 을 더블클릭해서 열면!?
인터넷 창이 뜨고, 지정해둔 이미지도 같이 출력하게 되구요^^
문구들도 다 정상적으로 잘 나오는것을 확인하실 수 있게 되지요~!
이런식으로 HTML 명령어를 하나하나 익혀 나가게 된다면,
이제 천하무적이 되는건 시간문제다~ 이런 말씀이죠^^ 우하하하~!
특히, 저처럼 블로그를 하시는 분들은, 기본적인 HTML 다루는 스킬을 익히신다면,
블로그 태그 넣기라던지, 스킨꾸미기 라던지~ 위젯 다루는게 아마 좀 더 수월해 질 것으로 저는 바라보고 있어요.
자~ 어떠신가요? 생각보단 어렵진 않죠?^^
이제 하나하나 사소한것까지 모두 다 배운 그대로 포스팅 할꺼에요~!
저는 복습도 해서 좋구~ 이웃분들과 방문자 분들은 배워나가서 좋구~!
일석이조~~!!!
그럼 다음시간에 또 알현해요~!
"친절한효자손 취미생활" 을 검색!
