HTML 기초, HTML 독학을 해보자 (첫번째)
이 포스트는 Tistory 블로그를 하면서 자주 접하는 HTML에 대한 궁금증을 해소하기 위해
HTML 기초공부를 시작하고, 공부한 내용을 정리 목적으로 작성된 포스트입니다. ^^
HTML 공부를 통해서 최종적으로 얻고싶은건 Tistory 스킨 제작입니다! 기대해주세요~
저의 첫번째 HTML 독학을 도와줄 도서는 " 행복해지는 HTML + CSS + Javascript " 입니다.
책을 한 번 싹 공부한 후 개인적인 책의 만족도는 10점 만점에 10점입니다. 초보한테 아주 굳! 따봉!
그럼 개인적인 이야기는 그만하고, 공부를 시작해볼까요?
HTML 기초, HTML 독학
컴퓨터 관련 공부하는분이나 Tistory 블로거 분들이 아니라면 접하기 어려운게 HTML 입니다.
먼저 위에 사진을 보시면 익숙하지않은분들은 무슨 내용인지 모르시겠죠? 이건 Tistory 스킨 수정하는 화면의 HTML 코드예요
블로그 페이지를 구성하는 전체적인 HTML 언어들이죠!
쉽게 설명하면 우리가 사용하는 인터넷과 블로그 대화내용을 요약한거라고 보면 되겠네요.
그럼 HTML 이란 무엇일까요?
Hyper text markup language 의 약자이며, 웹 문서를 만들기 위해서 사용하는 기본적인 프로그래밍 언어의 한 종류.
웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것을 하이퍼텍스트라고 하는데, HTML은 이런 하이퍼 텍스트 기능을
포함해 텍스트 / 이미지 등을 웹 브라우저에 표시할 수 있도록 도와주는 역할을 합니다.
★ HTML 기본구조
<HTML> , <HEAD>, <TITLE>, <BODY> 4가지 기본 태그로 이루어져 있습니다.
예문)
<html>
<head>
<title> html 문서의 제목 (title)이 들어간다. </title>
<body>
html 문서의 내용이 들어간다.
</body>
</html>
ㄴ 태그 파악하기
html 태그는 html 문서로 작성한 내용들이 인터넷 브라우저로 출력되는 것에 대한 형식을 정합니다.
대부분의 html 태그는 시작 태그와 끝 태그가 쌍을 이루고 있습니다. 예를 들어 <html> , </html>
<태그이름> 을 시작태그라 부르고, </태그이름>을 끝 태그라고 부릅니다.
* html 문서의 태그들은 대소문자의 구별이 없으며, 태그를 사용할 때 주의사항은 태그를 교차해서
사용하지 말아야 한다는 점입니다.
ㄴ html 문서를 구성하는 기본 태그 4가지 제대로 파악하기
html 문서는 머리 부분(head)과 몸통 부분(body) 두 부분으로 나눠집니다.
머리 부분은 head 태그로 둘러 싸인 부분, 몸통부분은 body 태그로 둘러 싸인 부분입니다.
4개의 기본 태그의 역할을 개별적으로 살펴봅시다.
- html 문서의 시작과 종료 ( <html> ~ </html> )
문서가 html 언어로 만들어 졌다는 것을 알려주고, html 문서의 시작과 종료를 명시해 준다.
- html 문서의 머리 부분 ( <head> ~ </head> )
<head> 태그는 html의 머리말에 해당하는 부분. 이 태그는 내부에 <title> 태그를 포함하는데, <title> 태그 내부에 기술한
내용은 웹 브라우저의 화면 상단에 표시됩니다. 타이틀을 제외하고는 head 부분에 기술한 내용은 웹브라우저를 통해
사용자에게 보이지 않습니다.
- html 문서의 타이틀 ( <title> ~ </title> )
<title> 태그에 기술한 내용은 웹 브라우저의 화면 상단에 나타나며, html 문서의 제목을 지정하는 태그
이 태그에는 64문자 이내로 기입하는게 좋다.
- html 문서의 몸통 부분 ( <body> ~ </body> )
<body>, </body> 안에 기술한 내용들은 웹 브라우저 화면에 바로 나타난다. <body> 태그는 html 문서의 실제적인
내용이 들어가는 곳. <head> 부분에 들어가는 태그를 제외하고는 모든 태그를 <body> 안에 기술해서 사용한다.
웹 브라우저를 통해 보여지는 html 문서들은 body 부분에 기술한 각 태그 및 텍스트입니다.
★ html 문서 작성과 확인을 해보자
html 문서는 우리가 사용하는 컴퓨터에 기본적으로 내장되어 있는 메모장으로 작성할 수 있습니다.
이 때 주의할 점은 인터넷 익스플로러를 통해 html 문서의 결과를 확인하기 위해서는 html 문서 작성후 확장자를 꼭 .html로
지정해야 됩니다.
저장할때는 꼭 확장자를 .html 로 지정하자.
작성된 html 문서파일을 열면 이렇게 짜짠~
