HTML은 웹 페이지를 만들기위한 표준 마크 업 언어입니다.
HTML이란?
HTML은 Hypertext Markup Language의 약자로 웹개발의 가장 기본이 되는 언어입니다.
웹언어 중 가장 쉬운 언어라서 초보자도 쉽게 배울 수 있으며, 홈페이지를 작성하는데 쓰입니다.
HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"로 되어 있으며 종료 태그의 이름은 슬래시 문자 "/"로 시작됩니다.
HTML기본구조
HTML은 특정 기능을 지원하는 태그 문법을 사용하는데, 그 종류는 100개가 넘습니다.
하지만 실제로 사용하는 태그는 한정적입니다.
HTML의 기본 구조는 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<div>내용</div>
</body>
</html>
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 정의합니다. 모든 HTML 문서는 문서 유형 선언으로 시작해야합니다
<html> : 문서의 시작과 끝을 나타내는 태그입니다.
<head> : 태그는 문서의 머리를 나타내는 태그입니다. 브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그들이
들어가게 됩니다.
<title> : 문서의 제목이 들어가는 태그입니다. 브라우저 탭에 보이며 즐겨찾기의 제목이 되는 태그입니다.
<body> : 우리들이 눈으로 보는 홈페이지의 컨텐츠가 들어가는 태그입니다.
HTML편집기
HTML을 사용하기 위해서는 편집기가 필요합니다.
간단하게 메모장을 편집기로도 사용할 수 있습니다. 메모장을 사용하고 HTML문서를 저장할 때에는
파일이름.html로 저장해야 합니다.
하지만 메모장은 HTML을 작성할 때 불편함이 있습니다.
그렇기 때문에 대부분의 사람들이 HTML편집기를 사용하여 HTML코드를 작성합니다.
그중 사람들이 많이 사용하는 편집기 몇개를 소개해 드리겠습니다.
1. 비주얼 스튜디오 코드
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
비주얼 스튜디오 코드는 많은 사람들이 사용하는 편집기 중 하나입니다.
마이크로소프트가 만든 에디터로 마이크로소프트 제품 중 유례가 없을 정도로 정말 빠르게, 자주, 그리고 많이 업데이트를 하여 플랫폼을 막론하고 호평받는 범용 코드 에디터가 되었습니다. 해외에서는 마소를 대놓고 싫어하는 사람들도 VS Code만큼은 인정하는 분위기일 정도로 호평이 많습니다.
2. Atom
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
아톰은 플러그인으로 기능을 쉽게 확장할 수 있으며, 윈도우즈, 리눅스, macOS를 모두 지원합니다. 또한 HTML, CSS, JavaScript와 같은 웹 기술로 화면을 구현했기 때문에 웹 페이지를 편집하듯이 UI를 제어할 수 있는 특징이 있습니다.
3. Sublime Text
Sublime Text - the sophisticated text editor for code, markup and prose
Available on Mac, Windows and Linux
www.sublimetext.com
Sublime Text는 기존의 텍스트 에디터, IDE에 비해 가벼운 편이다. OS별로 GUI 툴킷이 따로 있어 크로스 플랫폼 때문에 생기는 성능저하가 적은 편이다. 특히 Electron을 사용한 Atom, VS Code 등의 텍스트 에디터들과 비교해보면 굉장히 쾌적하다는 것을 느낄 수 있다.
편집기는 어떤것을 사용해도 좋습니다.
편집기는 도구일 뿐이니, 너무 고민하지 말고 편집기를 선택하면 됩니다.
그래도 본인에게 가장 맞는 편집기를 찾는 것이 좋습니다.
이것저것 사용해보고 편집기를 골라보는 것도 나쁘지 않을거 같습니다.
이상으로 HTML의 기초에 대해서 설명드렸습니다.
끝까지 읽어주셔서 감사합니다.
'IT > HTML & CSS' 카테고리의 다른 글
| HTML 체크박스(checkbox) 만들기 input checked 속성 (0) | 2024.03.26 |
|---|---|
| CSS 드롭다운 메뉴(gnb) 만들기 (0) | 2024.03.20 |
| CSS 사용자 속성 변수 사용하기 (0) | 2024.03.20 |
| HTML/CSS[3탄] HTML태그 소개 head 태그 (0) | 2021.08.23 |
| HTML/CSS[2탄] HTML태그 소개(h1~h6 태그, p 태그, br 태그) - 01 (0) | 2021.06.17 |