HTML 기본 문법

요소(Element)

<태그>내용</태그> 형태로 많이 나타납니다.

앞에 태그는 시작(열린) 태그라고 불리고,

뒷 태그는 종료(닫힌) 태그라고 불립니다.

가운데 내용은 요소의 내용(Contents)로 불립니다.

 

 

빈(Empty) 태그

열린 태그만 존재하고 뒤에 닫힌 태그가 없는 태그는 빈(Empty)태그라고 합니다.

빈태그도 두 종류가 있습니다.

1. <태그>

이 종류는 편리하며 HTML 1/2/3/4/5에 모두 사용가능합니다.

2. <태그/>

이 종류는 문법 조금 더 엄격한 XHTML와 HTML5버전에서 사용합니다.

특히, XHTML에서 /를 추가 안 하면 에러 납니다.

그래서 이 종류의 장점은 안전함입니다.

 

 

태그 기능의 확장

열린 태그에 속성(Attribute)과 값(Value)를 설정해줍니다.

특히, <img />처럼 빈 태그는 속성과 값이 있어서 어떤 이미지를 삽입하는지를 알 수 있습니다.

<br>등 소수 태그 이외 거의 다 필요합니다.

 

 

부모와 자식관계의 이해

②요소는 ①요소 안에 감싸지고 있습니다.

이럴 때 ②요소는 ①요소의 자식 요소라고 불리며,

 ①요소는 ②요소의 부모 요소입니다.

 

위 사진처럼 태그들이 많을 시 상위(조상) 요소 개념이 나옵니다.

③요소는 ②요소에 감싸졌으며, ②요소는 ①요소 안에 감싸지고 있습니다.

이럴 때, ①②요소는 ③요소의 상위(조상) 요소입니다.

즉, 상위(조상) 요소는 하나만 존재하는 게 아니고 여러 개입니다.

 

반대로, ①요소는 ②③요소의 하위(후손) 요소입니다.

 

 

글자와 상자

요소가 화면에 출력되는 특성, 크게 2가지로 구분됩니다.

인라인(Inline) 요소: 글자를 만들기 위한 요소들.

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

 

<span>요소

<span></span>는 대표적인 인라인 요소입니다.

본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도만 있습니다.

위에 처럼 <span>요소는 두 개 있으며 줄 바꿈으로 작성했습니다.

단어들 왼쪽에서 오른쪽으로 수평적으로 쌓이고 가운데에 빈칸 하나 생깁니다.

위에 처럼 <span>요소는 두 개 있으며 줄 바꿈 없이 작성했습니다.

단어들 왼쪽에서 오른쪽으로 수평적으로 쌓이고 가운데에 빈칸도 없습니다.

 

인라인 요소 특징

1. 글자처럼 취급되어 줄 바꿈하면 대응한 빈칸이 생깁니다.

2. 포함한 콘텐츠 크기만큼 자동으로 가로, 세로가 지정되어서,

a. width나 height 속성이 작동 안 됩니다.

b. margin, padding처럼 내외부 여백은 위아랫은 작동 안 되지만, 좌우로 됩니다.

3. 인라인 요소는 블록 요소를 자식 요소로 둘 수 없습니다.

 

 

<div>요소

<div></div>는 대표적인 

블록

요소입니다.

본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도만 있습니다.

위에 처럼 <div>요소는 두 개 있습니다.

단어들 위쪽에서 아랫쪽으로 수직적으로 쌓입니다.

 

블록 요소 특징

1. 가로너비는 자동으로 늘어나려고 하며, 세로는 콘텐츠에 맞게 자동으로 줄어듬.

2. width, height, margin, padding은 모두 적용됩니다.

3. 블록요소는 블록요소를 자식 요소로 둘 수 있습니다.

 

즉, 인라인 요소는 제약이 많고 블록 요소는 제약이 없다고 보면 됩니다.