목차
모두 Brackets는 다운받아 실행해보셨죠?
오늘은 본격적으로 HTML명령어에 대해서 배워보도록 하겠습니다.
먼저 우리는 백지 상태에서 시작할것이기에 새 파일을 만들어줍니다.
만드셨나요?
그럼 이제 HTML파일로 저장을 해주어야합니다.
HTML파일의 확장자는 당연히 .html입니다.
저같은 경우는 example.html로 해주었습니다.
한글로 하셔도 상관없습니다.
저장버튼이 어디있는지 모르시면 Ctrl+s를 눌러주세요.
그럼 이제 명령어를 배워보도록 할게요.
아 참! HTML에서는 명령어를 "태그"라고 부릅니다.
앞으로는 태그라고 부르겠습니다.
위와 똑같이 코딩을 해주세요.
그럼 여기서 하나하나 살펴보죠.
먼저 <HTML>부분은 해당 태그안에 들어가는 것은 HTML언어이다! 라고 생각하시면 됩니다.
밑에 </HTML>은 해당 태그의 끝을 알리는 겁니다.
즉, HTML언어의 범위는 <HTML>과 </HTML>사이가 되는 것이지요.
그럼 HTML태그에 대해서는 배워보았고,
다음은 HEAD태그입니다.
영어 뜻 그대로 머리 부분을 뜻합니다.
이곳에는 메타태그같은 태그들이 들어가는 곳입니다.
메타태그는 밑에서 보시면 되겠습니다.
다음으로 TITLE태그는 제목을 뜻합니다.
제 블로그를 접속하시게되면 Drin's Blog ::~~라고 나오게될텐데 이 부분이 TITLE태그 내에 있는 글자를 출력하는 겁니다.
<TITLE>예제</TITLE>
라고 되어있으니 예제라고 출력이 되겠군요.
다음으로 BODY태그는 영어 뜻 그대로 몸체라는 뜻으로 인터넷상에서 보여지는 부분을 여기에 입력하게 됩니다.
그럼 화면에는 "이 파일은 예제 파일입니다."가 출력 되겠군요.
저장을 하시고 HTML파일을 열어보세요.
HTML을 열때에는 어떤 브라우저든 상관없지만,
왠만하면 익스플로러를 사용하는 것을 추천드립니다.
맘같아서는 크롬같은 브라우저를 사용하고 싶지만,
대부분의 사람들이 익스플로러를 사용해서 어쩔수없이 익스플로러를 사용해야합니다.
실행해 보셨나요?
실행법은 파일을 우클릭하여 연결프로그램을 익스플로러로 변경하면 됩니다.
어떤가요?
입력한 그대로 나오나요?
아니면 글자가 깨져서 나오나요?
글자가 제대로 나오시면 그냥 그대로 사용하시면 되구요.
문제는 글자가 깨져서 나오는 분들입니다.
저도 처음에 당황했습니다.
어! 이거 왜러지? 하면서요.
다 방법이 있었습니다.
바로 메타태그를 추가하는것~!
앞전에 말씀드렸던 메타태그가 이제 나오네요.
메타태그는 정보 제공을 하지만 화면상에 출력되지는 않는 태그입니다.
앞에서 말씀드렸듯이 메타태그는 HEAD태그 내에 넣는 태그이니 HEAD안에 넣어줍니다.
<meta charset="utf-8">
는 인코딩을 할때에 utf-8형식으로 인코딩하라는 뜻입니다.
이유는 모르겠지만,
Brackets는 utf-8형식을 지원한다는 군요.
그리고 밑에 브라우저를 보시면 크롬이 사용되었습니다.
일부러 크롬을 사용한 것은 아니고
Brackets에서 제공하는 실시간 미리보기 기능은 크롬 브라우저로 실행되기에 크
롬으로 확인을 하고 익스플로러로 최종확인을 하는 겁니다.
자신이 작성한 코드가 실시간으로 미리보기가 되니 어떤 코드가 이상한지 바로 바로 알수있겠죠?
그럼 이 기능은 어디서 볼수있느냐하면,
우측 바를 보시면 이렇게 해리포터의 이마 번개표시처럼 아이콘이 있습니다.
이 아이콘을 누르시면 크롬 브라우저가 실행되면서 실시간 미리보기가 가능합니다.
오늘은 여기까지 해야겠군요.
설명하다보니 말이 길어졌네요...
2016/10/08 - [HTML] - [HTML] 에디터: Brackets ::홈페이지, 스킨 제작하기
2016/10/08 - [HTML] - [HTML] 시작에 앞서 ::홈페이지, 스킨 제작하기
'프로그램 개발' 카테고리의 다른 글
| [HTML] FONT 글자 크기 ::홈페이지, 스킨 제작하기 (0) | 2016.10.09 |
|---|---|
| [HTML] 제목 지정하기 H ::홈페이지, 스킨 제작하기 (0) | 2016.10.09 |
| [HTML] 에디터: Brackets ::홈페이지, 스킨 제작하기 (0) | 2016.10.08 |
| [HTML] 시작에 앞서 ::홈페이지, 스킨 제작하기 (0) | 2016.10.08 |
| [자료구조]자료구조(Data Structure) 정의 (0) | 2016.10.08 |