02_CSS -작심 10시간! 나만의 웹사이트 기획하고 만들기
- 2. 목차 1. 오늘 우리가 할 것은? 2. CSS란? 3. CSS를 사용하는 방법 4. Selector(선택자) 5. CSS의 Property들 6. 혼자서 만들어보자!
- 5. CSS
- 6. CSS
- 8. 꾸며주는 놈
- 9. Selector { property: value; } CSS 기본 문법 세미콜론(;)을 붙이는 습관을 기르는 것이 좋아요 (매우 중요)
- 10. CSS를 사용하는 방법 3가지
- 11. HTML파일 내에서 사용하는 방법 1. style 속성 2. style 태그 <TAG style=“css코드”> <style> css코드 </style> 보통 head 안에서 쓴다.
- 12. .css 파일을 따로 만들고 html 파일로 로드하는 방법 중요(가장 많이 사용됨) *** <link rel=“stylesheet” href=“css파일경로”>
- 13. 경로 절대적인 경로값(ex - C:₩어쩌구₩저쩌구) 매우 중요(기본 지식) ******** 상대경로 절대경로 상대적인 경로값(ex - ./a.html) .(현재 폴더), ..(상위폴더)
- 14. 상대경로 연습 a.html .(현재 폴더) ..(상위폴더) HTML b.css CSS One Two c.css
- 15. (다시)CSS 기본 문법 Selector { property: value; }
- 16. 꾸미고자하는 대상을 가리키는 것 Selector(선택자)
- 17. 주요 Selector 태그명 { property: value; } #id { property: value; } .class { property: value; }
- 18. 태그명 p { property: value; } <p id=“id_1”> id_1 아이디 </p> <p class=“class_1”> class_1 클래스1 </p> <p class=“class_1”> class_1 클래스2 </p>
- 19. id? class? #id_1 { property: value; } <p id=“id_1”> id_1 아이디 </p> <p class=“class_1”> class_1 클래스1 </p> <p class=“class_1”> class_1 클래스2 </p>
- 20. id? class? .class_1 { property: value; } <p id=“id_1”> id_1 아이디 </p> <p class=“class_1”> class_1 클래스1 </p> <p class=“class_1”> class_1 클래스2 </p>
- 21. (또 다시)CSS 기본 문법 Selector { property: value; }
- 22. 하나씩 쳐보면서 알아보자
- 23. text -align -decoration font -size -weight -family -color background -color -size -position 그냥 사용가능 Selector { property-option: value; } Option 옵션이라는 용어는 편의상 부르는 말이므로 굳이 용어를 외울 필요는 없음.
- 24. color width height auto... px pt em Color name #COLORCODE(HEX) rgb(red, green, blue) rgba(red, green, blue, alpha) align left center right Value 말 그대로 값이다
- 25. margin / padding
- 28. margin:Opx; 마진 margin / padding 사용법 적용방향 O : 숫자
- 29. margin:Opx Opx; 마진 margin / padding 사용법 적용방향 O : 숫자
- 30. margin:Opx Opx Opx; 마진 margin / padding 사용법 적용방향 O : 숫자
- 31. margin:Opx Opx Opx Opx; 마진 margin / padding 사용법 적용방향 O : 숫자
- 32. margin-left:Opx; 마진 margin / padding 사용법 적용방향 O : 숫자 margin-right:Opx; margin-top:Opx; margin-bottom:Opx;
- 33. position
- 35. fixed
- 36. display
- 38. block inline inline-block none 단락을 방해하지 않는다 width와 height를 바꿀 수 없다
- 39. block inline inline-block none 단락을 방해하지 않는다 width와 height를 바꿀 수 없다
- 40. block inline inline-block none 단락을 방해하지 않는다 width와 height를 바꿀 수 없다
- 41. block inline inline-block none 단락을 방해하지 않는다 width와 height를 바꿀 수 없다 대표 inline 태그 - span, a 등
- 42. block inline inline-block none 새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
- 43. block inline inline-block none 새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
- 44. block inline inline-block none 새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다
- 45. block inline inline-block none 새 줄에서 생성되며 좌우로 꽉찬다 한 줄에는 한놈만 올 수 있다 width와 height를 바꿀 수 있다 대표 block 태그 - div, header, section, footer 등
- 46. block inline inline-block none 생성은 inline처럼!! 크기 변경은 block처럼!!
- 47. block inline inline-block none 생성은 inline처럼!! 크기 변경은 block처럼!!
- 48. block inline inline-block none 생성은 inline처럼!! 크기 변경은 block처럼!!
- 50. 이것들을 활용해서 직접 만들어보자! (물론 이것들만으로는 안됨)
- 57. JAVASCRIPT
- 58. JAVASCRIPT