KTH 역량강화 - UI개발 - 6차

814 views

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
814
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

KTH 역량강화 - UI개발 - 6차

  1. 1. CSS STUDY
  2. 2. PADDING
  3. 3. padding-top padding-rightpadding-bottom padding-left
  4. 4. padding-left:1px;
  5. 5. padding:TOP RIGHT BOTTOM LEFT;
  6. 6. padding:TOP RIGHT BOTTOM LEFT;padding:1px;padding:1px 2px;padding:1px 2px 3px;padding:1px 2px 3px 4px;
  7. 7. MARGIN
  8. 8. margin-topmargin-rightmargin-bottom margin-left
  9. 9. margin-left:1px;
  10. 10. margin:TOP RIGHT BOTTOM LEFT;
  11. 11. MARGIN COLLAPSING
  12. 12. 서로 다른 요소에 수직 방향의 마진이 접해 있는 경우 두 값의 합이 아닌 둘 중에 큰 값이 적용
  13. 13. BORDER
  14. 14. border-top border-top-color border-top-style border-top-width border border-colorborder-left border-right border-styleborder-left-color border-right-color border-widthborder-left-style border-right-styleborder-left-width border-right-width border-collapse border-spacing border-bottom border-bottom-color border-bottom-style border-bottom-width
  15. 15. border border borderWIDTH STYLE COLOR 1px solid #fff dotted dashed double groove ridge outset inset
  16. 16. border-left:WIDTH STYLE COLOR;border-style: STYLE STYLE STYLE STYLE; border:WIDTH STYLE COLOR;
  17. 17. WIDTH, HEIGHT
  18. 18. min-widthmax-widthmin-heightmax-height
  19. 19. BACKGROUND
  20. 20. background-color background-image background-repeatbackground-attachment background-position
  21. 21. background:COLOR IMAGE REPEAT ATTACHMENT POSITION;
  22. 22. background:#fff url(bg.gif) repeat-x fixed 5px 5px;
  23. 23. IMAGE REPLACEMENT
  24. 24. 의미가 포함된 이미지를 배경으로 사용하고 그와 같은 의미의 텍스트를 숨겨시각이 있는 사용자에게는 이미지를 보여주고 스크린리더는 텍스트를 읽게 만드는 기법
  25. 25. IMAGE SPRITE
  26. 26. IR기법에 사용 될 이미지를 그룹화 하여네트워크 리퀘스트 및 용량을 줄이는 기법
  27. 27. 사용 빈도 + 이미지의 전체적 색상 +background-repeat 종류
  28. 28. HASLAYOUT
  29. 29. LAYOUT? 각각의 요소가 어떻게 렌더링되고 다른 요소들과 어떻게 상호작용 하는지를결정하는 윈도우즈 버전 IE만의 독자적인 개념
  30. 30. 흔히 발생하는 IE의 float 버그 기본 속성(width, height 등)이 표준과 다르게 적용되는 박스요소와 컨테이너(container) 사이에 마진(margin)이 합쳐지는 현상 리스트(ul, ol 등)를 만들 때 나타나는 다양한 현상들 배경 이미지 위치를 다르게 해석하는 문제 스크립트를 사용할 때 발생하는 브라우저 호환성 문제 기타 등등 주절주절주절
  31. 31. position: absolutefloat: left|rightdisplay: inline-blockwidth: ‘auto’외의 모든 값height: ‘auto’외의 모든 값zoom: ‘normal’외의 모든 값 (IE 전용)writing-mode: tb-rl (IE 전용)overflow: hidden|scroll|auto (IE7만 적용됨)overflow-x|-y: hidden|scroll|auto (IE7만 적용됨)position: fixed, min-width, max-width, min-height, max-height (IE 7만)IE6 이상의 표준 렌더링 모드에서는 인라인 요소의 width, height 속성이 무시
  32. 32. zoom:1;

×