2025-02-05T16:03:17

2025-02-05 16:03:17 +09:00
parent 3d9e93ae42
commit 3ef1bb3801
41 changed files with 3 additions and 797 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -1,3 +0,0 @@
-# 디폴트 무시된 파일
-/shelf/
-/workspace.xml
--- a/.idea/copyright/Elex_Project.xml
+++ b/.idea/copyright/Elex_Project.xml
@@ -1,6 +0,0 @@
-<component name="CopyrightManager">
-  <copyright>
-    <option name="notice" value="Copyright (c) &amp;#36;originalComment.match(&quot;Copyright \(c\) (\d+)&quot;, 1, &quot;-&quot;, &quot;&amp;#36;today.year&quot;)&amp;#36;today.year. Elex. All Rights Reesrved.&#10;https://www.elex-project.com/" />
-    <option name="myName" value="Elex Project" />
-  </copyright>
-</component>
--- a/.idea/copyright/profiles_settings.xml
+++ b/.idea/copyright/profiles_settings.xml
@@ -1,7 +0,0 @@
-<component name="CopyrightManager">
-  <settings>
-    <module2copyright>
-      <element module="Project Files" copyright="Elex Project" />
-    </module2copyright>
-  </settings>
-</component>
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -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>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/css-examples.iml" filepath="$PROJECT_DIR$/css-examples.iml" />
-    </modules>
-  </component>
-</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -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>
--- a/Writerside/c.list
+++ b/Writerside/c.list
@@ -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>
--- a/Writerside/c.tree
+++ b/Writerside/c.tree
@@ -1,39 +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="c"
-                 name="CSS"
-                 start-page="starter-topic.md">
-
-    <toc-element topic="starter-topic.md">
-        <toc-element topic="Selectors.md"/>
-        <toc-element topic="Box-Model.md"/>
-        <toc-element topic="Units-and-Values.md"/>
-        <toc-element topic="Styling-Text.md"/>
-        <toc-element topic="Styling-Image-and-Media.md"/>
-        <toc-element topic="Styling-List.md"/>
-        <toc-element topic="Styling-Link.md"/>
-        <toc-element topic="Styling-Table.md">
-        </toc-element>
-        <toc-element topic="Styling-Form.md"/>
-        <toc-element topic="Layouts.md">
-            <toc-element topic="Flexbox.md"/>
-            <toc-element topic="Grid.md"/>
-            <toc-element topic="Floating.md"/>
-            <toc-element topic="Positioning.md"/>
-            <toc-element topic="Multi-Column.md"/>
-            <toc-element topic="Responsive.md"/>
-            <toc-element topic="Media-Query.md"/>
-        </toc-element>
-        <toc-element topic="Animation.md"/>
-        <toc-element topic="Scroll-Snap.md"/>
-        <toc-element topic="Transform.md"/>
-        <toc-element topic="Transition.md"/>
-    </toc-element>
-</instance-profile>
--- a/Writerside/cfg/buildprofiles.xml
+++ b/Writerside/cfg/buildprofiles.xml
@@ -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="c">
-        <variables>
-            <noindex-content>true</noindex-content>
-        </variables>
-    </build-profile>
-
-</buildprofiles>
--- a/Writerside/images/CSS_Flex.svg
+++ b/Writerside/images/CSS_Flex.svg
--- a/Writerside/images/completion_procedure.png
+++ b/Writerside/images/completion_procedure.png
--- a/Writerside/images/completion_procedure_dark.png
+++ b/Writerside/images/completion_procedure_dark.png
--- a/Writerside/images/convert_table_to_xml.png
+++ b/Writerside/images/convert_table_to_xml.png
--- a/Writerside/images/convert_table_to_xml_dark.png
+++ b/Writerside/images/convert_table_to_xml_dark.png
--- a/Writerside/images/new_topic_options.png
+++ b/Writerside/images/new_topic_options.png
--- a/Writerside/images/new_topic_options_dark.png
+++ b/Writerside/images/new_topic_options_dark.png
--- a/Writerside/topics/Animation.md
+++ b/Writerside/topics/Animation.md
@@ -1,27 +0,0 @@
-# Animation
-
-* `animation`
-* `animation-duration`
-* `animation-name`
-* `animation-iteration-count`
-* `animation-direction`
-
-
-```CSS
-p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    translate: 150vw 0;
-    scale: 200% 1;
-  }
-
-  to {
-    translate: 0 0;
-    scale: 100% 1;
-  }
-}
-```
--- a/Writerside/topics/Box-Model.md
+++ b/Writerside/topics/Box-Model.md
@@ -1,105 +0,0 @@
-# Box
-
-블록 요소는 새로운 줄에서 시작하며, 상위 컨테이너 너비의 100%를 채웁니다. `<h1>`, `<p>`, `<div>` 등은 기본작으로 블록 요소입니다.
-인라인 요소는 새로운 줄에서 시작하지 않으며, `width`, `height` 속성은 무시됩니다. `<a>`, `<em>`, `<strong>`, `<span>` 등은 기본적으로 인라인 요소입니다.
-
-박스의 유형은 `display` 속성을 통해서 정의할 수 있습니다.
-* display
-  * block
-  * inline
-  * inline-block
-  * flex
-  * inline-flex
-
-## 박스 모델
-
-* 컨텐트 영역 : 기본적으로, `width`와 `height` 속성을 지정하면 컨텐트 영역의 크기를 지정하게 됩니다.
-* 패딩 영역 : `padding`
-* 보더(테두리) 영역 : `border`
-* 마진 영역 : `margin`
-
-
-## 크기
-
-* `width`
-* `height`
-* `min-wodth`, `min-height`
-* `max-width`, `max-height`
-
-### 보더 박스 모델
-
-* `box-sizing` : content-box | border-box
-`width`와 `height` 속성이 컨텐트 영역의 크기를 지정하는 대신, 보더 영역의 크기를 지정하도록 합니다.
-
-```CSS
-html {
-    box-sizing: border-box;
-}
-```
-
-## 마진
-
-* `margin`
-* `margin-top`
-* `margin-right`
-* `margin-bottom`
-* `margin-left`
-
-### Margin Collapsing
-
-여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 되어서, 그 중 가장 큰 여백의 크기가 됩니다.
-
-## 보더
-
-* `border`
-* `border-top`, `border-right`, `border-bottom`, `border-left`
-* `border-width`
-* `border-style` : none | hidden | dotted | dashed | solid | double | groove | rigid | inset | outset
-* `border-color`
-* `border-top-width`, `border-top-style`, `border-top-color`
-* `border-right-width`, `border-right-style`, `border-right-color`
-* `border-bottom-width`, `border-bottom-style`, `border-bottom-color`
-* `border-left-width`, `border-left-style`, `border-left-color`
-
-* `border-radius`
-* `border-bottom-left-radius`, `border-bottom-right-radius`, `border-top-left-radius`, `border-top-right-radius`
-
-## 패딩
-
-패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 마진과는 다르게 패딩은 음수의 크기를 가질 수 없습니다.
-
-* `padding`
-* `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
-
-## 배경
-
-* `background`
-* `background-color`
-* `background-image`
-  * url()
-  * linear-gradient()
-  * radial-gradient()
-* `background-repeat` : no-repeat | repeat-x | repeat-y | repeat
-* `background-size` : cover | contain
-  * cover : 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.
-  * contain : 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.
-* `background-position`
-* `background-attachment` : scroll | fixed | local
-
-* `box-shadow`
-
-## 아웃라인
-
-* `outline`
-* `outline-color`, `outline-offset`, `outline-style`, `outline-width`
-
-## Overflow
-
-`overflow` 의 기본값은 visible 이므로, overflows 가 발생하면 기본적으로 콘텐츠를 볼 수 있습니다. 콘텐츠가 넘칠 때 내용을 자르려면 박스에 `overflow: hidden` 을 설정할 수 있습니다.
-`word-break`는 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.
-`overflow-wrap`는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.
-
-* `overflow` : visible | hidden | clip | scroll | auto
-* `overflow-x`, `overflow-y`
-* `word-break` : normal | break-all | keep-all | break-word
-* `overflow-wrap` = `word-wrap` : normal | break-word
--- a/Writerside/topics/Flexbox.md
+++ b/Writerside/topics/Flexbox.md
@@ -1,40 +0,0 @@
-# Flexbox
-
-flexbox로 레이아웃할 요소의 부모 요소에 `display: flex`를 지정합니다.
-인라인 항목을 flexbox로 취급해 레이아웃하길 희망한다면 `display: inline-flex`로 지정할 수도 있습니다.
-
-```CSS
-div {
-    display: flex;
-}
-```
-
-요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.
-
-![Flex](CSS_Flex.svg)
-
-* 주축 (main axis) 은 flex item이 배치되고 있는 방향으로 진행하는 축입니다. 이 기본 축의 시작과 끝을 일컬어 main start과 main end라고 합니다.
-* 교차축 (cross axis) 은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 cross start과 cross end라고 합니다.
-* `display: flex`이 설정된 부모 요소를 일컬어 플렉스 컨테이너 (flex container) 라고 합니다.
-* 플렉스 컨테이너 내부에 flexbox로 레이아웃되는 항목을 일컬어 플렉스 아이템 (flex items) 이라고 합니다.
-
-## 플렉스 컨테이너
-
-* `flex-direction` : 주축의 방향을 지정합니다.
-  * row | row-reverse | column | column-reverse
-* `flex-wrap` : 플렉스 아이템 요소들이 영역을 벗어났을 때, 줄 바꿈할지 여부를 지정합니다.
-  * wrap | nowrap | wrap-reverse
-* `flex-flow` = `flex-direction` + `flex-wrap`
-* `align-items` : 모든 직계 자식에 대한 정렬 방식을 지정합니다.
-  * normal | flex-start | flex-end | center | start | end | self-start | self-end | baseline | stretch | safe | unsafe
-* `justify-content` : 주축을 기준으로 플렉스 아이템을 어떻게 정렬할 것인지를 지정합니다.
-  * start | end | flex-start | flex-end | center | left | right | normal | baseline | space-between | space-around | space-evenly | stretch | safe | unsafe
-
-## 플렉스 아이템
-
-* `flex` = `flex-grow` + `flex-shrink` + `flex-basis`
-* `flex-grow` : 플레스 컨테이너 내부에서 할당 가능한 공간의 정도를 비례값으로 지정합니다.
-* `flex-shrink` : 플레스 컨테이너 내부에서 크기가 넘칠 때, 얼마만큼 공간을 줄이지를 비례값으로 지정합니다.
-* `flex-basis` : 플렉스 아이템의 초기 크기를 지정합니다.
-* `align-self` : 각각의 플렉스 아이템에 대한 정렬 방식을 개별적으로 지정합니다.
-* `order` : 플렉스 아이템의 순서를 지정합니다. 기본값은 0입니다. 낮은 순위의 아이템이 먼저 표시됩니다.
--- a/Writerside/topics/Floating.md
+++ b/Writerside/topics/Floating.md
@@ -1,4 +0,0 @@
-# Floating
-
-* `float` : left | right | none | inline-start | inline-end
-* `clear` : left | right | both
--- a/Writerside/topics/Grid.md
+++ b/Writerside/topics/Grid.md
@@ -1,29 +0,0 @@
-# Grid
-
-그리드는 수평선과 수직선으로 이루어진 이차원 레이아웃 시스템입니다. 
-
-* columns
-* rows
-* gutters
-
-컨테이너 요소의 `display: grid`를 지정하면 직계 자식 요소는 모두 그리드 아이템이 됩니다.
-
-```CSS
-.container {
-    display: grid;
-}
-```
-
-## 그리드 컨테이너
-
-* `grid-template-columns` : 칼럼의 크기를 원하는 갯수만큼 지정합니다. 절대 크기, 상대 크기, 그리고 *fr*단위를 사용할 수 있습니다.
-* `grid-template-rows`
-* `gap` = `row-gap` + `column-gap` = `grid-gap` : 트랙 사이의 간격을 지정합니다.
-* `grid-auto-rows`, `grid-auto-columns` : 템플릿에 정의한 셀의 갯수보다 아이템이 많은 경우에는 암시적으로 그리드가 생성되는데, 이 때의 셀 크기를 지정합니다.
-* `grid-template-areas` : `grid-area`의 이름을 사용해서 아이템이 놓일 영역을 지정합니다.
-
-## 그리드 아이템
-
-* `grid-column` = `grid-column-start` + `grid-column-end` : 1부터 시작되는 번호를 사용해서 아이템이 놓일 영역을 지정합니다.
-* `grid-row` = `grid-row-start` + `grid-row-end`
-* `grid-area` : `grid-template-areas`에서 사용될 이름을 지정합니다.
--- a/Writerside/topics/Layouts.md
+++ b/Writerside/topics/Layouts.md
@@ -1,11 +0,0 @@
-# Layouts
-
-## Normal Flow
-
-기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이를 갖습니다. 
-인라인 요소는 자체 내용물의 최대 높이와 최대 너비를 갖습니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다.
-
-블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다.
-인라인 요소는 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.
-
-
--- a/Writerside/topics/Media-Query.md
+++ b/Writerside/topics/Media-Query.md
@@ -1,17 +0,0 @@
-# Media Query
-
-```CSS
-@media screen and (min-width: 600px) {
-  body {
-    color: blue;
-  }
-}
-```
-
-```CSS
-@media (orientation: landscape) {
-  body {
-    color: rebeccapurple;
-  }
-}
-```
--- a/Writerside/topics/Multi-Column.md
+++ b/Writerside/topics/Multi-Column.md
@@ -1,9 +0,0 @@
-# 다단 레이아웃
-
-* `column-count`
-* `column-width`
-* `column-gap`
-* `column-rule`
-  * `column-rule-color`
-  * `column-rule-style` : dotted | solid | ...
-  * `column-rule-width`
--- a/Writerside/topics/Positioning.md
+++ b/Writerside/topics/Positioning.md
@@ -1,11 +0,0 @@
-# 위치 잡기
-
-* `position` :
-  * static : 요소를 일반적인 문서 흐름에 따라 배치합니다. `top`, `right`, `bottom`, `left`, `z-index` 속성이 아무런 영향도 주지 않습니다.
-  * relative : 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 `top`, `right`, `bottom`, `left`의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않으므로, 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
-  * absolute : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 `top`, `right`, `bottom`, `left`의 값에 따라 배치합니다.
-  * fixed : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다.
-  * sticky : 요소를 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 블록 레벨 조상을 기준으로 `top`, `right`, `bottom`, `left`의 값에 따라 오프셋을 적용합니다.
-
-* `top`, `right`, `bottom`, `left`
-* `z-index`
--- a/Writerside/topics/Responsive.md
+++ b/Writerside/topics/Responsive.md
@@ -1,8 +0,0 @@
-# 반응형 레이아웃
-
-
-```html
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-```
-
-
--- a/Writerside/topics/Scroll-Snap.md
+++ b/Writerside/topics/Scroll-Snap.md
@@ -1,7 +0,0 @@
-# Scroll Snap
-
-* `scroll-snap-type`
-* `scroll-snap-align`
-* `scroll-snap-stop`
-* `scroll-margin`
-* `scroll-padding`
--- a/Writerside/topics/Selectors.md
+++ b/Writerside/topics/Selectors.md
@@ -1,199 +0,0 @@
-# 선택자
-
-
-## 타입 선택자
-
-HTML 태그(요소)를 선택합니다.
-
-```CSS
-p {
-}
-```
-
-## 전체 선택자
-
-모든 항목을 선택합니다.
-
-```CSS
-* {
-}
-```
-
-## 클래스 선택자
-
-해당 클래스가 적용된 모든 항목을 선택합니다.
-
-```CSS
-.my-class {
-}
-```
-
-## ID 선택자
-
-해당 아이디가 적용된 항목을 선택합니다. HTML 문서에서 id는 유일해야 합니다.
-
-```CSS
-#my-id {
-}
-```
-
-## 속성 선택자
-
-```CSS
-a[href] {/* 지정된 속성을 갖는 모든 요소를 선택 */}
-a[attribute="value"] {/* 지정된 값과 속성의 값이 일치하는 모든 요소 */}
-a[attribute~="value"] {/* 지정된 값이 공백으로 분리된 목록에 포함 */}
-a[attribute|="value"] {/* 지정된 값과 일치하거나 하이픈으로 이어지는 요소 */}
-a[attribute^="value"] {/* 지정된 값으로 시작하는 요소 */}
-a[attribute$="value"] {/* 지정된 값으로 끝나는 요소 */}
-a[attribute*="value"] {/* 지정된 값이 문자열에 포함 */}
-```
-
-### 속성 이름 선택자
-
-해당 속성이 있는 항목을 선택합니다.
-
-```CSS
-a[title] {
-}
-```
-
-### 속성 값과 일치
-
-해당 속성의 값이 일치하는 항목을 선택합니다.
-
-```CSS
-a[href="http://examples.com"] {
-}
-```
-
-해당 속성의 값과 일치하거나 공백으로 구분된 목록 중 해당 값을 포함하는 항목을 선택합니다.
-
-```CSS
-p[class~="highlight"] {
-}
-```
-
-해당 속성의 값과 일치하거나 해당 값 뒤에 '-'으로 이어지는 항목을 선택합니다.
-
-```CSS
-div[lang|="ko"] {
-}
-```
-
-### 문자열 중 일부와 일치
-
-해당 속성의 값이 주어진 값으로 시작하는 항목을 선택합니다.
-
-```CSS
-div[class^="box-"] {
-}
-```
-
-해당 속성의 값이 주어진 값으로 끝나는 항목을 선택합니다.
-
-```CSS
-div[class$="box-"] {
-}
-```
-
-해당 속성의 값이 주어진 값을 포함하는 항목을 선택합니다.
-
-```CSS
-div[class*="box-"] {
-}
-```
-
-## 의사 클래스 선택자
-
-의사 클래스는 특정 상태에 있는 요소를 선택하는 선택자입니다.
-
-* :first-child
-* :first-of-type
-* :last-child
-* :last-of-type
-* :nth-child()
-* :nth-of-type()
-* :only-child
-* :only-of-type
-
-* :active
-* :hover
-* :visited
-* :link
-* :focus
-
-* :required
-* :valid, :invalid
-* :checked
-* :disabled, :enabled
-
-* :is()
-* :has()
-* :not()
-
-* :root
-
-* :playing, :paused
-
-## 의사 요소 선택자
-
-의사 요소는 유사한 방식으로 동작하지만, 기존 요소에 클래스를 적용하는 것이 아니라 완전히 새로운 HTML 요소를 마크업에 추가한 것처럼 작동합니다.
-
-* ::before
-* ::after
-* ::first-line
-* ::first-letter
-* ::selection
-
-* ::grammar-error, ::spelling-error
-
-## 결합자
-
-다른 결합자를 서로 연결하여 새로운 일치 조건을 만듭니다.
-
-
-### 그룹 
-
-콤마로 구분된 선택자 각각을 모두 선택합니다.
-
-```CSS
-article, p {
-}
-```
-
-### 자손 결합자
-
-첫 번째 선택자와 일치하는 요소의 자손 중에서 하위 선택자와 일치하는 요소를 선택합니다.
-
-```CSS
-p .highlight {
-}
-```
-
-### 자식 결합자
-
-첫 번째 선택자와 일치하는 요소의 직접 자손 중에서 하위 선택자와 일치하는 요소를 선택합니다.
-
-```CSS
-p > .highlight {
-}
-```
-
-### 인접 형제 결합자
-
-첫 번째 선택자와 일치하는 요소의 인접 형제 노드가 하위 선택자와 일치하는 요소를 선택합니다.
-
-```CSS
-p + .highlight {
-}
-```
-
-### 일반 형제 결합자
-
-첫 번째 선택자와 일치하는 요소의 형제 중 하위 선택자와 일치하는 요소를 선택합니다.
-
-```CSS
-p ~ .highlight {
-}
-```
--- a/Writerside/topics/Styling-Form.md
+++ b/Writerside/topics/Styling-Form.md
@@ -1,10 +0,0 @@
-# Styling Form
-
-
-https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms
-https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling
-
-* `appearance` : none | auto | 
-
-
-* `cursor`
--- a/Writerside/topics/Styling-Image-and-Media.md
+++ b/Writerside/topics/Styling-Image-and-Media.md
@@ -1,10 +0,0 @@
-# Styling Image and Media
-
-* `width`
-* `height`
-* `min-width`, `min-height`
-* `max-width`, `max-height`
-* `object-fit` : fill | contain | cover | none | scale-down
-* `object-position`
-
-
--- a/Writerside/topics/Styling-Link.md
+++ b/Writerside/topics/Styling-Link.md
@@ -1,21 +0,0 @@
-# Styling Link
-
-```CSS
-a {
-}
-
-a:link {
-}
-
-a:visited {
-}
-
-a:focus {
-}
-
-a:hover {
-}
-
-a:active {
-}
-```
--- a/Writerside/topics/Styling-List.md
+++ b/Writerside/topics/Styling-List.md
@@ -1,6 +0,0 @@
-# Styling List
-
-* `list-style`
-* `list-style-type` : none | disc | circle | square | decimal | cjk-decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | korean-hangul-formal | korean-hanja-formal | ...
-* `list-style-position` : inside | outside
-* `list-style-image`
--- a/Writerside/topics/Styling-Table.md
+++ b/Writerside/topics/Styling-Table.md
@@ -1,6 +0,0 @@
-# Styling Table
-
-* table-layout
-* border-collapse
-* caption-side : top | bottom
-
--- a/Writerside/topics/Styling-Text.md
+++ b/Writerside/topics/Styling-Text.md
@@ -1,84 +0,0 @@
-# Styling Text
-
-## 텍스트
-
-* `color`
-* `font`
-* `font-family` : 둘 이상의 단어가 있는 글꼴 이름은 따옴표로 묶어야합니다
-  * Arial | Courier New | Georgia | Times New Roman | Trebuchet MS | Verdana
-  * serif | sans-serif | monospace | cursive | fantasy
-* `font-size`
-* `font-style` : normal | italic | oblique
-* `font-weight` : normal | bold | lighter | bolder | 100~900
-* `text-transform` : none | uppercase | lowercase | capitalize | full-width
-* `text-decoration` : 값을 여러 개 중복해서 지정해도 됩니다.
-  * none | underline | overline | line-through
-* `text-decoration-line`, `text-decoration-style`, `text-decoration-color`
-* `text-shadow` : 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 색상을 순서대로 지정합니다. 쉼표로 구분된 여러 그림자 값을 포함하여 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.
-
-```CSS
-p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
-```
-
-```CSS
-p {
-  text-shadow: 4px 4px 5px red;
-}
-```
-### 그 외 속성들
-
-* `font-variant`
-* `font-variant-alternates`, `font-variants-caps`, `font-variant-east-asian`, `font-variant-ligatures`, `font-variant-numeric`, `font-variant-position`
-* `font-size-adjust`
-* `font-stretch`
-* `font-kerning`
-* `font-feature-settings`
-* `text-underline-position`
-* `text-rendering`
-
-## 텍스트 레이아웃
-
-* `text-align` : left | right | center | justify
-* `line-height` : 일반적으로 단위 없는 값을 사용합니다.
-
-
-```CSS
-p {
-  line-height: 1.5;
-}
-```
-
-### 그 외 속성들
-
-* `text-indent`
-* `text-overflow`
-* `white-space`
-* `word-break`
-* `direction`
-* `hypens`
-* `line-break`
-* `text-align-last`
-* `text-orientation`
-* `word-wrap`
-* `word-spacing`
-* `letter-spacing`
-
-## 웹 폰트
-```CSS
-@font-face {
-  font-family: "myFont";
-  src: url("myFont.woff2");
-}
-html {
-  font-family: "myFont", "Bitstream Vera Serif", serif;
-}
-```
-
-## 글 쓰기 방향
-
-* `writing-mode` : horizontal-tb | vertical-rl | vertical-lr
-
-쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다.
-
--- a/Writerside/topics/Transform.md
+++ b/Writerside/topics/Transform.md
@@ -1,7 +0,0 @@
-# Transform
-
-* `transform`
-* `translate`
-* `rotate`
-* `scale`
-* `transform-origin` : 변환 기준점 좌표를 지정합니다. 기본값은 요소의 가운데입니다.
--- a/Writerside/topics/Transition.md
+++ b/Writerside/topics/Transition.md
@@ -1,23 +0,0 @@
-# Transition
-
-* `transition`
-* `transition-property` : 트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다.
-* `transition-duration` : 트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
-* `transition-timing-function` : 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다.
-  - ease | linear | step-end | steps(4, end)
-* `transition-delay` : 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
-
-
-```CSS
-div {
-  transition: <property> <duration> <timing-function> <delay>;
-}
-```
-
-## 트랜지션 완료 이벤트
-```javascript
-element.addEventListener('transitionend', function(event){
-    console.log(event.propertyName);
-    console.log(event.elapsedTime);
-}, true);
-```
--- a/Writerside/topics/Units-and-Values.md
+++ b/Writerside/topics/Units-and-Values.md
@@ -1,43 +0,0 @@
-# Units and Values
-
-## 절대 길이 단위
-
-* cm
-* mm
-* Q
-* in
-* pc
-* pt
-* px
-
-## 상대 길이 단위
-
-* %
-* em : 요소의 글꼴 크기
-* ex : 요소 글꼴의 'x' 문자 높이
-* ch : 요소 글꼴의 '0' 문자 너비
-* rem : 루트 요소의 글꼴 크기
-* lh : 요소의 줄 높이
-* rlh : 루트 요소의 라인 높이
-* vw : 뷰포트 너비의 1%
-* vh : 뷰포트 높이의 1%
-* vmin : 뷰포트 크기 중 작은 치수의 1%
-* vmax : 뷰포트 크기 중 큰 치수의 1%
-* vb : 블록 축 크기의 1%
-* vi : 인라인 축 크기의 1%
-* svw, svh : 작은 뷰포크 크기의 1%
-* lvw, lvh : 큰 뷰포트 크기의 1%
-* dvw, dvh : 동적인 뷰포트 크기의 1%
-
-## 색상
-
-* 16진수 RGB : #RGB, #RRGGBB, #RGBA, #RRGGBBAA
-* rgb(), rgba()
-* hsl(), hsla()
-
-```CSS
-background-color: rgb(2 121 139);
-background-color: rgb(2 121 139 / .3);
-background-color: hsl(188 97% 28%);
-background-color: hsl(188 97% 28% / .3);
-```
--- a/Writerside/topics/starter-topic.md
+++ b/Writerside/topics/starter-topic.md
@@ -1,2 +0,0 @@
-# CSS
-
--- a/Writerside/v.list
+++ b/Writerside/v.list
@@ -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>
--- a/Writerside/writerside.cfg
+++ b/Writerside/writerside.cfg
@@ -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="c.tree"/>
-</ihp>
--- a/app.sh
+++ b/app.sh
@@ -7,4 +7,6 @@ case $1 in
    git commit -m $(date "+%Y-%m-%dT%H:%M:%S")
    git push origin
    ;;  
-esac
+   *)
+     code .
+esac