HTML 기본(1)

 

---

html은 Hypertext Markup Language의 약어로 웹 문서를 만들기 위한 웹 언어의 한 종류이다.

 

 

 

html은 태그를 사용하여 이루어진다.

 

<tag> contents </tag>

 

< > 괄호 사이에 태그를 입력하고 태그 사이에 내용을 입력한다. 이 전체를 요소(element)라 부른다.

 

이때 앞쪽 태그를 시작태그(열린태그) , 뒤쪽 태그를 종료태그(닫힌태그) 라고 한다.

 

종료 태그는 태그 앞에 슬래시( / )를 사용하여 태그의 종료를 알린다.

 

 

빈 태그 (empty)

 

<!-- HTML 1/2/3/4/5 사용 가능. -->
<meta charset="UTF-8">
<img src="" alt="">
<input type="text">

<!-- XHTML/HTML5 사용 가능. -->
<meta charset="UTF-8" />
<img src="" alt="" />
<input type="text" />

 

어떤 태그들은 종료 태그가 존재하지 않기도 한데 이를 빈 태그라고 부른다.

 

그냥 사용해도 무리 없이 사용할 수 있긴 하지만 XHTML은 빈 태그를 허용하지 않으니

 

나중에 호환의 문제를 생각해서라도 태그 뒤에 슬래시( / )를 붙여서 종료를 표시해주는 습관을 들이는 게 좋다.

 

 

요소의 관계

 

<div>
  <div>
    <div></div>
  </div>
</div>

 

태그를 중첩하여 사용했을 때 들여 쓰기를 통해 구분된 요소들의 관계를 구분하여야 한다.

 

바로 위/ 아래의 요소는 부모 요소 / 자식 요소라 하고

 

모든 위/ 아래의 요소는 상위 요소 / 하위 요소라 부른다.

 

 

태그 기능의 확장

 

<태그 속성="값"></태그>

<div class=""></div>
<img src="" alt="" />
<input type="text" />

 

태그의 앞쪽 시작 태그에 속성과 값을 추가하여 태그의 기능을 확장시킬 수 있다.

 

태그의 이름을 지정할 수도 있고 스타일을 추가할 수도 있고

 

img 태그와 input 태그처럼 기본적인 속성이 지정되어 있는 경우도 있다.