Won's Factory
HTML의 기본 문법 (Basic HTML Grammar)
기본 문법의 표준이라는 뜻은 정해놓은 규칙이나 절차라는 의미입니다.
웹 표준을 준수한다는 의미는 '정해진 규칙을 잘 치켜서 마크업(makr-up)한다라는 의미입니다.
중요한 용어에 대해서 잠깐 설명을 해보겠습니다.
<P> , <spen> , <a> 등과 같은 명령어의 형태가 <>(각괄호)안에 들어가 있을 때 이런 문장들을 [Tag]라고 합니다.
<P>~</P>와 같은 태그[Tag]의 시작과 끝에는 <>으로 시작해서 </>로 끝나게 되어 있습니다.
이러한 각 괄호 안에 들어가 있는 <>~</>를 요서[element]라고 합니다.
XHTML 문법의 규칙은 다음과 같습니다.
요소는 정확하게 중첩되어야 합니다.
<p> 중첩된 요소가 있을때 <strong>정확하게</strong>표현해야 합니다.</p>..............................................[o]
<p> 중첩된 요소가 있을때 <strong>정확하게</p>표현해야 합니다.</strong>..............................................[x]
마지막에 정의한 태그[Tag]를 가장 먼저 닫아야 합니다.
요소 및 속성 이름은 소문자로 표기합니다.
<p><a href="index.html">첫페이지</a></p>....................................[o]
<P><A HREF="index.html">첫페이지</A></P>.................................[x]
<a>요소에서 'href'를 속성[attribute]라고 합니다.
'='다음에 오는 것을 값[value]라고 표현합니다.
요소는 꼭 닫아서 마무리를 합니다.
<p> 요소는 꼭<strong>닫아서 마무리를</strong>해야합니다.</p>............................[o]
<p> 요소는 꼭<strong>닫아서 마무리를</strong>해야합니다........................................[x]
한 쌍의 태그[Tag]<>~</>형식의 요소로 이루어져 있지 않고 하나의 태그[Tag]로 되어 있는 요소도 있습니다.
이런 요소들을 '빈 요소[empty element]'라고 합니다.
자주 쓰이는 빈요소는 아래와 같고</>로 꼭 닫아주어야 합니다.
<br> , <hr> , <img> , <input> , <area> , <meta> , <link>.......</>
속성값에는 인용 부호를 붙여야 합니다.
<a href="index.html">첫페이지</a>...............................[o]
<a href=index.html>첫페이지</a>...................................[x]
간단하게 이해를 하자면 '=' 다음에 오는 문장들은 값이라고 하는데 이러한 값에는 인용부호를 붙여야 합니다.
속성은 속성값과 함께 사용해야 합니다.
<a href="index.html">첫페이지</a>...............................[o]
<a href>첫페이지</a>...........................................................[o]
속성은 항상 속성값과 함께 선언을 해야 하며 생략을 하면 안됩니다.
img와 area 효소에는 art 속성이 있어야 합니다.
<img src="img/mein.gif" alt="today"/>...................[o]
<img src="img/mein.gif" />...........................................[x]
<img>요소에 alt가 따라와 주어야 하는 이유는 문법적으로 필요하고 이미지를 볼 수 없는 성황에서도 충분히 그 이미지에 대한 정보를 제공해 주기 위해서 입니다. 이 부분은 뒤에 img요소를 설명할때 자세히 다루도록 하겠습니다.
중요한건 alt가 따라와주어야 한다는 것입니다.
특수 문자를 사용할 때는 entity name 또는 entity code를 사용해야 합니다.
me & ; me</p>...........................[o] & ;는 툭수문자 '&'는 특수 문자 '&'의 entity name
me & ; me </p>...........................[o] & ;는 특수문자 '&'의 entity code
me & me </p>.....................................[x]
주석처리 방법입니다.
주석은 일반적으로 협업, 공동작업이나 다음 작업자가 현재 작업 내용을 쉽게 알아 볼 수 있도록 도와주는 설명문형식의 문장입니다.
HTML편집기에서는 보이지만 브라우저 화면에 출력되지는 않습니다.
<!--주석 시작-->
<!--여기까지가
도움이 되셨다면 로그인 없이 가능한
아래 하트♥공감 버튼을 꾹 눌러주세요!
'IT > HTML5' 카테고리의 다른 글
| html5언어 구조_index.html (0) | 2018.08.25 |
|---|---|
| html편집기!!!아톰 에디터 Atom editor 설치하기 (0) | 2018.08.01 |
| 엑셀 함수 정리 (0) | 2018.04.10 |
| [html 소스]전화번호 문자 보내기 링크 걸기 (0) | 2018.03.17 |