[예습] 웹 서비스 개발

1 분 소요

Web development

Full Stack

Front-end
사용자와 상호작용하는 화면
- HTML
  Hyper Text Markup Language
- CSS
  Cascading Style Sheets
- JS(JavaScript)
  change HTML content
Back-end
컨테츠나 자원들과 통신하는 모든 프로그램
- 서버(OS)
- 데이터베이스(Database)
- Web Framework(Spring)
- Programming Language(Java)

HTML Basic
- <html>: HTML document’s Start and End
- <head>: 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의
  - <title>
  - <style>
  - <base>
  - <link>
  - <meta>
  - <script>
  - <noscript>
- <body>: The visible part of the HTML document
- <!DOCTYPE html>: Document Type Declaration
```
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
```
HTML Headings
- <h1> <h2< ⋅⋅⋅ <h6>
- <h1> defines the most important heading.
- <h6> defines the least important heading:
```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

HTML Paragraph

<p>: Paragraph

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<br>: Line Break

<p>This is<br>a paragraph<br>with line breaks.</p>

<pre>: Preformatted Text

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</pre>

<hr>: Thematic Break in the Content

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML Block

<ul>: Unordered List

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ol>: Ordered List

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

p {
  color: red;
  text-align: center;
}

p: Selector
color, text-align: Property
red, center: Value

CSS Simple selectors