1
00:00:00,420 --> 00:00:06,550
이 강의로 돌아와서 마지막 비디오 마지막 부분에있는 캠프장 쇼 페이지의 스타일을 마무리하겠습니다.

2
00:00:06,630 --> 00:00:08,540
나는 우리가해야 할 변화의 일부를 언급했다.

3
00:00:08,640 --> 00:00:10,970
순수한 부트 스트랩으로 해결할 수 없습니다.

4
00:00:10,980 --> 00:00:13,050
맞춤 스타일을 추가해야합니다.

5
00:00:13,050 --> 00:00:18,570
따라서이 이미지의 너비를 변경하여 미리보기 이미지의 100 %를 차지하도록해야합니다.

6
00:00:18,750 --> 00:00:21,050
여기에 약간의 패딩을 추가하고 싶었습니다.

7
00:00:21,120 --> 00:00:25,880
이것은 패딩이있는 곳에서 보일 것입니다. 이미지가 전체 컨테이너를 차지하는 것을 볼 수 있습니다.

8
00:00:26,280 --> 00:00:31,810
그리고 그것을 성취하기 위해 우리는 각각의 예에서 보여줄 수 있고 여기에 스타일 태그를 추가 할 수 있습니다.

9
00:00:32,280 --> 00:00:34,050
하지만 그건 좋은 생각이 아닙니다.

10
00:00:34,050 --> 00:00:42,960
따라서 우리는 첫 번째 사용자 정의 스타일 시트를 추가하고 이전 작업에서했던 것처럼 공개 디렉토리를 만들 계획입니다.

11
00:00:43,110 --> 00:00:48,790
따라서 디렉토리를 공개로 설정하고 공용 디렉토리에 다른 디렉토리를 만듭니다.

12
00:00:48,870 --> 00:01:10,000
이것은 하나의 스타일 쉬트라고 불릴 것이고 그래서 public slash 스타일 쉬트가 될 것이고 우리는 자바 스크립트를위한 또 하나의 자바 스크립트를 갖게 될 것입니다. 그리고 우리는 엔터를 치고 우리는 스타일 시트 안에 하나의 파일을 만들 것입니다 public sosh style 시트 슬래시와 우리는이 평균 Dotsie SS를 그렇게 부를 것입니다.

13
00:01:10,470 --> 00:01:11,260
승인.

14
00:01:11,520 --> 00:01:13,040
이제 우리는 그것을 열어보고 싶습니다.

15
00:01:13,380 --> 00:01:28,140
그래서 우리는 그 스타일 시트를 주인공이 될 수 있도록 열어 주며, 몸의 배경색을 자주색으로 설정하고 저장하는 것과 같이 여기에 정말 명백한 것을 추가함으로써 시작해 봅시다. 그리고 나서 우리는 계속해서 이것을 연결시켜야합니다.

16
00:01:28,140 --> 00:01:36,790
따라서 앱 케이스에서 우리는 여기에 정적 인 앱 도트 익스프레스를 사용하는 라인을 추가해야합니다.

17
00:01:37,380 --> 00:01:44,380
그리고 나서 우리가 마지막으로 한 일은 단지 대중에게 추가하는 것이 었습니다. 그러나 실제로는 더 좋은 방법으로 그것을하고 싶지 않았습니다.

18
00:01:44,400 --> 00:01:57,050
하지만 우리가해야 할 일은 밑줄을 추가하는 것입니다. 이제는이 스크립트가 실행중인 디렉토리를 참조하는 디렉토리 이름과 슬래시 이름을 강조해야합니다.

19
00:01:57,180 --> 00:01:58,630
그래서 어떻게 생겼는지 보여 드리겠습니다.

20
00:01:58,800 --> 00:02:10,190
콘솔을 사용하지만 로그에 언더 스코어가 있으면 이름에 밑줄을 표시하고 서버를 저장하고 다시 시작하십시오.

21
00:02:12,000 --> 00:02:13,440
내가 여기에서 얻은 것을 주목하십시오.

22
00:02:13,530 --> 00:02:19,560
이것은 캠프 슬래시 v 5의 lushly 전체 경로 작업 공간 디렉토리 이름입니다.

23
00:02:19,710 --> 00:02:30,390
따라서 dir 이름과 슬래시 공개를 추가함으로써 잠재적으로 어떻게 든 현재 디렉토리가 바뀌면 우리가 예상하지 못한 이상한 일이 발생했기 때문에 우리는 더 안전합니다.

24
00:02:30,450 --> 00:02:36,650
어느 쪽이 좋을까 그러나 결코하지 않는다. 그러나 만일 그것이했다면 당신의 이름은 항상 스크립트가 살고있는 디렉토리 일 것이다.

25
00:02:36,900 --> 00:02:41,860
그래서 우리는 단지 더 안전 해지고 슬래시 공개를 추가하는 것입니다. 그리고 더 일반적인 방법 일뿐입니다.

26
00:02:42,060 --> 00:02:43,820
차이점은 전혀 볼 수 없습니다.

27
00:02:43,860 --> 00:02:44,920
그럼 우리가 구할거야.

28
00:02:44,930 --> 00:02:50,140
우리는 이것을 제거 할 수 있고 우리가 한 일은 우리의 단순한 마음 속에 추가됩니다.

29
00:02:50,190 --> 00:02:52,390
SS하지만 아직 연결하지 않았습니다.

30
00:02:52,530 --> 00:02:54,500
그래서 우리는 공용 디렉토리를 제공했습니다.

31
00:02:54,600 --> 00:03:01,540
우리는 현재이 디렉토리에서 모든 것을 제공하고 있습니다.이 디렉토리는 실제로는 하나의 폴더 스타일 시트이고 하나의 파일 만 우리에게 끝날 수 있습니다.

32
00:03:01,620 --> 00:03:05,510
하지만 이제 그 파일에 대한 링크를 만들어서 헤더 파일에서 해 봅시다.

33
00:03:05,580 --> 00:03:14,920
그래서 저는 C9 views에 Parshall의 slash hetter를 슬래시 (slash) 한 다음 부트 스트랩 (bootstrap) 이후에 머리 위로 올릴 것입니다.

34
00:03:14,980 --> 00:03:31,330
나는 또 다른 링크 태그를 추가 할 것이고 이것은 H ref와 같을 것입니다. slash 스타일 시트는 메인 C S를 슬래시 한 다음 여기에 줄을 추가하여 스타일 시트가 될 것입니다.

35
00:03:31,950 --> 00:03:32,500
승인.

36
00:03:32,850 --> 00:03:38,340
그래서 우리는 현재 우리가 공개 디렉토리에서 제공하고있는 스타일 시트에 연결했습니다.

37
00:03:38,340 --> 00:03:40,680
그리고 그것이 효과가 있다면 그것을 시험해 봅시다.

38
00:03:40,740 --> 00:03:45,350
헤더가 부분적으로 포함 된 모든 페이지가 있기 때문에 모든 단일 페이지에있게됩니다.

39
00:03:45,630 --> 00:03:46,380
그걸 시험해 봅시다.

40
00:03:46,380 --> 00:03:48,450
우리는 방문 페이지로 갈뿐입니다.

41
00:03:48,450 --> 00:03:48,980
우리는 거기에 갈.

42
00:03:48,990 --> 00:03:56,510
모든 보라색입니다. 우리 캠프장을 보러 간다면 자주색 배경을 자주색으로 유지하고 싶다면 완전히 보라색 배경도 있습니다.

43
00:03:56,610 --> 00:03:57,620
나는 그것을 다시 바꿀 것이다.

44
00:03:57,750 --> 00:04:03,210
그러나 나는 우리가 얻은 스타일을 추가 할 것이며 그 스타일은 미리보기 이미지에 영향을 미칠 것입니다.

45
00:04:03,210 --> 00:04:07,050
따라서이 미리보기 이미지는 물론 미리보기 이미지입니다.

46
00:04:07,080 --> 00:04:18,000
이미지를 너비의 100 %까지 차지하게하여 쇼 페이지와 인덱스 페이지 모두에서 이미지를 만들려고합니다. 그래서 우리는 돌아가서 변경하고 업서스 평가를 할 수 있습니다.

47
00:04:18,180 --> 00:04:21,750
이제 미리보기 이미지 내부의 모든 이미지를 선택하는 것으로 시작하겠습니다.

48
00:04:21,900 --> 00:04:25,300
따라서 썸네일은 부트 스트랩 클래스이기 때문에 필요합니다.

49
00:04:25,550 --> 00:04:31,290
그리고 그 사이에 공간이있는 이미지 태그는 미리보기 이미지 안에있는 모든 이미지 태그입니다.

50
00:04:31,290 --> 00:04:36,180
그런 다음 너비를 100 %로 설정하기 만하면됩니다.

51
00:04:36,300 --> 00:04:43,510
저장하고 새로 고침하고 쇼 페이지로 이동하면 이미지가이 미리보기 이미지의 100 %를 차지합니다.

52
00:04:43,860 --> 00:04:51,820
그런 다음 우리는 썸네일 자체를 선택해야하는 간격을 없애고 자하는 곳에서 수정하기 쉽도록이 패딩 문제를 해결해야합니다.

53
00:04:51,870 --> 00:04:56,350
미리보기 이미지 div는 패딩을 제거하고 그냥 0으로 설정합니다.

54
00:04:56,490 --> 00:05:01,580
따라서 도트 섬네일 0을 채 웁니다.

55
00:05:01,890 --> 00:05:02,930
저장합시다.

56
00:05:03,120 --> 00:05:05,260
이 패딩에 눈을 떼지 마십시오.

57
00:05:05,280 --> 00:05:06,130
이제 사라 졌어요.

58
00:05:06,510 --> 00:05:11,230
그리고 우리가 우리의 인덱스 페이지로 돌아 가면, 이것들이 이제는 평평하다는 것을 알 수 있습니다.

59
00:05:11,280 --> 00:05:12,980
거기에는 패딩이 없습니다.

60
00:05:13,320 --> 00:05:17,100
나는 개인적으로 여기에 패딩이 없으면 그 사이에 공간이없는 것을 선호한다.

61
00:05:17,250 --> 00:05:27,910
그러나 그것은 개인적인 취향의 문제이며, 만약 당신이 그 공간을 원한다면, 당신이 할 수있는 일은이 스타일을 모든 단일 축소판에 적용하는 것이 아닙니다.

62
00:05:27,990 --> 00:05:39,280
대신 쇼 페이지에서 ID 나 특별한 클래스의 미리보기 이미지를 줄 수 있습니다. 그런 다음이 패딩 0을 해당 클래스에 적용하거나 ID 2 개만 적용 할 수 있습니다.

63
00:05:39,480 --> 00:05:45,380
그러나 나는 그들 모두에게 그것을 할 것이고, 우리가 풀어야 할 다른 문제는 여기에 패딩입니다.

64
00:05:45,780 --> 00:05:55,560
그래서이 캡션의 내부에서 우리가 그것을 검사한다면 우리가 만든 div가 여기에서 볼 수 있습니다. div 클래스 캡션이 가득 찼습니다.

65
00:05:55,770 --> 00:06:00,870
여기에 약간의 패딩을 추가하고 마지막 비디오에서 결정한 숫자는 9 픽셀입니다.

66
00:06:00,930 --> 00:06:02,830
그래서 내가 죄책감을 닫자.

67
00:06:03,030 --> 00:06:11,100
여기로 돌아가서 모든 캡션 새끼를 선택하지 않고 미리보기 이미지 내에서 캡션 폴드 만 선택하려고합니다.

68
00:06:11,220 --> 00:06:23,130
따라서 Dot thumbnail space caption이 가득 차고 9 픽셀의 패딩을 줄 것입니다. 이렇게 저장하면 페이지가 새로 고쳐집니다.

69
00:06:23,130 --> 00:06:23,750
우리는 거기에 갈.

70
00:06:23,760 --> 00:06:26,130
우리는 우리가 찾고있는 간격을 얻습니다.

71
00:06:26,130 --> 00:06:26,390
괜찮아.

72
00:06:26,400 --> 00:06:27,610
그것이 내가 원했던 전부입니다.

73
00:06:27,780 --> 00:06:29,910
우리가 성취 한 것을 빨리 되짚어 봅시다.

74
00:06:29,910 --> 00:06:43,560
우리는 새로운 파일 메인 나치 SS를 만들었고 스타일 시트의 공개 디렉토리 내부에 그 파일을 넣었습니다. 결국 스타일 시트를 더 많이 포함하게 될 것입니다. 특히 방문 페이지에 대해서도 스타일 시트를 더 갖게 될 것이고 여기에도 자바 스크립트가있을 것입니다.

75
00:06:43,680 --> 00:06:50,410
그리고 실제로 우리가 상호 작용해야하는 공용 디렉토리를 사용하려면 명시 적으로 공용 디렉토리를 제공하라.

76
00:06:50,520 --> 00:06:56,660
그리고 저는 여러분에게이 밑줄이 여러분의 이름을 강조해 주었고 가장 마지막 것은 그것을 헤더 파일에 포함 시켰습니다.