CSS 간단 메뉴얼

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/ 참조