목차
A. HTML
B. 주요 Elements
Hyper Text Markup Language.
Hyper Text는 사용자가 어떠한 텍스트를 선택했을 때 연결된 '링크'를 통해 해당 문서로 이동할 수 있도록 하는 기능을 가진 텍스트.
Markup Language(마크업 언어)는 이것이 '태그'라 불리는 기호로 둘러싸인 언어임을 뜻한다.
HTML은 웹페이지를 만들기 위해 약속된 언어체계이다.
<html>
<head>
<title>webpage</title>
</head>
<body>
Hellow worlds!
</body>
</html>
Hellow worlds!
<html>...</html>
: HTML 문서의 시작과 끝을 의미한다.<head>...</head>
: 페이지에 표시되지 않는 외부영역. 제목, 작성자, 스타일시트 등에 관한 문서 정보를 담는다.<title>...</title>
: 의 하위요소로 문서의 제목이 브라우저의 제목표시줄이나 탭에 표시된다.<body>...</body>
: 본문에 해당하는 영역. 웹페이지에 구현하고자 하는 내용들을 담으며, HTML 문서의 대부분을 차지한다.
See the Pen Untitled by KimJooHyung (@Kj_code00) on CodePen.
<h1>...</h1>
: 제목을 표시할 때 사용하는 요소. 1~6까지 숫자지정이 가능하며, 숫자가 커질수록 중요도가 낮아지고 출력되는 글자 크기도 작아진다.
<a>...</a>
: Anchor의 약자로 링크를 걸어주는 요소.
href(hypertext reference)는 <a>
와 한 세트처럼 쓰이는 속성으로 클릭시 이동할 웹페이지의 주소를 href=""
의 형식으로 적는다.
<div>...</div>
: 영역을 지정하는 요소. 영역을 쪼개어 블록(block) 속성을 주기 위해 사용한다.
<span>...</span>
: <div>
와 달리 인라인(inline) 효과를 주는 영역을 지정하는 요소.
<p>...</p>
: 문단을 지정하는 요소. <div>
와 같은 블록요소이지만 이와 달리 더 이상의 하위영역을 쪼갤 수 없다.
<ul>...</ul>
: Unordered List의 약자로 순서를 지정하지 않는 목록.
<ol>...</ol>
: Ordered List의 약자. <ul>
과 달리 순서가 있는 목록을 만들 때 사용한다.
<input />
: 입력창을 생성하는 요소로 따로 닫는 태그가 없다.
<input type="password" />
: 비밀번호 입력창 생성<input type="radio" />
: 선택지 생성<input type="checkbox" />
: 체크박스 생성<button>...</button>
: 버튼 생성<select>...</button>
: 선택창 생성
<img src="#" />
: 이미지를 삽입한다. 따로 여닫는 태그가 없다.
* 여닫는 태그가 없을 때 /
는 생략 가능하다. (HTML5)
웹 에디터의 일종으로 현재 가장 널리 쓰이고 있는 툴.
HTML파일은 윈도우의 기본 프로그램인 메모장을 통해서도 작성할 수 있지만 vscode와 같은 툴에는 태그 자동완성, 줄바꿈등의 기능이 탑재되어 있어 사용자의 편의성과 편집 정확도를 올려준다.
_*항상 저장(Ctrl+S)를 습관화하자._