티스토리 뷰

IT 이야기/프로그래밍

[HTML 쉽게 이해하기 강좌 #2] - HTML 시작하기

하늘과 나b 2011. 6. 30. 16:07




HTML 시작하기


    이제부터 HTML에 대해 하나하나 알아보도록 하겠습니다. 가벼운 마음으로 시작하시면 되겠습니다. HTML이라는 녀석도 알고 보면 별 것 아닙니다. 괜히 HTML이라는 이름에 부담을 가지거나 그럴 필요가 없으니 차근차근 따라해 보시기 바랍니다.





HTML은 무엇으로 이루어져 있을까요?


HTML은 태그들의 집합이라고 볼 수도 있는데요. 이 태그는 아래와 같은 형태로 사용됩니다.

[알아두기] 태그의 형태
<여는 태그 속성 = "값" >
    내용
</닫는 태그> 



HTML의 태그는 기본적으로 여는 태그와 닫는 태그로 구성되어 있습니다.
 
여는 태그는 태그의 시작을 표시하고 닫는 태그는 태그의 끝을 표시합니다. 여는 태그와 닫는 태그 사이에는 내용이 들어가는데 내용 안에 또 다른 태그를 포함시킬 수도 있습니다. 즉 태그 안에 태그가 들어갈 수 있다는 의미입니다.

여는 태그 안에는 '속성'과 '속성 값'을 사용할 수 있으며 모든 태그와 속성은 소문자로 써야 합니다.
속성값은 대문자, 소문자의 제약이 없지만 반드시 겹따옴표("")를 사용해야 합니다.




 지난 시간 복슴하기  

    지난 시간에 HTML을 처음 시작하면서 아래와 같은 HTML 소스코드를 입력하고 저장해서 실제로 웹브라우저에 어떻게 나오는지를 봤었죠.

기억이 안나시면 전의 강좌로 이동해서 다시 보시는 것도 좋겠죠?^^ 

이전 강좌 보기 : [HTML 쉽게 이해하기 강좌 #1] - HTML의 기본



<html>    <head>    </head>    <body>        안녕하세요    </body></html>

위의 내용을 한줄 한줄 보도록 할게요. 한줄 한줄 보면 아래와 같군요.

이는 마치 개미의 생김새를 보면 머리, 가슴, 배로 이루어져 있듯이 HTML태그는 <html> 태그 안에 <head>와 <body>로 이루어져 있다는 것을 알 수 있지요.


 
 <HTML> 태그 : 문서가 HTML 언어를 사용하여 작성됨을 알립니다.

 <HEAD> 태그 : 시작을 알리는 태그입니다.
  </HEAD> 태그 : 시작을 알리는 태그가 끝난다는 태그입니다. 

 <BODY> 태그 : 파일문서를 실행했을때 화면에 보여지는 HTML  문서의 본문 부분입니다.
 </BODY> 태그 : 본문내용과 태그가 끝이 난다고 알리는 태그입니다.

 </HTML> 태그 : HTML 문서 끝을 알립니다.
 



 태그의 특징  

    여기서는 태그의 특징에 대해서 간단히 설명할 거에요.

    태그는 다음과 같은 특징을 가지고 있습니다. 바로 <> 로 둘러싼다는 것이죠. 위에서 보듯이 <head></head> 이렇게요. 그런데 같은 <head>인데 <head>도 있고 </head>도 있죠? 이것은 <head>는 시작을 알리는 태그, </head>는 끝을 알리는 태그라는 것이에요. 

    하지만 꼭 시작과 끝을 알리는 태그가 한 쌍으로 있는 것은 아니에요. <br> 이 태그는 줄바꿈을 하는 태그인데요. 단독으로 사용되니까 태그가 단독으로 사용되는 경우도 있구나라고 알아두시면 되겠네요^^

    또한 우리가 흔히 글자와 글자 사이를 띄울 때 키보드의 스페이스바 키를 눌러서 공백을 입력하는데요. 공백을 여러번 눌러도 HTML에서는 공백 한번으로 입력한답니다. 즉 '       '과 ' ' 이렇게 두개를 따로 입력해도 ' '로 인식되요

태그의 특징을 한번 정리해 볼까요?

 태그의 특징 
 
 1. <>로 둘러싼다.
 2. 시작을 알리는 태그는 <태그이름>로  끝을 알리는 태그는 </태그이름>으로 표시한다
     (단독으로 사용되는 태그는 <태그이름>으로 사용)          
 3. 여러 개의 공백은 하나의 공백으로 인식
 

그러면 이것으로 이번 강의를 마치도록 하겠습니다.

다음 강의에서 뵐게요^^ 


 

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

C언어 강좌 - 함수 fopen()의 모든 것!  (5) 2011.10.19
POST 방식과 GET 방식의 차이  (0) 2011.10.17
모바일 홈페이지로 자동 이동시키는 소스  (2) 2011.09.21
[HTML 쉽게 이해하기 강좌] 2단 레이아웃 한 방에 만들기  (4) 2011.07.04
[HTML 쉽게 이해하기 강좌 #3] HTML의 기본 태그에 대해 알아보기  (2) 2011.06.30
[프로그래밍 사이트 추천] 웹에서도 프로그래밍 할 수 있다? 없다? 결론은 있다!  (1) 2011.06.23
[프로그래밍 Tip] 프로그램 소스코드를 공개하는 사이트 모음!  (0) 2011.06.01
[C#] MDB(Access) 파일을 읽어 Excel에 넣고 Excel 실행 예제 [출처] MDB(Access) 파일을 읽어 Excel에 넣고 Excel 실행 예제  (0) 2011.05.31
[C#] 무료 기술 서적 - Inside C# (한글 번역본) 다운로드  (1) 2011.05.31
[C#] DataGridView 쉽게 사용하기 - DataGridView컨트롤에 데이터를 삽입하는 예제 소스  (18) 2011.05.22
공유하기 링크
댓글