diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index 23baf58..0000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -# 디폴트 무시된 파일 -/shelf/ -/workspace.xml diff --git a/.idea/copyright/Elex_Project.xml b/.idea/copyright/Elex_Project.xml deleted file mode 100644 index 72d9189..0000000 --- a/.idea/copyright/Elex_Project.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/copyright/profiles_settings.xml b/.idea/copyright/profiles_settings.xml deleted file mode 100644 index ce14878..0000000 --- a/.idea/copyright/profiles_settings.xml +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 639900d..0000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 619523d..0000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 94a25f7..0000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/Writerside/c.list b/Writerside/c.list deleted file mode 100644 index c4c77a2..0000000 --- a/Writerside/c.list +++ /dev/null @@ -1,6 +0,0 @@ - - - - - \ No newline at end of file diff --git a/Writerside/c.tree b/Writerside/c.tree deleted file mode 100644 index 84dc448..0000000 --- a/Writerside/c.tree +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/Writerside/cfg/buildprofiles.xml b/Writerside/cfg/buildprofiles.xml deleted file mode 100644 index 2fd3262..0000000 --- a/Writerside/cfg/buildprofiles.xml +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - true - - - - diff --git a/Writerside/images/CSS_Flex.svg b/Writerside/images/CSS_Flex.svg deleted file mode 100644 index 319fda8..0000000 --- a/Writerside/images/CSS_Flex.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/Writerside/images/completion_procedure.png b/Writerside/images/completion_procedure.png deleted file mode 100644 index 3535a3f..0000000 Binary files a/Writerside/images/completion_procedure.png and /dev/null differ diff --git a/Writerside/images/completion_procedure_dark.png b/Writerside/images/completion_procedure_dark.png deleted file mode 100644 index a65beb0..0000000 Binary files a/Writerside/images/completion_procedure_dark.png and /dev/null differ diff --git a/Writerside/images/convert_table_to_xml.png b/Writerside/images/convert_table_to_xml.png deleted file mode 100644 index 2518a64..0000000 Binary files a/Writerside/images/convert_table_to_xml.png and /dev/null differ diff --git a/Writerside/images/convert_table_to_xml_dark.png b/Writerside/images/convert_table_to_xml_dark.png deleted file mode 100644 index 4716122..0000000 Binary files a/Writerside/images/convert_table_to_xml_dark.png and /dev/null differ diff --git a/Writerside/images/new_topic_options.png b/Writerside/images/new_topic_options.png deleted file mode 100644 index bc6abb6..0000000 Binary files a/Writerside/images/new_topic_options.png and /dev/null differ diff --git a/Writerside/images/new_topic_options_dark.png b/Writerside/images/new_topic_options_dark.png deleted file mode 100644 index bf3e48d..0000000 Binary files a/Writerside/images/new_topic_options_dark.png and /dev/null differ diff --git a/Writerside/topics/Animation.md b/Writerside/topics/Animation.md deleted file mode 100644 index a29b36d..0000000 --- a/Writerside/topics/Animation.md +++ /dev/null @@ -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; - } -} -``` \ No newline at end of file diff --git a/Writerside/topics/Box-Model.md b/Writerside/topics/Box-Model.md deleted file mode 100644 index f780e42..0000000 --- a/Writerside/topics/Box-Model.md +++ /dev/null @@ -1,105 +0,0 @@ -# Box - -블록 요소는 새로운 줄에서 시작하며, 상위 컨테이너 너비의 100%를 채웁니다. `

`, `

`, `

` 등은 기본작으로 블록 요소입니다. -인라인 요소는 새로운 줄에서 시작하지 않으며, `width`, `height` 속성은 무시됩니다. ``, ``, ``, `` 등은 기본적으로 인라인 요소입니다. - -박스의 유형은 `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 diff --git a/Writerside/topics/Flexbox.md b/Writerside/topics/Flexbox.md deleted file mode 100644 index c3bea7c..0000000 --- a/Writerside/topics/Flexbox.md +++ /dev/null @@ -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입니다. 낮은 순위의 아이템이 먼저 표시됩니다. \ No newline at end of file diff --git a/Writerside/topics/Floating.md b/Writerside/topics/Floating.md deleted file mode 100644 index 0e375ae..0000000 --- a/Writerside/topics/Floating.md +++ /dev/null @@ -1,4 +0,0 @@ -# Floating - -* `float` : left | right | none | inline-start | inline-end -* `clear` : left | right | both \ No newline at end of file diff --git a/Writerside/topics/Grid.md b/Writerside/topics/Grid.md deleted file mode 100644 index bae6bbb..0000000 --- a/Writerside/topics/Grid.md +++ /dev/null @@ -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`에서 사용될 이름을 지정합니다. \ No newline at end of file diff --git a/Writerside/topics/Layouts.md b/Writerside/topics/Layouts.md deleted file mode 100644 index d3f7e18..0000000 --- a/Writerside/topics/Layouts.md +++ /dev/null @@ -1,11 +0,0 @@ -# Layouts - -## Normal Flow - -기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이를 갖습니다. -인라인 요소는 자체 내용물의 최대 높이와 최대 너비를 갖습니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. - -블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. -인라인 요소는 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다. - - diff --git a/Writerside/topics/Media-Query.md b/Writerside/topics/Media-Query.md deleted file mode 100644 index e927784..0000000 --- a/Writerside/topics/Media-Query.md +++ /dev/null @@ -1,17 +0,0 @@ -# Media Query - -```CSS -@media screen and (min-width: 600px) { - body { - color: blue; - } -} -``` - -```CSS -@media (orientation: landscape) { - body { - color: rebeccapurple; - } -} -``` \ No newline at end of file diff --git a/Writerside/topics/Multi-Column.md b/Writerside/topics/Multi-Column.md deleted file mode 100644 index 409a0aa..0000000 --- a/Writerside/topics/Multi-Column.md +++ /dev/null @@ -1,9 +0,0 @@ -# 다단 레이아웃 - -* `column-count` -* `column-width` -* `column-gap` -* `column-rule` - * `column-rule-color` - * `column-rule-style` : dotted | solid | ... - * `column-rule-width` \ No newline at end of file diff --git a/Writerside/topics/Positioning.md b/Writerside/topics/Positioning.md deleted file mode 100644 index 15b99d4..0000000 --- a/Writerside/topics/Positioning.md +++ /dev/null @@ -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` \ No newline at end of file diff --git a/Writerside/topics/Responsive.md b/Writerside/topics/Responsive.md deleted file mode 100644 index 3c76bb6..0000000 --- a/Writerside/topics/Responsive.md +++ /dev/null @@ -1,8 +0,0 @@ -# 반응형 레이아웃 - - -```html - -``` - - diff --git a/Writerside/topics/Scroll-Snap.md b/Writerside/topics/Scroll-Snap.md deleted file mode 100644 index 86e45ed..0000000 --- a/Writerside/topics/Scroll-Snap.md +++ /dev/null @@ -1,7 +0,0 @@ -# Scroll Snap - -* `scroll-snap-type` -* `scroll-snap-align` -* `scroll-snap-stop` -* `scroll-margin` -* `scroll-padding` \ No newline at end of file diff --git a/Writerside/topics/Selectors.md b/Writerside/topics/Selectors.md deleted file mode 100644 index 56df951..0000000 --- a/Writerside/topics/Selectors.md +++ /dev/null @@ -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 { -} -``` diff --git a/Writerside/topics/Styling-Form.md b/Writerside/topics/Styling-Form.md deleted file mode 100644 index 758a08a..0000000 --- a/Writerside/topics/Styling-Form.md +++ /dev/null @@ -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` \ No newline at end of file diff --git a/Writerside/topics/Styling-Image-and-Media.md b/Writerside/topics/Styling-Image-and-Media.md deleted file mode 100644 index 29fc8a9..0000000 --- a/Writerside/topics/Styling-Image-and-Media.md +++ /dev/null @@ -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` - - diff --git a/Writerside/topics/Styling-Link.md b/Writerside/topics/Styling-Link.md deleted file mode 100644 index 0c3c320..0000000 --- a/Writerside/topics/Styling-Link.md +++ /dev/null @@ -1,21 +0,0 @@ -# Styling Link - -```CSS -a { -} - -a:link { -} - -a:visited { -} - -a:focus { -} - -a:hover { -} - -a:active { -} -``` \ No newline at end of file diff --git a/Writerside/topics/Styling-List.md b/Writerside/topics/Styling-List.md deleted file mode 100644 index 6aac2ef..0000000 --- a/Writerside/topics/Styling-List.md +++ /dev/null @@ -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` \ No newline at end of file diff --git a/Writerside/topics/Styling-Table.md b/Writerside/topics/Styling-Table.md deleted file mode 100644 index fbc2880..0000000 --- a/Writerside/topics/Styling-Table.md +++ /dev/null @@ -1,6 +0,0 @@ -# Styling Table - -* table-layout -* border-collapse -* caption-side : top | bottom - diff --git a/Writerside/topics/Styling-Text.md b/Writerside/topics/Styling-Text.md deleted file mode 100644 index 4e9c8f7..0000000 --- a/Writerside/topics/Styling-Text.md +++ /dev/null @@ -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) 방향을 변경합니다. 블록 크기는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. 인라인 크기는 항상 문장이 표시되는 방향입니다. - diff --git a/Writerside/topics/Transform.md b/Writerside/topics/Transform.md deleted file mode 100644 index f558e18..0000000 --- a/Writerside/topics/Transform.md +++ /dev/null @@ -1,7 +0,0 @@ -# Transform - -* `transform` -* `translate` -* `rotate` -* `scale` -* `transform-origin` : 변환 기준점 좌표를 지정합니다. 기본값은 요소의 가운데입니다. \ No newline at end of file diff --git a/Writerside/topics/Transition.md b/Writerside/topics/Transition.md deleted file mode 100644 index f0dd86e..0000000 --- a/Writerside/topics/Transition.md +++ /dev/null @@ -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: ; -} -``` - -## 트랜지션 완료 이벤트 -```javascript -element.addEventListener('transitionend', function(event){ - console.log(event.propertyName); - console.log(event.elapsedTime); -}, true); -``` \ No newline at end of file diff --git a/Writerside/topics/Units-and-Values.md b/Writerside/topics/Units-and-Values.md deleted file mode 100644 index dc041e1..0000000 --- a/Writerside/topics/Units-and-Values.md +++ /dev/null @@ -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); -``` \ No newline at end of file diff --git a/Writerside/topics/starter-topic.md b/Writerside/topics/starter-topic.md deleted file mode 100644 index cc901ef..0000000 --- a/Writerside/topics/starter-topic.md +++ /dev/null @@ -1,2 +0,0 @@ -# CSS - diff --git a/Writerside/v.list b/Writerside/v.list deleted file mode 100644 index 2d12cb3..0000000 --- a/Writerside/v.list +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/Writerside/writerside.cfg b/Writerside/writerside.cfg deleted file mode 100644 index a4372d7..0000000 --- a/Writerside/writerside.cfg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/app.sh b/app.sh index 6713f60..4d805c6 100755 --- 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 \ No newline at end of file + *) + code . +esac