[HTML Basic Grammar]
인터넷 문화가 막 시작되고 보급된 시기인 1990년대 말 부터 2000년대 중반 까지는 HTML 문법 규칙 준수 웹표준의 개념이 없었습니다.
그 당시에는 일명? 막코딩 이라 표현 할 수 있겠는데, 단순히 익스플로러 웹브라우저에 콘텐츠가 표현만 되면 끝!! 그렇게 HTML 태그 명령어를 사용 했었습니다.
(웹표준 문법 이전시절 - 디자인 표현언어인 CSS는 거의 사용하지 않았음!!)
웹 표준(Web Standard)
우리가 일상적으로 사용하는 자랑스러운 한글... 국어 문법에 어순이나 적절한 단어 사용법(규칙)이 있듯이 HTML 등 기타 웹 프로그래밍 언어를 정해진 규칙이나 절차를 지켜서 프로그래밍(코딩 or 마크업) 하는 것을 의미 합니다.
철수가 학교에 간다. (웹표준 문법 O) - 주어 / 목적어 / 동사
간다 학교에 철수가 (웹표준 문법 X) - 문법 무시... 일명 막코딩
HTML은 인터넷상의 워드프로세서 언어이다!! - 서ㄹ하 윤샘 -
용어의 정리
1. 태그(Tag)
<html>, <body>, <p>, <table>... 처럼 꺽쇠(<?>)로 표현된 명령어 들을 의미하며, 태그 명령어의 분량은 별도로 태그 명령어 사전이 출판 될 정도로 방대? 합니다.
실제 실무에서는 빈번하게 자주 사용하는 것 일부만 태그 명령어를 사용 합니다.
2. 요소(Element)
<a> ~ </a>와 같이 하나의 태그 명령어 시작과 끝을 요소라 합니다.
3. 마크업(Markup)
태그 명령어, 요소들을 이용하여 웹 문서를 작성하는 것을 마크업 이라고 합니다.
HTML 마크업 웹 페이지를 웹표준에 맞게끔 코딩을 했는지 1차적으로 마크업 검사를 합니다.
4. DHTML(Dynamic HTML)
(HTML + CSS + JavaScript) 요즘에는 잘 사용하지 않는 용어 이지만, 3개의 언어를 묶어서 예전에는 DHTML(Dynamic HTML)이라고 했습니다.
- 구조 언어(기본골격): HTML
- 표현 언어(디자인+레이아웃): CSS
- 동적 언어(동적효과): JavaScript
---------------------------------------------------------------
- 라이브러리 언어(자바스크립트 프레임워크): jQuery
+++++++
+ HTML 기본 문법1 +
기초 튼튼!!
국내 거주 외국인이 한글 자음/모음 부터 배운다는 생각으로 웹프로그래밍 입문... HTML 기초 문법 부터 차근차근 학습해 나가 보도록 하겠습니다.
1. 태그 명령어 요소는 마감 태그의 순서를 지켜야 합니다.
<p>HTML 기본 문법<strong>마감 태그 순서</strong>지키기</p>
(마지막에 사용한 태그를 먼저 닫아야 합니다.)
2. 태그 명령어 요소는 반드시 마감 태그로 닫아야 합니다.
<p>HTML 기본 문법<strong>마감 태그 순서</strong>지키기</p>
요소는 한 쌍의 태그가 일반적인데, 단독 태그도 있습니다.
단독 태그 요소를 빈 요소(Empty Element) 라고 합니다.
<br />, <img />, <hr />...
3. 요소와 태그 명령어 안의 속성은 소문자 사용이 원칙 입니다.
(XHTML1 문법 규칙 기준 임)
<a href="http://edyoon.tistory.com" target="_blank">윤샘 컴교실</a>
- 속성(Attribute): target
- 속성 값(Value): _blank
++++++++++++++++
A. 영문 대소문자 구분 여부
- HTML4, HTML5: 대소문자 구분 안함
- XHTML1.0: 소문자 사용 원칙 (권장)
B. 빈 요소 태그 사용 마감
- HTML4, HTML5: <br>, <img>, <hr> 사용해도 됨
- XHTML1.0: <br />, <img />, <hr /> 문법 규칙 엄격함 (권장)
++++++++++++++++
HTML 기본 실습 마크업 작업은...
HTML4, XHTML1.0 기준으로 하겠습니다.
(HTML5 진도는 기본기를 마치고 다음 단계로 학습 합니다.)
4. 속성 값은 쌍 따옴표(" ")를 꼭 사용하고, 속성은 속성 값과 같이 선언하며 생략하면 안 됩니다.
<a href="http://edyoon.tistory.com" target="_blank">윤샘 컴교실</a>
5. 마크업(코딩) 작업시 나중에 협업하는 다른 사람이 소스를 알아보기 쉽게 주석(소스에 대한 설명)을 꼼꼼하게 자주 사용하는 것이 좋습니다.
<!-- HTML & XHTML 주석 사용법 형식 -->
<!-- 주석은 소스에 대한 설명이라서 웹브라우저에 표현이 안됩니다. -->
'■■▶Libre Web Publisher◀ > ■ ① HTML4.01_XHTML1.0' 카테고리의 다른 글
| 00(HTML) HTML 기본 문법2 (Basic HTML Grammar) / Entity Code (0) | 2022.03.12 |
|---|---|
| 00(HTML) HTML 그게 뭐야? (간단한 맛 보기 HTML 하드코딩 기초 선행실습) (0) | 2022.02.24 |
| 00(HTML) 웹표준 문법 유효성 검사 통과!! (W3C - Markup Validation Service) (0) | 2017.09.28 |
| 00(HTML) 연습문제&실습과제01 (0) | 2017.09.27 |
| 0=SVG HTML Tag 명령어 실습 (0) | 2016.10.18 |
