CSS는 HTML의 꾸밈을 담당하면서 html의 가독성을 향상시키는 효과를 가져올 수 있다.
html의 head에 css 파일을 link해주고, style은 css에 포함시키는 편이 코드가 깔끔하고 보기 좋다.
html의 각 tag 별로 속성을 부여 할 수 있고, class나 id를 만들어서 속성을 부여할 수 있다.
아래와 같은 문법으로 tag/class/id 별로 속성을 부여한다.
해당 속성이 적용 불가한 경우 무시된다.
body{
/* declaration of property */
}
.my_class{
/* declaration of property */
}
#my_id{
/* declaration of property */
}
자주 적용될 만한 property 몇 개를 아래에 정리해 보았다.
background-color: color_name | #hex_value | rgb(r,g,b);
height | width: valuepx | valuecm | value% ;
margin: auto | valuepx;
padding: valuepx;
text-align: center | left | right | justify;
color: color_name | #hex_value | rgb(r,g,b);
font-family: font_name;
font-style: normal | italic | oblique;
font-size: valuepx | valuecm | value% ;
font-weight: normal | bold | border | value;
font-variant: normal | small-caps;
자세한 사항은 https://www.w3schools.com/css/default.asp 에서 확인 할 수 있음
아이콘은 https://material.io/icons/ 참조
'Programming > CSS' 카테고리의 다른 글
| CSS 구글 폰트 추가하기 (0) | 2017.12.15 |
|---|