HTML 이란?
HTML (HyperText Markup Language)
- HTML은 자료의 구조를 표현하기 위한 언어인 마크업언어이다. 웹 페이지를 만들 때 검색창, 글 ,버튼, 그림등의 자료들을 넣게 되는데, 이 자료들이 어디에 위치할지를 정해주는 언어라고 생각하면 된다.
- 웹 페이지를 만드는 과정은 ppt를 제작하는 과정과 비슷하다. ppt에서 버튼으로 글과 그림, 표를 넣는것처럼 웹페이지를 만들 때에는 코드를 짜서 하게된다.
개발환경 셋팅
이번에는 Brakets라는 코드 에디터를 사용하려고 한다.
1. Brackets 에디터 다운로드 : https://brackets.io/
A modern, open source code editor that understands web design
Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.
brackets.io
2. 작업용 폴더를 생성후 Brakets에서 해당 폴더를 열어준다
아무 곳에나 새로운 폴더를 만들어주고, 파일- 폴더 열기를 통해 만들어 둔 폴더를 열어준다
3.index.html 파일을 생성
불러온 html폴더 안에 index.html파일을 생성해준다. .html로 끝나는 파일은 모두 html파일이라고 생각하면 되고 모든 웹페이지를 만드는 html파일은 모두 .html로 끝나야 하며, 메인페이지를 만들고자 할때는 보통 index.html 로 파일명을 작성한다!
4.html 기본 템플릿 작성
모든 html의 기본 템플릿이 되는 아래의 코드를 넣어준 후 <body>태그 와 </body>태그 사이에 원하는 내용을 작성해본다. 필자는 'html 첫 시작!' 이라고 작성해보았다.
<head> 내부엔 사이트 생성에 필요한 인코딩형식, 사이트제목, 필요한 CSS나 JS파일 등이 들어갈 수 있으며
<body> 내부엔 실제 웹사이트에서 보여줄 글, 그림 등을 적어준다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
html 첫 시작!
</body>
</html>
5. html파일을 웹브라우저로 띄우기
html파일은 웹문서이고 웹문서는 웹 브라우저로 오픈 할 수 있다. index.html파일 우클릭 후 웹브라우저로 띄워줘도 되고, brakets에서 번개모양 버튼을 클릭하면 실시간으로 수정되는 웹페이지 미리보기를 할 수 있다
'WEB' 카테고리의 다른 글
| [WEB] HTML style 속성 사용하기 (0) | 2022.09.05 |
|---|---|
| [WEB] HTML기본 태그 연습하기 (0) | 2022.09.04 |
| [WEB] Javascript 문법 - (4)형변환 (0) | 2022.01.18 |
| [WEB] Javascript 문법 - (3)alert, prompt, confirm (0) | 2022.01.18 |
| [WEB] Javascript 문법 - (2)자료형 (0) | 2022.01.18 |
