HTML (문법/빈태그/inline/block/태그/주석/전역속성)

HTML의 기본문법

<태그>내용</태그>

여기서 태그로 감싸진 부분이 코드로 동작하게 되는데 이것을 요소(Element)라고 부른다.

앞쪽의 태그는 시작(열린)태그, 뒤쪽 태그는 종료(닫힌)태그라고 부른다.

 

HTML의 부모/자식관계

<태그>         //부모요소이자 상위(조상)요소

  <태그>           //부모요소이자 자식요소

     <태그>내용</태그> //자식요소이자 하위(후손)요소 

  </태그>    //자식요소 : 주로 줄바꿈과 들여쓰기를 통해 가독성을 높임.

</태그>

 

 

빈 태그(Empty)

<태그>

일반적인 html문법에서는 시작태그와 종료태그가 짝을 이루는데 시작태그만 있고 종료태그가 등장하지 않는 홀로있는 태그를 빈 태그라고 부른다.

이러한 빈태그의 방식은 두가지가 있다.

1) <태그> 편리함, HTML 1,2,3,4,5 호환

2) <태그/> 시작태그만 보아도 빈 태그라는 것을 인지할 수 있어 안전한 개발 가능, XHTML/HTML5 호환

일반적인 태그는 시작태그 안에 속성(attribute)과 값(value)을 선언하지만 빈태그는 주로 빈태그 안에 속성과 값을 입력하여 이용한다.

Ex:) <img src="경로" alt="설명">, <input type="text">

 

 

글자와 상자 : 요소가 화면에 출력되는 특성

1) 인라인 요소 : 글자를 만들기 위한 요소들

(ex: span - 요소가 수평으로 쌓임, 동일태그를 두개 작성한 경우 웹사이트 상에서 띄어쓰기처럼 띄어진 상태로보여짐)

• 포함한 콘텐츠 크기만큼 요소의 크기가 자동으로 줄어든다.(가로 세로)
• 글자 요소는 가로세로(width, height) 사이즈를 지정할 수 없다.
• 여백 지정 시 내부여백(padding)은 좌우 여백만 지정 가능하며 상하여백은 적용되지않고, 외부여백(margin)도 개념적으로는 좌우여백만 적용이 가능하다.(외관상 상하여백이 적용된것처럼 보여질 수 있으나 잘 구현되지않을수있음)
• 자식요소로 블록 요소를 가질 수 없다.(인라인요소 안에 인라인요소를 가질 수는 있다.

2) 블록 요소 : 상자(레이아웃)를 만들기 위한 요소들

(ex: div - 요소가 수직으로 쌓임. 동일태그를 두개 작성한경우 요소가 줄바꿈한것처럼 보여짐)

• 가로는 부모요소의 크기만큼 자동으로 늘어난다.(세로는 포함한 콘텐츠 크기만큼 줄어듬)
• 상자 요소는 가로세로(width, height) 사이즈를 지정할 수 있다.
• 여백 지정 시 내부여백(padding), 외부여백(margin) 모두 상하좌우 설정이 가능하다.
• 자식 요소로 블록/인라인 요소를 모두 가질 수 있다.

 

 

HTML에서 자주 이용하는 태그

 

div : 특별한 의미가 없는 구분을 위한 요소(블록요소)

 

h1 : 제목을 의미하는 요소(블록요소), h1~h6까지 존재함(숫자가 작을수록 더 중요한 제목 정의)

p : 문장을 의미하는 요소(블록요소)

img src="" alt="" : 이미지를 삽입하는 요소(인라인요소)

 

ul : 순서가 필요없는 목록의 집합(블록요소)

li : 목록내 항목(List Item), (블록요소)

a href="" : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소(인라인요소)

             * 자주쓰이는 속성 : target

span : 특별한 의미가없는 구분을 위한 요소(인라인요소)

br : break, 줄바꿈 처리(인라인요소)

input type=""/ : 사용자가 데이터를 입력하는 요소(인라인블록요소)

            * 자주쓰이는 속성: value, placeholder, disable, checkbox, radio

label : 라벨 가능요소(input)의 제목(인라인요소)

table : 표요소 행(Row)과 열(Column)의 집합.(블록요소 중 테이블요소)

tr : 행(Row)을 지정하는 요소(Table Row)

td : 열(Column)을 지정하는 요소(Table Data)

 

 

 

 

주석

<!-- 주석내용 -->

수정사항이나 설명등을 작성, 브라우저는 이 태그를 해석하지않기때문에 화면에 내용이 표시되지않음

단축키 : ctrl + /

 

 

 

전역속성

속성(attribute) : HTML의 기능을 확장해주는 역할 (Ex: a-href, img-src,alt)

태그별로 사용할 수 있는 속성이 지정되어있어 img href=""와 같은형태로는 쓸 수 없다.

 

전역속성은  body 태그 내에 쓰이는 모든 태그에 적용이 가능한 속성을 의미한다.

<태그 전역속성="설명"> </태그>

1) title : 요소의 정보나 설명을 지정

2) style : 요소에 적용할 스타일(CSS)을 지정

3) class : 요소를 지칭하는 중복 가능한 이름

4) ID : 요소를 지칭하는 고유한 이름(중복 불가)

5) data-이름 : 요소에 데이터를 지정, <태그 data-이름="값"></태그>의 형태