web_frontend(7)HTML 기본 문법

HTML 기본 문법

 

요소(element)

 

<태그>내용</태그>

 

앞쪽 태그는 시작(열린)태그 뒷쪽 태그는 종료(닫힌) 태그

 

 

<태그>
  <태그>
    <태그>내용</태그>
  </태그>
</태그>

태그가 한단계 차이나면 자식/부모 요소라 부르고 두단계 이상 나면 하위(후손)/상위(조상) 요소라 부른다.

 

 

 

 

 

 

태그를 보다 보면 위와 같이 닫히는 태그가 있는것이 있고 닫힌 태그가 없는경우가 있는데 지금 부터는 그것을 알아본다.

 

<태그></태그>

 

이런 태그를 빈(empty) 태그 라고 부른다.

 

 

이 빈 태그도 두가지로 나뉜다.

 

<태그> -> HTML 1/2/3/4/5 

편리함   단점은 열리는 태크처럼 생겨서 빈 태그라고 알지 못하면 닫힌 태그를 찾게될수도 있음

 

<태그/> -> XHTML/HTML5 

안전함  /로 닫힘으로 표시해두기 때문에 헷깔리지 않음 근데 당장은 문제 없겠지만 framework 를 하다보면 /를 꼭 써야하는경우도 있음

 

따라서 이제부터는 항상 빈 태그도 / 작성 하는 방향으로 

 

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

열리는 태그에 속성과 값을 이용하여 기능을 확장함

 

 

예를 조금 들어보면 <img/>라는 이미지 태그를 사용했을때이미지를 삽입하는 요소(태그) 어떤 이미지를 삽입해야 하는지 이미지 이름은 무엇인지 모르기때문에 이러한 경우에 표시해주기 위해 속성과 값을 이용하여 기능을 확장한다,

 

ex)

<img src="경로" alt="이미지 없을때나오는 텍스트 "/>

 

열린 태그와 닫힌 태그가 있는 태그는 속성과 값이 없어도 기능을 하는 경우가 있지만(div 태그 같은경우)빈태그는 다 속성과 값이 꼭 있어야한다. 그리고 태그에 꼭 필요한 속성이 있는데 이것을 필수 속성이라 한다.

 

 

<input/>

사용자에게 데이터를 입력 받게 해주는 것

 

<input type="text" />
<input type="checkbox" />

type(데이터 타입 )="받을 데이터 타입"