Crescendo Code

HTML의 기본 구조와 특징 본문

Front-End/HTML

HTML의 기본 구조와 특징

Crecok 2023. 3. 2. 01:52
반응형

HTML의 기본 구조

 

태그 : HTML 문법을 이루는 가장 작은 단위 ( 홑화살괄호 사이에 태그명을 넣는 형태 )

 

속성 : 태그에 의미나 기능을 보충하는 역할

 

속성은 사용하지 않아도 되고 여러 개를 사용할 수 있음

<태그명 속성명 = "속성값"> 의 양식을 따름

속성값이 여러개인 경우 하나의 큰 따옴표 안에 쉼표로 각 속성값을 구분

 

<html lang="ko">

태그명 : html, 속성명 : lang, 속성값 : ko로 구성

 

HTML 문법 : 태그와 속성으로 구성되어 있음

 

기본적인 콘텐츠가 있는 문법은 시작 태그와 종료 태그로 구성

종료 태그는 태그명 앞에 슬래시(/)를 기재

콘텐츠가 없는 문법은 시작 태그만 사용함

 

주석 : 코드에 대한 메모나 설명을 남기는 기능

 

웹 브라우저에는 나타나지 않고 소스 보기를 통해서 확인 가능

<!-- 내용 --> 과 같은 양식으로 사용

<!-- 이 곳에 코드에 관한 설명을 작성합니다. -->

주석 처리 : 웹 브라우저에는 나타나지 않음

 

 

HTML의 기본 구조

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Hello HTML!</title>
	</head>
	<body>
	</body>
</html>

 

<!DOCTYPE html>

!DOCTYPE : DTD (Document Type Definition) - 문서 형식 지정 ( HTML5 )

 

<html>
</html>

html : HTML 문서의 시작과 끝을 지정

 

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> HTML의 기본 구조 </title>
</head>

 

head

- HTML 문서의 메타데이터를 정의하는 영역. 메타데이터는 HTML 문서에 대한 정보이다.

  웹 브라우저에는 직접적으로 노출되지 않음

 

meta charset = "UTF-8"

- HTML 문서에서 허용하는 문자 집합을 정의하는 메타데이터 태그

 

meta http-equiv="X-UA-Compatible" content="IE=edge"

- 인터넷 익스플로러의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터 태그

 

meta name="viewport" content="width=device-width, initial-scale=1.0"

- 사용 기기의 화면 너비에 맞추기 위해 사용하는 메타데이터 태그

 

title

- HTML 문서의 제목을 지정하는 데 사용

HTML의 특징

블록 요소 : 웹 브라우저의 공간 유무와 상관없이 줄 바꿈 되는 태그로 작성한 코드 ( ex : hn, p 태그)

인라인 요소 : 공간이 부족할 때만 줄 바꿈되는 태그로 작성한 코드 ( ex : a, span 태그 )

 

HTML 문서에 태그를 작성할 때는 코드의 가독성을 위해 줄 바꿈과 들여 쓰기에 유의할 것

(부모 태그, 자식 태그끼리 같은 줄로 배치하여 들여 쓰기 하는 것이 좋다.)

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Front-End > HTML' 카테고리의 다른 글

표 (테이블 : Table) 태그 정리  (0) 2023.03.05
폼(FORM) 태그 정리  (0) 2023.03.03
HTML 텍스트 및 영역 관련 태그 정리  (0) 2023.03.02
'Front-End/HTML' Related Articles more
Comments