menu

CSS test

  • date_range 23/10/2018 00:00 info
    sort
    test
    label

H Elememt

H1

H2

H3

H4

H5
H6

Body

Default

Emphasis, aka italics, with asterisks or underscores. Strong emphasis, aka bold, with asterisks or underscores. Combined emphasis with asterisks and underscores. Strikethrough uses two tildes. Scratch this.

Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type COPY filename. Dinner’s at 5:00. Let’s make that 7. This text has been struck.

Line break

This line is separated by shift-enter.


This line is separated

by enter.

HTML elements

HTML elements The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example

List Types

Definition Term
Definition Description
  1. First Ordered List
  2. Second Ordered List
  • First Unordered List
    • Second Unordered List
      • Third Unordered List

Table

Tables Are Cool
Left-aligned centered right-aligned
Tables Are Cool
Tables Are Cool

Markdown Less Pretty
Still renders nicely
1 2 3

Code block

Console에서는 Github와 Jekyll의 기본 syntax highlighter 인 Rouge를 사용하여 읽기 쉽게 코드 스니펫을 강조 표시 할 수 있습니다.

public class HelloWorld
{
    Public static void main(String[] args){
        System.out.printIn("Hello World!");
    }
}

Blockquotes

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Class

### Rendering sample 
* Markdown:  
	- [Link text](./assets/media/GDC_doc_img.png "btn")	
* Github: 
	- <a href="./assets/media/GDC_doc_img.png" title="btn">Link text</a>
* renderd Document HTML
	- <a href="./assets/media/GDC_doc_img.png" class="btn">Link text</a>

a href

Type Description Reference
Basic text 기본 텍스트 스타일  
colored text 컬러 텍스트는 <span> 태그로 생성합니다.
color 는 클래스를 넣어서 사용합니다. 색상코드는 Material-UI / MaterializeCSS의 500값을 사용합니다.
https://material-ui.com/style/color/
Linked Text 링크가 있는 기본 텍스트 스타일 (a tag)  
Colored Linked Text 링크 텍스트에도 컬러를 추가할 수 있습니다. 링크 문법에 클래스를 추가해서 생성합니다. spec에는 제공하지만 권장하지 않는다.  

기타 정리

elements class rendered sample Note
a color link text http://materializecss.com/color.html
  btn link text http://materializecss.com/buttons.html
  btn outlined link text  
  btn secondary link text  
  btn secondary outlined link text  
  pulse link text http://materializecss.com/pulse.html
  btn secondary pulse link text  
  External Link link text 클릭시 target: _blank
  File download link text  
i icon add 버튼을 눌러 새 문서를 추가한다. http://materializecss.com/icons.html
    lgp 버튼을 눌러 Home 화면으로 돌아간다.  

img

<img src=”https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1z0dsWbLqJkzTGVbmaJViiaNnh4mK-aoP%2Fdesign-theming-2x1-large.png” class=”large center-align”)

alt text