1
00:00:00,630 --> 00:00:05,120
이 비디오에서는 처음부터이 사진 작가의 포트폴리오 사이트를 만들 계획입니다.

2
00:00:05,310 --> 00:00:11,550
그리고 대개 저는 독자적으로이 작업을 시도한 다음 이에 대한 솔루션 비디오를 제공하도록 요청할 것입니다.

3
00:00:11,640 --> 00:00:14,050
그러나 이번에는 고의적 인 코드가 있습니다.

4
00:00:14,070 --> 00:00:20,650
그래서 나는 함께 코드를 작성해보고 싶습니다. 원하는 경우 다음 번에 코드를 한 번 보면서 코드화 할 수 있습니다.

5
00:00:20,850 --> 00:00:26,940
그러나 여기서의 목표는 우리가 함께 할 것이며, 우리가 이것을 벗어나고 싶은 다른 두 가지가 있다는 것입니다.

6
00:00:26,940 --> 00:00:37,190
첫 번째 것은 float라는 새로운 속성이 있고 두 번째 것은 단지 당신이 약간 자랑 스러울 수있는 것을 구축하는 약간의 경험을 얻길 바란다는 것입니다.

7
00:00:37,200 --> 00:00:43,160
그것은 우리가 지금까지 해 온 정말 밝은 색상 들인 단순한 것들보다 조금 나아졌습니다.

8
00:00:43,170 --> 00:00:47,210
그래서 이것은 우리가해야 할 최소한의 사진 블로그입니다.

9
00:00:47,280 --> 00:00:49,160
시작하겠습니다.

10
00:00:49,230 --> 00:00:50,610
숭고한 열어 라.

11
00:00:50,880 --> 00:00:54,330
HMO라는 Photo Grid라는 단일 파일이 있습니다.

12
00:00:54,960 --> 00:01:00,480
먼저 이미지 나 다른 것들을 보여 드리겠습니다.

13
00:01:00,480 --> 00:01:08,390
그래서 이것들은 Flickr에서 발견 한 세 명의 다른 사진 작가의 이미지 9 개 이미지 3 개 이미지입니다.

14
00:01:08,700 --> 00:01:10,920
모든 사진은 크리에이티브 커먼즈 라이선스가 적용됩니다.

15
00:01:10,920 --> 00:01:13,030
여기서 라이센스를 얻을 수 있습니다.

16
00:01:13,050 --> 00:01:46,750
그래서 우리가이 이미지들로 무엇을하기 전에 당신은 URL들을 제거 할 것입니다. 그리고 나는 사진 블로그에 내 나이 든 뼈대 인 ad-Din을 추가 할 것입니다. 그리고 빠른 데모를 할 것입니다. 안녕하세요라고 쓰여진 인사와 내가 작별 인사를하는 사람을 div에 추가하면이 부분과 함께 코드를 작성해야합니다. 그리고 나는 그것들을 저장하려고합니다. 그리고 나서 저는 스타일 시트를 추가 할 것입니다. SS 다음에는 여기에서 내 div 스타일을 지정하겠습니다.

17
00:01:46,770 --> 00:01:53,890
그래서 나는 실제로 그들에게 I.D. 그냥 하나 부르세요.

18
00:01:54,270 --> 00:02:27,630
다시 한번 이것은 무언가를 보여 주려는 것입니다. 그리고 나서 여기 저기로 하나와 둘을 고를 것입니다. 그리고 제가 할 일은 그들에게 다른 배경색을 빨간색으로 그리고 배경색을 보라색으로하고 나서 저는 그들 모두에게 모든 div와 100 픽셀의 너비를 줄 것입니다.

19
00:02:27,630 --> 00:02:32,430
그래서 이렇게하면 브라우저에서 열어 봅니다.

20
00:02:33,540 --> 00:02:36,970
우리는 하나씩 두 개의 div를 가지고 있습니다.

21
00:02:36,990 --> 00:02:39,020
우리가 검사한다면 그들은 그것을 기억하십시오.

22
00:02:39,480 --> 00:02:44,280
그것들은 기본적으로 블록 레벨 요소를 자신의 라인으로 사용하도록 설정됩니다.

23
00:02:44,280 --> 00:02:54,490
그래서 우리가 이미지 그리드에 대해 수행하고자하는 일이 일어나기를 원하지 않는다면, 우리의 이미지가 그리드 또는 다중을 형성하기를 원한다면 같은 라인에 위치하게됩니다.

24
00:02:54,540 --> 00:03:01,690
그렇다면 div를 사용하여이 작업을 수행하려면 float라는 속성을 사용해야합니다. 그렇지 않으면 수행 할 수있는 한 가지 방법입니다.

25
00:03:01,740 --> 00:03:06,780
그래서 여기서 내가하는 것은 안전 플로트가 남았습니다.

26
00:03:06,780 --> 00:03:11,390
문서의 정상 흐름에서 모든 div 요소를 취합니다.

27
00:03:11,580 --> 00:03:14,730
따라서 현재 각각 별도의 줄에 스택이 있습니다.

28
00:03:15,000 --> 00:03:23,090
그리고 일어날 일은 중력이 문서에서 거의 사라지는 것처럼 왼쪽으로 떠 다닐 것입니다.

29
00:03:23,280 --> 00:03:26,380
그래서이 부서는 떠 다니고 왼쪽으로 밀릴 겁니다.

30
00:03:26,400 --> 00:03:27,580
이것에 대해서.

31
00:03:27,990 --> 00:03:32,200
그래서 내가 여기 신선했다면 당신은 그들이 같은 줄에 있다는 것을 알 수 있습니다.

32
00:03:32,280 --> 00:03:41,840
그래서 우리는이 원리를 사용하여 이미지를 사용할 때 기본적으로 서로 위로 올라가서 그리드를 형성 할 수 있습니다.

33
00:03:41,970 --> 00:03:49,910
그래서 지금이 모든 것을 제거하고 우리가 가지고있는 장치를 없애고 나는 이와 같이 우리의 이미지를 추가 할 것입니다.

34
00:03:50,280 --> 00:03:57,040
따라서이 전체 화면을 만들고이 비디오에 포함 된 해당 파일의 이미지 링크에 붙여 넣기로하겠습니다.

35
00:03:57,810 --> 00:04:08,230
그리고 이렇게 9 개의 이미지 태그를 만들어 이미지 태그를 만든 다음 9시에 붙여 넣으면 아주 느려집니다.

36
00:04:08,490 --> 00:04:22,730
나는 여기에서 모든 라인의 시작 부분을 선택하기 위해 command 키를 누른 다음 이미지 소스를 입력하고 라인의 끝으로 이동하려고하는 숭고한 마법을 사용하려고한다.

37
00:04:22,800 --> 00:04:35,380
그래서 저는 명령을 사용했습니다. 오른쪽 화살표 명령 왼쪽 화살표는 시작 명령으로 바로 끝까지갑니다. 그리고 나서 따옴표와 닫는 대괄호로 끝낼 것입니다.

38
00:04:35,400 --> 00:04:40,550
그래서 그것은 당신이 엘프 인 모든 사람들을 이미지 태그로 묶는 정말 쉽고 빠른 방법이었습니다.

39
00:04:40,920 --> 00:04:46,340
따라서 이것을 저장하면 브라우저로 이동하면 새로 고침 할 때 표시됩니다.

40
00:04:46,530 --> 00:04:47,960
이제 9 개의 이미지가 있습니다.

41
00:04:48,090 --> 00:04:49,680
물론 통합되지 않습니다.

42
00:04:49,890 --> 00:04:53,890
그들은 많은 공간을 차지하고 있습니다.

43
00:04:54,060 --> 00:05:01,230
이제 우리가 할 일은 우리의 스타일 시트로 가서 모든 이미지를 선택하는 것입니다.

44
00:05:01,230 --> 00:05:05,520
그리고 우리가 여기서하고 싶은 첫 번째 일은 단지 그들을 버리는 것입니다.

45
00:05:06,090 --> 00:05:13,280
그래서 시작하는 데 100 픽셀과 같은 것을 주자. 이것은 너무 작을 것입니다.

46
00:05:13,710 --> 00:05:26,360
그러나 나는 당신에게 어떤 일이 일어나고 있는지보고 싶을뿐입니다. 그리고이 모든 이미지들이 이제 함께 라인에 있지만, 우리가 지정하지 않은 것들 사이에 약간의 간격이 있음을 알게 될 것입니다.

47
00:05:26,430 --> 00:05:29,780
우리는 여백이나 패딩 또는 아무것도 설정하지 않습니다.

48
00:05:29,790 --> 00:05:36,040
그래서 무슨 일이 일어나고 실제로 추가되는 약간의 공백이 있고 그것은 스팀 올빼미에있는 기발한 것입니다.

49
00:05:36,050 --> 00:05:42,870
그러나 이미지가 없으면 공백이나 공백이 추가됩니다.

50
00:05:43,140 --> 00:05:51,540
그래서 우리가 제거하고 싶다면 우리는 float을 사용할 수 있으며 float은 문서의 흐름에서 물건을 빼앗아 간다는 것을 기억하십시오.

51
00:05:51,570 --> 00:05:59,800
그래서 새로 고침하면 이제 이미지가 서로 대립하고 기본적으로 그 사이에 공간이 전혀 없음을 볼 수 있습니다.

52
00:06:00,150 --> 00:06:04,120
그리고 나서 우리는 되돌아 가서 그 공간을 우리 자신에 추가 할 수 있습니다.

53
00:06:04,170 --> 00:06:07,020
그래서 우리는 분명히 그들이이 작은 공간을 차지하기를 원하지 않습니다.

54
00:06:07,020 --> 00:06:13,700
우리는 세 번 가고 싶어하고 우리는 그들 사이에 약간의 마진을 원하지만 우리는 그것을 통제하기를 원합니다.

55
00:06:14,160 --> 00:06:27,320
그래서 그들을 떠 다니는 것에 의해 우리는 브라우저가 우리를 위해 추가 한 공백을 없앴습니다. 그래서 실제 공백이 아닌 margin 속성을 사용하여 우리 자신의 사용자 정의 간격으로 들어갈 수 있습니다.

56
00:06:28,920 --> 00:06:33,670
이제 너비를 변경하고 30 %부터 시작하겠습니다.

57
00:06:33,720 --> 00:06:39,180
따라서 이스라엘의 비율은 신체의 부모 요소에 상대적이라는 것을 기억하십시오.

58
00:06:39,180 --> 00:06:41,910
그래서 각각은 신체의 30 퍼센트를 차지할 것입니다.

59
00:06:41,910 --> 00:06:46,830
그리고 제가 30 살부터 시작하는 이유는 그들이 모두 한 줄에 들어가거나 세 가지가 맞는지 확인하는 것입니다.

60
00:06:46,830 --> 00:06:52,120
내 마음 속에서 우리는 그들 사이에 공간을 가로 지르지 않고가는 세 개를 보게 될 것입니다.

61
00:06:52,260 --> 00:06:58,370
그리고 우리가 차지하는 비율이 90 %에 불과하므로 여기에 10 %가 있습니다.

62
00:06:58,470 --> 00:07:06,790
따라서 우리는 실제로 다른 여백을 사용하여 마진을 분할하고 그 사이에 간격을 추가합니다.

63
00:07:07,020 --> 00:07:09,460
그래서 우리는 이미 3x3 격자를 가지고 있습니다.

64
00:07:09,650 --> 00:07:12,550
우리가 다음에하고 싶은 것은 그것을 이렇게 보입니다.

65
00:07:12,750 --> 00:07:15,000
또는 우리는 그들 사이에 간격이 있습니다.

66
00:07:15,180 --> 00:07:17,870
그래서 우리는 실제로 약간의 수학을해야합니다.

67
00:07:18,060 --> 00:07:18,860
그래서 나는 이미 해냈다.

68
00:07:18,870 --> 00:07:26,210
하지만 근본적으로 여기에 여백이 있다고 계산하면 여기에도 여백이 있습니다.

69
00:07:26,570 --> 00:07:28,430
여기에 여백이 있습니다.

70
00:07:28,600 --> 00:07:32,400
그리고 이것에 관해서는이 하나에 5.

71
00:07:32,670 --> 00:07:34,910
그리고이 하나 또는 여섯.

72
00:07:34,920 --> 00:07:45,570
그래서 우리는 10 퍼센트를 가지며, 6으로 나누고 10을 6으로 나눈 값을 6으로 나누어야합니다.

73
00:07:45,570 --> 00:07:52,810
그래서 우리가 할 일은 여백 1 점 6 %라고 말하고 있습니다.

74
00:07:52,950 --> 00:08:01,900
따라서 브라우저로 돌아가 결과를 확인하고 새로 고침하면 간격이 3 개인 균일 한 이미지가 표시됩니다.

75
00:08:01,950 --> 00:08:04,850
그래서 수학은 한 번 더 명중했습니다.

76
00:08:05,070 --> 00:08:06,570
이들 각각은 10 퍼센트입니다.

77
00:08:06,570 --> 00:08:07,980
그래서 그들은 단지 30 퍼센트를줍니다.

78
00:08:08,160 --> 00:08:12,370
그리고 어느 쪽에도 1.6 %의 여백이 있습니다.

79
00:08:12,390 --> 00:08:22,920
그래서 우리는 양측을 좌우 한 점씩 6 번 2 번 플러스 30 %로 가져 가고이 중 하나 하나에 대해 각각 33 % 3 %를 얻습니다.

80
00:08:22,920 --> 00:08:29,330
그래서 1/3 정도가 정확히 반올림하지만 여기에서 할 수있는 최선의 방법입니다.

81
00:08:29,530 --> 00:08:30,800
그래서 삼십 삼 삼 점.

82
00:08:30,810 --> 00:08:35,200
이들 각각을 검증하기 위해 검사 할 수 있습니다.

83
00:08:35,670 --> 00:08:36,670
우리는 거기에 갈.