목차
A. HTML
B. 주요 Elements
A. HTML
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 문서의 대부분을 차지한다.
B. 주요 Elements
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)
C. Visual Studio Code
-
웹 에디터의 일종으로 현재 가장 널리 쓰이고 있는 툴.
HTML파일은 윈도우의 기본 프로그램인 메모장을 통해서도 작성할 수 있지만 vscode와 같은 툴에는 태그 자동완성, 줄바꿈등의 기능이 탑재되어 있어 사용자의 편의성과 편집 정확도를 올려준다._*항상 저장(Ctrl+S)를 습관화하자._
