HTML 언어와 가장 기초적인 태그들
HTML 언어 쉽게 따라하기 - HTML 언어와 가장 기초적인 태그들
HTML이란 홈페이지를 만들때 사용되는 언어로 Hyper Text Markup Language의 약자이다. HTML 언어는 뭐 몰라도 상관은 없지만 티스토리에서 스킨을 꾸미거나 배너를 넣거나 할때 HTML언어를 기초적인 것 정도 만이라도 알고 있다면 쉽게 적용할 수 있기에 중급까지도 아니고 기초정도는 배우기를 추천한다. 현재 '티스토리 쉽게 따라하기' 카테고리에서 티스토리 블로그에 FAST BOOT 스킨을 적용하여 배너넣기등 여러가지 적용하는 방법들을 포스팅하고 있다. 그런데 항상 등장하는 것이 바로 이 HTML 태그들이다. 몰라도 그냥 따라하면 할 수 있지만, 알고 있으면 더욱 쉽게 적용할 수 있고, 응용도 할 수 있으니 이번 HTML 배우기도 잘 살펴보기 바란다. 처음 보는 분들도 너무 걱정할 필요 없다. 알고보면 그리 어렵지도 않고 일단은 가장 기초 부분이니 따라만 오면 된다.
|
HTML 언어 기본 구조 |
HTML 언어는 항상 '< '로 시작해서 ' /> '로 끝난다. 앞뒤가 항상 < 와 />로 되어 있고 그 안에 또다른 다양한 태그들이 들어간다.
뒤에 />로 끝내는 것을 종료태그라 한다. 이것은 해당 태그가 여기에서 끝났음을 표시하는 기능이다.
참고로 모든 태그가 종료태그가 있는 것은 아니다. 태그에 따라 종료태그 없이 사용하는 태그도 있다.
하나의 문서가 완성되기 위해선 가장 기본적인 태그는 아래와 같다.
-------------------------------------------
<html>
<head>
머리말
</head>
<body>
본문내용
</body>
맺음말
</html>
--------------------------------------------
이게 가장 기본 구조 이다.
항상 뭔가의 태그가 있다면 아래에 / >와 함께 닫는 태그가 있다는 것을 알수 있다.
가장 기본적인 구조 <html>아래로 머리인 <head>, 몸통인 <body> 순이다. 다리는 없다.
|
html 언어를 작성해서 인터넷 창으로 보는 방법 |
이러한 html언어는 보통 메모장에 작성하면 된다. 아래에 써있는 html 문서를 메모장에 작성해 보자.
<html>
<head>
<title> 타이틀 입력 </title>
</head>
<body>
html 문서는 공백문자나 탭,
엔터 등의 문자를 하나의 공백으로 인식한다.
</body>
</html>
그리고 저장을 하는데 제목을 적은후 제목 다음에 .html 이라고 쓰고난 후 저장을 클릭한다. 메모장은 기본적으로 .txt로 설정되어 있다.
참고로 제목만 적은후 아래 파일형식에서 .html 을 선택해도 된다.
그러면 컴퓨터 화면에 다음과 같은 아이콘이 떠있는 것을 볼 수 있다. 인터넷 페이지로 저장이 된 것이다.
이것을 열면 아래와 같은 창이 뜨는 것을 볼 수 있다. html 언어를 이용해서 아래와 같은 인터넷 페이지를 만든것이다.
그런데 위 html문서에서 <body> 와 </body> 사이에 넣은 문구를 보면
"html 문서는 공백문자나 탭,
엔터 등의 문자를 하나의 공백으로 인식한다."
이렇게 그대로 나올줄 알았는데 일렬로 나온다. 그것은 html문서에서 공백문자나 엔터를 쳐도 하나의 공백으로만 인식하기 때문에 공백을 처리하거나 다음줄로 넘기기 위해선 다른 태그가 필요하다.
|
줄을 바꿀 때 사용하는 <br>태그 |
위에서 처럼 아무 태그 없이 글을 썼을 때는 그냥 한줄로 쭉 나온다. 그렇기 때문에 줄을 바꿀때는 줄바꿈 태그를 넣어줘야 하는데 이때 사용하는 태그가 바로 <br>태그이다. <br>태그는 종료태그 없이 사용하는 태그이다. 그 자체로 끝인것이다.
위의 기본 태그를 알고 있으니 한번 아래의 글과 똑같이 나오도록 메모장에 태그를 이용해서 만들어 보길 바란다.
[문제1]
엄마가 섬그늘에 굴 따러 가면
아기는 혼자남아 집을 보다가
바다가 불러주는 자장 노래에
팔베고 스르르르 잠이 듭니다.
자 html로 작성해 보았는가? 그럼 답을 보겠다.
[예시1}
<html>
<head>
<title> 섬그늘 </title>
</head>
<body>
엄마가 섬그늘에 굴 따러 가면
아기는 혼자남아 집을 보다가
바다가 불러주는 자장 노래에
팔베고 스르르르 잠이 듭니다.
</body>
</html>
이렇게 작성했다면 결과물은 다음과 같이 나올 것이다.
[예시1 결과]
엄마가 섬그늘에 굴 따러 가면 아기는 혼자남아 집을 보다가 바다가 불러주는 자장 노래에 팔베고 스르르르 잠이 듭니다.
그러므로 줄바꿈 태그인 <br>을 사용해야 한다.
[예시2]
<html>
<head>
<title> 섬그늘 </title>
</head>
<body>
엄마가 섬그늘에 굴 따라 가면<br>
아기는 혼자남아 집을 보다가<br>
바다가 불러주는 자장 노래에<br>
팔베고 스르르르 잠이 듭니다.<br>
</body>
</html>
이렇게 작성을 하면 다음과 같이 원했던 결과가 나온다.
[예시2 결과]
엄마가 섬그늘에 굴 따라 가면
아기는 혼자남아 집을 보다가
바다가 불러주는 자장 노래에
팔베고 스르르르 잠이 듭니다.
참고로 <title> 태그는 아래 그림에서 처럼 빨간 테두리 부분에 제목이 나오게 하는 태그이다.
오늘은 html 기초 태그중 가장 기본 구조에 대해 알아보았다.
뭐든 한번에 입력하면 포화가 되듯이 차근차근 하나씩 알아보겠다. 이번 수업이 잘 이해가 되었다면 다음 포스팅에서는 위치를 조정하는 태그와 이미지를 넣는 태그를 알아보겠다.
이 글을 공유합시다
