2025-01-24T01:44:03
This commit is contained in:
3
.idea/.gitignore
generated
vendored
3
.idea/.gitignore
generated
vendored
@@ -1,3 +0,0 @@
|
|||||||
# 디폴트 무시된 파일
|
|
||||||
/shelf/
|
|
||||||
/workspace.xml
|
|
||||||
6
.idea/copyright/Elex_Project.xml
generated
6
.idea/copyright/Elex_Project.xml
generated
@@ -1,6 +0,0 @@
|
|||||||
<component name="CopyrightManager">
|
|
||||||
<copyright>
|
|
||||||
<option name="notice" value="Copyright (c) &#36;originalComment.match("Copyright \(c\) (\d+)", 1, "-", "&#36;today.year")&#36;today.year. Elex. All Rights Reesrved. https://www.elex-project.com/" />
|
|
||||||
<option name="myName" value="Elex Project" />
|
|
||||||
</copyright>
|
|
||||||
</component>
|
|
||||||
7
.idea/copyright/profiles_settings.xml
generated
7
.idea/copyright/profiles_settings.xml
generated
@@ -1,7 +0,0 @@
|
|||||||
<component name="CopyrightManager">
|
|
||||||
<settings>
|
|
||||||
<module2copyright>
|
|
||||||
<element module="Project Files" copyright="Elex Project" />
|
|
||||||
</module2copyright>
|
|
||||||
</settings>
|
|
||||||
</component>
|
|
||||||
6
.idea/misc.xml
generated
6
.idea/misc.xml
generated
@@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="ProjectRootManager">
|
|
||||||
<output url="file://$PROJECT_DIR$/out" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
8
.idea/modules.xml
generated
8
.idea/modules.xml
generated
@@ -1,8 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="ProjectModuleManager">
|
|
||||||
<modules>
|
|
||||||
<module fileurl="file://$PROJECT_DIR$/html-examples.iml" filepath="$PROJECT_DIR$/html-examples.iml" />
|
|
||||||
</modules>
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
6
.idea/vcs.xml
generated
6
.idea/vcs.xml
generated
@@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="VcsDirectoryMappings">
|
|
||||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<!DOCTYPE categories
|
|
||||||
SYSTEM "https://resources.jetbrains.com/writerside/1.0/categories.dtd">
|
|
||||||
<categories>
|
|
||||||
<category id="wrs" name="Writerside documentation" order="1"/>
|
|
||||||
</categories>
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<!--
|
|
||||||
~ Copyright (c) 2024. Elex. All Rights Reesrved.
|
|
||||||
~ https://www.elex-project.com/
|
|
||||||
-->
|
|
||||||
|
|
||||||
<buildprofiles xsi:noNamespaceSchemaLocation="https://resources.jetbrains.com/writerside/1.0/build-profiles.xsd"
|
|
||||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
|
|
||||||
|
|
||||||
<variables></variables>
|
|
||||||
<build-profile instance="h">
|
|
||||||
<variables>
|
|
||||||
<noindex-content>true</noindex-content>
|
|
||||||
</variables>
|
|
||||||
</build-profile>
|
|
||||||
|
|
||||||
</buildprofiles>
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<!--
|
|
||||||
- Copyright (c) 2024. Elex. All Rights Reesrved.
|
|
||||||
- https://www.elex-project.com/
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!DOCTYPE instance-profile
|
|
||||||
SYSTEM "https://resources.jetbrains.com/writerside/1.0/product-profile.dtd">
|
|
||||||
|
|
||||||
<instance-profile id="h"
|
|
||||||
name="HTML"
|
|
||||||
start-page="starter-topic.md">
|
|
||||||
|
|
||||||
<toc-element topic="starter-topic.md">
|
|
||||||
<toc-element topic="Boiler-Plate.md"/>
|
|
||||||
<toc-element topic="Meta.md"/>
|
|
||||||
<toc-element topic="Paragraph.md"/>
|
|
||||||
<toc-element topic="List.md"/>
|
|
||||||
<toc-element topic="Section.md"/>
|
|
||||||
<toc-element topic="Embed.md"/>
|
|
||||||
<toc-element topic="Table.md"/>
|
|
||||||
<toc-element topic="Web-Forms.md">
|
|
||||||
<toc-element topic="Input.md"/>
|
|
||||||
</toc-element>
|
|
||||||
<toc-element topic="Interaction.md"/>
|
|
||||||
<toc-element topic="WebComponents.md">
|
|
||||||
<toc-element topic="Custom-Element.md"/>
|
|
||||||
<toc-element topic="Shadow-DOM.md"/>
|
|
||||||
<toc-element topic="Template-and-Slot.md"/>
|
|
||||||
</toc-element>
|
|
||||||
<toc-element topic="Composing-Email.md"/>
|
|
||||||
<toc-element topic="HTTP.md">
|
|
||||||
<toc-element topic="Http-Request.md"/>
|
|
||||||
<toc-element topic="Url.md"/>
|
|
||||||
<toc-element topic="Robots.md"/>
|
|
||||||
<toc-element topic="Sitemap.md"/>
|
|
||||||
<toc-element topic="XML-Rpc.md"/>
|
|
||||||
<toc-element topic="Json-Rpc.md"/>
|
|
||||||
<toc-element topic="Syndication.md">
|
|
||||||
<toc-element topic="Rss.md"/>
|
|
||||||
<toc-element topic="Atom.md"/>
|
|
||||||
</toc-element>
|
|
||||||
<toc-element topic="Linkback.md">
|
|
||||||
<toc-element topic="Refback.md"/>
|
|
||||||
<toc-element topic="Trackback.md"/>
|
|
||||||
<toc-element topic="Pingback.md"/>
|
|
||||||
<toc-element topic="Webmention.md"/>
|
|
||||||
</toc-element>
|
|
||||||
<toc-element topic="Seo.md"/>
|
|
||||||
</toc-element>
|
|
||||||
<toc-element topic="RESTful.md"/>
|
|
||||||
</toc-element>
|
|
||||||
</instance-profile>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 341 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 274 KiB |
@@ -1,3 +0,0 @@
|
|||||||
# Custom Element
|
|
||||||
|
|
||||||
Start typing here...
|
|
||||||
@@ -1,272 +0,0 @@
|
|||||||
# Embedding
|
|
||||||
|
|
||||||
## 이미지
|
|
||||||
|
|
||||||
### img
|
|
||||||
|
|
||||||
문서에 이미지를 넣습니다.
|
|
||||||
|
|
||||||
- src
|
|
||||||
|
|
||||||
- srcset
|
|
||||||
|
|
||||||
- alt
|
|
||||||
|
|
||||||
- width, height
|
|
||||||
|
|
||||||
- title
|
|
||||||
|
|
||||||
- loading
|
|
||||||
|
|
||||||
eager | lazy
|
|
||||||
|
|
||||||
- usemap
|
|
||||||
|
|
||||||
|
|
||||||
```html
|
|
||||||
<img src="images/dinosaur.jpg"
|
|
||||||
alt="The head and torso of a dinosaur skeleton;
|
|
||||||
it has a large head with long sharp teeth">
|
|
||||||
```
|
|
||||||
|
|
||||||
### figure
|
|
||||||
|
|
||||||
이미지와 캡션을 하나로 묶을 때 사용합니다. `<figcaption>` 요소를 사용해 설명을 붙일 수 있습니다.
|
|
||||||
|
|
||||||
### figcaption
|
|
||||||
|
|
||||||
부모 `<figure>` 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<figure>
|
|
||||||
<img src="images/dinosaur.jpg"
|
|
||||||
alt="The head and torso of a dinosaur skeleton;
|
|
||||||
it has a large head with long sharp teeth"
|
|
||||||
width="400"
|
|
||||||
height="341">
|
|
||||||
|
|
||||||
<figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
|
|
||||||
</figure>
|
|
||||||
```
|
|
||||||
|
|
||||||
### picture
|
|
||||||
|
|
||||||
장치나 화면 크기에 따라 여러 소스 중 하나의 이미지를 사용하고자할 때 사용합니다. ```<picture>```는 여러 개의 ```<source>```와 하나의 ```<img>```를 갖습니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<picture>
|
|
||||||
<source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x" type="image/png">
|
|
||||||
<source srcset="logo-480.png, logo-480-2x.png 2x">
|
|
||||||
<img src="logo-320.png" alt="logo">
|
|
||||||
</picture>
|
|
||||||
```
|
|
||||||
|
|
||||||
### map
|
|
||||||
|
|
||||||
`<area>` 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.
|
|
||||||
|
|
||||||
### area
|
|
||||||
|
|
||||||
이미지의 핫스팟 영역을 정의하고, 하이퍼링크를 추가할 수 있습니다. ```<map>```안에서만 사용됩니다.
|
|
||||||
|
|
||||||
- shape
|
|
||||||
- coords
|
|
||||||
- href
|
|
||||||
- alt
|
|
||||||
|
|
||||||
```html
|
|
||||||
<map name="infographic">
|
|
||||||
<area shape="rect" coords="184,6,253,27"
|
|
||||||
href="https://mozilla.org"
|
|
||||||
target="_blank" alt="Mozilla" />
|
|
||||||
<area shape="circle" coords="130,136,60"
|
|
||||||
href="https://developer.mozilla.org/"
|
|
||||||
target="_blank" alt="MDN" />
|
|
||||||
<area shape="poly" coords="130,6,253,96,223,106,130,39"
|
|
||||||
href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
|
|
||||||
target="_blank" alt="Graphics" />
|
|
||||||
<area shape="poly" coords="253,96,207,241,189,217,223,103"
|
|
||||||
href="https://developer.mozilla.org/docs/Web/HTML"
|
|
||||||
target="_blank" alt="HTML" />
|
|
||||||
<area shape="poly" coords="207,241,54,241,72,217,189,217"
|
|
||||||
href="https://developer.mozilla.org/docs/Web/JavaScript"
|
|
||||||
target="_blank" alt="JavaScript" />
|
|
||||||
<area shape="poly" coords="54,241,6,97,36,107,72,217"
|
|
||||||
href="https://developer.mozilla.org/docs/Web/API"
|
|
||||||
target="_blank" alt="Web APIs" />
|
|
||||||
<area shape="poly" coords="6,97,130,6,130,39,36,107"
|
|
||||||
href="https://developer.mozilla.org/docs/Web/CSS"
|
|
||||||
target="_blank" alt="CSS" />
|
|
||||||
</map>
|
|
||||||
<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### SVG
|
|
||||||
|
|
||||||
```html
|
|
||||||
<img
|
|
||||||
src="equilateral.svg"
|
|
||||||
alt="triangle with all three sides equal"
|
|
||||||
height="87"
|
|
||||||
width="100" />
|
|
||||||
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<svg width="300" height="200">
|
|
||||||
<rect width="100%" height="100%" fill="green" />
|
|
||||||
</svg>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 비디오 / 오디오
|
|
||||||
|
|
||||||
### video
|
|
||||||
|
|
||||||
비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.
|
|
||||||
|
|
||||||
- src
|
|
||||||
|
|
||||||
- height
|
|
||||||
|
|
||||||
- width
|
|
||||||
|
|
||||||
- controls
|
|
||||||
|
|
||||||
- autoplay
|
|
||||||
|
|
||||||
- loop
|
|
||||||
|
|
||||||
- muted
|
|
||||||
|
|
||||||
- poster
|
|
||||||
|
|
||||||
- currentTime
|
|
||||||
|
|
||||||
|
|
||||||
- source
|
|
||||||
|
|
||||||
- src
|
|
||||||
- srcset
|
|
||||||
- type
|
|
||||||
- track
|
|
||||||
|
|
||||||
미디어 요소(`<audio>`, `<video>`)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다.
|
|
||||||
|
|
||||||
- src
|
|
||||||
|
|
||||||
- srclang
|
|
||||||
|
|
||||||
- label
|
|
||||||
|
|
||||||
- default
|
|
||||||
|
|
||||||
- kind
|
|
||||||
|
|
||||||
subtitles | captions | descriptions | chapters | metadata
|
|
||||||
|
|
||||||
|
|
||||||
```html
|
|
||||||
<video src="rabbit320.webm" controls>
|
|
||||||
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<video controls>
|
|
||||||
<source src="rabbit320.mp4" type="video/mp4">
|
|
||||||
<source src="rabbit320.webm" type="video/webm">
|
|
||||||
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
|
|
||||||
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
|
|
||||||
</video>
|
|
||||||
```
|
|
||||||
|
|
||||||
### audio
|
|
||||||
|
|
||||||
문서에 소리 콘텐츠를 포함할 때 사용합니다.
|
|
||||||
|
|
||||||
- src
|
|
||||||
- autoplay
|
|
||||||
- controls
|
|
||||||
- currentTime
|
|
||||||
- loop
|
|
||||||
|
|
||||||
```html
|
|
||||||
<audio controls>
|
|
||||||
<source src="viper.mp3" type="audio/mp3">
|
|
||||||
<source src="viper.ogg" type="audio/ogg">
|
|
||||||
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
|
|
||||||
</audio>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 캔버스
|
|
||||||
|
|
||||||
### canvas
|
|
||||||
|
|
||||||
캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.
|
|
||||||
|
|
||||||
- width, height
|
|
||||||
|
|
||||||
## 프레임
|
|
||||||
|
|
||||||
### iframe
|
|
||||||
|
|
||||||
중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.
|
|
||||||
|
|
||||||
- allowfullscreen
|
|
||||||
- frameborder
|
|
||||||
- src
|
|
||||||
- width
|
|
||||||
- height
|
|
||||||
|
|
||||||
```html
|
|
||||||
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
|
|
||||||
width="100%" height="500" frameborder="0"
|
|
||||||
allowfullscreen sandbox>
|
|
||||||
<p>
|
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Glossary">
|
|
||||||
Fallback link for browsers that don't support iframes
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</iframe>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 그 외 객체
|
|
||||||
|
|
||||||
### embed
|
|
||||||
|
|
||||||
외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.
|
|
||||||
|
|
||||||
- src
|
|
||||||
- type
|
|
||||||
- width, height
|
|
||||||
|
|
||||||
### object
|
|
||||||
|
|
||||||
이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.
|
|
||||||
|
|
||||||
- data
|
|
||||||
- type
|
|
||||||
- width, height
|
|
||||||
|
|
||||||
### ~~param~~
|
|
||||||
|
|
||||||
`<object>`의 매개 변수를 정의합니다.
|
|
||||||
|
|
||||||
- name
|
|
||||||
- value
|
|
||||||
|
|
||||||
```html
|
|
||||||
<embed src="whoosh.swf" quality="medium"
|
|
||||||
bgcolor="#ffffff" width="550" height="400"
|
|
||||||
name="whoosh" align="middle" allowScriptAccess="sameDomain"
|
|
||||||
allowFullScreen="false" type="application/x-shockwave-flash"
|
|
||||||
pluginspage="http://www.macromedia.com/go/getflashplayer">
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<object data="mypdf.pdf" type="application/pdf"
|
|
||||||
width="800" height="1200" typemustmatch>
|
|
||||||
<p>You don't have a PDF plugin, but you can
|
|
||||||
<a href="mypdf.pdf">download the PDF file.
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</object>
|
|
||||||
```
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
# HTTP
|
|
||||||
|
|
||||||
Start typing here...
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
# HTTP 요청
|
|
||||||
|
|
||||||
HTTP 프로토콜은 텍스트 형식의 데이터입니다. HTTP 요청은 3 블록으로 구분할 수 있습니다. 첫 번째 줄에는 기본적인 정보가 포함됩니다. 그리고, HTTP 헤더가 키:값 형식으로 한 줄에 하나씩 나열됩니다. GET, HEAD, DELETE, OPTIONS는 서버에 추가 데이터를 전송할 필요가 없지만, POST 등과 같이 서버로 전송할 데이터가 있는 경우에는 한 줄을 띄우고, 메시지 본문이 이어집니다.
|
|
||||||
|
|
||||||
```
|
|
||||||
GET / HTTP/1.1
|
|
||||||
Host: www.example.com
|
|
||||||
Accept-Language: ko
|
|
||||||
```
|
|
||||||
|
|
||||||
```
|
|
||||||
POST /hello HTTP/1.1
|
|
||||||
Host: www.example.com
|
|
||||||
Accept-Language: ko
|
|
||||||
|
|
||||||
name=Charlie&messageId=100
|
|
||||||
```
|
|
||||||
|
|
||||||
## 시작줄
|
|
||||||
|
|
||||||
HTTP 요청의 첫 번째 줄에는 다음 3가지 정보가 포함되어 있습니다.
|
|
||||||
|
|
||||||
- HTTP 메서드
|
|
||||||
|
|
||||||
- GET
|
|
||||||
- HEAD
|
|
||||||
- POST
|
|
||||||
- PUT
|
|
||||||
- DELETE
|
|
||||||
- CONNECT
|
|
||||||
- OPTIONS
|
|
||||||
- TRACE
|
|
||||||
- PATCH
|
|
||||||
- 경로
|
|
||||||
|
|
||||||
- HTTP 버전
|
|
||||||
|
|
||||||
HTTP/1.1
|
|
||||||
|
|
||||||
|
|
||||||
## 헤더
|
|
||||||
|
|
||||||
## 메시지 본문
|
|
||||||
|
|
||||||
# HTTP 응답
|
|
||||||
|
|
||||||
## 시작줄
|
|
||||||
|
|
||||||
- HTTP 버전
|
|
||||||
- 상태 코드
|
|
||||||
- 상태 메시지
|
|
||||||
|
|
||||||
## 헤더
|
|
||||||
|
|
||||||
## 메시지 본문
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
# 목록
|
|
||||||
|
|
||||||
### ul
|
|
||||||
|
|
||||||
정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.
|
|
||||||
|
|
||||||
### ol
|
|
||||||
|
|
||||||
정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.
|
|
||||||
|
|
||||||
### li
|
|
||||||
|
|
||||||
목록의 항목을 나타냅니다.
|
|
||||||
|
|
||||||
### dl
|
|
||||||
|
|
||||||
설명 목록을 나타냅니다. `<dl>`은 `<dt>`로 표기한 용어와 `<dd>` 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.
|
|
||||||
|
|
||||||
### dt
|
|
||||||
|
|
||||||
설명 혹은 정의 리스트에서 용어를 나타냅니다. `<dl>` 요소 안에 위치해야 합니다
|
|
||||||
|
|
||||||
### dd
|
|
||||||
|
|
||||||
정의 목록 요소(`<dl>`)에서 앞선 용어(`<dt>`)에 대한 설명, 정의, 또는 값을 제공합니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<ul>
|
|
||||||
<li>milk</li>
|
|
||||||
<li>eggs</li>
|
|
||||||
<li>bread</li>
|
|
||||||
<li>hummus</li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<ol>
|
|
||||||
<li>Drive to the end of the road</li>
|
|
||||||
<li>Turn right</li>
|
|
||||||
<li>Go straight across the first two roundabouts</li>
|
|
||||||
<li>Turn left at the third roundabout</li>
|
|
||||||
<li>The school is on your right, 300 meters up the road</li>
|
|
||||||
</ol>
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<ol>
|
|
||||||
<li>Remove the skin from the garlic, and chop coarsely.</li>
|
|
||||||
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
|
|
||||||
<li>Add all the ingredients into a food processor.</li>
|
|
||||||
<li>Process all the ingredients into a paste.
|
|
||||||
<ul>
|
|
||||||
<li>If you want a coarse "chunky" hummus, process it for a short time.</li>
|
|
||||||
<li>If you want a smooth hummus, process it for a longer time.</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<dl>
|
|
||||||
<dt>soliloquy</dt>
|
|
||||||
<dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
|
|
||||||
<dt>monologue</dt>
|
|
||||||
<dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
|
|
||||||
<dt>aside</dt>
|
|
||||||
<dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
|
|
||||||
</dl>
|
|
||||||
```
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
# 루트 요소 및 메타데이터
|
|
||||||
|
|
||||||
### html
|
|
||||||
|
|
||||||
`<html>` 요소는 HTML 문서의 최상단 요소를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 `<html>`의 후손이어야 합니다.
|
|
||||||
|
|
||||||
### head
|
|
||||||
|
|
||||||
제목, 스크립트, 스타일 등 문서에 대한 메타 데이터 정보를 담습니다. HTML 문서에는 하나의 `<head>` 요소만 존재할 수 있습니다.
|
|
||||||
|
|
||||||
### base
|
|
||||||
|
|
||||||
문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 단 하나의 `<base>` 요소만 존재할 수 있습니다.
|
|
||||||
|
|
||||||
### link
|
|
||||||
|
|
||||||
현재 문서와 외부 리소스의 관계를 명시합니다. 일반적으로 CSS 문서를 연결하는데 사용되며, 파비콘 등의 아이콘을 연결하는데에도 사용됩니다.
|
|
||||||
|
|
||||||
- href
|
|
||||||
|
|
||||||
- hreflang
|
|
||||||
|
|
||||||
- rel
|
|
||||||
|
|
||||||
alternate | author | bookmark | canonical | external | icon |license | manifest | nofollow | stylesheet | prev | next
|
|
||||||
|
|
||||||
- type
|
|
||||||
|
|
||||||
- media
|
|
||||||
|
|
||||||
- disabled
|
|
||||||
|
|
||||||
|
|
||||||
```html
|
|
||||||
<link href="basic.css" rel="alternate stylesheet" title="Basic">
|
|
||||||
<link rel="icon" href="favicon32.png">
|
|
||||||
```
|
|
||||||
|
|
||||||
### meta
|
|
||||||
|
|
||||||
다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
|
|
||||||
|
|
||||||
- charset
|
|
||||||
|
|
||||||
- name
|
|
||||||
|
|
||||||
application-name | author | description | generator | keywords | referrer |theme-color | color-scheme |creator |robots | publisher | viewport
|
|
||||||
|
|
||||||
- content
|
|
||||||
|
|
||||||
- http-equiv
|
|
||||||
|
|
||||||
|
|
||||||
```html
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta name="description" content="Describe about the document.">
|
|
||||||
```
|
|
||||||
|
|
||||||
### style
|
|
||||||
|
|
||||||
문서나 문서 일부에 대한 스타일 정보를 포함합니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<style type="text/css">
|
|
||||||
p {color: red;}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### title
|
|
||||||
|
|
||||||
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 요소 내에는 텍스트만 사용할 수 있으며, 태그는 무시됩니다.
|
|
||||||
|
|
||||||
### body
|
|
||||||
|
|
||||||
HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 `<body>` 요소만 존재할 수 있습니다.
|
|
||||||
|
|
||||||
### script
|
|
||||||
|
|
||||||
실행 가능한 코드를 문서에 포함하거나 참조할 때 사용합니다. 보통 JavaScript 코드와 함께 쓰지만, WebGL의 GLSL 셰이더 프로그래밍 언어 등 다른 언어와도 사용할 수 있습니다.
|
|
||||||
|
|
||||||
### noscript
|
|
||||||
|
|
||||||
페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다.
|
|
||||||
|
|
||||||
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
|
|
||||||
@@ -1,318 +0,0 @@
|
|||||||
# 텍스트
|
|
||||||
|
|
||||||
## Headings
|
|
||||||
|
|
||||||
### h1, h2, h3, h4, h5, h6
|
|
||||||
|
|
||||||
구획 제목을 나타냅니다. 구획 단계는 `<h1>`이 가장 높고 `<h6>`은 가장 낮습니다.
|
|
||||||
|
|
||||||
### hgroup
|
|
||||||
|
|
||||||
문서 구획의 다단계 제목을 나타냅니다. 다수의 `<h1>` ~ `<h6>` 요소를 묶을 때 사용합니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<hgroup>
|
|
||||||
<h1>Calculus I</h1>
|
|
||||||
<h2>Fundamentals</h2>
|
|
||||||
</hgroup>
|
|
||||||
<p>This course will start with a brief introduction about the limit of a function. Then we will describe how the idea of derivative emerges in the Physics and Geometry fields. After that, we will explain that the key to master calculus is …</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Paragraph
|
|
||||||
|
|
||||||
### p
|
|
||||||
|
|
||||||
하나의 문단을 나타냅니다.
|
|
||||||
|
|
||||||
### pre
|
|
||||||
|
|
||||||
미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>Some species live in houses where they hunt insects attracted by artificial light.</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 강조
|
|
||||||
|
|
||||||
### em
|
|
||||||
|
|
||||||
텍스트의 강조를 나타냅니다. `<em>` 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.
|
|
||||||
|
|
||||||
### strong
|
|
||||||
|
|
||||||
중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.
|
|
||||||
|
|
||||||
### mark
|
|
||||||
|
|
||||||
현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.
|
|
||||||
|
|
||||||
### i
|
|
||||||
|
|
||||||
텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다.
|
|
||||||
|
|
||||||
### b
|
|
||||||
|
|
||||||
독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다.
|
|
||||||
|
|
||||||
### u
|
|
||||||
|
|
||||||
글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다.
|
|
||||||
|
|
||||||
### s
|
|
||||||
|
|
||||||
글자에 취소선, 즉 글자를 가로지르는 선을 그립니다.
|
|
||||||
|
|
||||||
### ~~strike~~
|
|
||||||
|
|
||||||
글자에 취소선을 그립니다.
|
|
||||||
|
|
||||||
## 수정
|
|
||||||
|
|
||||||
### ins
|
|
||||||
|
|
||||||
문서에 추가된 텍스트의 범위를 나타냅니다.
|
|
||||||
|
|
||||||
### del
|
|
||||||
|
|
||||||
문서에서 제거된 텍스트의 범위를 나타냅니다.
|
|
||||||
|
|
||||||
### small
|
|
||||||
|
|
||||||
덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>This liquid is <strong>highly toxic</strong>.</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
### ~~big~~
|
|
||||||
|
|
||||||
포함된 텍스트를 주변 텍스트보다 한 수준 더 큰 글꼴 크기로 렌더링합니다.
|
|
||||||
|
|
||||||
### ~~tt~~
|
|
||||||
|
|
||||||
모노스페이스 글꼴을 사용하여 표시합니다.
|
|
||||||
|
|
||||||
## 인용
|
|
||||||
|
|
||||||
### blockquote
|
|
||||||
|
|
||||||
안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. 인용문의 출처 URL은 cite 속성으로, 출처 텍스트는 `<cite>` 요소로 제공할 수 있습니다.
|
|
||||||
|
|
||||||
- cite
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>Here below is a blockquote..</p>
|
|
||||||
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
|
|
||||||
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
|
|
||||||
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
|
|
||||||
</blockquote>
|
|
||||||
```
|
|
||||||
|
|
||||||
### q
|
|
||||||
|
|
||||||
둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.
|
|
||||||
|
|
||||||
- cite
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
|
|
||||||
for short quotations that don't require paragraph breaks.</q></p>
|
|
||||||
```
|
|
||||||
|
|
||||||
### cite
|
|
||||||
|
|
||||||
저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다.
|
|
||||||
|
|
||||||
- title
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
|
|
||||||
<cite>MDN blockquote page</cite></a>:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
|
|
||||||
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
|
|
||||||
<cite>MDN q page</cite></a>.</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 단축
|
|
||||||
|
|
||||||
### abbr
|
|
||||||
|
|
||||||
준말 또는 머리글자를 나타냅니다.
|
|
||||||
|
|
||||||
- title
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
## ### ~~acronym~~
|
|
||||||
|
|
||||||
단어의 두문자어 또는 약어를 표시합니다.
|
|
||||||
|
|
||||||
## 정의
|
|
||||||
|
|
||||||
### dfn
|
|
||||||
|
|
||||||
현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. `<dfn>`에서 가장 가까운 `<p>`, `<dt>`/`<dd>` 쌍, `<section>` 조상 요소를 용어 정의로 간주합니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>A <dfn id="def-validator">validator</dfn> is a program that checks for syntax errors in code or documents.</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 루비
|
|
||||||
|
|
||||||
### ruby
|
|
||||||
|
|
||||||
루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.
|
|
||||||
|
|
||||||
### ~~rb~~
|
|
||||||
|
|
||||||
`<ruby>` 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다.
|
|
||||||
|
|
||||||
### rt
|
|
||||||
|
|
||||||
동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다.
|
|
||||||
|
|
||||||
### rp
|
|
||||||
|
|
||||||
`<ruby>` 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<ruby>
|
|
||||||
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
|
|
||||||
</ruby>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 첨자
|
|
||||||
|
|
||||||
### sub
|
|
||||||
|
|
||||||
활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다.
|
|
||||||
|
|
||||||
### sup
|
|
||||||
|
|
||||||
활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
|
|
||||||
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 코드
|
|
||||||
|
|
||||||
### code
|
|
||||||
|
|
||||||
짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다.
|
|
||||||
|
|
||||||
### var
|
|
||||||
|
|
||||||
수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다.
|
|
||||||
|
|
||||||
### kbd
|
|
||||||
|
|
||||||
키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.
|
|
||||||
|
|
||||||
### samp
|
|
||||||
|
|
||||||
컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<pre><code>var para = document.querySelector('p');
|
|
||||||
|
|
||||||
para.onclick = function() {
|
|
||||||
alert('Owww, stop poking me!');
|
|
||||||
}</code></pre>
|
|
||||||
|
|
||||||
<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
|
|
||||||
|
|
||||||
<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 데이터
|
|
||||||
|
|
||||||
### data
|
|
||||||
|
|
||||||
주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다.
|
|
||||||
|
|
||||||
- value
|
|
||||||
|
|
||||||
```html
|
|
||||||
<ul>
|
|
||||||
<li><data value="398">Mini Ketchup</data></li>
|
|
||||||
<li><data value="399">Jumbo Ketchup</data></li>
|
|
||||||
<li><data value="400">Mega Jumbo Ketchup</data></li>
|
|
||||||
</ul>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 시간
|
|
||||||
|
|
||||||
### time
|
|
||||||
|
|
||||||
시간의 특정 지점 또는 구간을 나타냅니다.
|
|
||||||
|
|
||||||
- datetime
|
|
||||||
|
|
||||||
```html
|
|
||||||
<time datetime="2016-01-20">20 January 2016</time>
|
|
||||||
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 주소 또는 연락처
|
|
||||||
|
|
||||||
### address
|
|
||||||
|
|
||||||
가까운 HTML요소의 주소나 연락처 정보를 나타냅니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<address>
|
|
||||||
<a href="mailto:jim@rock.com">jim@rock.com</a><br>
|
|
||||||
<a href="tel:+13115552368">(311) 555-2368</a>
|
|
||||||
</address>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 링크
|
|
||||||
|
|
||||||
### a
|
|
||||||
|
|
||||||
다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.
|
|
||||||
|
|
||||||
- href
|
|
||||||
|
|
||||||
http: | mailto: | tel:
|
|
||||||
|
|
||||||
- download
|
|
||||||
|
|
||||||
다운로드 할지를 묻는 대화상자가 표시됩니다.
|
|
||||||
|
|
||||||
- target
|
|
||||||
|
|
||||||
_self | _blank | _parent | _top
|
|
||||||
|
|
||||||
|
|
||||||
```html
|
|
||||||
<p>I'm creating a link to
|
|
||||||
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
|
|
||||||
</p>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 줄바꿈
|
|
||||||
|
|
||||||
### br
|
|
||||||
|
|
||||||
텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.
|
|
||||||
|
|
||||||
### wbr
|
|
||||||
|
|
||||||
현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.
|
|
||||||
|
|
||||||
## 수평선
|
|
||||||
|
|
||||||
### hr
|
|
||||||
|
|
||||||
이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
# REST (Representational State Transfer)
|
|
||||||
|
|
||||||
주고 받는 자원(resource)에 이름을 규정하고 URI에 명시해 HTTP메서드(GET, POST, PUT, DELETE)를 통해 해당 자원의 상태를 주고받는 것을 의미합니다. REST 아키텍쳐를 구현하는 웹 서비스를 **RESTful**하다고 표현합니다.
|
|
||||||
|
|
||||||
## 특징
|
|
||||||
|
|
||||||
- 유니폼 인터페이스
|
|
||||||
REST 서버는 HTTP 표준 전송 규약을 따르기 떄문에 프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있습니다.
|
|
||||||
|
|
||||||
- 무상태성
|
|
||||||
서버에 상태 정보를 따로 보관하거나 관리하지 않는다는 의미입니다.
|
|
||||||
|
|
||||||
- 캐시 가능성
|
|
||||||
HTTP의 캐싱 기능을 적용할 수 있습니다.
|
|
||||||
|
|
||||||
- 레이어 시스템
|
|
||||||
REST 서버는 네트워크 상의 여러 계층으로 구성될 수 있습니다. 클라이언트는 서버와 연결되는 포인트만 알면 됩니다.
|
|
||||||
|
|
||||||
- 클라이언트-서버 아키텍쳐
|
|
||||||
REST 서버는 API를 제공하고 클라이언트는 사용자 정보를 관리하는 구조로 분리해 설계합니다.
|
|
||||||
|
|
||||||
|
|
||||||
## URI 설계 규칙
|
|
||||||
|
|
||||||
- URI의 마지막에는 '/'를포함하지 않습니다.
|
|
||||||
|
|
||||||
- 언더바(\_)는 사용하지 않습니다. 대신 하이픈(-)을 사용합니다.
|
|
||||||
|
|
||||||
- URI에는 행위(동사)가 아닌 결과(명사)를 포함합니다. 행위는 HTTP 메서드로 표현할 수 있어야 합니다.
|
|
||||||
|
|
||||||
- URI는 소문자로 작성해야 합니다.
|
|
||||||
|
|
||||||
- 파일의 확장자는 URI에 포함하지 않습니다. 대신 HTTP의 Accept 헤더를 사용하는 것이 좋습니다.
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
# Sections
|
|
||||||
|
|
||||||
### header
|
|
||||||
|
|
||||||
소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
|
|
||||||
|
|
||||||
### footer
|
|
||||||
|
|
||||||
가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
|
|
||||||
|
|
||||||
### nav
|
|
||||||
|
|
||||||
문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
|
|
||||||
|
|
||||||
### aside
|
|
||||||
|
|
||||||
문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
|
|
||||||
|
|
||||||
### main
|
|
||||||
|
|
||||||
문서 `<body>`의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
|
|
||||||
|
|
||||||
### article
|
|
||||||
|
|
||||||
문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
|
|
||||||
|
|
||||||
### section
|
|
||||||
|
|
||||||
HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.
|
|
||||||
|
|
||||||
## non-semantic wrappers
|
|
||||||
|
|
||||||
### div
|
|
||||||
|
|
||||||
플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
|
|
||||||
|
|
||||||
### span
|
|
||||||
|
|
||||||
구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
# 테이블
|
|
||||||
|
|
||||||
### table
|
|
||||||
|
|
||||||
행과 열로 이루어진 표를 나타냅니다.
|
|
||||||
|
|
||||||
### tr
|
|
||||||
|
|
||||||
### th
|
|
||||||
|
|
||||||
### td
|
|
||||||
|
|
||||||
데이터를 포함하는 표의 셀을 정의합니다.
|
|
||||||
|
|
||||||
### thead
|
|
||||||
|
|
||||||
### tbody
|
|
||||||
|
|
||||||
표의 여러 행(<tr>)을 묶어서 표 본문을 구성합니다.
|
|
||||||
|
|
||||||
### tfoot
|
|
||||||
|
|
||||||
### caption
|
|
||||||
|
|
||||||
표의 설명 또는 제목을 나타냅니다.
|
|
||||||
|
|
||||||
### colgroup
|
|
||||||
|
|
||||||
표의 열을 묶는 그룹을 정의합니다.
|
|
||||||
|
|
||||||
### col
|
|
||||||
|
|
||||||
표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<table>
|
|
||||||
<colgroup>
|
|
||||||
<col>
|
|
||||||
<col style="background-color: yellow">
|
|
||||||
</colgroup>
|
|
||||||
<tr>
|
|
||||||
<th>Data 1</th>
|
|
||||||
<th>Data 2</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Calcutta</td>
|
|
||||||
<td>Pizza</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Robots</td>
|
|
||||||
<td>Jazz</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<table>
|
|
||||||
<caption>Dinosaurs in the Jurassic period</caption>
|
|
||||||
|
|
||||||
...
|
|
||||||
</table>
|
|
||||||
```
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
# HTML Revisited
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<!DOCTYPE vars SYSTEM "https://resources.jetbrains.com/writerside/1.0/vars.dtd">
|
|
||||||
<vars>
|
|
||||||
<var name="product" value="Writerside"/>
|
|
||||||
</vars>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<!--
|
|
||||||
- Copyright (c) 2024. Elex. All Rights Reesrved.
|
|
||||||
- https://www.elex-project.com/
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!DOCTYPE ihp SYSTEM "https://resources.jetbrains.com/writerside/1.0/ihp.dtd">
|
|
||||||
|
|
||||||
<ihp version="2.0">
|
|
||||||
<topics dir="topics" web-path="topics"/>
|
|
||||||
<images dir="images" web-path="images"/>
|
|
||||||
<instance src="h.tree"/>
|
|
||||||
</ihp>
|
|
||||||
10
app.sh
Executable file
10
app.sh
Executable file
@@ -0,0 +1,10 @@
|
|||||||
|
#! /usr/bin/env bash
|
||||||
|
|
||||||
|
case $1 in
|
||||||
|
gitup)
|
||||||
|
echo "Pushing to git"
|
||||||
|
git add -A
|
||||||
|
git commit -m $(date "+%Y-%m-%dT%H:%M:%S")
|
||||||
|
git push origin
|
||||||
|
;;
|
||||||
|
esac
|
||||||
51
doc/html5/00_HTML5.md
Normal file
51
doc/html5/00_HTML5.md
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
# HTML 5
|
||||||
|
HTML 태그는 웹 페이지의 구조와 내용을 정의하는 데 사용되는 기본 요소입니다. 다양한 기능을 가진 태그들이 있으며, 이들을 기능별로 분류하면 다음과 같이 나눌 수 있습니다.
|
||||||
|
|
||||||
|
## 1. 문서 구조 태그
|
||||||
|
* `<html>`: HTML 문서 전체를 감싸는 최상위 태그로, HTML 문서의 시작과 끝을 나타냅니다.
|
||||||
|
* `<head>`: 문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트, 스크립트 등을 연결하는 곳입니다.
|
||||||
|
* `<body>`: 실제로 보이는 웹 페이지의 내용이 들어가는 부분입니다.
|
||||||
|
* `<title>`: 브라우저 탭에 표시되는 문서의 제목입니다.
|
||||||
|
* `<meta>`: 문서에 대한 추가적인 정보를 제공하는 태그입니다.
|
||||||
|
|
||||||
|
## 2. 텍스트 콘텐츠 태그
|
||||||
|
* `<h1>` ~ `<h6>`: 제목을 나타내는 태그입니다. `<h1>`이 가장 큰 제목이고 `<h6>`이 가장 작은 제목입니다.
|
||||||
|
* `<p>`: 단락을 나타냅니다.
|
||||||
|
* `<span>`: 텍스트의 일부분을 묶어서 스타일을 적용하거나 스크립트를 연결할 때 사용합니다.
|
||||||
|
* `<strong>`: 텍스트를 강조할 때 사용합니다.
|
||||||
|
* `<em>`: 텍스트를 기울여 표시할 때 사용합니다.
|
||||||
|
|
||||||
|
## 3. 목록 태그
|
||||||
|
* `<ul>`: 불러온 목록(unordered list)을 나타냅니다.
|
||||||
|
* `<ol>`: 순서가 있는 목록(ordered list)을 나타냅니다.
|
||||||
|
* `<li>`: 목록의 각 항목을 나타냅니다.
|
||||||
|
|
||||||
|
## 4. 링크 태그
|
||||||
|
* `<a>`: 하이퍼링크를 생성하여 다른 페이지나 웹사이트로 이동할 수 있도록 합니다.
|
||||||
|
|
||||||
|
## 5. 멀티미디어 태그
|
||||||
|
* `<img>`: 이미지를 웹 페이지에 삽입합니다.
|
||||||
|
* `<figure>`: 이미지, 차트, 짧은 비디오 클립 등의 콘텐츠와 캡션을 함께 묶어서 나타냅니다.
|
||||||
|
* `<figcaption>`: `<figure>` 요소의 캡션을 나타냅니다.
|
||||||
|
|
||||||
|
## 6. 테이블 태그
|
||||||
|
* `<table>`: 테이블을 생성합니다.
|
||||||
|
* `<tr>`: 테이블의 행을 나타냅니다.
|
||||||
|
* `<td>`: 테이블의 셀을 나타냅니다.
|
||||||
|
|
||||||
|
## 7. 폼 태그
|
||||||
|
* `<form>`: 사용자 입력을 받는 폼을 생성합니다.
|
||||||
|
* `<input>`: 다양한 종류의 입력 필드를 생성합니다 (텍스트, 비밀번호, 라디오 버튼, 체크박스 등).
|
||||||
|
* `<button>`: 버튼을 생성합니다.
|
||||||
|
|
||||||
|
## 8. 섹션 태그
|
||||||
|
* `<div>`: 콘텐츠를 논리적으로 구분하는 섹션을 생성합니다.
|
||||||
|
* `<main>`: 문서의 주요 내용을 담는 부분을 나타냅니다.
|
||||||
|
* `<header>`: 섹션의 헤더 부분을 나타냅니다.
|
||||||
|
* `<nav>`: 네비게이션 링크를 모아놓은 섹션을 나타냅니다.
|
||||||
|
* `<section>`: 문서의 독립적인 섹션을 나타냅니다.
|
||||||
|
* `<article>`: 독립적인 콘텐츠 블록을 나타냅니다.
|
||||||
|
* `<aside>`: 본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.
|
||||||
|
* `<footer>`: 섹션의 푸터 부분을 나타냅니다.
|
||||||
|
|
||||||
|
|
||||||
144
doc/html5/01_문서_구조.md
Normal file
144
doc/html5/01_문서_구조.md
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
# 문서 구조
|
||||||
|
HTML 문서의 기본적인 뼈대를 이루는 문서 구조 태그에 대해 자세히 알아보겠습니다. 이 태그들은 웹 페이지의 내용을 논리적으로 구분하고, 브라우저에게 문서의 구조를 알려주는 중요한 역할을 합니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>HTML 문서 구조 예시</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>제목입니다</h1>
|
||||||
|
<p>이것은 단락입니다.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
* `<!DOCTYPE html>`: HTML 문서의 유형을 선언하는 부분으로, 항상 문서의 맨 처음에 위치해야 합니다.
|
||||||
|
|
||||||
|
|
||||||
|
## html
|
||||||
|
HTML 문서 전체를 감싸는 최상위 태그입니다. 문서가 HTML 문서임을 선언하는 역할을 합니다.
|
||||||
|
```html
|
||||||
|
<html>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
* lang 속성: `<html>` 태그에 lang 속성을 추가하여 문서의 언어를 지정할 수 있습니다. (예: lang="ko")
|
||||||
|
|
||||||
|
## head
|
||||||
|
문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트 연결, 스크립트 연결 등이 이곳에 들어갑니다. 실제로 보이는 부분은 아니지만, 검색 엔진이나 브라우저에게 중요한 정보를 제공합니다.
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<title>HTML 문서 예시</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
</head>
|
||||||
|
```
|
||||||
|
|
||||||
|
## title
|
||||||
|
`<head>` 태그 안에 위치하며, 브라우저의 탭이나 검색 결과에 표시되는 문서의 제목을 설정합니다.
|
||||||
|
|
||||||
|
## meta
|
||||||
|
문서에 대한 추가적인 정보를 제공하는 태그입니다. 문서의 인코딩, 설명, 키워드 등을 설정할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<meta charset="UTF-8"> <meta name="description" content="이 문서는 HTML 문서 구조에 대한 설명입니다.">
|
||||||
|
```
|
||||||
|
* charset: 문서의 문자 인코딩을 지정합니다. (예: UTF-8)
|
||||||
|
* name: 추가적인 정보를 제공하기 위한 이름을 지정합니다.
|
||||||
|
* content: name 속성에 해당하는 정보의 내용을 지정합니다.
|
||||||
|
- http-equiv: HTTP 헤더와 동일한 의미를 가지는 메타 태그를 정의합니다.
|
||||||
|
- X-UA-Compatible: IE 호환 모드 설정
|
||||||
|
* refresh: 페이지 자동 새로 고침
|
||||||
|
* expires: 캐시 유효 기간 설정
|
||||||
|
* viewport: 모바일 기기에서 웹 페이지가 표시되는 방식을 제어합니다.
|
||||||
|
- width: viewport의 너비를 설정
|
||||||
|
- initial-scale: 초기 확대 비율 설정
|
||||||
|
- user-scalable: 사용자가 페이지를 확대/축소할 수 있는지 여부 설정
|
||||||
|
* robots: 검색 엔진 크롤러에게 웹 페이지를 어떻게 처리할지 지시합니다. (index, noindex, follow, nofollow 등)
|
||||||
|
* author: 문서의 저자를 지정합니다.
|
||||||
|
* copyright: 저작권 정보를 지정합니다.
|
||||||
|
* date: 문서의 생성 또는 수정 날짜를 지정합니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 검색 엔진 최적화 (SEO) -->
|
||||||
|
<meta name="description" content="웹 페이지에 대한 간략한 설명">
|
||||||
|
<meta name="keywords" content="웹 페이지와 관련된 키워드">
|
||||||
|
<!-- 소셜 미디어 공유 -->
|
||||||
|
<meta property="og:title" content="페이스북 공유 시 표시되는 제목">
|
||||||
|
<meta property="og:description" content="페이스북 공유 시 표시되는 설명">
|
||||||
|
<meta property="og:image" content="페이스북 공유 시 표시되는 이미지 URL">
|
||||||
|
<!-- 모바일 웹 -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<!-- 호환성 -->
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
```
|
||||||
|
|
||||||
|
## base
|
||||||
|
`<base>` 태그는 HTML 문서 내에서 모든 상대적인 URL의 기본 경로를 설정하는 데 사용됩니다. 즉, `<base>` 태그를 이용하면 문서 내의 모든 링크가 지정된 기본 경로를 기준으로 해석됩니다.
|
||||||
|
HTML 문서 내에 `<base>` 태그는 한 번만 사용해야 하며, 반드시 `<head> `태그 안에 위치해야 합니다.
|
||||||
|
```html
|
||||||
|
<base href="https://example.com/images/" />
|
||||||
|
```
|
||||||
|
* href 속성: 기본 경로를 지정하는 필수 속성입니다. 절대 URL 또는 상대 URL을 사용할 수 있습니다.
|
||||||
|
|
||||||
|
## link
|
||||||
|
`<link>` 태그는 HTML 문서 내에서 현재 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 즉, 외부 스타일 시트, 아이콘, RSS 피드 등 다양한 종류의 외부 파일을 연결하는 역할을 합니다.
|
||||||
|
```html
|
||||||
|
<!-- CSS 파일 연결 -->
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<!-- favicon 연결 -->
|
||||||
|
<link rel="icon" href="favicon.ico">
|
||||||
|
<!-- RSS 피드 연결 -->
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="RSS 피드" href="feed.xml">
|
||||||
|
```
|
||||||
|
* rel 속성: 링크의 관계를 나타내는 필수 속성입니다. (예: stylesheet, icon, alternate 등)
|
||||||
|
* href 속성: 연결할 리소스의 URL을 지정하는 필수 속성입니다.
|
||||||
|
* type: 리소스의 MIME 타입을 지정합니다.
|
||||||
|
* media: 특정 미디어에만 적용할 스타일 시트를 지정합니다.
|
||||||
|
* sizes: 아이콘의 크기를 지정합니다.
|
||||||
|
|
||||||
|
## body
|
||||||
|
실제로 웹 페이지에 보이는 모든 내용이 들어가는 부분입니다. 텍스트, 이미지, 링크 등 웹 페이지의 모든 콘텐츠는 `<body>` 태그 안에 위치합니다.
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<h1>제목입니다</h1>
|
||||||
|
<p>이것은 단락입니다.</p>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
## style
|
||||||
|
HTML 문서의 스타일을 정의하는 데 사용되는 태그입니다. CSS(Cascading Style Sheets)를 직접 작성하여 웹 페이지의 디자인을 제어할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
/* CSS 스타일 정의 */
|
||||||
|
body {
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: navy;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
`<head>` 태그 안에 위치하는 것이 일반적입니다.
|
||||||
|
`<body>` 태그 안에 위치할 수도 있지만, `<head>` 태그 안에 위치하는 것이 권장됩니다.
|
||||||
|
|
||||||
|
## script
|
||||||
|
JavaScript 코드를 포함하여 웹 페이지에 동적인 기능을 추가하는 데 사용되는 태그입니다. 클릭 이벤트, 페이지 로딩 시 실행되는 기능 등 다양한 동작을 구현할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
// JavaScript 코드
|
||||||
|
alert("Hello, world!");
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
`<head>` 태그 안 또는 `<body>` 태그 안에 위치할 수 있습니다.
|
||||||
|
`<head>` 태그 안에 위치하면 페이지 로딩 시 스크립트가 실행되고, `<body>` 태그 안에 위치하면 페이지의 다른 콘텐츠가 모두 로드된 후에 스크립트가 실행됩니다.
|
||||||
|
|
||||||
|
|
||||||
|
## noscript
|
||||||
|
자바스크립트를 지원하지 않는 브라우저나 자바스크립트가 비활성화된 경우에 표시될 콘텐츠를 정의하는 태그입니다.
|
||||||
|
```html
|
||||||
|
<noscript>
|
||||||
|
자바스크립트가 지원되지 않습니다.
|
||||||
|
</noscript>
|
||||||
|
```
|
||||||
|
`<body>` 태그 안에 위치하는 것이 일반적입니다.
|
||||||
180
doc/html5/02_텍스트 콘텐츠.md
Normal file
180
doc/html5/02_텍스트 콘텐츠.md
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
# 텍스트 콘텐츠
|
||||||
|
HTML에서 텍스트 콘텐츠를 표현하고 스타일링하는 데 사용되는 다양한 태그들을 살펴보겠습니다.
|
||||||
|
|
||||||
|
## h1, h2, h3, h4, h5, h6
|
||||||
|
|
||||||
|
웹 페이지의 제목이나 중요한 내용을 강조할 때 사용합니다. `<h1>`이 가장 큰 제목이고 `<h6>`이 가장 작은 제목입니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>최상위 제목</h1>
|
||||||
|
<h2>중간 제목</h2>
|
||||||
|
<h3>하위 제목</h3>
|
||||||
|
```
|
||||||
|
|
||||||
|
## p
|
||||||
|
|
||||||
|
문단을 나눌 때 사용합니다. 브라우저는 자동으로 줄 바꿈을 하고 여백을 추가합니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p>이것은 첫 번째 단락입니다. <br>
|
||||||
|
두 번째 줄입니다.</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 줄바꿈 : br, wbr
|
||||||
|
|
||||||
|
* `<br>` : 한 줄을 강제로 바꿀 때 사용합니다. 블록 레벨 요소가 아니므로, 다른 블록 레벨 요소 안에 사용해야 합니다.
|
||||||
|
* `<wbr>` : 단어 중간에 줄 바꿈이 가능한 위치를 지정하는 태그입니다.
|
||||||
|
```html
|
||||||
|
<p>첫 번째 줄<br>
|
||||||
|
두 번째 줄</p>
|
||||||
|
<p>이것은매우긴단어입니다<wbr>!</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
## div
|
||||||
|
div 태그는 블록 레벨 요소로, 항상 새로운 줄에서 시작하여 전체 너비를 차지합니다.
|
||||||
|
```html
|
||||||
|
<div class="header">
|
||||||
|
<h1>웹 사이트 제목</h1>
|
||||||
|
<nav>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## span
|
||||||
|
span 태그는 인라인 레벨 요소로, 주변 텍스트의 흐름을 방해하지 않고 특정 부분만 스타일을 적용할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<p>이 문장에서 <span style="color: blue;">파란색</span> 부분만 색상을 변경했습니다.</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
## hr
|
||||||
|
|
||||||
|
구분선을 그을 때 사용합니다. 블록 레벨 요소입니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<hr>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 인용 : blockquote, q, cite
|
||||||
|
|
||||||
|
* `<blockquote>` : 긴 인용문을 표시할 때 사용합니다.
|
||||||
|
* `<q>` : 다른 출처에서 인용한 짧은 구절을 나타내는 데 사용됩니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<blockquote>
|
||||||
|
"인생은 짧고 예술은 길다."
|
||||||
|
</blockquote>
|
||||||
|
```
|
||||||
|
```html
|
||||||
|
<p>셰익스피어는 <q cite="https://www.example.com">To be, or not to be: that is the question.</q>라고 말했습니다.</p>
|
||||||
|
```
|
||||||
|
* `<cite>`: 인용문의 출처를 표시합니다.
|
||||||
|
```html
|
||||||
|
<p>“모든 지식은 경험에서 나온다.”는 <cite>존 로크</cite>의 말입니다.</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 강조 태그: strong, b, em, i, mark
|
||||||
|
|
||||||
|
* `<strong>`: 텍스트의 특정 부분을 매우 강조하고 싶을 때 사용합니다.
|
||||||
|
* `<b>`: 텍스트를 굵게 표현하여 시각적으로 강조하고 싶을 때 사용합니다.
|
||||||
|
* `<em>`: 텍스트의 특정 부분을 의미적으로 강조하고 싶을 때 사용합니다.
|
||||||
|
* `<i>`: 텍스트를 기울여 표현하고 싶을 때 사용합니다.
|
||||||
|
* `<mark>`: 텍스트의 특정 부분에 하이라이트를 적용하여 눈에 띄게 하고 싶을 때 사용합니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p>저는 <strong>웹 개발</strong>을 배우고 있습니다. 특히 <strong>HTML</strong>과 <strong>CSS</strong>가 재미있습니다.
|
||||||
|
<i>JavaScript</i>도 배우고 싶은데, 아직 어렵네요.
|
||||||
|
<mark>함께 공부할 사람</mark>을 찾고 있습니다.</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
* strong과 b: 둘 다 텍스트를 굵게 표현하지만, strong은 의미적으로 중요한 부분을 강조하는 데 사용하는 것이 좋습니다.
|
||||||
|
* em과 i: 둘 다 텍스트를 기울여 표현하지만, em은 논리적으로 강조하는 부분에 사용하고, i는 외국어, 기술 용어 등을 표현하는 데 사용하는 것이 일반적입니다.
|
||||||
|
|
||||||
|
## 그 외
|
||||||
|
|
||||||
|
* `<pre>`: 텍스트의 들여쓰기, 줄 바꿈 등을 그대로 유지하여 출력합니다. 주로 코드 블록을 표현할 때 사용합니다.
|
||||||
|
```html
|
||||||
|
<pre><code>
|
||||||
|
function factorial(n) {
|
||||||
|
if (n === 0) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return n * factorial(n - 1);
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
```
|
||||||
|
* `<address>`: 문서의 저자 또는 연락처 정보를 표시합니다.
|
||||||
|
```html
|
||||||
|
<address>
|
||||||
|
Written by: John Doe<br>
|
||||||
|
Contact: <a href="mailto:john@example.com">john@example.com</a>
|
||||||
|
</address>
|
||||||
|
```
|
||||||
|
* `<abbr>`: 약어를 표시하고, 마우스를 올리면 전체 단어를 보여줄 수 있습니다.
|
||||||
|
```html
|
||||||
|
<p>HTML은 <abbr title="HyperText Markup Language">HyperText Markup Language</abbr>의 약자입니다.</p>
|
||||||
|
```
|
||||||
|
* `<code>`: 컴퓨터 코드를 표시합니다. 일반적으로 `<pre>` 태그와 함께 사용하여 코드 블록을 형성합니다.
|
||||||
|
* `<del>`: 삭제된 텍스트를 표시합니다.
|
||||||
|
```html
|
||||||
|
<p>이 문장에서 <del>삭제된 부분</del>은 더 이상 필요하지 않습니다.</p>
|
||||||
|
```
|
||||||
|
* `<dfn>`: 어떤 글이나 문서에서 처음 등장하는 용어를 설명하거나 정의할 때 사용합니다.
|
||||||
|
```html
|
||||||
|
<p>HTML에서 <dfn>요소</dfn>는 특정 용어를 정의할 때 사용합니다.</p>
|
||||||
|
```
|
||||||
|
* `<ins>`: 추가된 텍스트를 표시합니다.
|
||||||
|
```html
|
||||||
|
<p>원래 문장은 다음과 같았습니다. <ins>추가된 부분</ins></p>
|
||||||
|
```
|
||||||
|
* `<small>`: 작은 글자로 표시합니다.
|
||||||
|
```html
|
||||||
|
<p>본문 내용<small>(저작권 정보)</small></p>
|
||||||
|
```
|
||||||
|
* `<sub>`: 아래 첨자를 표시합니다. 주로 화학식이나 수학 공식에서 사용됩니다.
|
||||||
|
```html
|
||||||
|
<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
|
||||||
|
```
|
||||||
|
* `<sup>`: 위 첨자를 표시합니다. 주로 지수 표현이나 단위 표현에서 사용됩니다.
|
||||||
|
```html
|
||||||
|
<p>10의 3승은 10<sup>3</sup>입니다.</p>
|
||||||
|
```
|
||||||
|
* `<var>` : 변수를 나타내는 태그입니다. 주로 수학 공식이나 프로그래밍 코드에서 변수를 표시할 때 사용됩니다.
|
||||||
|
```html
|
||||||
|
<p>피타고라스의 정리: <var>a</var>² + <var>b</var>² = <var>c</var>²</p>
|
||||||
|
```
|
||||||
|
* `<kbd>` : 키보드 입력을 나타내는 태그입니다. 사용자가 직접 입력해야 하는 키를 표시할 때 사용됩니다.
|
||||||
|
```html
|
||||||
|
<p>파일을 저장하려면 <kbd>Ctrl+S</kbd>를 누르세요.</p>
|
||||||
|
```
|
||||||
|
* `<samp>` : 컴퓨터 프로그램의 샘플 출력이나 인용된 출력을 나타내는 태그입니다.
|
||||||
|
```html
|
||||||
|
<p>프로그램 실행 결과: <samp>Hello, world!</samp></p>
|
||||||
|
```
|
||||||
|
* `<time>` : 특정 시간 또는 기간을 나타내는 태그입니다. 검색 엔진이나 보조 기술이 시간 정보를 더 잘 이해할 수 있도록 돕습니다.
|
||||||
|
- datetime 속성: 정확한 시간 정보를 ISO 8601 형식으로 표기합니다.
|
||||||
|
```html
|
||||||
|
<time datetime="YYYY-MM-DDTHH:MM:SS">2023년 12월 31일</time>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 루비
|
||||||
|
루비(Ruby) 태그는 주로 동아시아 언어, 특히 일본어에서 한자어의 발음을 표기하는 데 사용되는 HTML 태그입니다.
|
||||||
|
* `<ruby>`: 루비 주석 전체를 감싸는 요소입니다.
|
||||||
|
* `<rb>`: 루비 기본 문자(루비를 붙일 문자)를 나타냅니다.
|
||||||
|
* `<rt>`: 루비 주석(발음)을 나타냅니다.
|
||||||
|
* `<rp>`: 브라우저가 루비를 지원하지 않을 경우 표시될 괄호를 나타냅니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<p>私は<ruby>日本語<rt>にほんご</rt></ruby>が大好きです。</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
52
doc/html5/03_목록.md
Normal file
52
doc/html5/03_목록.md
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
# 목록
|
||||||
|
|
||||||
|
HTML에서 목록을 표현하는 데 사용되는 태그들은 웹 페이지의 가독성을 높이고 정보를 체계적으로 구성하는 데 중요한 역할을 합니다.
|
||||||
|
|
||||||
|
목록 안에 다른 목록을 중첩하여 복잡한 구조를 만들 수 있습니다.
|
||||||
|
|
||||||
|
## 순서 없는 목록 (Unordered List) - ul, li
|
||||||
|
목록의 항목들 간에 특별한 순서가 없을 때 사용합니다. 각 항목 앞에 불렛(bullet) 마커가 표시됩니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<ul>
|
||||||
|
<li>첫 번째 항목</li>
|
||||||
|
<li>두 번째 항목</li>
|
||||||
|
<li>세 번째 항목</li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
* `<li>` 태그는 `<ul>` 또는 `<ol>` 태그 안에서만 사용되며, 각 목록 항목을 나타냅니다.
|
||||||
|
|
||||||
|
## 순서 있는 목록 (Ordered List) - ol, li
|
||||||
|
목록의 항목들 간에 순서가 있을 때 사용합니다. 각 항목 앞에 숫자나 알파벳 등이 자동으로 부여됩니다.
|
||||||
|
```html
|
||||||
|
<ol>
|
||||||
|
<li>첫 번째 항목</li>
|
||||||
|
<li>두 번째 항목</li>
|
||||||
|
<li>세 번째 항목</li>
|
||||||
|
</ol>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 목록에 스타일 적용하기
|
||||||
|
```css
|
||||||
|
ul {
|
||||||
|
list-style-type: square; /* 마커를 네모로 변경 */
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
list-style-position: inside; /* 숫자를 항목 안쪽으로 이동 */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 정의 목록 (Definition List) - dl, dt, dd
|
||||||
|
용어와 설명을 짝으로 나타낼 때 사용합니다.
|
||||||
|
```html
|
||||||
|
<dl>
|
||||||
|
<dt>HTML</dt>
|
||||||
|
<dd>HyperText Markup Language의 약자로 웹 페이지를 만드는 언어입니다.</dd>
|
||||||
|
<dt>CSS</dt>
|
||||||
|
<dd>Cascading Style Sheets의 약자로 웹 페이지의 스타일을 정의하는 언어입니다.</dd>
|
||||||
|
</dl>
|
||||||
|
```
|
||||||
|
* `<dt>` 태그는 정의 목록에서 용어를 나타내고, `<dd>` 태그는 해당 용어에 대한 설명을 나타냅니다.
|
||||||
|
|
||||||
|
|
||||||
36
doc/html5/04_링크.md
Normal file
36
doc/html5/04_링크.md
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
# 링크 태그
|
||||||
|
|
||||||
|
## a
|
||||||
|
|
||||||
|
HTML에서 링크를 생성하는 데 가장 기본적으로 사용되는 태그는 `<a>` 태그입니다. 앵커(anchor) 태그라고도 불리며, 다른 페이지, 특정 위치, 파일, 또는 이메일 주소로 연결하는 하이퍼링크를 만들 수 있습니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a href="링크주소" target="_blank">링크 텍스트</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
* `<a>`: 앵커 태그의 시작과 끝을 나타냅니다.
|
||||||
|
* href: 링크할 페이지의 URL 주소를 지정합니다. URL은 상대 경로 또는 절대 경로를 사용할 수 있습니다.
|
||||||
|
* target: 링크를 클릭했을 때 링크가 열리는 방식을 지정합니다.
|
||||||
|
- _blank: 새로운 창에서 열림
|
||||||
|
- _self: 현재 창에서 열림 (기본값)
|
||||||
|
- _parent: 부모 프레임에서 열림
|
||||||
|
- _top: 최상위 창에서 열림
|
||||||
|
* rel 속성: 링크와 대상 간의 관계를 나타냅니다. (예: rel="nofollow": 검색 엔진에게 링크를 따라가지 말라고 지시)
|
||||||
|
* title 속성: 마우스를 올려놓았을 때 표시되는 도구 설명을 지정합니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a href="https://www.example.com">Example 웹사이트</a>
|
||||||
|
<a href="mailto:you@example.com">이메일 보내기</a>
|
||||||
|
<a href="#section2">페이지 내의 section2로 이동</a>
|
||||||
|
```
|
||||||
|
```html
|
||||||
|
<!-- 이미지 링크 -->
|
||||||
|
<a href="https://www.example.com"><img src="image.jpg" alt="이미지 설명"></a>
|
||||||
|
<!-- 버튼 링크 -->
|
||||||
|
<a href="https://www.example.com" class="button">버튼 클릭</a>
|
||||||
|
<!-- 다운로드 링크 -->
|
||||||
|
<a href="document.pdf" download="document.pdf">문서 다운로드</a>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
115
doc/html5/05_멀티미디어.md
Normal file
115
doc/html5/05_멀티미디어.md
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
# 미디어
|
||||||
|
|
||||||
|
## img
|
||||||
|
웹 페이지에 이미지를 삽입하는 가장 기본적인 태그입니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="image.jpg" alt="이미지 설명">
|
||||||
|
```
|
||||||
|
* src: 이미지 파일의 경로를 지정합니다.
|
||||||
|
* alt: 이미지가 로드되지 않거나 시각 장애인을 위해 대체 텍스트를 제공합니다.
|
||||||
|
|
||||||
|
## video
|
||||||
|
HTML5부터 지원되는 태그로, 웹 페이지에 동영상을 삽입할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<video controls>
|
||||||
|
<source src="movie.mp4" type="video/mp4">
|
||||||
|
Your browser does not support the video tag.
|
||||||
|
</video>
|
||||||
|
```
|
||||||
|
* controls: 사용자가 동영상을 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
|
||||||
|
* source: 동영상 파일의 경로와 형식을 지정합니다.
|
||||||
|
* autoplay: 페이지 로드 시 자동으로 재생합니다.
|
||||||
|
* muted: 음소거 상태로 재생합니다.
|
||||||
|
* loop: 동영상이 끝나면 반복 재생합니다.
|
||||||
|
* poster: 동영상이 로딩되기 전에 표시되는 이미지입니다.
|
||||||
|
|
||||||
|
## audio
|
||||||
|
HTML5부터 지원되는 태그로, 웹 페이지에 오디오 파일을 삽입할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<audio controls>
|
||||||
|
<source src="music.mp3" type="audio/mpeg">
|
||||||
|
Your browser does not support the audio element.
|
||||||
|
</audio>
|
||||||
|
```
|
||||||
|
* controls: 사용자가 오디오를 재생, 일시 정지, 볼륨 조절 등을 할 수 있는 컨트롤을 표시합니다.
|
||||||
|
* source: 오디오 파일의 경로와 형식을 지정합니다.
|
||||||
|
* autoplay: 페이지 로드 시 자동으로 재생합니다.
|
||||||
|
* loop: 오디오가 끝나면 반복 재생합니다.
|
||||||
|
* preload: 브라우저가 미리 오디오 파일을 불러올지 여부를 지정합니다.
|
||||||
|
|
||||||
|
## canvas
|
||||||
|
자바스크립트를 사용하여 동적으로 그래픽을 그릴 수 있는 캔버스를 생성하는 태그입니다. 자바스크립트 API를 통해 다양한 그래픽 효과를 구현할 수 있습니다.
|
||||||
|
게임, 데이터 시각화 등에 활용됩니다.
|
||||||
|
```html
|
||||||
|
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||||
|
```
|
||||||
|
|
||||||
|
## svg
|
||||||
|
확장 가능한 벡터 그래픽을 표현하는 언어로, HTML 문서에 직접 벡터 그래픽을 삽입할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<svg width="200" height="100">
|
||||||
|
<circle cx="50" cy="50" r="40" fill="red" />
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
|
||||||
|
## picture
|
||||||
|
다양한 화면 크기와 해상도에 맞는 이미지를 제공하기 위한 태그입니다. `<source>` 태그를 사용하여 여러 이미지를 정의하고, 미디어 쿼리를 통해 적절한 이미지를 선택합니다.
|
||||||
|
반응형 웹 디자인에 유용합니다.
|
||||||
|
```html
|
||||||
|
<picture>
|
||||||
|
<source media="(min-width: 768px)" srcset="large.jpg">
|
||||||
|
<source media="(min-width: 480px)" srcset="medium.jpg">
|
||||||
|
<img src="small.jpg" alt="이미지">
|
||||||
|
</picture>
|
||||||
|
```
|
||||||
|
|
||||||
|
## figure, figcaption
|
||||||
|
이미지, 차트, 그래프 등의 콘텐츠와 캡션을 함께 묶어서 표현할 때 사용합니다.
|
||||||
|
```html
|
||||||
|
<figure>
|
||||||
|
<img src="image.jpg" alt="설명">
|
||||||
|
<figcaption>설명 텍스트</figcaption>
|
||||||
|
</figure>
|
||||||
|
```
|
||||||
|
|
||||||
|
## map, area
|
||||||
|
이미지의 특정 영역을 클릭했을 때 다른 페이지로 이동하거나 특정 기능을 실행하도록 설정할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<img src="map.jpg" usemap="#mymap">
|
||||||
|
<map name="mymap">
|
||||||
|
<area shape="rect" coords="0,0,80,80" href="link1.html" alt="Area 1">
|
||||||
|
</map>
|
||||||
|
```
|
||||||
|
* usemap: 이미지 맵의 이름을 지정합니다.
|
||||||
|
* area: 이미지 맵의 각 영역을 정의합니다.
|
||||||
|
* shape: 영역의 모양을 지정합니다. (rect: 사각형, circle: 원, poly: 다각형 등)
|
||||||
|
* coords: 영역의 좌표를 지정합니다.
|
||||||
|
|
||||||
|
## iframe
|
||||||
|
Inline Frame의 약자로, HTML 문서 내에 또 다른 HTML 문서를 삽입하여 표시할 수 있도록 하는 태그입니다. 마치 웹 페이지 안에 작은 창을 띄워 다른 웹 페이지를 보여주는 것과 같습니다.
|
||||||
|
* 다른 웹 페이지 삽입: 다른 웹사이트의 콘텐츠를 자신의 웹 페이지에 삽입하여 보여줄 수 있습니다. (예: 유튜브 동영상, 구글 지도 등)
|
||||||
|
* 독립적인 콘텐츠 표시: 메인 페이지와 별도로 독립적인 콘텐츠를 표시할 수 있습니다.
|
||||||
|
* 광고 노출: 광고 배너를 삽입하여 수익을 창출할 수 있습니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<iframe src="https://www.example.com"></iframe>
|
||||||
|
```
|
||||||
|
* src: 삽입할 문서의 URL을 지정합니다.
|
||||||
|
* width: iframe의 너비를 지정합니다.
|
||||||
|
* height: iframe의 높이를 지정합니다.
|
||||||
|
* frameborder: iframe 테두리의 유무를 지정합니다.
|
||||||
|
* scrolling: iframe 내부의 콘텐츠 스크롤 여부를 지정합니다.
|
||||||
|
* name: iframe에 이름을 부여하여 자바스크립트에서 제어할 수 있도록 합니다.
|
||||||
|
|
||||||
|
|
||||||
|
## embed, object
|
||||||
|
주로 플러그인이나 액티브X 컨트롤을 삽입하는 데 사용되었습니다. 브라우저 호환성 문제가 많고, 보안 문제의 위험이 있어 최근에는 잘 사용되지 않습니다.
|
||||||
|
* embed : 외부 콘텐츠를 웹 페이지에 포함시키는 데 사용되는 일반적인 태그입니다.
|
||||||
|
* object : 다양한 형식의 데이터를 표현하는 데 사용되는 태그입니다. 이미지, 플러그인, 미디어 등을 포함할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<embed src="https://www.example.com/myplugin.swf" width="300" height="200">
|
||||||
|
```
|
||||||
|
```html
|
||||||
|
<object data="image.svg" type="image/svg+xml"></object>
|
||||||
|
```
|
||||||
76
doc/html5/06_테이블.md
Normal file
76
doc/html5/06_테이블.md
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
# 테이블
|
||||||
|
HTML에서 테이블을 만들고 데이터를 표 형식으로 정렬하여 보여주기 위해 다양한 태그들이 사용됩니다. 각 태그의 역할과 사용법을 자세히 알아보겠습니다.
|
||||||
|
|
||||||
|
* `<table>`: 테이블 전체를 감싸는 최상위 태그입니다.
|
||||||
|
* `<tr>`: 테이블의 한 행을 나타냅니다.
|
||||||
|
* `<th>`: 테이블의 헤더 셀(제목)을 나타냅니다. 일반적으로 굵은 글씨로 표시되며 가운데 정렬됩니다.
|
||||||
|
* `<td>`: 테이블의 데이터 셀을 나타냅니다.
|
||||||
|
* `<caption>`: 테이블 전체에 대한 설명이나 제목을 추가합니다.
|
||||||
|
* `<thead>`: 테이블 헤더 부분을 감싸는 태그입니다.
|
||||||
|
* `<tbody>`: 테이블 본문 부분을 감싸는 태그입니다.
|
||||||
|
* `<tfoot>`: 테이블 푸터 부분을 감싸는 태그입니다.
|
||||||
|
* `<col>`: 테이블의 열에 대한 속성을 정의합니다.
|
||||||
|
* `<colgroup>`: 여러 열에 대한 속성을 그룹으로 정의합니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>이름</th>
|
||||||
|
<th>나이</th>
|
||||||
|
<th>성별</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>홍길동</td>
|
||||||
|
<td>30</td>
|
||||||
|
<td>남자</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>김순이</td>
|
||||||
|
<td>25</td>
|
||||||
|
<td>여자</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
* 테이블은 데이터를 표 형식으로 정렬하여 보여주는 데 효과적입니다.
|
||||||
|
* 복잡한 레이아웃을 구현하기 위해 테이블을 사용하는 것은 권장되지 않습니다. CSS Grid나 Flexbox를 사용하는 것이 더 적합합니다.
|
||||||
|
* 모바일 환경에서 테이블이 제대로 표시되지 않을 수 있으므로, 반응형 웹 디자인을 고려해야 합니다.
|
||||||
|
|
||||||
|
|
||||||
|
## 셀 병합하기
|
||||||
|
* rowspan: 셀을 여러 행에 걸쳐 병합합니다.
|
||||||
|
* colspan: 셀을 여러 열에 걸쳐 병합합니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th colspan="2">개인 정보</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>이름</td>
|
||||||
|
<td>홍길동</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td rowspan="2">연락처</td>
|
||||||
|
<td>010-1234-5678</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>hong@example.com</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 테이블 스타일링
|
||||||
|
CSS를 사용하여 테이블의 모양과 레이아웃을 다양하게 변경할 수 있습니다. 예를 들어, 테이블 테두리, 배경색, 글꼴 등을 설정할 수 있습니다.
|
||||||
|
|
||||||
|
```css
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
95
doc/html5/07_폼.md
Normal file
95
doc/html5/07_폼.md
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
# 폼
|
||||||
|
HTML 폼은 사용자로부터 데이터를 입력받아 서버로 전송하는 데 사용됩니다. 다양한 종류의 입력 요소와 함께 사용하여 다양한 형태의 폼을 만들 수 있습니다.
|
||||||
|
|
||||||
|
## form
|
||||||
|
폼 전체를 감싸는 태그입니다.
|
||||||
|
```html
|
||||||
|
<form action="submit.php" method="post">
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
* action: 폼 데이터를 전송할 서버 측 스크립트의 URL을 지정합니다.
|
||||||
|
* method: 데이터를 전송하는 방법을 지정합니다 (get 또는 post).
|
||||||
|
|
||||||
|
## input
|
||||||
|
사용자 입력을 받는 다양한 종류의 입력 요소를 생성합니다.
|
||||||
|
```html
|
||||||
|
<input type="text" name="username" placeholder="사용자 이름">
|
||||||
|
<input type="password" name="password">
|
||||||
|
<input type="email" name="email">
|
||||||
|
<input type="submit" value="제출">
|
||||||
|
```
|
||||||
|
* type: 입력 필드의 종류를 지정합니다.
|
||||||
|
- text: 일반적인 텍스트 입력 (예: 이름, 이메일)
|
||||||
|
- password: 비밀번호 입력 (입력된 내용이 가려짐)
|
||||||
|
- email: 이메일 형식의 입력만 허용
|
||||||
|
- number: 숫자만 입력 가능
|
||||||
|
- date: 날짜 선택
|
||||||
|
- time: 시간 선택
|
||||||
|
- datetime-local: 날짜와 시간 선택
|
||||||
|
- search: 검색창
|
||||||
|
- url: URL 입력
|
||||||
|
- tel: 전화번호 입력
|
||||||
|
- checkbox : 체크박스
|
||||||
|
- radio : 라디오버튼
|
||||||
|
- file : 파일 업로드
|
||||||
|
* name: 서버로 전송될 때 사용될 변수명을 지정합니다.
|
||||||
|
* required 속성: 필수 입력 항목을 지정할 수 있습니다.
|
||||||
|
* disabled: 입력을 비활성화
|
||||||
|
* readonly: 입력 내용을 읽기 전용으로 설정
|
||||||
|
* maxlength: 입력 가능한 최대 글자 수 지정
|
||||||
|
* minlength: 입력 가능한 최소 글자 수 지정
|
||||||
|
* pattern 속성: 입력 값의 형식을 제한할 수 있습니다.
|
||||||
|
* placeholder 속성: 입력 필드에 미리 보여줄 텍스트를 설정할 수 있습니다.
|
||||||
|
|
||||||
|
## label
|
||||||
|
입력 요소에 대한 설명을 제공합니다.
|
||||||
|
```html
|
||||||
|
<label for="username">사용자 이름:</label>
|
||||||
|
<input type="text" id="username" name="username">
|
||||||
|
```
|
||||||
|
* for 속성: 관련 input 요소의 id를 지정합니다.
|
||||||
|
|
||||||
|
## textarea
|
||||||
|
여러 줄의 텍스트를 입력받을 수 있는 영역을 생성합니다.
|
||||||
|
```html
|
||||||
|
<textarea name="message" rows="5" cols="30"></textarea>
|
||||||
|
```
|
||||||
|
* rows: 행의 수를 지정합니다.
|
||||||
|
* cols: 열의 수를 지정합니다.
|
||||||
|
|
||||||
|
## select
|
||||||
|
드롭다운 목록을 생성합니다.
|
||||||
|
```html
|
||||||
|
<select name="country">
|
||||||
|
<option value="korea">한국</option>
|
||||||
|
<option value="usa">미국</option>
|
||||||
|
<option value="japan">일본</option>
|
||||||
|
</select>
|
||||||
|
```
|
||||||
|
|
||||||
|
## option
|
||||||
|
`<select>` 태그 안에서 선택할 수 있는 옵션을 정의합니다.
|
||||||
|
|
||||||
|
## button
|
||||||
|
버튼을 생성합니다.
|
||||||
|
```html
|
||||||
|
<button type="submit">제출</button>
|
||||||
|
<button type="reset">초기화</button>
|
||||||
|
```
|
||||||
|
* type: 버튼의 종류를 지정합니다.
|
||||||
|
- submit
|
||||||
|
- reset
|
||||||
|
- button
|
||||||
|
|
||||||
|
## fieldset
|
||||||
|
관련된 입력 요소들을 그룹화합니다.
|
||||||
|
```html
|
||||||
|
<fieldset>
|
||||||
|
<legend>개인 정보</legend>
|
||||||
|
<input type="text" name="name">
|
||||||
|
<input type="email" name="email">
|
||||||
|
</fieldset>
|
||||||
|
```
|
||||||
|
|
||||||
|
## legend
|
||||||
|
`<fieldset>` 그룹에 대한 설명을 제공합니다.
|
||||||
83
doc/html5/08_섹션.md
Normal file
83
doc/html5/08_섹션.md
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
# 섹션
|
||||||
|
HTML5에서 웹 페이지의 구조를 논리적으로 나누고 의미를 부여하기 위해 다양한 섹션 태그가 도입되었습니다. 이러한 섹션 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>제목</h1>
|
||||||
|
<time datetime="2023-11-23">2023년 11월 23일</time>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<h2>주요 콘텐츠</h2>
|
||||||
|
<p>본문 내용</p>
|
||||||
|
<img src="image.jpg" alt="이미지 설명">
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p>작성자: 홍길동</p>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
```
|
||||||
|
|
||||||
|
## section
|
||||||
|
문서의 독립적인 섹션을 나타냅니다. 주제별로 내용을 구분할 때 사용합니다.
|
||||||
|
```html
|
||||||
|
<section>
|
||||||
|
<h2>첫 번째 섹션</h2>
|
||||||
|
<p>이 섹션은 첫 번째 내용을 담고 있습니다.</p>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
## article
|
||||||
|
독립적인 콘텐츠 블록을 나타냅니다. 블로그 게시글, 뉴스 기사 등과 같이 재사용 가능한 콘텐츠에 사용합니다.
|
||||||
|
```html
|
||||||
|
<article>
|
||||||
|
<h2>블로그 게시글</h2>
|
||||||
|
<p>오늘의 날씨는 맑습니다.</p>
|
||||||
|
</article>
|
||||||
|
```
|
||||||
|
|
||||||
|
## nav
|
||||||
|
네비게이션 링크를 모아놓은 섹션을 나타냅니다.
|
||||||
|
```html
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">홈</a></li>
|
||||||
|
<li><a href="#">소개</a></li>
|
||||||
|
<li><a href="#">문의</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
## aside
|
||||||
|
본문과 관련된 부가적인 정보를 담는 사이드바를 나타냅니다.
|
||||||
|
```html
|
||||||
|
<aside>
|
||||||
|
<h3>광고</h3>
|
||||||
|
<img src="ad.jpg" alt="광고 이미지">
|
||||||
|
</aside>
|
||||||
|
```
|
||||||
|
|
||||||
|
## header
|
||||||
|
섹션의 헤더 부분을 나타냅니다. 제목, 검색창 등을 포함할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<header>
|
||||||
|
<h1>웹 사이트 제목</h1>
|
||||||
|
<nav>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
```
|
||||||
|
|
||||||
|
## main
|
||||||
|
HTML5에서 도입된 태그로, HTML 문서의 주요 콘텐츠를 감싸는 역할을 합니다.
|
||||||
|
* 유일성: 하나의 HTML 문서에 main 태그는 하나만 사용해야 합니다.
|
||||||
|
* 위치: body 태그 안에 위치해야 합니다.
|
||||||
|
* 내용: main 태그 안에는 웹 페이지의 주요 내용만 포함해야 합니다.
|
||||||
|
* 헤더와 푸터: header와 footer 태그는 main 태그의 외부에 위치해야 합니다.
|
||||||
|
|
||||||
|
## footer
|
||||||
|
섹션의 푸터 부분을 나타냅니다. 저작권 정보, 연락처 등을 포함할 수 있습니다.
|
||||||
|
```html
|
||||||
|
<footer>
|
||||||
|
<p>© 2023 모든 권리 보유</p>
|
||||||
|
</footer>
|
||||||
|
```
|
||||||
72
doc/http/01_http.md
Normal file
72
doc/http/01_http.md
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
# HTTP
|
||||||
|
|
||||||
|
**HTTP(HyperText Transfer Protocol)**는 웹에서 정보를 주고받기 위해 사용되는 기본적인 통신 규약입니다. 우리가 웹 브라우저를 통해 웹페이지를 보거나, 이미지를 다운로드하거나, 온라인 쇼핑을 할 때 모두 HTTP 프로토콜이 사용됩니다.
|
||||||
|
|
||||||
|
## HTTP 프로토콜의 역할
|
||||||
|
* 웹 페이지 요청: 사용자가 웹 브라우저의 주소창에 URL을 입력하면 브라우저는 해당 URL에 대한 HTTP 요청을 서버로 보냅니다.
|
||||||
|
* 서버의 응답: 서버는 요청받은 내용을 처리하고, 요청된 웹 페이지의 HTML 코드, 이미지, CSS 파일 등을 포함하는 HTTP 응답을 브라우저로 보냅니다.
|
||||||
|
* 브라우저의 렌더링: 브라우저는 받은 응답을 해석하여 우리가 보는 웹 페이지로 렌더링합니다.
|
||||||
|
|
||||||
|
## HTTP 프로토콜의 특징
|
||||||
|
* 클라이언트-서버 구조: HTTP는 클라이언트(브라우저)가 서버에 요청을 보내고, 서버가 응답하는 클라이언트-서버 구조를 기반으로 합니다.
|
||||||
|
* 무상태(Stateless): 각 요청은 독립적이며, 서버는 이전 요청에 대한 정보를 저장하지 않습니다.
|
||||||
|
* 비연결성(Connectionless): 한 번의 요청-응답이 이루어지면 연결이 끊어집니다.
|
||||||
|
* 단순성: HTTP는 비교적 간단한 구조로 되어 있어 구현하기 쉽고, 다양한 플랫폼에서 사용될 수 있습니다.
|
||||||
|
|
||||||
|
## HTTP 메서드
|
||||||
|
HTTP 메서드는 클라이언트가 서버에 요청하는 작업의 종류를 나타냅니다. 주요 HTTP 메서드는 다음과 같습니다.
|
||||||
|
|
||||||
|
* GET: 특정 자원을 요청합니다. (예: 웹 페이지 조회)
|
||||||
|
* POST: 서버에 새로운 데이터를 전송합니다. (예: 회원 가입, 게시글 작성)
|
||||||
|
* PUT: 특정 자원을 업데이트합니다.
|
||||||
|
* DELETE: 특정 자원을 삭제합니다.
|
||||||
|
|
||||||
|
## HTTP 상태 코드
|
||||||
|
HTTP 상태 코드는 서버가 클라이언트의 요청에 대해 어떻게 처리했는지를 나타내는 숫자 코드입니다.
|
||||||
|
|
||||||
|
* 200 OK: 요청이 성공적으로 처리되었습니다.
|
||||||
|
* 404 Not Found: 요청한 자원이 없습니다.
|
||||||
|
* 500 Internal Server Error: 서버에서 오류가 발생했습니다.
|
||||||
|
|
||||||
|
## HTTP와 HTTPS의 차이점
|
||||||
|
* HTTP: 일반적인 HTTP는 데이터를 암호화하지 않기 때문에 통신 내용이 도청될 위험이 있습니다.
|
||||||
|
* HTTPS: HTTPS는 HTTP에 SSL/TLS 암호화를 추가하여 데이터를 안전하게 보호합니다. 따라서 개인정보나 금융 정보를 다루는 웹사이트에서는 HTTPS를 사용하는 것이 필수적입니다.
|
||||||
|
|
||||||
|
## HTTP 버전
|
||||||
|
HTTP는 지속적으로 발전하고 있으며, 현재 주로 사용되는 버전은 HTTP/1.1과 HTTP/2입니다. HTTP/2는 HTTP/1.1보다 더 빠르고 효율적인 통신을 지원합니다.
|
||||||
|
|
||||||
|
## HTTP 요청 (HTTP Request)
|
||||||
|
클라이언트가 서버에 보내는 메시지를 의미합니다. 요청에는 요청 메서드, 요청 URL, 헤더, 본문 등이 포함됩니다.
|
||||||
|
* 요청 메서드: 수행하고자 하는 작업을 나타냅니다. (GET, POST, PUT, DELETE 등)
|
||||||
|
* 요청 URL: 요청하려는 자원의 위치를 나타냅니다.
|
||||||
|
* 헤더: 추가적인 정보를 제공합니다. (User-Agent, Accept 등)
|
||||||
|
* 본문: 서버로 전송할 데이터 (POST 메서드에서 주로 사용)
|
||||||
|
|
||||||
|
```
|
||||||
|
GET /products HTTP/1.1
|
||||||
|
Host: www.example.com
|
||||||
|
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
|
||||||
|
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
|
||||||
|
```
|
||||||
|
|
||||||
|
## HTTP 응답 ( HTTP Response)
|
||||||
|
서버가 클라이언트에게 보내는 메시지를 의미합니다. 응답에는 상태 코드, 헤더, 본문 등이 포함됩니다.
|
||||||
|
|
||||||
|
* 상태 코드: 요청 처리 결과를 나타냅니다. (200 OK, 404 Not Found 등)
|
||||||
|
* 헤더: 추가적인 정보를 제공합니다. (Content-Type, Content-Length 등)
|
||||||
|
* 본문: 요청한 데이터
|
||||||
|
|
||||||
|
```
|
||||||
|
HTTP/1.1 200 OK
|
||||||
|
Content-Type: text/html; charset=utf-8
|
||||||
|
Content-Length: 1234
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>제품 목록</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
47
doc/http/02_http_method.md
Normal file
47
doc/http/02_http_method.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
# HTTP 메서드
|
||||||
|
|
||||||
|
HTTP 메서드는 웹 서버에 요청을 보낼 때 수행하고자 하는 작업의 종류를 명시하는 명령어입니다. 각 메서드는 서버에 특정한 동작을 요구하며, 이를 통해 웹 애플리케이션의 다양한 기능을 구현할 수 있습니다.
|
||||||
|
|
||||||
|
## GET
|
||||||
|
특정 자원을 요청하여 읽기 위한 메서드입니다.
|
||||||
|
서버에 있는 데이터나 리소스를 가져오는 데 사용됩니다. 예를 들어, 웹 페이지를 조회하거나 이미지 파일을 다운로드할 때 사용합니다.
|
||||||
|
|
||||||
|
* 요청 URL에 파라미터를 포함하여 서버에 추가적인 정보를 전달할 수 있습니다.
|
||||||
|
* 요청 결과는 캐시될 수 있습니다.
|
||||||
|
안전한 메서드로 간주되어 데이터를 변경하지 않습니다.
|
||||||
|
|
||||||
|
## POST
|
||||||
|
서버에 새로운 데이터를 생성하기 위한 메서드입니다.
|
||||||
|
새로운 사용자를 등록하거나, 게시글을 작성할 때 사용됩니다.
|
||||||
|
|
||||||
|
* 요청 본문에 데이터를 포함하여 서버로 전송합니다.
|
||||||
|
* 데이터를 변경하기 때문에 안전하지 않은 메서드로 간주됩니다.
|
||||||
|
|
||||||
|
## PUT
|
||||||
|
특정 자원을 전체적으로 업데이트하기 위한 메서드입니다.
|
||||||
|
기존 자원을 완전히 새로운 데이터로 대체할 때 사용됩니다.
|
||||||
|
|
||||||
|
* 요청 본문에 새로운 데이터를 포함하여 서버로 전송합니다.
|
||||||
|
* 자원이 존재하지 않으면 새로 생성될 수도 있습니다.
|
||||||
|
|
||||||
|
## DELETE
|
||||||
|
특정 자원을 삭제하기 위한 메서드입니다.
|
||||||
|
더 이상 필요 없는 데이터를 삭제할 때 사용됩니다.
|
||||||
|
|
||||||
|
## PATCH
|
||||||
|
특정 자원을 부분적으로 업데이트하기 위한 메서드입니다.
|
||||||
|
특정 필드만 변경하고 싶을 때 사용됩니다.
|
||||||
|
|
||||||
|
* 요청 본문에 변경할 부분만 포함하여 서버로 전송합니다.
|
||||||
|
|
||||||
|
## HEAD
|
||||||
|
GET과 유사하지만, 응답 본문 없이 헤더 정보만 받아옵니다.
|
||||||
|
|
||||||
|
## OPTIONS
|
||||||
|
서버가 지원하는 HTTP 메서드를 확인합니다.
|
||||||
|
|
||||||
|
## CONNECT
|
||||||
|
HTTP를 통해 다른 프로토콜(예: HTTPS)을 사용하는 터널을 생성합니다.
|
||||||
|
|
||||||
|
## TRACE
|
||||||
|
요청 메시지를 그대로 서버로 보내고, 서버에서 받은 메시지를 그대로 클라이언트로 반환합니다.
|
||||||
31
doc/http/03_status_code.md
Normal file
31
doc/http/03_status_code.md
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
# 상태 코드
|
||||||
|
|
||||||
|
HTTP 응답 코드는 웹 서버가 클라이언트의 요청에 대해 어떻게 처리했는지를 알려주는 3자리 숫자 코드입니다. 이 코드는 요청의 성공 여부, 오류 발생 시 원인 등 다양한 정보를 담고 있어 웹 개발 과정에서 매우 중요한 역할을 합니다.
|
||||||
|
|
||||||
|
HTTP 응답 코드는 크게 다음과 같은 5가지 카테고리로 나눌 수 있습니다.
|
||||||
|
|
||||||
|
* 1xx (정보): 요청이 받아졌으며 처리가 계속되고 있음을 나타냅니다.
|
||||||
|
- 100 Continue: 서버가 요청을 받았으며, 클라이언트가 요청 본문을 보내도 된다는 의미입니다.
|
||||||
|
- 101 Switching Protocols: 프로토콜을 변경해야 한다는 의미입니다. (예: HTTP에서 WebSocket으로 전환)
|
||||||
|
* 2xx (성공): 요청이 성공적으로 처리되었음을 나타냅니다.
|
||||||
|
- 200 OK: 요청이 성공적으로 처리되었습니다.
|
||||||
|
- 201 Created: 새로운 자원이 생성되었습니다.
|
||||||
|
- 202 Accepted: 요청이 수락되었지만 아직 처리되지 않았습니다.
|
||||||
|
- 204 No Content: 요청은 성공했지만, 응답 본문에 내용이 없습니다.
|
||||||
|
* 3xx (리다이렉션): 요청을 완료하기 위해 추가적인 조치가 필요함을 나타냅니다.
|
||||||
|
- 301 Moved Permanently: 요청한 자원이 영구적으로 다른 URL로 이동했습니다.
|
||||||
|
- 302 Found: 요청한 자원이 임시로 다른 URL로 이동했습니다.
|
||||||
|
- 304 Not Modified: 요청한 자원이 변경되지 않았습니다.
|
||||||
|
- 307 Temporary Redirect: 302와 유사하지만, HTTP 메서드를 유지합니다.
|
||||||
|
* 4xx (클라이언트 오류): 클라이언트 측에서 오류가 발생했음을 나타냅니다.
|
||||||
|
- 400 Bad Request: 요청이 잘못되었습니다. (예: 잘못된 문법, 누락된 필드)
|
||||||
|
- 401 Unauthorized: 인증이 필요합니다.
|
||||||
|
- 403 Forbidden: 권한이 없습니다.
|
||||||
|
- 404 Not Found: 요청한 자원이 없습니다.
|
||||||
|
- 405 Method Not Allowed: 허용되지 않은 HTTP 메서드를 사용했습니다.
|
||||||
|
* 5xx (서버 오류): 서버 측에서 오류가 발생했음을 나타냅니다.
|
||||||
|
- 500 Internal Server Error: 서버에서 예상치 못한 오류가 발생했습니다.
|
||||||
|
- 502 Bad Gateway: 게이트웨이 또는 프록시 서버에서 잘못된 응답을 받았습니다.
|
||||||
|
- 503 Service Unavailable: 서버가 일시적으로 오버로드되거나 유지보수 중입니다.
|
||||||
|
- 504 Gateway Timeout: 게이트웨이 또는 프록시 서버가 타임아웃되었습니다.
|
||||||
|
|
||||||
38
doc/http/04_http_header.md
Normal file
38
doc/http/04_http_header.md
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
# HTTP 헤더
|
||||||
|
|
||||||
|
HTTP 헤더는 클라이언트(보통 웹 브라우저)와 서버 간의 통신에서 추가적인 정보를 주고받기 위해 사용되는 메타데이터입니다. HTTP 요청과 응답 메시지에 포함되어 있으며, 요청이나 응답의 내용, 전송되는 데이터의 형식, 캐싱 정보 등 다양한 정보를 담고 있습니다.
|
||||||
|
|
||||||
|
## HTTP 헤더의 역할
|
||||||
|
* 요청 헤더: 클라이언트가 서버에 요청할 때, 어떤 종류의 데이터를 원하는지, 어떤 브라우저를 사용하는지 등의 정보를 전달합니다.
|
||||||
|
* 응답 헤더: 서버가 클라이언트에게 응답할 때, 응답 데이터의 종류, 콘텐츠 길이, 캐싱 관련 정보 등을 전달합니다.
|
||||||
|
|
||||||
|
## HTTP 헤더의 종류
|
||||||
|
HTTP 헤더는 크게 다음과 같은 종류로 나눌 수 있습니다.
|
||||||
|
|
||||||
|
* General Header: 요청과 응답 모두에 사용되며, 메시지 자체에 대한 일반적인 정보를 포함합니다.
|
||||||
|
- Date: 메시지가 생성된 시간을 나타냅니다.
|
||||||
|
- Cache-Control: 캐싱 관련 지시를 포함합니다. (예: no-cache, max-age)
|
||||||
|
* Request Header: 요청 메시지에만 사용되며, 클라이언트에 대한 정보나 요청하는 리소스에 대한 정보를 포함합니다.
|
||||||
|
- User-Agent: 클라이언트(브라우저)의 종류와 버전 정보를 나타냅니다.
|
||||||
|
- Accept: 클라이언트가 수용할 수 있는 콘텐츠 형식(MIME type)을 나타냅니다.
|
||||||
|
- Accept-Language: 클라이언트가 선호하는 언어를 나타냅니다.
|
||||||
|
- Accept-Encoding: 클라이언트가 지원하는 인코딩 방식을 나타냅니다.
|
||||||
|
- Authorization: 인증 정보를 포함합니다.
|
||||||
|
- Cookie: 서버가 클라이언트의 브라우저에 저장한 쿠키 정보를 포함합니다.
|
||||||
|
- Referer: 현재 요청된 페이지의 이전 페이지 URL을 나타냅니다.
|
||||||
|
* Response Header: 응답 메시지에만 사용되며, 서버에 대한 정보나 응답 데이터에 대한 정보를 포함합니다.
|
||||||
|
- Content-Type: 응답 데이터의 형식(MIME type)을 나타냅니다.
|
||||||
|
- Content-Length: 응답 데이터의 크기를 바이트 단위로 나타냅니다.
|
||||||
|
- Last-Modified: 자원이 마지막으로 수정된 시간을 나타냅니다.
|
||||||
|
- ETag: 자원의 버전을 나타내는 문자열입니다.
|
||||||
|
Location: 리소스가 다른 URL로 이동했을 때 새로운 URL을 나타냅니다.
|
||||||
|
- Set-Cookie: 클라이언트의 브라우저에 새로운 쿠키를 설정합니다.
|
||||||
|
* Entity Header: 메시지 본문(entity-body)에 대한 정보를 포함합니다.
|
||||||
|
- Content-Encoding: 응답 데이터가 압축된 방식을 나타냅니다.
|
||||||
|
- Content-Language: 응답 데이터의 언어를 나타냅니다.
|
||||||
|
|
||||||
|
## HTTP 헤더의 활용
|
||||||
|
* 캐싱: Last-Modified, ETag 헤더를 이용하여 브라우저에서 자원을 캐싱하고, 불필요한 데이터 전송을 줄일 수 있습니다.
|
||||||
|
* 인증: Authorization 헤더를 이용하여 사용자를 인증하고, 권한을 부여할 수 있습니다.
|
||||||
|
* 콘텐츠 협상: Accept 헤더를 이용하여 클라이언트가 선호하는 콘텐츠 형식을 선택할 수 있습니다.
|
||||||
|
* 웹 크롤링: User-Agent 헤더를 변경하여 다른 브라우저처럼 행동할 수 있습니다.
|
||||||
46
doc/http/05_cookie_session.md
Normal file
46
doc/http/05_cookie_session.md
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
# 쿠키와 세션
|
||||||
|
|
||||||
|
웹 서핑을 하다 보면 자주 접하게 되는 용어인 쿠키와 세션은 웹 애플리케이션에서 사용자 상태를 관리하는 데 필수적인 요소입니다. 둘 다 사용자 정보를 저장하고, 이를 바탕으로 맞춤형 서비스를 제공하는 데 사용되지만, 저장 위치와 용도에 따라 차이점이 있습니다.
|
||||||
|
|
||||||
|
## 쿠키 (Cookie)
|
||||||
|
웹 서버가 클라이언트(웹 브라우저)에 보내는 작은 크기의 데이터 파일입니다. 클라이언트는 이 파일을 로컬 디스크에 저장하고, 이후 같은 서버에 요청을 보낼 때마다 함께 전송합니다.
|
||||||
|
|
||||||
|
### 특징
|
||||||
|
* 저장 위치: 클라이언트 측 (브라우저)
|
||||||
|
* 용도
|
||||||
|
- 사용자 식별 (로그인 상태 유지)
|
||||||
|
- 사용자 설정 저장 (테마, 언어 설정)
|
||||||
|
- 사이트 방문 기록 추적
|
||||||
|
- 장바구니 정보 저장
|
||||||
|
* 종류
|
||||||
|
- 세션 쿠키: 브라우저를 닫으면 자동으로 삭제됩니다.
|
||||||
|
- 영구 쿠키: 만료 날짜가 설정되어 해당 날짜까지 유효합니다.
|
||||||
|
|
||||||
|
### 장점
|
||||||
|
* 서버 부담 감소: 서버에 사용자 정보를 저장하지 않아 서버 자원을 절약할 수 있습니다.
|
||||||
|
|
||||||
|
### 단점
|
||||||
|
* 보안 취약성: 클라이언트 측에 저장되므로, 해킹이나 악성 코드에 노출될 위험이 있습니다.
|
||||||
|
* 용량 제한: 저장할 수 있는 데이터의 크기가 제한적입니다.
|
||||||
|
* 사용자의 프라이버시 침해 가능성: 사용자의 행동을 추적하는 데 악용될 수 있습니다.
|
||||||
|
|
||||||
|
## 세션 (Session)
|
||||||
|
사용자와 서버 간의 연결 상태를 유지하기 위한 일련의 상호 작용을 의미합니다.
|
||||||
|
|
||||||
|
### 특징
|
||||||
|
* 저장 위치: 서버 측
|
||||||
|
* 용도
|
||||||
|
- 사용자 세션 관리 (로그인 상태 유지, 장바구니 정보 관리)
|
||||||
|
- 사용자 활동 기록
|
||||||
|
* 작동 방식
|
||||||
|
- 서버는 각 사용자에게 고유한 세션 ID를 부여하고, 이를 쿠키를 통해 클라이언트에 전달합니다.
|
||||||
|
- 클라이언트는 이후 요청 시 세션 ID를 함께 보내고, 서버는 해당 ID를 통해 사용자 정보를 조회합니다.
|
||||||
|
|
||||||
|
### 장점
|
||||||
|
* 보안성 향상: 서버 측에 저장되므로 쿠키보다 보안성이 높습니다.
|
||||||
|
* 대용량 데이터 저장 가능: 쿠키보다 더 많은 양의 데이터를 저장할 수 있습니다.
|
||||||
|
|
||||||
|
### 단점
|
||||||
|
* 서버 부담 증가: 서버에 사용자 정보를 저장해야 하므로 서버 자원을 소모합니다.
|
||||||
|
* 세션 만료 문제: 세션 유효 시간이 지나면 사용자 정보가 사라질 수 있습니다.
|
||||||
|
|
||||||
40
doc/http/06_restful.md
Normal file
40
doc/http/06_restful.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
# RESTful
|
||||||
|
|
||||||
|
RESTful API는 웹 서비스를 설계하는 데 사용되는 아키텍처 스타일 중 하나입니다. Representational State Transfer의 약자로, HTTP 프로토콜을 기반으로 자원(resource)을 표현하고, 이 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행하는 방식을 의미합니다.
|
||||||
|
|
||||||
|
## 특징
|
||||||
|
* 자원 중심: 각각의 데이터는 자원(resource)으로 취급되며, URI(Uniform Resource Identifier)를 통해 고유하게 식별됩니다.
|
||||||
|
* HTTP 메서드 활용:
|
||||||
|
- GET: 자원 조회
|
||||||
|
- POST: 새로운 자원 생성
|
||||||
|
- PUT: 기존 자원 전체 업데이트
|
||||||
|
- DELETE: 자원 삭제
|
||||||
|
- PATCH: 자원 부분 업데이트
|
||||||
|
* Stateless: 각 요청은 독립적이며, 서버는 이전 요청에 대한 정보를 저장하지 않습니다.
|
||||||
|
* Client-Server: 클라이언트와 서버는 분리되어 있으며, 각자의 역할을 수행합니다.
|
||||||
|
* Cacheable: 응답을 캐싱하여 시스템 성능을 향상시킬 수 있습니다.
|
||||||
|
* Uniform Interface: 일관된 인터페이스를 제공하여 다양한 클라이언트에서 쉽게 사용할 수 있습니다.
|
||||||
|
|
||||||
|
## 장점
|
||||||
|
* 단순성: HTTP 프로토콜을 기반으로 하므로 이해하기 쉽고 구현하기 간편합니다.
|
||||||
|
* 확장성: 새로운 자원을 추가하거나 기존 자원을 수정하는 것이 용이합니다.
|
||||||
|
* 다양한 플랫폼 지원: HTTP 프로토콜을 지원하는 모든 플랫폼에서 사용 가능합니다.
|
||||||
|
* 캐싱: 응답을 캐싱하여 시스템 성능을 향상시킬 수 있습니다.
|
||||||
|
* RESTful API는 JSON 또는 XML 형식의 데이터를 주고받는 방식으로, 다양한 프로그래밍 언어와 플랫폼에서 쉽게 사용할 수 있습니다.
|
||||||
|
|
||||||
|
## 설계 시 고려 사항
|
||||||
|
* URI 설계: 자원을 명확하게 표현하고, 계층적인 구조를 유지합니다.
|
||||||
|
- URI의 마지막에는 '/'를포함하지 않습니다.
|
||||||
|
- 언더바(\_)는 사용하지 않습니다. 대신 하이픈(-)을 사용합니다.
|
||||||
|
- URI에는 행위(동사)가 아닌 결과(명사)를 포함합니다. 행위는 HTTP 메서드로 표현할 수 있어야 합니다.
|
||||||
|
- URI는 소문자로 작성해야 합니다.
|
||||||
|
- 파일의 확장자는 URI에 포함하지 않습니다. 대신 HTTP의 Accept 헤더를 사용하는 것이 좋습니다.
|
||||||
|
* HTTP 메서드 활용: 각 메서드의 의미를 정확하게 이해하고 적절하게 사용합니다.
|
||||||
|
* 응답 코드: HTTP 상태 코드를 활용하여 요청 결과를 명확하게 전달합니다.
|
||||||
|
* 에러 처리: 예외 상황 발생 시 적절한 에러 메시지를 반환합니다.
|
||||||
|
* 버전 관리: API 변경 시 버전을 관리하여 호환성 문제를 해결합니다.
|
||||||
|
|
||||||
|
## RESTful API를 사용하는 이유
|
||||||
|
* 다양한 클라이언트 지원: 웹 브라우저, 모바일 앱, IoT 장치 등 다양한 클라이언트에서 사용 가능합니다.
|
||||||
|
* 데이터 공유: 서로 다른 시스템 간에 데이터를 쉽게 공유할 수 있습니다.
|
||||||
|
* 마이크로서비스 아키텍처: 각 서비스를 RESTful API로 구현하여 시스템을 분산하고 확장성을 높일 수 있습니다.
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<module type="GENERAL_MODULE" version="4">
|
|
||||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
|
||||||
<exclude-output />
|
|
||||||
<content url="file://$MODULE_DIR$" />
|
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
|
||||||
</component>
|
|
||||||
</module>
|
|
||||||
12
src/boiler-plate.html
Normal file
12
src/boiler-plate.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user