HTML의 기본 구성요소

HTML은 <태그명 속성명=”속성값”>으로 구성된다. 예시 코드를 보면 아래와 같다.

<!DOCTYPE html>
<html lang="ko"> 
    <head>
        <meta charset="UTF-8">
        <meta http-equib="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" contnet="width=device-width, initial-scale=1.0">
        <title>My First Web Page!</title>
    </head>
    <body>
        <p>
            나의 웹페이지
        </p>
    </body>
</html>

일반적으로 속성을 사용할 때에, 속성명은 일반적인 변수와 같이 따옴표 없이 작성하고, 값은 string data type 같이 큰따옴표(”)로 작성한다. 속성값이 여러 개인 경우에는 쉽표로 구분하여 적는다.

HTML의 문법

HTML은 태그와 속성을 통해 문법을 구성한다. 이는 콘텐츠가 있는 문법과 없는 문법으로 나뉜다.

<!-- <시작 태크>콘텐츠<종료 태그> -->
<title>My Web Page!</title>

HTML의 기본 구조

위의 코드를 다시 보자.

<!-- 문서형 정의 -->
<!DOCTYPE html>

<html lang="ko"> 
	  
		<!--  문서 정보 표시(head) -->
		<head>
        <meta charset="UTF-8">
        <meta http-equib="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" contnet="width=device-width, initial-scale=1.0">
        <title>My First Web Page!</title>
    </head>
		
		<!-- 웹에 표시할 내용(body) -->
    <body>
        <p>
            나의 웹페이지
        </p>
    </body>

</html>

HTML의 head는 메타 데이터를 정의하는 부분이다.

<aside> 💡 메타데이터란? : HTML 문서에 대한 정보를 의미하며, 웹에 직접적으로 노풀되지 않는 정보를 의미한다.

</aside>

HTML의 특징

블록 요소 : 웹 브라우저의 공간 유무와 관계 없이 사용하는 태그로 작성한 코드
인라인 요소 : 공간이 부족할 때만 줄바꿈되는 태그로 작성된 코드

HTML은 부모와 자식 또는 형제라고 하는 관계가 성립이 된다. 위 코드에서 head와 body는 html의 자식이 되고, html 태그는 그들의 부모가 된다. 그리고 head와 body는 부모가 같기에 형제 관계가 된다.

<aside> 💡 간혹 조상과 자손관계까지 사용하는 경우도 있다!!

</aside>