HTML은 Hyper Text Markup Language의 줄임말로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다.
쉽게 말하면, 웹 페이지의 구조를 만들고 틀을 형성하는 언어이다.
시작하기 전에, 이 강좌보다 훨씬 더 잘 설명하고 이해를 돕는 시각자료를 포함하는 다른 좋은 강좌들이 많으니 검색해보고 튜토리얼을 해보는 것이 좋을 것이다.
생활코딩 - https://opentutorials.org/course/2039
기타 튜토리얼 사이트들 - 제타위키
코드 작성 IDE
HTML 코드나 CSS, Javascript 코드를 작성할 때, 특히 이 강좌에서는 Visual Studio Code 라는 프로그램을 사용하는 것을 추천한다.
파일 생성
프로젝트로 사용할 폴더를 하나 생성하고, Visual Code 프로그램을 실행 후 그 폴더를 연다.폴더를 연 후 index.html 이라는 파일을 생성하자. (확장자는 .html 이어야 한다)
이 파일은 이제 HTML 파일이다.
기본 규칙 (규약) & 코드 작성법
HTML의 파일은 항상 최상단에 <!DOCTYPE html> 이라는 태그로 시작해야 한다.
이를 붙임으로써 웹 브라우저에서 이 웹문서가 어떤 버전의 HTML 언어로 작성됐는지 결정할 수 있다.
현재에는 대부분 HTML5 버전을 사용한다.
HTML의 모든 것은 </> 나 <></> 와 같은 태그나 텍스트로 구성된다.
예를 들면 다음과 같다.
<div>저는 임시 텍스트입니다.</div>위의 예시는 div 라는 이름의 요소와 내부의 내용(텍스트)을 나타낸 것이다.
요소는 항상 태그로써 정의 및 작성할 수 있는데, <div>라고 작성함으로써 이 요소가 div임을 나타낸다.
div 요소를 태그 없이 사용한다면 HTML은 이를 요소가 아닌 텍스트로써 div를 인식할 것이다.
위에서 설명한 것과 같이 태그는 두가지 타입으로 사용할 수 있다.
1. <div></div>
2. <div/>
둘 다 같은 div 요소로 인식되며, 실제로도 페이지에서도 차이가 없다.
다만, 1번은 태그 사이를 비워둠으로써 그 사이에 있는 모든 요소들은 해당 div 요소에 포함되어 있음을 나타낸다.
2번은 div 요소 자체만을 작성한 것이고, 그 div 내에 내용이 없음을 의미한다.
위에서 들었던 예시에서는 div 요소 내에 "저는 임시 텍스트입니다." 라는 텍스트가 포함되어 있다는 것이다.
특정 요소들을 제외하면 대부분의 요소 내에 또 다른 요소(들)을 배치할 수 있다.
이제 HTML 문서의 기본적인 틀을 알아보자.
위의 사진을 보면 html, head, body, title, meta, p 등 다양한 태그가 사용되었다.
이 섹션에서 눈여겨보아야 할 태그는 html, head, body 3개이다.
html 태그는 모든 요소들을 포함하는 최상위 태그이며, 항상 최상위에 쓰여야 한다. (DOCTYPE은 태그가 아니다.)
여기에서 최상위라는 것은 계층적으로 보았을 때 가장 위의 계층에 있어야 한다는 뜻이다.
사진을 보면 들여쓰기가 된 부분일 수록 하위 계층이고, 왼쪽에 더 가까울 수록 최상위 계층이다.
html 태그가 포함된 부분은 빨간 줄로 표시했다.
이후 html 내에는 head 태그와 body 태그가 순서대로 쓰여져야 한다.
head 태그는 해당 HTML 문서에 대한 정보인 메타데이터(metadata)들을 정의할 때 사용한다.
예를 들어 이 문서는 어떠한 스크립트를 포함해야 하는지, 어떠한 CSS 파일을 불러와야 하는지, 문서의 제목은 무엇인지 등에 대한 내용이 이 영역에 적힌다.
head 태그가 포함된 부분은 파란 줄로 표시했다.
body 태그는 해당 HTML 문서에 포함되는 실제 요소들을 배치하고 정의할 때 사용한다.
모든 텍스트나 이미지, 영상과 같은 미디어나 그래픽, 영역들은 이 곳에서 작성된다.
body 태그가 포함된 부분은 초록색 줄로 표시했다.
위의 예시 사진을 (크롬) 웹페이지에 띄웠을 때 다음과 같이 나타난다.
태그(요소)들
태그는 HTML을 구성하기 위한 요소로, 위에서 설명했던 것과 같이 꺽쇠와 이름으로 구성되어 있다: <div>
이와 같은 태그의 종류는 매우 많다.
- html - 최상위 태그, 모든 요소들을 포함한다.
- head - HTML 문서의 속성을 지정하기 위한 태그
- meta - HTML의 부가 정보를 선언하는 태그
- title - HTML 문서의 제목을 선언하는 태그
- link - CSS 파일이나 favicon을 연결하는 태그
- script - Javascript와 같은 스크립트를 지정하는 태그
- style - CSS 문서를 HTML 내에서 사용할 수 있게 하는 태그, style 태그 내부에 CSS 문서를 작성 가능하다.
- body - HTML 문서의 레이아웃 및 내용을 선언하는 태그
- p - 문단을 선언하는 태그. paragraph(문단)를 나타낸다.
- br - 문단 내 줄바꿈으로 강제개행을 하는 태그이다. 개행이란 새로운 줄, 엔터키와 같은 역할을 한다. HTML 문서 작성 시 개행을 하더라도 실제 페이지에는 개행이 적용되지 않으므로 필요할 때 해당 태그를 사용하자.
- h - 보통 제목을 표시할 때 사용한다. <h1>부터 <h6>까지 있으며 순서대로 작아진다.
- hr - 가로로 줄을 긋는 태그
- div - 박스 또는 레이어라고도 하며, 영역을 나타내는 태그, 제일 많이 사용하는 태그 중 하나이다.
- span - inline 형태의 div
- img - 이미지를 나타내는 태그, 이미지 링크나 주소를 src로 주었을 때 이미지가 나타난다.
- input - 사용자가 상호작용할 수 있는 요소 태그, type에 따라 다른 형태를 취한다.
- button - 버튼을 나타내는 태그
- form - 사용자로부터 입력값을 받는 영역을 지정하는 태그
- a - 하이퍼링크를 생성하는 태그, 실제 웹페이지에서는 이런 식으로 보인다.
- ul - 순서 없는 목록(unordered list)를 나타내는 태그
- ol - 순서가 있는 목록(ordered list)를 나타내는 태그
- li - ul이나 ol과 같은 목록 태그에서 각 항목들을 감싸는 태그
- select - 사용자가 여러 옵션 중 선택할 수 있게 하는 태그
- option - select 태그에서 항목 하나하나를 감싸는 태그
- table - 표나 테이블을 나타내는 태그
- tr - 테이블 태그 내에서 행(row)을 나타내는 태그
- td - 테이블 태그 내에서 항목을 나타내는 태그
- footer - 문서에 대한 꼬릿말을 나타내는 태그, 저작권, 연락처, 관계된 문서 등의 내용을 포함한다.
- article - 해당 문서나 페이지 또는 사이트와 완전히 독립적으로 구성할 수 있는 요소
- iframe - html 문서 내에 또 다른 html 문서를 넣을 수 있는 태그
위의 태그들 중 주로 다룰 내용은 빨간 색으로 표시했다.
다음 차시에서는 각 태그들을 사용하는 방법과 태그들끼리 상호작용하는 것에 대해 포스팅할 것이다.
'WEB > 웹개발 기초 강좌' 카테고리의 다른 글
| [웹개발] 6. CSS 요소 배치 - position (2) | 2021.09.13 |
|---|---|
| [웹개발] 5. CSS 파헤치기 (0) | 2021.09.01 |
| [웹개발] 4. HTML - input 태그 (0) | 2021.08.28 |
| [웹개발] 3. HTML - 태그의 종류와 이해 (0) | 2021.08.28 |
| [웹개발] 1. 웹개발 시작하기 (0) | 2021.08.21 |
