쿠쿠리의 HTML 기초 용어정리 1탄!
그 첫번째 시작은 HTML의 기초중의 기초라고도 할 수 있는 body와 head 그리고 title
태그의 기능과 사용방법에 대해서 알아보도록 하겠습니다.
사실 쿠쿠리도 HTML 전문가가 아니라 제가 공부를 했던 내용들을 포스팅 하므로써
한번 더 복습도 하고! 제 블로그를 찾아주시는 분들과 정보도 공유하고!
일석이조의 효과를 볼 수 있을것이라고 생각합니다.
제 지식이 늘어나면 늘어날 수록 이웃님들과 나눌 수 있는 정보들도 늘어나겠죠?
자 그러면 지금부터! HTML 기초용어정리 1탄을 시작해보도록 하겠습니다.
|
|
태그를 직접 쓰면서 살펴보도록 하겠습니다.
제가 예시로 <head>, <body>, <title>을 사용해서 html 파일을 하나 만들어봤습니다.
이 파일을 웹에서 보게되면 아래와 같은 화면으로 보여지게 됩니다.
|
|
자 어떤가요. head, body, title이 각각 어디인지 아시겠어요?
당연히 모르실껍니다. 저 같은 HTML을 처음 시작하는 초보들은 모르는게 아주 당연합니다.
좀 더 자세히 알아보기 위해서 저장한 HTML 파일을 인터넷으로 불러와봤습니다.
혹시나 저처럼 이렇게 인터넷으로 불러왔는데 한글이 깨지시는 분들은 보기 - 인코딩으로 들어가셔서
유니코드로 변경해주시면 정상적으로 한글이 깨지지 않고 표기됩니다.
자 이렇게 보더라도 뭐가 뭔지 잘 감이 안오신다면 좀 더 자세히!
각각 태그가 어떻게 활용됐는지 살펴보도록 하겠습니다.
자 이제 좀 더 보기가 쉬워졌죠?
<title>
제일 상단에 사용된 <title></title> 태그는 한눈에 보시면 아시겠지만 페이지의 제목을 쓸 때
사용하는 태그입니다. 제가 빨간 박스로 표기를 해놓은 부분에 마우스를 가져다대면 화면과 같이
페이지 제목 전체를 확인 할 수 있습니다.
<body>
<body></body> 태그 안에 있는 모든 내용들은 메인 브라우저 창에 표시됩니다.
보통 인터넷 화면을 보면 위에 주소입력창, 메뉴창 있고 아래에 내용이 들어가는 하얀 박스있죠?
제가 빨간 박스를 쳐놓은 부분! 그 모든 부분이 body 태그 안에 들어간다고 보시면 됩니다.
"본문"에 해당된다고 보시면 됩니다.
자 여기까지 봤는데 head 태그는 아직도 나오지 않았습니다.
대체 head 태그는 무엇일까요?
<head>
head 태그는 페이지의 내용이 아니라 페이지에 대한 정보를 넣을 때 사용합니다.
위에서 설명해드렸던 <title> 태그 역시 head 태그 안에 포함되어 있습니다.
하얀 박스안에 들어가는 내용이 아니라 해당 페이지에 대한 언어정보나, 페이지 제목 등
페이지를 설명할 수 있는 내용들을 넣을 때 head 태그 안에 넣게 됩니다.
사실 일반인들이 페이지를 볼 때는 <title> 태그 외에는 드러나는게 없기 때문에 큰 영향을 주지 않습니다.
다만 개발자들이 페이지를 분석하거나 확인할 때나 쓰이는 태그라고 보시면 됩니다.
자! 여기까지 HTML 기초 용어정리 1탄을 살펴봤습니다.
사실 오늘 소개해드린 세가지 태그는 HTML 태그의 뼈대라고도 할 수 있습니다.
아주 기초적으로 사용하게 되는 태그이기 때문에 알아두면 좋을 내용이라고 할 수 있겠습니다.
다음 시간에는 제목, 단락, 공백, 줄바꿈 등 본문을 작성할 때 사용할 수 있는 태그들에 대해서 알아보도록 하겠습니다.
쿠쿠리의 HTML 강좌! 전문가는 아니지만 초보자분들이 알아보시기에 쉽게 더 좋은 강좌로 돌아오겠습니다.
'간판없는 컴퓨터 교습소 > HTML&CSS' 카테고리의 다른 글
| 페이지 내에서 링크걸어 이동하기 예시 페이지 (0) | 2014.03.27 |
|---|---|
| HTML 기초강좌 4강, 태그로 목록을 만들어보자 [목록태그 사용법] (0) | 2014.03.12 |
| HTML 기초강좌, 기초용어정리 3탄 [강조태그,공백태그,ins태그,인용태그] (0) | 2014.03.11 |
| HTML 기초강좌, 기초용어정리 2탄 [제목태그,굵기태그,윗첨자태그,가로줄태그] (0) | 2014.03.09 |
| 드림위버에서 저장한 HTML 파일 한글이 깨질 때 해결법 (1) | 2014.03.08 |
