CSS 치트키 2) Icon, Link, List, Table

Default 규칙이 적용되어있을 뿐

세부사항 디자인을 (거의) 모두 바꿀 수 있다.

Icon 

Icon Reference: https://www.w3schools.com/icons/icons_reference.asp

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-cloud"></i>

<i class="fa fa-heart"></i>

Link 

/* a tag Status  a:link, a:visited, a:hover, a:active */

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

List

ul {
    list-style: square inside url("sqpurple.gif");
}

shortcut을 선호하는 나!

Table

Table 은 다른 설명 필요없이 이 샘플! 

<table> <tr> <th> <td>

table, table row, table host, table description

https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy

이런표 스스로 만들어보기!

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

가끔씩 CSS 규칙이 중복되어서, 적용이 안되는 것들이 있는데- 그건 실무하면서 익혀야할듯 ㅠ_ㅠ;