웹 페이지 기본 구조와 작성 방법- HTML5 기본 용어

* 이 게시물은 HTML5 웹프로그래밍 입문 3판-한빛아카데미 책을 기반으로 작성됩니다*

* 스스로 공부하고 복습하는 개념으로 정리하는 것이기에 부족한 부분이 있을 수도 있습니다!*

 

이 장에서는 HTML 페이지의 기본 구조와 더불어서 웹 개발에서 사용되는 기본 용어들을 살펴보게 됩니다.

용어를 기억하는 것이 이후에 나올 내용을 이해하는 데에 도움이 되기 때문에 확실하게 정리하고 넘어가고자 합니다.

 

HTML5를 공부하려면 기본적으로 태그, 요소, 속성 용어를 알아야합니다.

 

1. 태그와 요소

HTML 페이지를 구성하는 각 부품을 요소라고 합니다. 즉, 제목,본문,이미지 등은 모두 요소라고 말할 수 있습니다. 태그는 이러한 요소를 만들 때 사용하는 작성 방법이고, 자바스크립트 개발에서는 요소를 객체라고도 합니다. 

흔히 요소와 태그를 잘 구분하지 않고 사용합니다.

HTML요소들은 내용을 가질 수 있는 요소와 내용을 가질 수 없는 요소로 구분 가능합니다. 내용을 가질 수 없는 요소는 <요소 이름>형태로 생성되고, 내용을 가질 수 있는 요소는 <요소이름>내용</요소이름> 형태로 생성됩니다.

내용을 가질 수있는 요소를 생성할 때 앞에 붙이는 태그를 시작태그, 뒤에 붙이는 태그를 끝태그라고 합니다.

예를 들면, <h1>Hello HTML5</h1>라는 내용을 가질 수 있는 요소를 생성한다고 하면 <h1>는 시작 태그이고 </h1>은 끝 태그라고 할 수 있습니다.

 

2. 속성

속성은 태그에 추가 정보를 부여할 때 사용하는 것이라고 할 수 있습니다.

예를 들어 설명하면 이해가 쉬울 것 같습니다!

<img src="image.png">는 이미지를 만들 때 사용하는 내부 문자가 없는 img태그의 예 입니다. src 속성에 출력할 이미지 정보를 입력해주면 됩니다. 

 

3. 주석

주석을 사용해주면 프로그램이 커지더라도 목적성있게 코드를 작성하기 쉽고, 이해하기도 쉽겠죠?

따라서 프로그래밍 언어에서 프로그램 실행에 영향을 미치지 않고 설명용으로 사용하는 코드를 주석이라고 한답니다.

HTML에서는 주석을 <!-- 주석 --> 의 형태로 취해주게 됩니다.

주석을 얼마나 잘 사용하는지에 따라 프로그래밍 실력을 평가하기도 하니까 꼭 기억해두세요!