[HTML] HTML의 기본 구성 요소

● HTML의 기본 구성 요소(Element) ●

  : HTML(Hypertext Markup Language)

  : 웹페이지의 문서의 내용과 구조 그리고 서식을 정의하는 웹을 위한 언어입니다.

 

1. 요소(Element)

• 태그(tag) + 내용 (content)

2. 태그(Tag)

  : HTML 문법을 이루는 가장 작은 단위

  : 텍스트, 이미지, 버튼 등의 웹 페이지 구성 요소를 정의 하는 역할

  : 홑화살괄호 < > 사이에 태그명을 입력해 표현한다.

<태그명>

 

3. 속성(Attribute)

  : 속성은 태그를 의미나 기능적으로 보충하는 역할을 하며 속성명과 속성값으로 구성된다.

<태그명 속성명 = "속성값">

 

4. 문법 

  : HTML은 태그와 속성으로 문법을 구성한다.

  : 시작 태그(open tag)는 앞에 넣는 태그, 종료 태그(colse-tag)는 뒤에 슬래시( / )를 넣는 태그를 말한다.

<title> My First Web page! </title> <!-- << 시작 태그와 종료 태그 콘텐츠를 합쳐서 요소(element)라고 함 -->

 

5. 주석(Comment)

  : 웹 브라우저에는 표시 되지 않지만, 코드에 어떠한 메모나 설명을 남기고 싶을때 사용

  : 웹 브라우저의 소스 보기로 볼 수 있으므로 보안상 중요한 내용은 넣으면 안된다~ 이 말씀!

  : <!-- 주석 내용 -->

<!-- 안녕! 난 송라라! -->

 

6. HTML의 기본 구조

  : HTML은 일정한 기본 구조 안에서 코들르 작성하고, 태그를 추가해서 하나의 HTML 문서를 만들어 나간다.

HTML의 기본 구조

1. DTD <!DOCTYPE> - 문서형 정의 (HTML 문서 처음에 작성)
2. html - 문서의 시작과 끝
3. head - HTML 문서의 메타데이터 정의
4. body - 웹브라우저에 노출되는 내용을 작성
5. meta - 메타데이터 정리
6. title - HTML 문서의 제목을 지정

 

7. 블록 요소와 인라인 요소

• 블록 요소 : hn태그나 p태그 처럼 공간과 상관 없이 항상 줄 바꿈이 되는 태그로 작성한 코드
• 인라인 요소 : a태그나 span태그 처럼 공간이 부족할 때만 줄 바꿈이 되는 태그로 작성한 코드

8. 부모, 자식, 형제 관계

  : HTML은 태그 사용 위치에 따라 부모, 자식, 형제 관계가 성립된다.

• A 태그 안에 B와 C 태그가 사용되면
• A 태그는 B와 C 태그의 부모가 되고,
• B와 C 태그는 A 태그의 자식이 된다.
• 부모가 같은 B와 C 태그는 형제 관계가 된다.

9. 줄 바꿈과 들여쓰기

  : HTML 태그를 작성할 때 줄 바꿈과 들여쓰기가 의무는 아니지만, 코드의 가독성을 높이므로 줄 바꿈과 들여쓰기를 적절     하게 사용하기!!