문돌이가 가르치는 웹 프론트엔드 기초 2차시

2. CSS “이게

3. 뭐지?” “왜

4. 쓰는

5. 거지?”

6. CSS Cascading

7. Style

8. Sheets

9. http://pattle.github.io/simpsons-in-css/

10. CSS 제거 전

11. CSS 제거 후

12. 웹의

13. 옷

14. Text

15. Editor

16. Brackets SublimeText Editplus 메모장 등등등.....

17. html head meta charset=utf-8 style /style /head body /body /html

18. html head meta charset=utf-8 style /style /head body /body /html

19. html head meta charset=utf-8 style /style /head body /body /html CSS

20. 코드를

21. 입력하는

22. 부분

23. html head meta charset=utf-8 style /style /head body /body /html HTML

24. 코드를

25. 입력하는

26. 부분

27. 태그명 {속성1 : 값; 속성2 : 값;} .클래스 {속성1 : 값; 속성2 : 값;} #아이디 {속성1 : 값; 속성2 : 값;}

28. CSS HTML Div {background:red;} div Content /div THIS IS div HTML /div span Document /span http://plegic.com/DETS/1.html

29. CSS HTML .class {background:red;} #id {background:blue;} div class=“class” 클래스 /div div id=“id” 아이디 /div div 적용 안된 div /div http://plegic.com/DETS/2.html

30. CSS HTML #box1, #box2 { background:blue; } div id=box1 CSS 적용됨 /div div id=box2 CSS 적용됨 /div div id=box3 CSS 적용안됨 /div http://plegic.com/DETS/3.html

31. CSS HTML #box { background:blue; width:300px; height:300px; } div id=box 정사각형 /div http://plegic.com/DETS/4.html

32. CSS HTML #margin { background:red; margin:50px; } #padding { background:blue; padding:50px; } div id=margin 바깥 여백 적용 /div div id=padding 안쪽 여백 적용 /div http://plegic.com/DETS/5.html

33. CSS HTML #color { color:red; } #size { font-size:20pt; } #underline { text-decoration:underline;} #overline {text-decoration:overline;} #linethrogh {text-decoration:line- through;} div id=color빨간 글씨/div div id=size글자크기/div div id=underline밑줄/div div id=overline윗줄/div div id=linethrogh취소선/div http://plegic.com/DETS/6.html

34. CSS HTML #lighter{ font-weight:lighter;} #normal{ font-weight:normal;} #bold{ font-weight:bold;} #bolder{ font-weight:bolder;} div id=lighter얇은 글씨/div div id=normal기본/div div id=bold굵은 글씨/div div id=bolder매우 굵은 글씨/div http://plegic.com/DETS/7.html

35. CSS HTML #right{ text-align:right; } #left { text-align:left; } #center { text-align:center;} div id=right 우측 정렬 /div div id=left 좌측 정렬 /div div id=center 가운데 정렬 /div http://plegic.com/DETS/8.html

36. CSS HTML #red{ background:red; } #blue { background:blue; } #green { background:green;} div id=red 빨강 배경 /div div id=blue 파랑 배경 /div div id=green 초록 배경 /div http://plegic.com/DETS/9.html

37. CSS HTML #image{ background-image:url('http:// plegic.com/DETS/image/ image.JPG'); height:500px; } div id=image 배경 이미지 /div http://plegic.com/DETS/10.html

38. CSS HTML #norepeat{background-image:url('http://plegic.com/ DETS/image/image.JPG'); background-repeat: no-repeat; height:500px; } #repeatx {background-image:url('http://plegic.com/ DETS/image/image.JPG'); background-repeat: repeat-x; height:500px; } #repeaty {background-image:url('http://plegic.com/ DETS/image/image.JPG'); background-repeat: repeat-y; height:1500px; } div id=norepeat 배경 이미지 반복 안함 /div div id=repeatx 배경 이미지 가로반복 /div div id=repeaty 배경 이미지 세로반복 /div http://plegic.com/DETS/11.html

39. CSS HTML #position1{background-image:url('http:// plegic.com/DETS/image/image.JPG'); background-repeat: no-repeat; background-position:100px 100px; height:500px; } #position2{background-image:url('http:// plegic.com/DETS/image/image.JPG'); background-repeat: no-repeat; background-position:center center; height:500px; } div id=position1 배경 이미지 위치 100px /div div id=position2 배경 이미지 위치 중앙 /div http://plegic.com/DETS/12.html

40. CSS HTML #crosshair {cursor:crosshair} #pointer {cursor:pointer} #move {cursor:move} #e-resize {cursor:e-resize} #ne-resize {cursor:ne-resize} #nw-resize {cursor:nw-resize} #n-resize {cursor:n-resize} #se-resize {cursor:se-resize} #s-resize {cursor:s-resize} #w-resize {cursor:w-resize} #wait {cursor:wait} #help {cursor:help} p id=crosshairCrosshair/p p id=pointerPointer/p p id=moveMove/p p id=e-resizee-resize/p p id=ne-resizene-resize/p p id=nw-resizenw-resize/p p id=n-resizen-resize/p p id=se-resizese-resize/p p id=s-resizes-resize/p p id=w-resizew-resize/p p id=waitWait/p p id=helpHelp/p http://plegic.com/DETS/13.html

41. CSS HTML #border1{ border:1px solid green; } #border2{ border:3px dotted red; } div id=border1 초록 외곽선 /div div id=border2 굵은 빨강 점선 /div http://plegic.com/DETS/14.html

42. CSS HTML #radius1{ border:1px solid green; border-radius:0 0 5px 5px; } #radius2{ border:1px solid green; border-radius:5px 5px 0 0; } div id=radius1 테두리 둥글게 /div div id=radius2 테두리 둥글게 /div http://plegic.com/DETS/15.html

43. CSS HTML #box { border-left:1px solid green; margin-right:20px; padding-top: 30px; padding-bottom: 30px; } div id=box 적용됨 /div http://plegic.com/DETS/16.html

44. CSS HTML #shadow1 { text-shadow:1px 1px 5px black; } #shadow2 { text-shadow:3px 7px 2px blue; } div id=shadow1 글자 그림자 /div div id=shadow2 글자 그림자 /div http://plegic.com/DETS/17.html

45. CSS HTML #shadow1 { box-shadow:1px 1px 5px black; } #shadow2 { box-shadow:3px 7px 2px blue; } div id=shadow1 상자 그림자 /div div id=shadow2 상자 그림자 /div http://plegic.com/DETS/18.html

46. CSS HTML #shadow1 { box-shadow:1px 1px 5px black; } #shadow2 { box-shadow:3px 7px 2px blue; } div id=shadow1 상자 그림자 /div div id=shadow2 상자 그림자 /div http://plegic.com/DETS/18.html

48. - ㅜ_ㅜ - 막상 1차시를 만들어 진행해보니 시간이 부족해 CSS 부분만 연강을 진행했습니다.

49. EB13 조동현 cdhnet98@gmail.com

문돌이가 가르치는 웹 프론트엔드 기초 2차시

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (20)

문돌이가 가르치는 웹 프론트엔드 기초 2차시