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

2
00:00:02,000 --> 00:00:04,810
[조셉 옹 - 하버드 대학교]

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
음, 2 부분으로 용어 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
"기본 타임즈 글꼴을 사용하면? 헬 베티 훨씬 낫다."

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
우리는 여기 처음 롭의 DIV에 스타일 속성을 넣어

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

29
00:01:43,830 --> 00:01:47,880
"국경 : 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
예를 들어, 롭 파란색 배경 헬 베티에서 자신의 헤더 텍스트를 원하는 경우

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

35
00:02:09,270 --> 00:02:19,800
스타일 = "글꼴 - 가족 : 돋움; 배경 - 색상 : 블루, 패딩 : 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 다음 원하는 효과를 봤어

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의 head 섹션에서 스타일 태그를 넣을 수 있습니다.

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
우리는 열기 및 닫기 중괄호를 추가하고 롭의 DIV에 우리의 이전의 인라인 선언을 이동

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
다른 선택의 안에 살고있는 1 셀렉터의 모든 인스턴스를 지정합니다.

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
div를 또는 단락 등.

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

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

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

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
여기에서 나는, 나는 외부 스타일 시트에 연결 해요 상대 속성을 말하고

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
및 요소 바로 뒤에 오는 1 형제의 더하기 기호.

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
우. 미안 해요.