HTML ?
Hypertext Markup Language의 줄임말로, 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어입니다. 마크업 언어는 태그들을 이용하여 웹사이트의 구조를 만듭니다.
MDN
IT기업들이 사용하는 웹 개발을 위한 문서 저장소이자 수많은 프로그래밍 입문자들을 위한 표준 문서들을 확인할 수 있습니다.
Document and website structure
웹사이트의 구조를 간단하게 확인할 수 있는 문서입니다. body 태그 안에서도 header, navigation bar, main content, sidebar, footer 등의 구조로 나눌 수 있습니다. 물론 이 구조를 따르지 않아도 됩니다.
HTML elements reference - 태그 문서
웹사이트 전반적인 구조
전반적인 HTML 파일의 구조입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Heading1</h1>
<h2>Heading2</h2>
<button>click</button>
</body>
</html>
html
html 파일 제일 상단에 위치하는 태그입니다.
head
사용자에게 보여지는 UI요소가 아닌 타이틀, 부가 설명, 북마크 추가할 때 나오는 제목이나 아이콘 등이 정의됩니다. CSS 파일이 있다면 연결하는 역할도 할 수 있습니다. 사용자에게 보여지는 정보는 없고 메타데이터만 존재한다고 생각하면 됩니다.
body
사용자에게 보여지는 중요한 최상위의 컨테이너입니다. header, navigation bar, main content, sidebar, footer 등의 구조로 나눌 수 있습니다.
BOX & ITEM
태그는 크게 사용자에게 보여지는 ITEM 과 이 아이템들을 잘 정리할 수 있도록 도와주는 BOX 로 나눌 수 있습니다. 물론 BOX도 CSS를 통해 스타일링이 가능합니다. 하지만 기본적으로 HTML에서 BOX는 사용자에게 보여지지 않습니다.
Block & Inline
Block LEVEL: 한 줄에 하나만 배치
Inline LEVEL: 공간이 허용하면 바로 옆에 배치
...
<body>
<p>This is a sentence. <b>That</b> is ...</p>
<p>This is a sentence. <span>That</span> is ...</p>
<p>This is a sentence. <div>That</div> is ...</p>
...
<b> 태그 : Inline LEVEL
<span> 태그 : Inline LEVEL
<div> 태그 : Block LEVEL
태그의 구조
태그는 하나의 Element 이며, 태그 안의 내용을 Content 라고 합니다. 또한 Attribute 라는 속성값을 class로 정의할 수 있습니다.
자주 사용하는 태그
<a> 태그
anchor 를 뜻하는 <a> 태그는 하이퍼링크를 걸어줍니다.
<p><a href="https://www.w3.org/TR/2011/WD-html5-20110405/index.html" target="_blank" title="html specification">Hyper Text Markup Language</a>는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다.href(Hyper-References): 클릭 시 이동하는 링크
target: 링크를 여는 방법
- _self: 현재 페이지 (기본값)
- _blank: 새 탭
- _parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
- _top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
- 프레임이름: 직접 프레임이름을 명시해서 사용할 수도 있습니다.
title: 마우스를 올려놓으면 툴팁을 확인할 수 있습니다.
<ol> 태그, <ul> 태그, <li> 태그
Tip ❗️ 태그 한번에 입력하기
ol>li*3 +Tab
<ol> 태그는 정렬된 목록(ordered list)을 말합니다. <ol> 태그는 컨테이너이기 때문에 기본적으로는 사용자에게 보여지지 않습니다.
<li> 태그는 목록 안의 아이템(항목)(list item)을 나타냅니다. 따라서 반드시 목록을 나타내는 <ul> 태그 혹은 <ol> 태그 안에 항목으로서 <li> 태그가 위치해야 합니다.
<ol type="i" reversed>
<li>ㄱㄱ</li>
<li>ㄴㄴ</li>
<li>ㄷㄷ</li>
</ol>
<ul> 태그는 정렬되지 않은 목록(unordered list ) 즉, 순서가 중요하지 않은 목록을 나타낼 때 사용합니다.
<ul>
<li>Hello</li>
<li></li>
<li></li>
</ul>
부모 태그, 자식 태그
태그가 서로 포함 관계로 연관되어 있을 때 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 부릅니다.
<parent>
<child></child>
</parent><ol> 태그와 <li> 태그, <ul> 태그와 <li> 태그는 부모 태그, 자식 태그로 볼 수 있습니다.
input 태그, label 태그
한 페이지에 많은 input이 있을 수 있기 때문에 input의 id와 label의 for을 통해 식별합니다.
<label for="input_name">Name: </label>
<input id="input_name" type="text">
