1. HTML의 표현방식
HTML(Hyper Text Markup Language)은 마크업 언어의 일종입니다. 마크업 언어는 문서나 데이터, 컨텐츠의 구조를 정의하는 언어입니다. 구조를 잡고 정의하는 데 다양한 방법이 있는데, 그 중 HTML은 컨텐츠를 태그로 감싸 표현함으로써 컴퓨터에게 우리 웹페이지의 구조를 알려줍니다. 예를 들어 보겠습니다.
<제목> 안녕하세요. 저는 사자입니다. </제목> <내용> 저는 현재 웹 프로그래밍을 공부하고 있습니다. </내용>
<제목></제목>, <내용></내용> 은 태그에 해당합니다. 그리고 태그로 감싸진 글자들이 컨텐츠에 해당합니다. 태그 없이 문자를 쓰게 되면, 컴퓨터는 어떤 것이 제목이고 어떤 것이 내용인지 파악하지 못합니다. 그러니 컴퓨터가 내용을 구분할 수 있게끔 태그를 사용한다고 이해하면 됩니다. 그럼 방금 한글로 적었던 코드들을 실제 태그로 작성해보겠습니다.
<h1> 안녕하세요. 저는 사자입니다. </h1> <p> 저는 현재 웹 프로그래밍을 공부하고 있습니다. </p>
h1? p? 처음 보는 용어들이지만, 알고 보면 매우 간단합니다. h1은 제목 태그, 즉 heading 태그 중 하나로 제목을 표기할 때 사용합니다. 그리고 p는 paragraph의 약자로, 문단을 나타내며 내용을 표기할 때 자주 사용하는 태그입니다. html에는 매우 많은 태그들이 존재합니다. 앞으로 하나하나 배워 나갈테니 걱정하지 마세요.
2. HTML 코드 작성하기
html은 여러 개의 요소와 일정한 양식으로 이루어집니다. 단순히 넣고 싶은 요소들만 마구 넣어서 웹을 구성할 수 있다면 편하겠지만, 반드시 정해진 양식을 따라야 합니다.
실습을 진행하겠습니다. 가이드에 따라 html파일을 하나 생성하고, 아래와 같이 코드를 작성해보세요.
<!DOCTYPE html> <html lang="kr"> <head> <meta charset="utf-8"> <title>저는 멋쟁이 사자입니다.</title> </head> <body> <h1>안녕하세요. 저는 사자입니다!</h1> <p>저는 현재 웹 프로그래밍을 공부하고 있습니다.</p> </body> </html>
단순히 위 코드를 복사 붙여넣기 하기 보다는 한 글자 한 글자 입력해보며 생각하는 과정이 중요합니다.
- <!DOCTYPE html> : '지금 이 문서는 html5로 작성될거야'라고 브라우저에게 알려주는 태그입니다.
- <html lang="kr"> : html의 시작을 알리는 태그입니다. lang은 사용하는 주 언어를 정의합니다.
- head : head 태그 안에는 사이트의 설정과 관련된 정보를 넣습니다. 화면에 출력되지는 않습니다.
- <meta charset="utf-8"> : html에서 쓰이는 한글이 깨지지 않도록 utf-8 방식으로 인코딩합니다.
- title : 페이지의 제목을 정의하는 제목 태그입니다. 크롬의 상단 tab에 나오는 글자를 나타냅니다.
- body : body 태그 안에는 화면에 실질적으로 출력되는 것들이 담깁니다.
작성이 완료되면 저장하고 Preview > Preview File index.html을 클릭하세요.
아래와 같이 나오면 성공입니다.
html로 골격만 잡은 단계이니 원하는 모습이 아니라고 실망하지 마세요. 여러 태그를 배우고 CSS까지 입히고 나면 여러분의 멋진 웹 페이지가 탄생할 것입니다.
'웹(html,css,javascript)' 카테고리의 다른 글
| css Basic (0) | 2020.03.01 |
|---|---|
| html 태그 2 (0) | 2020.03.01 |
| Semantic Tag (0) | 2020.03.01 |
| 웹 이란? (0) | 2020.03.01 |
| [CSS] 개요 (0) | 2020.02.24 |