2차시 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. CSS

7. Cascading StyleSheets

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

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

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

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

34. relative absolute fixed

35. fixed

36. display

37. block
inline
inline-block
none

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처럼!!

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

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

53. 350px
100px
350px
padding 5px

55. HTML CSS JAVASCRIPT
Front-end
back-end

56. HTML CSS JAVASCRIPT
Front-end
back-end

57. JAVASCRIPT

58. JAVASCRIPT