> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/html-css.md).
# HTML / CSS
**HTML은 어디에 쓰는 언어인가?**
웹페이지를 만들고 디자인하고 싶을 때 사용함.
세상에 존재하는 모든 웹페이지는 html 언어로 작성한다.
HTML - Hypertext Markup Language
마크업 언어는 "자료의 구조를 표현하기 위한 언어"
웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 ..
자료를 입력한다.
그 자료들이 어디에 배치되는지 그런 것들을 기록하기 위해
존재하는 언어가 바로 HTML이라고 이해하면 된다.
#### 정적 사이트와 동적 사이트
취업 포트폴리오 사이트, 기업 홍보 사이트와 같은 정보를 보여주기만 하는 웹사이트를 정적 사이트라고 하고 비교적 간단하다.
쇼핑몰, 예매 사이트. SNS 등과 같은 웹사이트는 동적 사이트 겉으로 보이는 껍데기만 이쁘게 만들면 끝이 아니라 서버에 저장하고 다양한 기능 들이 필요하다. (ex. 장바구니, 팔로우, 좋아요 등등)
**HTML 파일 기본 템플릿**
```html
Document
```
**``** : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 `` 이다.)
**``** : HTML 문서의 루트(root) 요소를 정의한다.
**``** : HTML 문서의 메타데이터(metadata)를 정의한다.
* 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
* 이러한 메타데이터는 ``, `<style>`, `<meta>`, `<link>`, `<script>`, `<base>`태그 등을 이용하여 표현할 수 있다.
**`<title>`** : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용된다.
* 웹 브라우저의 툴바(toolbar)에 표시된다.
* 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다.
* 검색 엔진의 결과 페이지에 제목으로 표시된다.
**`<body>`** : 웹 브라우저를 통해 보이는 내용(content) 부분이다.
**`<h1>~<h6>`** : 제목(heading)을 나타낸다.
**`<p>`** : 단락(paragraph)을 나타낸다.
HTML / CSS / JavaScript 를 위한 타이핑 연습
{% embed url="<https://www.speedcoder.net/lessons/>" %}
{% embed url="<https://typing.io/>" %}
간단한 HTML / CSS / JavaScript 코드 작성 후 테스트하기 좋은 웹 기반편집기
{% embed url="<https://codepen.io/>" %}
