# HTML / CSS

**HTML은 어디에 쓰는 언어인가?**



웹페이지를 만들고 디자인하고 싶을 때 사용함.

세상에 존재하는 모든 웹페이지는 html 언어로 작성한다.

&#x20;

HTML -  Hypertext Markup Language

마크업 언어는 "자료의 구조를 표현하기 위한 언어"

웹페이지에 우리가 글넣고 그림넣고 박스넣고 버튼넣고 ..&#x20;

자료를 입력한다.

그 자료들이 어디에 배치되는지 그런 것들을 기록하기 위해&#x20;

존재하는 언어가 바로 HTML이라고 이해하면 된다.



#### 정적 사이트와 동적 사이트&#x20;

&#x20;취업 포트폴리오 사이트, 기업 홍보 사이트와 같은 정보를 보여주기만 하는 웹사이트를 정적 사이트라고 하고 비교적 간단하다.

&#x20;쇼핑몰, 예매 사이트. SNS 등과 같은 웹사이트는 동적 사이트 겉으로 보이는 껍데기만 이쁘게 만들면 끝이 아니라 서버에 저장하고 다양한 기능 들이 필요하다. (ex. 장바구니, 팔로우, 좋아요 등등)



<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FouiVMEnO3l4Kw61HGtiw%2FScreenshot_5.png?alt=media&#x26;token=d9ceda68-e35e-4ffe-898f-5909b2fe83c6" alt=""><figcaption></figcaption></figure>



**HTML 파일 기본 템플릿**



```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   
</body>
</html>
```

&#x20;

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FgDcJaosbT0sT0HVk5Mpl%2FScreenshot_6.png?alt=media&#x26;token=3e12a06d-9d91-4719-93d4-65ea159c848e" alt=""><figcaption></figcaption></figure>

**`<!DOCTYPE>`** : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 `<!DOCTYPE html>` 이다.)

**`<html>`** : HTML 문서의 루트(root) 요소를 정의한다.

**`<head>`** : HTML 문서의 메타데이터(metadata)를 정의한다.

* 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
* 이러한 메타데이터는 `<title>`, `<style>`, `<meta>`, `<link>`, `<script>`, `<base>`태그 등을 이용하여 표현할 수 있다.

**`<title>`** : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용된다.

* 웹 브라우저의 툴바(toolbar)에 표시된다.
* 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다.
* 검색 엔진의 결과 페이지에 제목으로 표시된다.

**`<body>`** : 웹 브라우저를 통해 보이는 내용(content) 부분이다.

**`<h1>~<h6>`** : 제목(heading)을 나타낸다.

**`<p>`** : 단락(paragraph)을 나타낸다.



&#x20;

HTML / CSS / JavaScript 를 위한 타이핑 연습

{% embed url="https://www.speedcoder.net/lessons/" %}

{% embed url="https://typing.io/" %}





간단한 HTML / CSS / JavaScript 코드 작성 후 테스트하기 좋은 웹 기반편집기

{% embed url="https://codepen.io/" %}
