설리번 프로젝트 1기 "작심 10시간! - 나만의 웹사이트 기획하고 개발하기" 커리큘럼 CSS 강의 자료입니다.

1. SULLIVAN PROJECT

2. 목차
1. 오늘 우리가 할 것은?
2. CSS란?
3. CSS를 사용하는 방법
4. Selector(선택자)
5. CSS의 Property들
6. 혼자서 만들어보자!

3. HTML CSS JAVASCRIPT
Front-end
back-end

4. HTML CSS JAVASCRIPT
Front-end
back-end

5. CSS

6. Cascading StyleSheets

7. 꾸며주는 놈

8. Selector {
property: value;
}
CSS 기본 문법
엘리먼트.style.property = value;

9. CSS를 사용하는 방법 3가지

10. HTML파일 내에서 사용하는 방법
1. style 속성
2. style 태그
<TAG style=“css코드”>
<style>
css코드
</style>
보통 head 안에서 쓴다.

11. .css 파일을 따로 만들고
html 파일로 로드하는 방법
중요(가장 많이 사용됨)
***
<link rel=“stylesheet” href=“css파일경로”>

12. 경로
절대적인 경로값(ex - C:₩어쩌구₩저쩌구)
매우 중요(기본 지식)
********
상대경로
절대경로
상대적인 경로값(ex - ./a.html)
.(현재 폴더), ..(상위폴더)

13. 상대경로 연습
a.html
.(현재 폴더) ..(상위폴더)
HTML
b.css
CSS
One Two
c.css

14. (다시)CSS 기본 문법
Selector {
property: value;
}

15. 꾸미고자하는 대상을 가리키는 것
Selector(선택자)

16. 주요 Selector
태그명 {
property: value;
}
#id {
property: value;
}
.class {
property: value;
}

17. 태그명
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>

18. 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>

19. 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>

20. (또 다시)CSS 기본 문법
Selector {
property: value;
}

21. 하나씩 쳐보면서 알아보자

22. text -align
-decoration
font -size
-weight
-family
-color
background
-color
-size
-position
그냥 사용가능
Selector {
property-option: value;
}
Option
옵션이라는 용어는 편의상 부르는 말이므로
굳이 용어를 외울 필요는 없음.

23. 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
말 그대로 값이다

24. margin / padding

25. margin:0px;
마진
상
하
우
좌
padding:0px;
패딩
상
하
우
좌

26. margin:10px;
마진
상
하
우
좌
padding:10px;
패딩
상
하
우
좌

27. margin:Opx; 마진
margin / padding 사용법
적용방향
O : 숫자

28. margin:Opx Opx; 마진
margin / padding 사용법
적용방향
O : 숫자

29. margin:Opx Opx Opx; 마진
margin / padding 사용법
적용방향
O : 숫자

30. margin:Opx Opx Opx Opx; 마진
margin / padding 사용법
적용방향
O : 숫자

31. margin-left:Opx;
마진
margin / padding 사용법
적용방향
O : 숫자
margin-right:Opx;
margin-top:Opx;
margin-bottom:Opx;

32. position

33. relative absolute fixed

34. fixed

35. display

36. block
inline
inline-block
none

37. block
inline
inline-block
none
단락을 방해하지 않는다
width와 height를 바꿀 수 없다

38. block
inline
inline-block
none
단락을 방해하지 않는다
width와 height를 바꿀 수 없다

39. block
inline
inline-block
none
단락을 방해하지 않는다
width와 height를 바꿀 수 없다

40. block
inline
inline-block
none
단락을 방해하지 않는다
width와 height를 바꿀 수 없다
대표 inline 태그 - span, a 등

41. block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다
한 줄에는 한놈만 올 수 있다
width와 height를 바꿀 수 있다

42. block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다
한 줄에는 한놈만 올 수 있다
width와 height를 바꿀 수 있다

43. block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다
한 줄에는 한놈만 올 수 있다
width와 height를 바꿀 수 있다

44. block
inline
inline-block
none
새 줄에서 생성되며 좌우로 꽉찬다
한 줄에는 한놈만 올 수 있다
width와 height를 바꿀 수 있다
대표 block 태그 - div, header, section, footer 등

45. block
inline
inline-block
none
생성은 inline처럼!!
크기 변경은 block처럼!!

46. block
inline
inline-block
none
생성은 inline처럼!!
크기 변경은 block처럼!!

47. block
inline
inline-block
none
생성은 inline처럼!!
크기 변경은 block처럼!!

48. block
inline
inline-block
none
안 보 인 다

49. 이것들을 활용해서 직접 만들어보자!
(물론 이것들만으로는 안됨)

52. 350px
100px
350px
padding 5px

54. HTML CSS JAVASCRIPT
Front-end
back-end

55. HTML CSS JAVASCRIPT
Front-end
back-end

56. JAVASCRIPT