1. HTML이란
① HTML의 정의
HTML이란 웹 브라우저를 통해 표시되는 웹 페이지의 콘텐츠를 정의하기 위해서 사용하는 언어이다.
여기서 HTML이라는 단어는 Hypertext Markup Language의 약어이다.
- Hypertext: 하이퍼 링크를 통해서 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
* 하이퍼 링크(Hyperlink): 특정한 이미지나 글씨를 클릭하면 다른 페이지나 이미지, 동영상
페이지 내 특정 위치로 이동하는 연결 시스템으로
줄여서 '링크(Link)'라고 한다.
- Markup: "~을 표시하다."라는 의미를 가진 영단어
- Language: 언어
=> 하이퍼 텍스트를 표시해 주는 언어
기본적으로 HTML 코드는 HTML 파일에 작성되고 (파일 확장자명: *.html / *.htm)
메모장과 같은 텍스트 편집 프로그램으로 작성된 HTML 코드는
웹 브라우저를 통해서 표시 가능하다.
Sample이라는 이름의 html 문서를 하나 만들고
이를 Chrome과 메모장으로 열어보자.
당연히 Sample 문서에 아무것도 적지 않았기 때문에
웹 브라우저인 Chrome에도 아무것도 표시되지 않는다.
② HTML 문법
HTML의 정의를 알았고, 이제 HTML 문서의 기본 구조를 알아야 하지만
그전에 HTML 문법을 확인하고 넘어가도록 하겠다.
(1). 태그 (Tag)
- HTML 코드에서 정보, 콘텐츠를 정의하는 형식
- '<>', '</ >' 기호를 사용해서 콘텐츠의 시작과 끝을 표시한다.
각 태그는 콘텐츠를 감싸고, 태그의 이름은 콘텐츠의 성격과 의미를 나타낸다.
<태그명>콘텐츠</태그명>시작 태그와 종료태그 그 안에 있는 내용을 통틀어서 엘리먼트(Element)라고 한다.
<subject>안녕하세요.</subject>
<contents>저는 홍길동입니다.</contents>상단의 소스코드에서 엘리먼트는 'subject'와 'contents' 총 두개이다.
일반적으로 태그는 '<>'과 '</ >'를 통해서 콘텐츠의 시작과 끝을 나타내는데
경우에 따라서 시작과 끝을 구분 지을 필요가 없는 태그도 존재한다.
이를 '단일 태그'라고 한다.
<hr>
<br>
<!--이 두개와 같이 닫는 태그가 없는 단일 태그가 존재하지만-->
<!--아래와 같이 '< />' 형태로 작성해서 태그의 종료를 알리는 편이 좋다.-->
<hr />
<br />(2). 속성 (Attribute)
- 태그의 부가적인 기능을 정의하는 것
- 시작 태그 내부에 정의하고, 개수 제한은 없다.
태그명과 속성은 띄어쓰기(공백, space)로 구분하고, 값을 정할 때는 ""(큰따옴표)를 사용한다.
<!-- 속성 예시 -->
<p id="test">Hello World</p>
<!--
* 여기서 'id'가 속성이고
뒤에 ""에 입력된 test가 값이다.
* 속성과 속성의 값은 시작 태그에 입력한다.
<시작태그 (속성)="Value">콘텐츠</종료태그>
-->Hello World
(3). 주석 (Comment)
- 개발자에게는 보이지만, 컴퓨터에게는 보이지 않는 코드
- '<!--', '-->'로 주석의 시작과 끝을 표시하고
해당 기호 안에 입력한 내용은 프로그램 실행 시 영향을 받지 않는다.
그렇기 때문에 주석은 코드에 대한 메모를 남기려고 할 때 활용된다.
2. HTML 문서
HTML의 기초 문법을 알았으니 이제 HTML 문서의 기본 구조를 알아보도록 하자.
아래의 코드는 예제로 준비해 둔 HTML 코드이다.
이 코드를 메모장에 복사+붙여 넣기를 하고, 파일을 저장해 보자.(파일 형식은 .html로 저장해야 한다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<!--문서의 제목을 입력한다.-->
</head>
<body>
Hello Everyone
<!--웹 브라우저 상에 표시할 내용을 입력한다.-->
</body>
</html>
<title> 태그에 입력한 Sample이 브라우저 탭에
<body> 태그에 입력한 Hello Everyone이라는 문장이 브라우저 화면에 표시된 것을
확인할 수 있을 것이다.
그렇다면 왜 해당 코드가 웹 브라우저 상에 이런 식으로 표시가 됐을까?
아래에 각 코드의 의미와 역할에 대해 정리해 놨다.
① <!DOCTYPE html>
- 문서의 첫 부분으로, 문서 유형을 정하는 단일 태그이다.
- 브라우저에게 해당 문서가 HTML5를 사용하고 있다는 것을 알려주는 역할을 한다.
② <html></html>
- 전체 html 문서를 감싸는 태그
- <html>로 문서의 시작을, </html>로 문서의 끝을 나타내는 태그이다.
③ <head></head>
- 웹 브라우저 상에서는 보이지는 않지만,
웹 브라우저가 알아야 할 정보를 담아주는 태그이다.
- html 문서에 대한 정보를 나타낸다.
(1). <meta charset="utf-8">
- 문자 인코딩, 키워드 등에 대한 요약 정보를 기입하는 단일 태그이다.
- 브라우저의 한글 인코딩을 utf-8로 설정하는 역할을 한다.
(2). <title></title>
- 문서의 제목, 입력한 문자는 브라우저 탭에 표시된다.
④ <body></body>
- 문서의 내용을 의미한다.
- 실제 브라우저 상에서 표시된 내용을 입력하는 태그
- 텍스트, 이미지, 버튼 등을 표시하는 태그가 여기에 포함될 수 있다.
HTML의 정의, HTML 기초 문법, HTML 문서 기본 구조
세 가지를 알았으니 해당 게시글은 여기서 마치도록 하겠다.
다음 내용은 다음 게시물에서 다루도록 하겠다.
3. 마치며
사실 처음에는 HTML에 대해 공부를 할 생각이 크게 있지는 않았었다.
하지만 학원에서 JSP를 공부하고, 취미 삼아서 앱 개발도 조금 건드려보니
HTML에 대해 어느 정도는 알아둘 필요가 있어서 공부를 시작하게 됐다.
현 시점에서는 HTML에 대해서는 깊게 팔 생각은 없다.
HTML에 대해 알아야 할 기초적인 부분 위주로 정리해서 올릴 생각이다.
참고한 강의
[인프런]입문자를 위한 HTML 기초 강의
'Frontend > HTML' 카테고리의 다른 글
| [HTML] 컨테이너 태그(<div>, <span>) & 전역 속성 (0) | 2023.03.16 |
|---|---|
| [HTML] 인라인 태그 8가지 (1) | 2023.03.14 |
| [HTML] <p>, <h1>...<h6>, <hr> 태그 + <br>, (0) | 2023.03.03 |
| [HTML] 블록 태그와 인라인 태그 (0) | 2023.03.02 |
| [HTML] 티스토리에 목차 달기 (번외, 메모용) (0) | 2023.02.24 |
