이제부터 본격적으로 HTML 기초강좌를 시작해 보겠다.
이번 포스팅에서 다룰 내용은 HTML의 기초 중에서 기본이 되는 것들이다.
HTML은 웹페이지의 기본이 되는 페이지 이다.
처음부터 서버와 클라이언트의 개념까지 설명을 하면 이해하기 어려울 수도 있으니, 일단 저정도만 알고 넘어가자.
HTML은 홈페이지를 구성하는 여러 페이지라고 생각하자.
그렇다면 HTML은 어떤 방식으로 구성이 되는가..
1. HTML의 구성요소
(1)요소(Elements)
요소는 HTML에서 사용하는 태그로 이루어진 모든 명령어를 말한다.
<태그> 요소 </태그>
(2)태그(Tag)
태그는 위에서 설명했듯이 요소를 표현하는 방식이라 생각하면 된다.
태그의 종류는 많이 있으니, 공부를 하면서 숙지하는 것이 좋다.
<태그> 요소 </태그>
<p>이것은 P 태그</p>
<span>이것은 Span 태그</span>
(3)속성(Attributes)
속성은 태그 안에서 요소를 좀 더 구체적으로 표현해주는 명령어 이다.
<font size="5">폰트 태그에 사이즈라는 속성</font>
이렇게 설명만 하고 끝나면 재미도 없고.. 흥미도 없고..
무엇이든 눈 앞에 결과물이 보이면 더 재미있지 않을까?
그렇다면 바로 HTML 문서를 작성하면서 실제로 테스트를 해보자.
준비물은 정말 간단하다.
지금 눈 앞에 있는 컴퓨터 하나면 가능하다.
2. HTML 공부방 만들기
탐색기를 열어 적당한 드라이브에 폴더를 하나 생성하자.
그리고 첫번째 강좌이니 01 이라는 폴더를 생성하고, 이제 이곳에 예제들을 저장하도록 하겠다.
3. HTML 기본구조
일단 텍스트 문서를 만들어 보자.
그리고 다음과 같이 입력해 보자.
입력을 한 후 01.html 이라고 저장을 하자.
그리고 만들어진 01.html 파일을 실행해 보자.
실행을 하면 웹페이지가 열리는데 보는바와 같이 <title>태그의 요소는 웹페이지의 붉은색 부분에 표시되고, <body>태그의 요소는 파란색 부분에 표시되는걸 알 수 있다.
(1)<html>태그는 문서 전체를 감싸면서 문서를 선언해 주는 태그이다.
(2)<head>태그는 타이틀 같은 문서의 기본정보를 입력할 수 있으며, 나중에 배우게 될 자바스크립트나, CSS 파일들을 호출하는 경로가 들어가는 태그이다..
(3)<body>태그는 본문의 내용을 입력하는 태그이다.
다음 강좌에서는 HTML에서 사용하는 태그들에 대해 알아보고, 예제를 통해 직접 테스트를 해보겠다.
(예제는 첨부파일에서 받을 수 있습니다.)
01.zip'코딩이야기 > HTML' 카테고리의 다른 글
| HTML 강좌 6강 - HTML 태그 익히기#5 - TABLE 태그 (0) | 2016.01.09 |
|---|---|
| HTML 강좌 5강 - HTML 태그 익히기#4 (0) | 2016.01.08 |
| HTML 강좌 4강 - HTML 태그 익히기#3 (0) | 2016.01.07 |
| HTML 강좌 3강 - HTML 태그 익히기#2 (0) | 2016.01.06 |
| HTML 강좌 2강 - HTML 태그 익히기#1 (0) | 2016.01.05 |