1
00:00:00,000 --> 00:00:05,660
>> [음악 재생]

2
00:00:05,660 --> 00:00:08,740
>> DOUG 로이드 : 그럼 한 번 더 보자
비디오는 하나 이상의 언어에 대해 이야기합니다.

3
00:00:08,740 --> 00:00:10,800
우리는 CSS에 대해 이야기 할 것이다이 시간.

4
00:00:10,800 --> 00:00:13,460
에 대한 짧은 그래서 CSS,
CSS 스타일 시트,

5
00:00:13,460 --> 00:00:16,149
우리가 사용하는 또 다른 언어입니다
웹 사이트를 구성 할 때.

6
00:00:16,149 --> 00:00:17,190
이런 식으로 생각해보십시오.

7
00:00:17,190 --> 00:00:20,900
HTML은 우리가 구성하는 데 사용하는 것입니다 경우
우리가 우리의 페이지에 넣을 내용,

8
00:00:20,900 --> 00:00:25,390
CSS는 우리가 일반적으로 사용하는 도구입니다
우리의 웹 사이트를 보는 방법을 사용자 정의하고,

9
00:00:25,390 --> 00:00:30,410
어떻게 사용자 경험 정말로
우리의 웹 사이트와의 상호 작용이다.

10
00:00:30,410 --> 00:00:32,535
>> HTML과 유사한, CSS는
하지 프로그래밍 언어.

11
00:00:32,535 --> 00:00:33,451
그것은 논리가 없습니다.

12
00:00:33,451 --> 00:00:34,595
이 변수가 없습니다.

13
00:00:34,595 --> 00:00:38,890
그것은 그 어떤 종류의가 없습니다
C가 수행하는 관련 일을 흐른다.

14
00:00:38,890 --> 00:00:40,150
그것은 스타일의 언어입니다.

15
00:00:40,150 --> 00:00:42,810
그리고 문법은 꽤입니다
단순하고, 단지 설명

16
00:00:42,810 --> 00:00:46,240
방법의 요소 우리
페이지가 특정 HTML을 가지고

17
00:00:46,240 --> 00:00:48,190
요소를 수정해야합니다.

18
00:00:48,190 --> 00:00:51,170
이를 위해, 당신은하지 않은 경우
아직, HTML에 우리의 비디오를 시청

19
00:00:51,170 --> 00:00:53,290
또는 익숙하지 않은
HTML 일반적으로, 당신을

20
00:00:53,290 --> 00:00:57,430
그 살펴 할 수 있습니다
CSS의 제 때문 논의

21
00:00:57,430 --> 00:01:00,700
에 의존하는 것입니다
HTML에 대한 지식.

22
00:01:00,700 --> 00:01:03,740
>> 그래서 여기 정말
간단한 CSS 스타일 시트.

23
00:01:03,740 --> 00:01:06,480
당신은 적이없는 경우에도
전에 CSS로 프로그램,

24
00:01:06,480 --> 00:01:10,624
당신이 알아낼 수 나는 확신
이 스타일 시트는 않습니다 정확히.

25
00:01:10,624 --> 00:01:11,290
그것은 무엇을합니까?

26
00:01:11,290 --> 00:01:15,470
글쎄, 우리의 웹의 몸에 적용
body 태그 사이의 페이지, 모든

27
00:01:15,470 --> 00:01:19,631
우리의 HTML에, 그것이 설정
파란색에 해당 페이지의 배경색입니다.

28
00:01:19,631 --> 00:01:21,130
음, 아주 간단한 스타일 시트입니다.

29
00:01:21,130 --> 00:01:23,269
그것은 실제로 매우 인간이다
쉬운 언어, CSS.

30
00:01:23,269 --> 00:01:26,560
그래서 당신은, 그것을 전에 사용한 적이 경우에도
당신은 아마 무슨 짓을했는지 추측 할 수있다.

31
00:01:26,560 --> 00:01:30,140
사실, 경우 우리는 페이지를로드
이 스타일은, 어떻게 든 내장 된

32
00:01:30,140 --> 00:01:36,240
우리의 페이지의 배경색 것
블루, 표준 흰색하지합니다.

33
00:01:36,240 --> 00:01:37,670
>> 그래서 우리는 어떻게 스타일을 만들 수 있습니까?

34
00:01:37,670 --> 00:01:39,700
그럼 먼저, 우리는해야
선택기를 식별합니다.

35
00:01:39,700 --> 00:01:42,970
마지막 예에서,
그 선택은 몸이었다.

36
00:01:42,970 --> 00:01:45,050
그 다음 우리는 개방을
중괄호, 우리는있어

37
00:01:45,050 --> 00:01:48,410
정의를 시작하려고
그 선택에 대한 스타일.

38
00:01:48,410 --> 00:01:51,800
중괄호 사이에, 우리
다만 키 값 쌍들의리스트를 가지고있다.

39
00:01:51,800 --> 00:01:56,205
이전 값 쌍이었다
배경 색상 블루 세미콜론,

40
00:01:56,205 --> 00:01:57,830
그러나 우리는이 점점 더 많은 일을 할 수 있습니다.

41
00:01:57,830 --> 00:02:02,330
여러 가지 적용 할 수
해당 태그, 그 선택의 몸에.

42
00:02:02,330 --> 00:02:05,960
그들 각자로 구분됩니다
세미콜론, 우리는 그들 각자 전화

43
00:02:05,960 --> 00:02:08,949
선언, CSS 선언.

44
00:02:08,949 --> 00:02:12,410
우리는 모든 스타일링 우리가 함께 할 때
특정 태그에 적용 할,

45
00:02:12,410 --> 00:02:15,300
우리는 그냥 닫는 곱슬이
스타일 시트를 종료 중괄호,

46
00:02:15,300 --> 00:02:19,640
우리는 스타일 시트를 정의 완료
특정 선택합니다.

47
00:02:19,640 --> 00:02:21,341
>> 몇 가지 일반적인 CSS 속성은 무엇인가?

48
00:02:21,341 --> 00:02:23,590
글쎄, 어쩌면 당신은 넣을
뭔가 주위에 테두리.

49
00:02:23,590 --> 00:02:26,850
당신이 말할 수 있도록, 테두리,
그게 당신의 열쇠가 될 것입니다,

50
00:02:26,850 --> 00:02:29,460
다음 값이 될 것이다,
어떤 스타일, 색상 및 폭

51
00:02:29,460 --> 00:02:30,209
당신이 원하는.

52
00:02:30,209 --> 00:02:33,530
그래서 스타일은 고체가 될 수
라인, 점선, 파선,

53
00:02:33,530 --> 00:02:36,020
물결 모양의 줄 것 능선.

54
00:02:36,020 --> 00:02:38,790
아마 당신은 그것을 갖고 싶어
파란색 또는 검정색 또는 녹색합니다.

55
00:02:38,790 --> 00:02:41,490
어쩌면 당신이 원하는
1 또는 2 또는 10 픽셀 (폭).

56
00:02:41,490 --> 00:02:43,254
당신은 그 모든 일을 지정할 수 있습니다.

57
00:02:43,254 --> 00:02:46,420
어쩌면 당신은 배경을 설정하려면
특정 방식으로 페이지의 색상.

58
00:02:46,420 --> 00:02:49,215
우리는 이미 설정, 그 보았다
본문의 배경은 파란색합니다.

59
00:02:49,215 --> 00:02:52,080
>> 그럼 당신은 핵심 단어를 사용할 수 있습니다,
그래서 CSS는 특정 색상을 가지고

60
00:02:52,080 --> 00:02:55,950
즉, 그것으로 녹색, 파랑 구축
블랙, 우리가 알고있는 아주 간단한 색상.

61
00:02:55,950 --> 00:02:59,110
하지만 당신은 어떤을 지정할 수 있습니다
당신이 좋아하는 것 진수 색상입니다.

62
00:02:59,110 --> 00:03:05,190
색이 식별​​ 될 수 리콜
세 진수 숫자 세트로

63
00:03:05,190 --> 00:03:08,500
0에서 255, RG와 B에
적색, 녹색 및 청색 성분.

64
00:03:08,500 --> 00:03:10,590
그래서 우리는 지정할 수 있습니다
우리가로 원하는 색상,

65
00:03:10,590 --> 00:03:15,520
대신에 파란색 또는 녹색 또는 검은 색의 사용,
파운드를 사용하여 진수의 다음 여섯 자리,

66
00:03:15,520 --> 00:03:18,310
그것은 우리에게 줄 것이다
여섯 자리 색상.

67
00:03:18,310 --> 00:03:19,850
그래서 배경색이다.

68
00:03:19,850 --> 00:03:21,975
>> 또한 전경을
일반적으로 색상,

69
00:03:21,975 --> 00:03:24,140
페이지의 텍스트가 될 것.

70
00:03:24,140 --> 00:03:28,850
그리고 당신은 유사 것을 할 수
핵심 단어와 6 자리의 진수와 함께.

71
00:03:28,850 --> 00:03:32,140
그래서 당신은 어떤 색상을 지정할 수 있습니다 당신
페이지의 텍스트를 원하는

72
00:03:32,140 --> 00:03:36,370
특정에 대하여
배경 색상, 최대 위.

73
00:03:36,370 --> 00:03:39,100
또한 변경하고 처리 할 수
글꼴, 그리고 그 길을 텍스트

74
00:03:39,100 --> 00:03:40,400
페이지에 렌더링됩니다.

75
00:03:40,400 --> 00:03:42,010
>> 그래서 당신은 당신의 글꼴 크기를 변경할 수 있습니다.

76
00:03:42,010 --> 00:03:46,320
당신은 이러한 추가 등의 키워드를 사용할 수 있습니다
매우 작은, 또는 작은 XX, 또는 중간,

77
00:03:46,320 --> 00:03:47,660
큰, 등.

78
00:03:47,660 --> 00:03:50,750
당신은 고정 된 포인트를 사용할 수 (10)
점, 12 점, 등등.

79
00:03:50,750 --> 00:03:55,850
당신은, 백분율, 80 %, 20 %를 사용할 수 있습니다
여기서 100 %는 기본 글꼴입니다

80
00:03:55,850 --> 00:03:59,220
일반적으로 것입니다 크기,
11 또는 12 포인트 같은합니다.

81
00:03:59,220 --> 00:04:01,659
아니면 심지어을 기반으로 할 수 있습니다
가장 최근의 글꼴 크기의.

82
00:04:01,659 --> 00:04:04,950
당신이 뭔가를 쓰고 당신이 알고있는 경우
이 작은을 위해 당신이 원하는 것은,이다

83
00:04:04,950 --> 00:04:08,241
하지만 당신은 몰라 정확히 크기를
이 수, 음, 그냥 말할 수 할,

84
00:04:08,241 --> 00:04:09,330
글꼴 크기를 작게.

85
00:04:09,330 --> 00:04:14,344
그리고, 떨어져 기반합니다
그냥 위는 글꼴 크기입니다.

86
00:04:14,344 --> 00:04:15,760
그리고 당신은 더 작거나 더 클 수 있습니다.

87
00:04:15,760 --> 00:04:18,390
그래서 다른 많은있다
방법은 글꼴 크기를 지정합니다.

88
00:04:18,390 --> 00:04:20,690
>> 당신은 또한 무엇을 지정할 수 있습니다
당신이 원하는 글꼴 가족.

89
00:04:20,690 --> 00:04:23,360
당신은 특정가있는 경우
이름에 방법이 CSS--

90
00:04:23,360 --> 00:04:27,270
우리는 그것에 대해 얘기하지 않을거야
here--은 매우 특정 글꼴을 정의

91
00:04:27,270 --> 00:04:28,980
그리고 귀하의 페이지에 그것을 포함.

92
00:04:28,980 --> 00:04:30,620
또한 일반적인 이름을 사용할 수 있습니다.

93
00:04:30,620 --> 00:04:33,540
웹 안전 글꼴이 많이있다
즉, CSS에 미리 정의되어 있습니다.

94
00:04:33,540 --> 00:04:36,352
그리고 당신은 마이크로 소프트의 사용자 인 경우
지난 20 년에 사무실,

95
00:04:36,352 --> 00:04:38,810
당신은 아마에 익숙
이러한 웹 안전 글꼴을 많이

96
00:04:38,810 --> 00:04:44,640
이미, 굴림, 굴림,
새, 조지아, 굴림, 굴림 택배

97
00:04:44,640 --> 00:04:45,470
등등.

98
00:04:45,470 --> 00:04:47,170
사람들은 모든 웹 안전 글꼴 간주됩니다.

99
00:04:47,170 --> 00:04:49,169
의 그리고 실제로, 일부
이유 그들은있게되었습니다

100
00:04:49,169 --> 00:04:54,140
모든 페이지를 web--하게 사용될시켰다
이 기본에 액세스 글꼴을 설정했다

101
00:04:54,140 --> 00:04:58,480
다양한 세리프, 모든이와
우리가 들어갈 수 없습니다 글꼴 물건,

102
00:04:58,480 --> 00:05:01,130
그러나 이들은 보통
당신의 CSS에 접근,

103
00:05:01,130 --> 00:05:04,029
당신이없는 경우에도
그렇지 않으면 글꼴을 정의합니다.

104
00:05:04,029 --> 00:05:07,070
마지막으로, 당신은 당신의 텍스트를 정렬 할 수 있습니다,
가되는 대신, 기본적으로 정렬

105
00:05:07,070 --> 00:05:09,310
왼쪽에, 당신은 할 수
오른쪽으로 정렬

106
00:05:09,310 --> 00:05:13,740
또는 당신은 중앙에 정렬, 또는 수
이 두 여백을 칠 수 있도록 정당화.

107
00:05:13,740 --> 00:05:16,800
그 그래서 당신이 사용할 수있는 모든 옵션은
텍스트의 모양을 변경하려면,

108
00:05:16,800 --> 00:05:20,120
그것은 페이지에 어떻게 표시입니다.

109
00:05:20,120 --> 00:05:22,180
>> 귀하의 선택기는하지 않습니다
태그 만해야한다.

110
00:05:22,180 --> 00:05:25,539
우리는 이전에 body 태그를 보았다
선택 및 태그 선택기

111
00:05:25,539 --> 00:05:26,580
그냥 같이 않습니다.

112
00:05:26,580 --> 00:05:30,020
당신은 당신에게 다음 태그 이름을 지정하고
해당 태그에 대한 스타일을 정의합니다.

113
00:05:30,020 --> 00:05:32,660
하지만 당신은 뭔가를 할 수
ID 선택했다.

114
00:05:32,660 --> 00:05:34,390
ID 선택은 매우 비슷합니다.

115
00:05:34,390 --> 00:05:38,100
하지만 지금은 사용하지 않는거야 그, 통지
HTML 태그, 난,이 경우, 사용하고 있습니다

116
00:05:38,100 --> 00:05:40,720
#unique, 또는 고유 해시.

117
00:05:40,720 --> 00:05:42,930
당신은 기억이 있다면 우리의
HTML 비디오, 우리는 이야기

118
00:05:42,930 --> 00:05:45,620
태그 속성을 가질 수있는 방법에 대해.

119
00:05:45,620 --> 00:05:48,340
>> 그리고 하나의 속성은 그 적용
거의 모든 HTML 태그에,

120
00:05:48,340 --> 00:05:51,440
그러나 우리는 그것에 대해 얘기하지 않았다,
ID 태그라는 뭔가가있다.

121
00:05:51,440 --> 00:05:55,250
그래서이 특정 CSS는 것
만이 HTML 태그에 적용

122
00:05:55,250 --> 00:05:58,530
매우 구체적인 ID, 당신의 이름을 지정했는지.

123
00:05:58,530 --> 00:06:01,000
당신이 어딘가에있는 경우에 따라서
코드에서 어딘가에

124
00:06:01,000 --> 00:06:06,090
HTML 파일, 태그와 당신의
이 태그에 속성으로 지정,

125
00:06:06,090 --> 00:06:09,060
ID는,이 독특한 같습니다
특정 스타일

126
00:06:09,060 --> 00:06:15,030
여기에 단지 사이에 적용됩니다
고유의 ID와 해당 태그.

127
00:06:15,030 --> 00:06:17,180
>> 또한 뭔가를 할 수
클래스 선택했다.

128
00:06:17,180 --> 00:06:19,920
갖는 이외에 그래서
ID는 또한 할 수있는 속성

129
00:06:19,920 --> 00:06:23,130
HTML 태그에 클래스 속성을 추가 할 수 있습니다.

130
00:06:23,130 --> 00:06:27,140
그리고 당신은 클래스 속성을 사용할 때,
이는 여러 개의 태그에 적용될 수있다.

131
00:06:27,140 --> 00:06:31,880
그래서 당신은 몇 가지가있는 경우 그
어쩌면 당신이 말하는 유사한하려는,

132
00:06:31,880 --> 00:06:35,890
열린 태그 ㅋ, ㅋ, ㅋ,
ㅋ, 클래스는 학생들과 같다.

133
00:06:35,890 --> 00:06:38,190
그리고이 특정
스타일 시트가 적용됩니다

134
00:06:38,190 --> 00:06:42,041
그 클래스의 모든 태그 명입니다.

135
00:06:42,041 --> 00:06:44,290
이 경우, 우리는을 설정하려는
노란색에 배경 색상,

136
00:06:44,290 --> 00:06:46,706
우리는, 불투명도를 설정할 것하는
우리가 얘기하지 않은 태그입니다

137
00:06:46,706 --> 00:06:52,510
하지만 얼마나 투명 취급
일이 경우에, 70 %이다.

138
00:06:52,510 --> 00:06:54,430
>> 두 가지 옵션이있다
쓰기 스타일.

139
00:06:54,430 --> 00:06:56,680
당신이 그들을 쓸 수 있습니다
직접 HTML로

140
00:06:56,680 --> 00:06:59,690
스타일 시트를 배치하여
스타일 태그 사이에.

141
00:06:59,690 --> 00:07:03,850
그리고 그 스타일 태그의 내부에 이동
웹 페이지의 헤드 태그.

142
00:07:03,850 --> 00:07:08,240
아마 더 좋은 방법이해야 할 일
별도의 .css 파일을 작성하는 것입니다,

143
00:07:08,240 --> 00:07:12,360
한 다음에 링크하여
링크 태그를 사용하여 문서.

144
00:07:12,360 --> 00:07:14,690
링크 태그는, 다시, 아르
하이퍼 링크는 다른,

145
00:07:14,690 --> 00:07:16,760
당신은 우리의 비디오에서 HTML을 기억합니다.

146
00:07:16,760 --> 00:07:19,030
그리고 링크 태그는 방법이다 우리
별도의 파일에 당깁니다.

147
00:07:19,030 --> 00:07:23,900
그것은 일종의의 등가 등
웹 프로그래밍에 대한 #INCLUDE.

148
00:07:23,900 --> 00:07:27,140
>> 그럼 table.HTML 살펴 보자.

149
00:07:27,140 --> 00:07:29,380
당신은 기억이 있다면 우리의
HTML 비디오, 내가 보여

150
00:07:29,380 --> 00:07:32,000
매우의 일례
간단한 곱셈

151
00:07:32,000 --> 00:07:35,160
꽤 보였다 표
못생긴, 어쩌면 거기

152
00:07:35,160 --> 00:07:38,650
방법과 더 나은 만들려면
CSS는, 실제로 보이게하기

153
00:07:38,650 --> 00:07:41,120
곱셈 같은 더
테이블, 또는 무엇인가

154
00:07:41,120 --> 00:07:43,730
그건 그냥 붙어 있지 않습니다
실제 부서와

155
00:07:43,730 --> 00:07:45,532
행과 열 사이.

156
00:07:45,532 --> 00:07:47,490
그럼으로 향할 수 있도록
CS50 IDE, 그리고 좀 봐

157
00:07:47,490 --> 00:07:50,780
CSS는, 일종의, 조정할 수있는 방법에
우리가 전에 시작,

158
00:07:50,780 --> 00:07:53,290
그리고 훨씬 더 뭔가합니다.

159
00:07:53,290 --> 00:07:55,650
>> 그래서 우리는 CS50 IDE에있어
지금, 낯선 경우,

160
00:07:55,650 --> 00:07:58,710
우리는이에 끌어합니다
테이블 HTML 페이지가.

161
00:07:58,710 --> 00:08:01,090
Table.HTML 기본적으로
단지 내용을 정의

162
00:08:01,090 --> 00:08:05,044
multiple--의 그것이 있어야했다
네 개의 포 곱셈 테이블.

163
00:08:05,044 --> 00:08:06,210
그것은 매우 간단합니다.

164
00:08:06,210 --> 00:08:09,410
그리고 우리는 것이라고 생각
꽤 잘 조직 된 보인다.

165
00:08:09,410 --> 00:08:15,277
그러나 사실, 우리는이 페이지를 미리 볼 때,
우리는 종류의 추한, 바로 볼?

166
00:08:15,277 --> 00:08:16,860
분명히 우리는 여기에 행과 열을 가지고있다.

167
00:08:16,860 --> 00:08:18,350
이 분리의 일종.

168
00:08:18,350 --> 00:08:20,040
그러나 의미있는 분리 아니다.

169
00:08:20,040 --> 00:08:23,105
우리는 실제로 못하고있어
여기에 너무 많은 정보.

170
00:08:23,105 --> 00:08:25,730
그리고 사이에 분리가 없습니다
측면에서 행과 열의

171
00:08:25,730 --> 00:08:28,460
수평 또는 수직의 규칙.

172
00:08:28,460 --> 00:08:31,530
우리는 아마이 만들 수
조금 더 나은 모습.

173
00:08:31,530 --> 00:08:32,934
그럼 해보자.

174
00:08:32,934 --> 00:08:34,559
그래서 여기까지이 탭을 닫으려고하고있다.

175
00:08:34,559 --> 00:08:37,434
그리고 나는 나의 table.HTML을 닫으려고
나는 여기에 또 다른 버전이

176
00:08:37,434 --> 00:08:39,490
table2.HTML했다.

177
00:08:39,490 --> 00:08:40,655
우리는을 열 수 있습니다.

178
00:08:40,655 --> 00:08:42,530
페이지의 본문입니다
거의 같은,

179
00:08:42,530 --> 00:08:44,238
하지만 변경했습니다
상단에 조금.

180
00:08:44,238 --> 00:08:47,132
그리고 여기에 스크롤합니다.

181
00:08:47,132 --> 00:08:49,340
난, 그이 시간을 주목하라
임베디드 스타일 태그를 사용.

182
00:08:49,340 --> 00:08:53,550
나는 스타일 태그를 열 었는데, 나는 지금이야
단지 내부 CSS 스타일 시트를 정의

183
00:08:53,550 --> 00:08:54,310
그것의.

184
00:08:54,310 --> 00:08:56,310
나는 테이블을 말한다 스타일 시트를 가지고있다.

185
00:08:56,310 --> 00:08:58,170
그건 내 태그 선택기입니다.

186
00:08:58,170 --> 00:09:01,340
나는 점이나 해시를 사용하고 있지 않다,
어느 나는 경우 일을 할 것입니다

187
00:09:01,340 --> 00:09:03,710
ID 또는 클래스 선택기를 사용했다.

188
00:09:03,710 --> 00:09:06,190
나는 태그 선택기 here-- 테이블이 있습니다.

189
00:09:06,190 --> 00:09:10,090
이 스타일에 가고
모든 테이블 태그에 적용됩니다.

190
00:09:10,090 --> 00:09:14,950
분명히 나는​​ 1 점을 추가하는 듯 싶어
넓은 픽셀 청색 테두리,

191
00:09:14,950 --> 00:09:15,779
내 테이블 내부.

192
00:09:15,779 --> 00:09:18,320
즉, 같은 아마 것 소리
오른쪽, 상황에 도움?

193
00:09:18,320 --> 00:09:20,320
우리는 할 겁니다
상황이 훨씬 더 봐.

194
00:09:20,320 --> 00:09:21,190
그래서이 괜찮습니다.

195
00:09:21,190 --> 00:09:23,540
문체, 난 그냥했습니다
여기에 내 스타일 시트를 포함.

196
00:09:23,540 --> 00:09:25,100
그것은 확실히이다
그것을 할 수있는 허용 방법.

197
00:09:25,100 --> 00:09:26,391
의이 어떻게 생겼는지 보자.

198
00:09:26,391 --> 00:09:29,790
그래서 아래로 여기로 이동하고 있습니다
내 table2.HTML를 미리 것입니다 것입니다.

199
00:09:29,790 --> 00:09:32,430

200
00:09:32,430 --> 00:09:36,470
글쎄, 그건, 내가 원하는 것을 확실히 아니다
그러나 그것은 우리가 요구 정확하게이다.

201
00:09:36,470 --> 00:09:39,530
우리는이 스타일은 말했다
우리 테이블에 적용 할 것.

202
00:09:39,530 --> 00:09:43,810
우리의 테이블은 이제 하나의 픽셀이
주위 넓은, 청색 테두리입니다.

203
00:09:43,810 --> 00:09:46,237
우리는 실제로 못하고있어
표 셀에서.

204
00:09:46,237 --> 00:09:47,570
우리는 테이블에 있어요.

205
00:09:47,570 --> 00:09:49,310
그래서 CSS는했다.

206
00:09:49,310 --> 00:09:51,890
그것은 적용했다
우리 테이블에 스타일.

207
00:09:51,890 --> 00:09:53,981
하지만 확실히하지 않았다
무엇을 우리가하고 싶었다.

208
00:09:53,981 --> 00:09:55,730
우리는 무엇을 어떻게합니까
우리는하고 싶지?

209
00:09:55,730 --> 00:09:59,287
>> 음, 한 번 더 살펴 보자
table3.HTML에서이 버전.

210
00:09:59,287 --> 00:10:00,870
그래서 난 그냥이 탭을 닫으려고하고있다.

211
00:10:00,870 --> 00:10:03,890
나는 여기에 다시 가서거야 내
트리를 파일 및 table3.HTML을 엽니 다.

212
00:10:03,890 --> 00:10:07,680

213
00:10:07,680 --> 00:10:10,350
다시 말하지만, 그것은 꽤 볼 것
여기에 처음에 유사한.

214
00:10:10,350 --> 00:10:14,460
그러나 통지,이 시간, 대신에 사용
거기에 포함 된 스타일 시트,

215
00:10:14,460 --> 00:10:18,870
나는 링크를거야
링크 태그를 사용하여 스타일 시트.

216
00:10:18,870 --> 00:10:22,480
그래서 나는 분명히에 연결 해요
tables.CSS라는 스타일 시트,

217
00:10:22,480 --> 00:10:25,090
이 잘 같음
스타일 시트는 그냥 잘 means--

218
00:10:25,090 --> 00:10:28,645
이 파일에 상대적인 것입니다 무엇
나는 난 스타일이다 doing-- 해요

219
00:10:28,645 --> 00:10:29,821
내 페이지에 사용.

220
00:10:29,821 --> 00:10:32,320
내가 정말 무엇을보고 싶다면
나는, 여기에 CSS로하고 있어요

221
00:10:32,320 --> 00:10:35,010
그 열기 갈 필요
table.CSS뿐만 아니라 파일.

222
00:10:35,010 --> 00:10:37,490
그래서 우리는 여기에 다시 갈거야
다시 우리의 파일 트리에.

223
00:10:37,490 --> 00:10:38,660
table.CSS이있다.

224
00:10:38,660 --> 00:10:40,490
우리는 그것을 열린 팝업됩니다.

225
00:10:40,490 --> 00:10:43,070
이제 우리는 CSS를 조금보고있다.

226
00:10:43,070 --> 00:10:45,630
분명히, 나는 몇 가지있다
것들을 여기에 무슨.

227
00:10:45,630 --> 00:10:48,950
나는 분명히 다섯 가지를 넣어 원하는
넓은 픽셀 고체 빨간색 테두리,

228
00:10:48,950 --> 00:10:50,287
내 테이블 주위.

229
00:10:50,287 --> 00:10:52,870
우리는 이미 그 무슨 알고
단지 주변에 이동합니다.

230
00:10:52,870 --> 00:10:56,180
우리는 table2.HTML에서 그것을 보았다.

231
00:10:56,180 --> 00:10:58,770
각 행으로, 나는
분명히 지정하려면

232
00:10:58,770 --> 00:11:01,950
그 행 높이가 50 픽셀 높다.

233
00:11:01,950 --> 00:11:05,680
그래서 모든 행에 대한 기억
즉, TR 태그가하는 일이다

234
00:11:05,680 --> 00:11:08,550
나는 50 픽셀 높은 만들고있어.

235
00:11:08,550 --> 00:11:09,804
>> 마지막으로, 나는이 댓글이 있습니다.

236
00:11:09,804 --> 00:11:11,470
그리고 이것은 우리가 CSS의 의견을 방법이다.

237
00:11:11,470 --> 00:11:16,174
이 블록을 점유하는 것은 매우 유사
의견 구문 슬래시 스타.

238
00:11:16,174 --> 00:11:17,090
당신이 원하는 모든 텍스트입니다.

239
00:11:17,090 --> 00:11:19,470
더 슬래시 슬래시는 CSS에서 비록 없습니다.

240
00:11:19,470 --> 00:11:23,400
짧은 인라인 주석을 위해, 우리는이
여기에이 특별한 형식을 사용합니다.

241
00:11:23,400 --> 00:11:26,830
내가하고 있어요 것 같습니다
내 TD 태그에 많은 것.

242
00:11:26,830 --> 00:11:29,710
TD 태그, 또는 테이블을 기억
정말이다 데이터,

243
00:11:29,710 --> 00:11:32,210
내부 컬럼
우리의 행, 분명히

244
00:11:32,210 --> 00:11:35,090
데이터의 각 부분에 대한
내 테이블에, 내가 원하는

245
00:11:35,090 --> 00:11:38,850
배경색을 설정
검은 색, 색상은 흰색이어야합니다

246
00:11:38,850 --> 00:11:40,320
색상은 전경 색상입니다.

247
00:11:40,320 --> 00:11:42,360
그래서이 될 것입니다
내 페이지의 텍스트.

248
00:11:42,360 --> 00:11:45,140
나는 큰 글꼴, (22)을 원하는
글꼴을 지적, 내가 원하는

249
00:11:45,140 --> 00:11:47,001
그것은, 폰트 패밀리의 조지아합니다.

250
00:11:47,001 --> 00:11:48,750
그래서 않을거야
기본 글꼴이 있습니다.

251
00:11:48,750 --> 00:11:51,820
언젠가는 조지아를 지정거야하는
이들 웹 안전 글꼴 중 하나입니다

252
00:11:51,820 --> 00:11:53,830
우리는 이전에 본 적이있다.

253
00:11:53,830 --> 00:11:57,284
내 텍스트를 정렬 할
중앙, 상자의 중간에,

254
00:11:57,284 --> 00:11:59,450
나는 그것이 남아있을 싶지 않아
정렬 또는 오른쪽 정렬됩니다.

255
00:11:59,450 --> 00:12:03,461
그리고 나는 나의 열 너비를 원하는
넓은뿐만 아니라 50 픽셀이어야합니다.

256
00:12:03,461 --> 00:12:05,210
이제 살펴 보자
이 같은 모습,

257
00:12:05,210 --> 00:12:07,470
이것은 어쩌면 개선 인 경우를 참조하십시오.

258
00:12:07,470 --> 00:12:12,890
그래서 table3.HTML에 갈거야하는
리콜, 링크로 table.CSS를 포함

259
00:12:12,890 --> 00:12:14,830
우리는 그것을 미리 볼 수 있습니다.

260
00:12:14,830 --> 00:12:16,800
그건 바로, 훨씬 더입니까?

261
00:12:16,800 --> 00:12:20,004
이 사실을 보이기 시작
더 곱셈 테이블 등을 많이합니다.

262
00:12:20,004 --> 00:12:21,920
나는 빨간색 테두리가
내 테이블 주위하지만 지금은

263
00:12:21,920 --> 00:12:26,700
나는 또한 지정한
각각의 행은 50 픽셀 폭

264
00:12:26,700 --> 00:12:30,220
아니면 tall-- 변명 50 픽셀의
가구 있구만 각 열은 50 픽셀 폭입니다.

265
00:12:30,220 --> 00:12:34,251
각 컬럼의 데이터, 만
데이터는 검정색 배경이 있습니다.

266
00:12:34,251 --> 00:12:36,000
그래서 왜 사람들이다
흰색 선이있다.

267
00:12:36,000 --> 00:12:38,836
공간 때문에
그 모든 셀 사이,

268
00:12:38,836 --> 00:12:40,710
그것의 국경이 아니다
그 자체로, 그것은 단지

269
00:12:40,710 --> 00:12:43,170
난 단지에 작성 해요
세포, 실제로 어느

270
00:12:43,170 --> 00:12:46,310
테이블의 경계를 만든다
분명히, 모두 함께 그 존재 않았다

271
00:12:46,310 --> 00:12:47,887
그냥 얇은 흰색 선이었다.

272
00:12:47,887 --> 00:12:48,720
이제 그들은 볼 수있어.

273
00:12:48,720 --> 00:12:50,380
이제 그들은 화면에 나올 것.

274
00:12:50,380 --> 00:12:52,920
그래서 이것은 매우 간단하다
나는 적용한 스타일,

275
00:12:52,920 --> 00:12:56,850
지금 내 표는 더처럼 많이 보인다
네 네 곱셈 테이블,

276
00:12:56,850 --> 00:13:00,950
대신 그냥 뒤죽박죽 엉망,의
모든 것이 명확하게 행과 열입니다,

277
00:13:00,950 --> 00:13:03,717
하지만 슈퍼 잘 조직.

278
00:13:03,717 --> 00:13:06,800
우리는 정말로 단지 표면을 긁는거야
여기에 CSS로 무엇을 할 수 있는지.

279
00:13:06,800 --> 00:13:10,330
다행히 CSS 문서
아주 간단합니다.

280
00:13:10,330 --> 00:13:14,000
당신은 몇 가지를 사용할 것이다 그
상당히 자주, 속성.

281
00:13:14,000 --> 00:13:16,087
우리가 이야기들
이번 비디오.

282
00:13:16,087 --> 00:13:18,170
당신이 몇 가지 있습니다
아마 모두를 사용하지 않습니다.

283
00:13:18,170 --> 00:13:19,469
그리고도 괜찮습니다.

284
00:13:19,469 --> 00:13:22,010
그러나 단지가 있다는 것을 알고있다
거기에 문서의 많은.

285
00:13:22,010 --> 00:13:25,110
그래서 우리는 모든 것을 포함하지 않은 경우에도,
당신은 확실히 자신의 왼쪽 아닙니다.

286
00:13:25,110 --> 00:13:26,780
그러나 CSS는 정말 재미
실험합니다.

287
00:13:26,780 --> 00:13:29,040
그리고 난 강력하게 당신을 격려 것
귀하의 웹 페이지에 놀러,

288
00:13:29,040 --> 00:13:32,180
당신이 그들을 만들 수있는 방법 참조
보고 사용자를 개선 느낌

289
00:13:32,180 --> 00:13:34,790
페이지를 방문 경험.

290
00:13:34,790 --> 00:13:35,710
나는 더그 로이드입니다.

291
00:13:35,710 --> 00:13:37,980
이 CS50입니다.

292
00:13:37,980 --> 00:13:40,151