기능 구현도 좋지만, 기초가 많이 부족한 것 같아 처음부터 다시 공부 한다. 그러다 보면 아는 내용은 더 잘 알게 되고, 모르는 내용은 새로 배우게 되겠지.
HTML5
HTML은 HyperText Markup Language)의 약자로, 웹페이지의 내용(content)과 구조(structure)를 담당하는 마크업 언어다.
1. 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요! HTML5</p>
</body>
</html><!DOCTYPE html>은 문서 형식(document type)을 HTML5로 지정함을 의미한다.
<html> ... </html> 사이에 실질적인 마크업 문서가 자리한다.
<head> ... </head>에는 해당 문서의 title, 외부 파일 참조, 메타데이터 등이 위치하며, 웹브라우저에 표현되지 않는다.
<body> ... </body> 내부에 위치한 요소들이 웹브라우저에 표현된다.
2. 기본 문법
2-1. 요소(Element)
HTML 내부에 위치한 태그들을 요소(Element)라고 부른다. 요소는 시작 태그(<>)와 종료 태그(</>)로 구성되어 있다.
2-1-1. 요소의 중첩(Nested Element)
<body> 요소 안에 <h1>과 <p> 태그가 포함된 것처럼, 한 요소는 다른 요소를 포함할 수 있다. 이때 부모(parent)-자식(child) 관계가 성립된다. 이러한 관계를 통해 구조화한다. 관계를 표현할 때는 들여쓰기를 활용해, 코드를 읽기 쉽게 정리한다. 좋은 코드는 읽기 쉽다.
2-1-2. 빈 요소(Empty Element)
시작 태그만으로 존재하는 요소들로, 내용(content)를 가질 수 없으며 어트리뷰트(attribute)만 가질 수 있다. 대표적인 빈 요소는 아래와 같다.
<br />
<hr />
<img />
<input />
<lint>
<mete>2-2. 어트리뷰트(Attribute)
요소의 성질, 특징을 정의하는 명세로, 요소에 추가적인 정보를 제공한다. 시작 태그에 위치해야 하며 key와 value의 쌍을 이룬다.
<img src="html.jpg" width="104" height="142">2-2-1. 글로벌 어트리뷰트(HTML Global Attribute)
몇몇 요소를 제외한 대부분의 요소에 공통으로 사용할 수 있는 어트리뷰트다.
자주 사용되는 글로벌 어트리뷰트
| 어트리뷰트 | 설명 |
|---|---|
| id | 유일한 식별자(id)를 요소에 지정, 중복 지정 불가 |
| class | 스타일시트에 정의된 class를 요소에 지정, 중복 지정 가능 |
| hidden | 브라우저에 표현되지 않음 |
| lang | 지정된 요소의 언어 지정 |
| style | 요소에 inline css 지정 |
| tabindex | 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정 |
| title | 요소에 관한 제목 지정 |
2-3. 주석(Comments)
브라우저에는 표현되지 않으며, 주로 개발자에게 코드 설명을 위해 사용한다.
<!-- 이것은 주석입니다. -->
<!-- 여러줄을
감쌀 수도
있습니다. -->
<p>이것은 주석이 아닙니다.</p>
<!-- <p>태그를 주석으로 감쌀 수 있습니다.</p> -->