css 요소

background : 배경변경요소로 축약형태이다.

background-color : 배경변경요소 중 배경 색상 변경요소

color : 내부 텍스트 색상 변경

width : 너비 크기요소 (가로크기) px/% 사용가능

height : 높이 크기요소 (세로크기) px/% 사용가능

padding : 내부 여백 요소 (배경 포함 o) px / % 사용가능

사용 방법 1 - padding: 0(상하좌우) ;

사용 방법 2 - padding: 10px(상하) 10px(좌우) ;

사용 방법 3 - padding-top: 10px ; 상단 여백 10px 상하좌우 다 설정 가능

margin: 외부 여백 요소 (배경 포함 x) px / % 사용가능

사용 방법 1 - margin: 0(상하좌우) ;

사용 방법 2 - margin: 10px(상하) 10px(좌우) ;

사용 방법 3 - margin: 0(상하) auto(좌우) ; (좌우여백이 같다 = 중간으로 정렬해라) 요소의 너비값이 있어야 작동한다.

사용 방법 4 - margin-top: 10px ; 상단 여백 10px 상하좌우 다 설정 가능

text-align : center ; 내부 텍스트 정렬방법 선택

사용 방법 1 - text-align : left ; 텍스트 정렬을 왼쪽으로

사용 방법 2 - text-align : center ; 텍스트 정렬을 가운데로

사용 방법 3 - text-align : right ; 텍스트 정렬을 오른쪽으로

line-height : (줄의 길이) px ;

border : 테두리 설정

사용 방법 - border: 1px(테두리 두께) solid(선종류) black(선색상) ;

box-sizing: border-box ; 내가 설정해둔 width,height 값을 넘어가지 않고 여백 및 테두리를 안쪽으로 설정함

borer-radius : 테두리 원형으로 만들기 px / % 사용가능

사용 방법 1 - border-radius: 10px ; 꼭지점에서 10px 떨어진 부분에서 원형으로 이음

사용 방법 2 - border-radius: 10% ; 꼭지점에서 10% 떨어진 부분에서 원형으로 이음

사용 방법 3 - border-radius: 50% ; 꼭지점에서 50% 떨어진 부분에서 원형으로 이음 - 원이 그려진다.

box-shadow : 5px(x좌표) 5px(y좌표) 5px(블러처리) black(그림자 색상) ;

font-size: px ; 폰트의 크기를 px 값으로 변경

font-weight: nomal ; 폰트의 크기를 px 값으로 변경