HTML 기본 정리 ( 구조 / 요소 / 속성 / Global Attribute )

HTML ( Hyper Text Markup Language ) 

 - 웹 페이지를 작성하기 위한 언어

1. Hyper Text : HyperLink를 통해 텍스트를 이동 -> 클릭을 통해 자유롭게 이동할 수 있다. 비 선형적으로 이루어짐

2. Markup Language : 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어

 

HTML 기본 구조

1. HTML : 문서의 최상위 요소

2. HEAD : 문서 메타데이터 요소 -> 일반적으로 브라우저에 나타나지 않는 내용이 있다.

< title >

• <title> : 브라우저 상단 타이틀
• <link> : 외부 리소스 연결 요소
• <style> : CSS를 직접 작성하는 곳

3. BODY : 문서 본문 요소 -> 실제 화면에 보이는 것과 관련된 내용

 

HTML 요소(element)

     <h1> contents </h1>

여는태그  +   내용   +   닫는 태그

HTML의 요소는 태그와 내용으로 구성된다.

 

HTML 속성(attribute)

<a href="https://naver.com"></a>

     속성명                  속성값

HTML 속성은 요소의 수정자이다.속성은 태그의 동작을 제어하기 위해 사용된다.

속성은 속성명 + 속성값으로 이루어진다.

각 태그별로 사용할 수 있는 속성이 다르다.

요소가 스스로 기능하지 못하는 특정한 요소에 기능을 제공한다.

 

HTML Global Attribute

태그와 상관없이 모든 HTML 요소가 공통으로 사용할 수 있는 대표적인 특성이다.

•  id : 요소의 고유 식별자를 지정할 수 있다.
• class : 요소에 대한 하나 이상의 클래스를 지정할 수 있다.
• style : 요소에 대한 inline 스타일을 정의

 

텍스트 요소

태그	설명
<a></a>	href 속성을 활용하여 다른 URL로 연결
<b></b> <strong></strong>	굵은 글씨
<i></i> <em></em>	기울임 글씨
<br>	텍스트 내에 줄 바꿈 생성
<img>	src 속성을 활용하여 이미지 표현
<span></span>	의미없는 인라인 컨테이너

 

그룹 컨텐츠

태그	설명
<p></p>	하나의 문단
<hr>	주제를 분리하기 위한 수평선 ( Horizontal Rule )
<div></div>	블록 레벨 컨테이너