images 4장 CSS3로 웹 페이지 꾸미기

손연재


저는 체조선수 손연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치찌개와 막국수를 무척 좋아합니다.

손흥민


저는축구를 좋아합니다.


Web Programming


2학기 학습 내용
60점 이하는 F

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


CSS3 색 활용


deepskyblue(#00BFFF)
brown(#A52A2A)
fuchsia(#FF00FF)
darkorange(#FF8C00)
darkcyan(#008B8B)
olivedrab (#6B8E23)

텍스트 꾸미기


HTML의 태그만으로 기존의 워드 프로세서와 같이 들여쓰기, 정렬, 공백, 간격 등과 세밀한 텍스트 제어를 할 수 없다.

그러나, 스타일 시트는 이를 가능하게 한다. 들여쓰기, 정렬에 대해서 알아본다

Consolas font


font-weight 900

font-weight 100

Italic Style

Oblique Style

현재 크기의 1.5배 크기로


css의 박스모델


css3 박스모델

다양한 테두리


3픽셀 soild

3픽셀 none

3픽셀 hidden

3픽셀 dotted

3픽셀 dashed

3픽셀 double

15픽셀 groove

15픽셀 ridge

15픽셀 inset

15픽셀 outset


background


배경이미지 지정 연습

text shadow


Drop Shadow
Color Shadow
Blur Shadow
Glow Effect
WordArt Effect
3D Effect
Multiple Shadow Effect

박스 그림자 만들기


뚱이와 함께

뚱이와 함께

뚱이와 함께

















마우스 커서

아래에 마우스를 오려 보세요. 커서가 변합니다.

십자 모양 커서

도움말 모양 커서

포인터 모양 커서

프로그램 실행 중 모양 커서

상하 크기 조절 모양 커서

copy 모양 커서

zoom-in 모양 커서

zoom-out 모양 커서

move 모양 커서

auto 모양 커서