1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [CSS]는

2
00:00:02,000 --> 00:00:04,810
[요셉 옹 - 하버드 대학교 (Harvard University)]

3
00:00:04,810 --> 00:00:07,160
[이 CS50입니다. - CS50.TV]

4
00:00:07,160 --> 00:00:11,430
>> 오늘 우리는 CSS에 대해 얘기하거나 규약에서 캐스 케이 딩 스타일 시트를됩니다.

5
00:00:11,430 --> 00:00:14,330
>> 그래서 CSS가 정확히 무엇입니까?

6
00:00:14,330 --> 00:00:17,120
음,이 부분에 아래 용어 CSS를 깨 보자 :

7
00:00:17,120 --> 00:00:19,510
캐스 케이 딩 및 스타일 시트.

8
00:00:19,510 --> 00:00:23,900
캐스 케이 딩은 좀 더 복잡하고, 우리가 다른 동영상에서 다룰 것이다 겠죠.

9
00:00:23,900 --> 00:00:27,930
그러나 우선, 스타일 시트 CSS는 무엇을 아주 많이 힌트를줍니다.

10
00:00:27,930 --> 00:00:30,880
그것은 웹 페이지의 HTML에 스타일을 추가

11
00:00:30,880 --> 00:00:33,720
웹 페이지가 심미적 모습을 변화.

12
00:00:33,720 --> 00:00:38,310
이 페이지에서 텍스트의 글꼴에서 컨텐츠의 위치에 이르기까지를 의미

13
00:00:38,310 --> 00:00:43,800
둥근 상자의 모서리를 만들거나 텍스트에 그림자를 추가하는 등 다른 좋은 점이 있습니다.

14
00:00:43,800 --> 00:00:48,230
일 화면에 애니메이션 할 하듯이 미친 짓을 할 수 있습니다.

15
00:00:48,230 --> 00:00:51,700
>> 그래서 우리는 HTML과 CSS를 어떻게 사용합니까?

16
00:00:51,700 --> 00:00:53,620
방금 쓴이 불쌍한 보이는 사이트를보십시오.

17
00:00:53,620 --> 00:00:57,290
롭 지금이 사이트를보고 있다면, 그는 아마 같은 걸 말하고 싶지만

18
00:00:57,290 --> 00:01:01,730
"와! 내 소개 끔찍. 요셉, 당신이 나쁜 디자이너 야."

19
00:01:01,730 --> 00:01:05,110
"기본 타임즈 글꼴을 사용하면? Helvetica 등이 아주 좋아합니다."

20
00:01:05,110 --> 00:01:09,600
>> 그래서 롭 원하는 스타일을 적용 할 수있는 가장 간단한 방법이 될 수 있을까요?

21
00:01:09,600 --> 00:01:13,530
사람들의 가장 눈에 띄는 방법 많은 초기 CSS를 작성

22
00:01:13,530 --> 00:01:17,470
요소 자체에 우리가 스타일 선언 바로 부르는 넣어하는 것이 었습니다

23
00:01:17,470 --> 00:01:20,560
HTML 스타일 특성을 사용합니다.

24
00:01:20,560 --> 00:01:26,420
스타일 선언은 단순히 HTML 요소의 CSS 속성으로 구성되어 있습니다 우리는 변경하고자하는

25
00:01:26,420 --> 00:01:32,140
끝의 재산과 세미콜론의 새 값으로 다음에 콜론이 나타납니다.

26
00:01:32,140 --> 00:01:36,600
예를 들어, 우선은 남편이 자신의 소개를 주위에 검은 색 테두리를 원해요.

27
00:01:36,600 --> 00:01:40,040
여기서 먼저 롭의 사업부에 스타일 속성을 넣어

28
00:01:40,040 --> 00:01:43,830
그런 다음 큰 따옴표 안에 CSS 선언을 넣어 :

29
00:01:43,830 --> 00:01:47,880
"국경 : 1 x 1 픽셀 단단한 검은 색;"

30
00:01:47,880 --> 00:01:52,480
1 픽셀은 테두리의 폭을 나타냅니다, 고체는 테두리의 스타일을 의미합니다

31
00:01:52,480 --> 00:01:56,640
그리고 끝 부분에있는 색상은 테두리의 색상이 무엇인지를 결정합니다.

32
00:01:56,640 --> 00:02:01,220
>> 우리가 요소에 여러 스타일을하려는 경우 순서에서이 선언을 작성합니다.

33
00:02:01,220 --> 00:02:05,650
예를 들어, 롭 파란색 배경으로 Helvetica 등에서 자신의 헤더 텍스트를 원하는 경우

34
00:02:05,650 --> 00:02:09,270
과 텍스트 주위에 더 많은 공간, 우리는이 작업을 수행 할 수 있습니다 :

35
00:02:09,270 --> 00:02:19,800
스타일 = "글꼴 - 가족 : Helvetica 등, 배경 - 색상 : 블루, 패딩 : 5px;"

36
00:02:22,150 --> 00:02:28,010
마지막 세미콜론은 실제로 선택 사항입니다, 그런데 사람들은 보통 일관성을 위하여를 위해하도록하겠습니다.

37
00:02:28,010 --> 00:02:32,180
>> 우리는 냉각기 및 더 복잡한 CSS 속성 중 일부를 설명 절약 할 수

38
00:02:32,180 --> 00:02:34,140
다른 동영상에 대한.

39
00:02:34,140 --> 00:02:38,780
당신이 마음에 뭔가가 있으면 CSS 다음 원하는 효과를 Google로 검색

40
00:02:38,780 --> 00:02:41,590
아마도 당신에게 아주 좋은 결과를 제공합니다.

41
00:02:41,590 --> 00:02:44,530
좋은 점은, CSS 아주 광범위 때문입니다

42
00:02:44,530 --> 00:02:48,470
당신이 원하는 무엇이든이있을 경우 매우 확률이 있습니다 - 이유에서 -

43
00:02:48,470 --> 00:02:51,350
CSS 아마도 작업을 수행 할 수 있습니다.

44
00:02:51,350 --> 00:02:54,750
우리는 인라인 스타일을 스타일을 이런 종류의를 호출합니다.

45
00:02:54,750 --> 00:02:59,030
요소 스타일은 시작 태그에 맞춰, 음입니다.

46
00:02:59,030 --> 00:03:01,770
>> 정말 구성 할 원하는 사람들을 위해,

47
00:03:01,770 --> 00:03:05,800
이 모든 모습을 혼란에 성가 셨나 약간을 시작 할 수 있습니다.

48
00:03:05,800 --> 00:03:09,810
이 페이지에있는 모든 요소에이 일을 할 수 밖에없는 경우, 상상해

49
00:03:09,810 --> 00:03:13,690
플러스 지금 HTML과 CSS는 모두 함유하고 복잡합니다.

50
00:03:13,690 --> 00:03:15,500
총, 맞죠?

51
00:03:15,500 --> 00:03:21,110
이 문제를 해결하려면, 사람들은 결국 자신의 HTML 마크 업을 분리에 잡기 시작

52
00:03:21,110 --> 00:03:26,370
CSS 선택자라는 것을 사용하여 자신의 CSS 스타일링에서.

53
00:03:26,370 --> 00:03:31,780
CSS 선택자이 선언을 적용 할 요소를 선택하는 데 사용됩니다.

54
00:03:31,780 --> 00:03:38,600
CSS 선언의 목록과 결합 선택기는 종종 CSS 규칙이라고합니다.

55
00:03:38,600 --> 00:03:43,260
이 규칙은 열고 닫는 HTML 스타일 태그 사이에 넣어 될

56
00:03:43,260 --> 00:03:46,120
종종 문서의 머리 인치

57
00:03:46,120 --> 00:03:49,000
>> 그것은 예를 볼 훨씬 쉽게

58
00:03:49,000 --> 00:03:53,000
그래서 간단한 CSS 규칙을 생성하여 시작하자.

59
00:03:53,000 --> 00:03:58,180
첫째,이 우리의 HTML의 헤드 섹션에 스타일 태그를 넣어 보자.

60
00:03:58,180 --> 00:04:00,020
다음, 선택 도구입니다.

61
00:04:00,020 --> 00:04:03,490
우리는 간단한 선택자 중 하나 인 해시 기호를 사용하여 시작됩니다

62
00:04:03,490 --> 00:04:08,080
어떤은 ID 속성으로 HTML 요소를 선택합니다.

63
00:04:08,080 --> 00:04:11,850
이 경우에서 우리는 로브의 소개를 나타냅니다 div를 선택합니다

64
00:04:11,850 --> 00:04:16,740
div는의 ID, 롭 다음 해시 기호를 입력하여.

65
00:04:16,740 --> 00:04:18,579
이제 선언.

66
00:04:18,579 --> 00:04:24,090
우리는 열고 닫는 괄호를 추가하고 로브의 사업부에 우리의 이전 인라인 선언을 이동

67
00:04:24,090 --> 00:04:26,880
이 괄호의 안쪽, 새로 고침,

68
00:04:26,880 --> 00:04:34,160
와, 멋진, 롭 소개 아직 주위에 검은 색 테두리 마이너스 혼란 인라인면을 갖추고 있습니다.

69
00:04:34,160 --> 00:04:39,380
>> 이제 우리가 롭의 소개의 H1 내부를 선택했다면?

70
00:04:39,380 --> 00:04:44,400
당신은 "가 거기에 ID를 넣어 그런 다음 이전 스타일을 이동하세요."생각할 수

71
00:04:44,400 --> 00:04:48,760
그 작동하지만 CSS는 요소를 선택 해줘서 다른 방법이 있습니다

72
00:04:48,760 --> 00:04:53,490
우리가 연결자 간단한 선택자를 섞어 부르는 사용하는 것입니다.

73
00:04:53,490 --> 00:04:57,740
예를 들어, 공백 문자는 연결자으로 사용할 수 있습니다

74
00:04:57,740 --> 00:05:03,510
다른 선택의 안쪽에 살고있는 한 선택기의 모든 인스턴스를 지정합니다.

75
00:05:03,510 --> 00:05:06,630
그게 실제보다 훨씬 더 복잡한 것 같습니다.

76
00:05:06,630 --> 00:05:08,830
다음은 예입니다.

77
00:05:08,830 --> 00:05:13,900
우리는 #, 털 공간을 추가하고 H1으로 따라 입력합니다

78
00:05:13,900 --> 00:05:18,840
또 다른 간단한 선택은 요소의 유형을 선택 태그 선택기를 호출

79
00:05:18,840 --> 00:05:21,200
divs 또는 단락처럼.

80
00:05:21,200 --> 00:05:26,140
공간은 모든 CSS 선언을 적용, 우리의 두 단일 선택을 결합

81
00:05:26,140 --> 00:05:32,560
그리고 id = "을 강도"로 요소의 내부에 살고 H1 태그에 중괄호.

82
00:05:32,560 --> 00:05:38,290
그냥 작동을 설득, 나는 흰색, 새로 고침에 글꼴 색상을 변경합니다

83
00:05:38,290 --> 00:05:42,090
그리고, 봐, 롭 헤더 지금은 흰색입니다.

84
00:05:42,090 --> 00:05:47,510
>> 이 작품의 모든 규칙 대신 인라인 스타일을 사용하여 해당을 보여갑니다

85
00:05:47,510 --> 00:05:50,510
우리는 많은 청소기 코드를 얻을 수 있습니다.

86
00:05:50,510 --> 00:05:53,900
이 스타일 블록이 시작하면 사실, 조금 큰지고

87
00:05:53,900 --> 00:05:58,340
난 모두 다른 파일에 이러한 스타일을 당겨 수 있습니다.

88
00:05:58,340 --> 00:06:05,120
>> 이 문서에 CSS로이 새 파일을 포함 시키려면 그냥 HTML의 링크 태그를 사용합니다.

89
00:06:05,120 --> 00:06:10,320
여기 내 말은, 난 외부 스타일 시트에 연결하는 건 rel 속성을있는 그대로 말한 거예요

90
00:06:10,320 --> 00:06:14,840
내 href 속성으로 파일의 경로를 지정.

91
00:06:14,840 --> 00:06:20,290
지금 내 HTML 마크 업 및 CSS는 완전히 별도의 파일에 잘 조직되어

92
00:06:20,290 --> 00:06:26,090
이는 거의 항상 디자이너가 HTML과 CSS 작업을 선호하는 방법입니다.

93
00:06:26,090 --> 00:06:30,180
>> 당신이 궁금해하는 경우, 단일 선택은 ID 선택자을 포함

94
00:06:30,180 --> 00:06:33,100
우리가 본 것과 같은 및 태그 선택자

95
00:06:33,100 --> 00:06:38,610
뿐만 아니라 클래스 특정 클래스와 요소를 선택하는 선택자,

96
00:06:38,610 --> 00:06:44,000
유형과 같은 다른 속성에 의해 요소를 선택하기위한 속성 선택자 = "라디오"

97
00:06:44,000 --> 00:06:49,180
라디오 버튼 입력과 같은 pseudoselectors에 마우스를 올려 놓고 초점을

98
00:06:49,180 --> 00:06:55,260
상호 작용 요소가 발생할 위로 마우스를 좋아하면 스타일을 지정하십시오.

99
00:06:55,260 --> 00:06:58,950
>> 일반적인 연결자은 모든 어린이를위한 공백을 포함

100
00:06:58,950 --> 00:07:02,080
와 쉼표는 선택자을 구분합니다.

101
00:07:02,080 --> 00:07:06,370
당신이 발생할 수있는 기타 만 직접 아이들을위한 화살표를 포함

102
00:07:06,370 --> 00:07:10,440
요소 이후에 발생하는 모든 형제 자매의 물결,

103
00:07:10,440 --> 00:07:16,010
및 요소 바로 뒤에 오는 한 형제의 더하기 기호.

104
00:07:16,010 --> 00:07:18,540
>> 이 선택자 및 연결자를 결합함으로써,

105
00:07:18,540 --> 00:07:22,910
당신은 특정 웹 페이지에 달성 할 수 스타일링의 범위를 확장 할 수 있습니다

106
00:07:22,910 --> 00:07:25,050
보다 효율적으로 CSS 써주세요.

107
00:07:25,050 --> 00:07:28,370
당신이 날 여기에 입력 표시 CSS의 라인의 단지 몇로,

108
00:07:28,370 --> 00:07:34,460
난 빠르게과 같이 생긴 모양과 같이 할 수 있습니다.

109
00:07:34,460 --> 00:07:37,080
>> 나는 요셉, 그리고이 CS50입니다.

110
00:07:37,080 --> 00:07:39,260
>> [CS50.TV]

111
00:07:39,260 --> 00:07:40,780
>> 음, 어디서부터 시작합니까?

112
00:07:40,780 --> 00:07:44,140
[웃음] 그래 - 나 없이는 보자.

113
00:07:44,140 --> 00:07:47,300
추가 - 저 문구를 변경 보자.

114
00:07:50,580 --> 00:07:52,470
우. 미안 해요.