CSS 스타일 맛보기

나는 웹 프로그래밍을 좋아합니다.

나는 집에서 자는 걸 좋아합니다.

Web Programming

>2학기 학습 내용
  • HTML5
  • CSS
  • JAVASCRIPT
>60점 이하는 F!
2학기 학습 내용입니다.
  • HTML5
  • CSS
  • JAVASCRIPT
60점 이하는 F
deepskyblue(#00BFFF)
brown(#A52A2A)
fuchsia(#FF00FF)
darkorange(#FF8C00)
darkcyan(#008B8B)
olivedrab (#6B8E23)
dontknow (#6B8E23)

텍스트 꾸미기

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

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

Consolas font

font-weight 900

font-weight 100

Italic Style

Oblique Style

현재 크기의 1.5배 크기로

박스 모델

박스모델

margin 30px, padding 20px, border 5px의 빨간색 점선

스펀지밥

다양한 테두리

3픽셀 soild

3픽셀 none

3픽셀 hidden

3픽셀 dotted

3픽셀 dashed

3픽셀 double

15픽셀 groove

15픽셀 ridge

15픽셀 inset

15픽셀 outset

둥근 모서리 테두리

반지름 50픽셀의 둥근 모서리

반지름 0, 20, 40, 60 둥근 모서리

반지름 0, 20, 40, 20 둥근 모서리

반지름 0, 20, 0, 20 둥근 모서리

반지름 50의 둥근 점선 모서리

이미지 테두리 만들기

다음은 원본 이미지입니다.
밥

20x20 크기의 회색 테두리를 가진 P 태그

round 스타일 이미지 테두리

repeat 스타일 이미지 테두리

stretch 스타일 이미지 테두리

div 박스에 배경 꾸미기

SpongeBob is an over-optimistic sponge that annoys other characters.

텍스트 그림자 만들기

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

박스 그림자 만들기

뚱이와 함께

뚱이와 함께

뚱이와 함께

마우스 커서

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

십자 모양 커서

도움말 모양 커서

포인터 모양 커서

프로그램 실행 중 모양 커서

상하 크기 조절 모양 커서