4. CSS

폰트스타일: font-style

normal, italic, oblique

 

폰트 굵기: font-weight

100~900사이 숫자

normal(400), bolder(700), lighter

 

단축 프로퍼티

font

font-style, font-weight, font-size, font-family를 순서대로 지정

font-size, font-family는 필수, 나머지는 생략가능(디폴트 처리)

 

박스모델

콘텐츠, 내부여백 padding, 테두리 border, 여백 margin

박스를 제어하는 프로퍼티: width, height, margin, padding

 

박스의 색

테두리색(border-color)만 임의로 지정 가능

 

테두리 두께, 모양, 색

border-color

border-width

border-color

border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

 

테두리 꾸미는 단축 프로퍼티

boder: width style color;

 

고급 테두리 꾸미기

둥근 모서리 테두리나 이미지 테두리 등

둥근 모서리 테두리: border-radius, border-top-left, boreder-top-right

border-radius: 0px 20px 40px 60px; >> 왼쪽위부터 시계방향으로 적용. 일부만 있을 경우 대칭점에 위치한 것과 동일하게 적용

이미지 테두리:border-image

border-width에 0이 아닌값 넣어야함

border-image가 border-style대신 지정되므로 style이 먼저 지정되어 있어야함.

round: 에지 이미지 반복 배치, 테두리 길이만큼 이미지 크기 조절

repeat: 테두리 길이 고려 없이 이미지 반복(이미지잘림ㅇ)

stretch: 에지 이미지를 테두리길이만큼 늘여서 배치

 

배경

background-color, background-image 중 image가 우선

배경 이미지 위치

background-position: left top(디폴트), left center, center center, 등

배경 이미지의 크기

background-size

배경이미지 반복 출력

background-repeat

no-repeat, repeat(디폴트), repeat-x, repeat-y

background 단축 프로퍼티

background: color, image, (position/size, repeat, origin;)

 

시각적 효과

이미지는 웹 페이지의 로딩 속도를 느리게 한다.

텍스트 그림자, text-shadow

text-shadow: h-shadow c-shadow blur-radius color;

 

 

박스 그림자, box-shadow

box-shadow: h-shadow v-shadow blur-radius spread-radius color ;

 

마우스 커서 제어, cursor

cursor: value;