HTML Basic syntax 2

사실 오늘 작성할 글이 Basic Syntax 1보다 먼저 나와야 했는데 HTML에 대해 공부하면서 요소라는 것이 있고 이 요소라는 것이 두가지로 분류될 수 있다고 먼저 알고 들어가는 것도 나쁘지 않을 것 같다고 생각했다.( 사실.. 글을 작성해 놓은 것 중에 저걸 먼저 작성하게 되었을 뿐이다. )

오늘은 정말 기본적은 문법에 대해새 알아볼 것이다. HTML 문법은 너~무 쉽다. 

요소 (Element)

HTML은 HyperText Markup Language의 줄임말이다. 이를 해석하면 웹페이지를 기술하기 위한 마크업 언어다. 따라서 웹페이지의 내용과 구조를 담당한다. HTML은 태그라는 것을 써서 웹페이지의 내용과 구조를 만들게 된다. 

그리고 이 태그로 둘러 쌓여져 있는 것을 "요소"라고 한다. 요소는 다음과 같이 이루어져 있다. 

HTML 요소 출처: https://poiemaweb.com/html5-syntax

항상 그런 것은 아니지만 대체적으로 요소는 시작태그가 있고 종료 태그가 있다. 그리고 두 태그 사이에 컨텐트가 들어간다. 이 컨텐트가 들어가는 영역을 컨텐츠 영역이라고 한다.

그리고 이 HTML에 대해서 기억하면 좋은 사실이 몇가지 있는데 태그는 대소문자를 구별하지 않는다. 그렇지만 W3C라고하는 단체에서는 소문자를 쓰는 것을 추천하고 HTML5에서도 소문자를 쓰는 것이 일반적이라고 한다. 

아까 위에서 대체적으로 시작태그가 있고 종료태그가 있다고 했는데 그렇지 않은 태그들도 있다. 예를들면 meta, img, input, link 같은 태그들이다.  

어트리뷰트 (Attribute)

어트리뷰트는 한국말로 속성이라고 한다. 이 어트리뷰트는 HTML에서는 각 태그에 부여할 수 있는 속성을 말한다. HTML에서는 각 태그마다 속성을 부여하거나 명세할 수 있다. 여기에는 파일의 경로나 체크가 되었는지, class, id등을 명세할 수 있다. 

HTML 어트리뷰트 출처: https://poiemaweb.com/html5-syntax

어트리뷰트는 각 태그마다 고유하게 가지는 것들도 있고 모든 태그가 가질 수 있는 어트리뷰트가 있는데 이를 전역 속성이라고 한다. 자주 쓰이는 전역 속성들은 다음과 같다

• class 태그에 별명, 별칭을 줄때 지정할 수 있다. 
• id 문서에서 고유한 식별자를 정의하는 것이다. id는 겹치면 안된다. 그렇지만 겹쳐도 HTML에서 오류를 발생시키지 않으니 이를 알고 있자. 
• style 요소에 적용할 css를 선언하는 태그인데 굳이 마크업때 이렇게 해주지 않는 것이 좋다. css 코드는 css파일에 모두 담자
• title 요소의 정보(설명)을 지정할 수 있다. 
• lang 요소의 언어를 정할 수 있다. 
• data-* :  사용자 지정 데이터 특성이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크리브로 HTML과 DOM 사이에서 교환할 수 있는 방법을 제공한다. 
• draggable Drag and Drop API를 사용해 요소를 드래그할 수 있는지 나타내는 열거형 특성
• hidden 브라우저는 hidden 특성을 가진 요소를 렌더링 하지 않는다. 
• tabindex integer속성으로 요소 focusable 여부 등을 나타낸다. 

 

 

 

주석 (Comments)

주석은 주로 개발자에게 코드를 설명하기 위해서 사용된다. HTML에도 그래서 주석이 존재하고 이는 브라우저가 렌더링할때 표시되진 않는다. 

<!-- Comments -->
<p>HAHAHA JOKE'S ON YOU BATMAN!!!</p>