HTML 기초와 개발 환경 세팅

728x90

Brackets 에디터 : https://brackets.io/

(윈도우는 .msi 맥은 .dmg)

Visual Studio code 에디터 : https://code.visualstudio.com/

(참고1) 에디터 상단 메뉴에서 '폴더열기'로 먼저 여러분의 작업폴더를 오픈하신 후 파일을 만들든지 코딩을 하든지 하셔야합니다.

(참고2) 에디터의 번개 버튼을 누르시면 실시간 미리보기가 가능합니다.

(참고3) ctrl + s 단축키로 파일 저장잘하십시오 맥북은 ctrl 대신 command입니다.

(자주 묻는 질문) Q. 왜 저는 Brackets 에디터 실시간 미리보기가 잘 안되죠?

A. 번개버튼 다시 껐다 켜보시거나 파일 저장 잘하십시오

HTML은 어디다 쓰는 언어?

웹페이지를 만들고 디자인하고 싶을 때 사용합니다.

세상에 존재하는 모든 웹페이지는 html 언어로 작성합니다.

HTML은 Hypertext Markup Language의 약자인데 Markup Language에 주목해주시면 됩니다.

마크업 언어는 "자료의 구조를 표현하기 위한 언어" 입니다.

웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 .. 자료를 입력하죠?

그 자료들이 어디에 배치되는지 그런 것들을 기록하기 위해 존재하는 언어가 바로 HTML이라고 보면 되겠습니다.

아무튼 여러분이 HTML 언어로 글넣고 그림넣고 하면 웹페이지가 되는 것입니다.

HTML 파일 기본 템플릿

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

HTML 문서는 .html로 끝나도록 저장하시면 되며

모든 HTML 문서는 위의 코드를 가지고 있어야 HTML 파일로 인식합니다.

<head> 내부엔 사이트 생성에 필요한 인코딩형식, 사이트제목, 필요한 CSS나 JS파일 등이 들어갈 수 있으며

<body> 내부엔 실제 웹사이트에서 보여줄 글, 그림 등을 적어주시면 됩니다.

index - 메인페이지

728x90

IT 아카이브