이 비디오에서는 처음부터이 사진 작가의 포트폴리오 사이트를 만들 계획입니다.
그리고 대개 저는 독자적으로이 작업을 시도한 다음 이에 대한 솔루션 비디오를 제공하도록 요청할 것입니다.
그러나 이번에는 고의적 인 코드가 있습니다.
그래서 나는 함께 코드를 작성해보고 싶습니다. 원하는 경우 다음 번에 코드를 한 번 보면서 코드화 할 수 있습니다.
그러나 여기서의 목표는 우리가 함께 할 것이며, 우리가 이것을 벗어나고 싶은 다른 두 가지가 있다는 것입니다.
첫 번째 것은 float라는 새로운 속성이 있고 두 번째 것은 단지 당신이 약간 자랑 스러울 수있는 것을 구축하는 약간의 경험을 얻길 바란다는 것입니다.
그것은 우리가 지금까지 해 온 정말 밝은 색상 들인 단순한 것들보다 조금 나아졌습니다.
그래서 이것은 우리가해야 할 최소한의 사진 블로그입니다.
시작하겠습니다.
숭고한 열어 라.
HMO라는 Photo Grid라는 단일 파일이 있습니다.
먼저 이미지 나 다른 것들을 보여 드리겠습니다.
그래서 이것들은 Flickr에서 발견 한 세 명의 다른 사진 작가의 이미지 9 개 이미지 3 개 이미지입니다.
모든 사진은 크리에이티브 커먼즈 라이선스가 적용됩니다.
여기서 라이센스를 얻을 수 있습니다.
그래서 우리가이 이미지들로 무엇을하기 전에 당신은 URL들을 제거 할 것입니다. 그리고 나는 사진 블로그에 내 나이 든 뼈대 인 ad-Din을 추가 할 것입니다. 그리고 빠른 데모를 할 것입니다. 안녕하세요라고 쓰여진 인사와 내가 작별 인사를하는 사람을 div에 추가하면이 부분과 함께 코드를 작성해야합니다. 그리고 나는 그것들을 저장하려고합니다. 그리고 나서 저는 스타일 시트를 추가 할 것입니다. SS 다음에는 여기에서 내 div 스타일을 지정하겠습니다.
그래서 나는 실제로 그들에게 I.D. 그냥 하나 부르세요.
다시 한번 이것은 무언가를 보여 주려는 것입니다. 그리고 나서 여기 저기로 하나와 둘을 고를 것입니다. 그리고 제가 할 일은 그들에게 다른 배경색을 빨간색으로 그리고 배경색을 보라색으로하고 나서 저는 그들 모두에게 모든 div와 100 픽셀의 너비를 줄 것입니다.
그래서 이렇게하면 브라우저에서 열어 봅니다.
우리는 하나씩 두 개의 div를 가지고 있습니다.
우리가 검사한다면 그들은 그것을 기억하십시오.
그것들은 기본적으로 블록 레벨 요소를 자신의 라인으로 사용하도록 설정됩니다.
그래서 우리가 이미지 그리드에 대해 수행하고자하는 일이 일어나기를 원하지 않는다면, 우리의 이미지가 그리드 또는 다중을 형성하기를 원한다면 같은 라인에 위치하게됩니다.
그렇다면 div를 사용하여이 작업을 수행하려면 float라는 속성을 사용해야합니다. 그렇지 않으면 수행 할 수있는 한 가지 방법입니다.
그래서 여기서 내가하는 것은 안전 플로트가 남았습니다.
문서의 정상 흐름에서 모든 div 요소를 취합니다.
따라서 현재 각각 별도의 줄에 스택이 있습니다.
그리고 일어날 일은 중력이 문서에서 거의 사라지는 것처럼 왼쪽으로 떠 다닐 것입니다.
그래서이 부서는 떠 다니고 왼쪽으로 밀릴 겁니다.
이것에 대해서.
그래서 내가 여기 신선했다면 당신은 그들이 같은 줄에 있다는 것을 알 수 있습니다.
그래서 우리는이 원리를 사용하여 이미지를 사용할 때 기본적으로 서로 위로 올라가서 그리드를 형성 할 수 있습니다.
그래서 지금이 모든 것을 제거하고 우리가 가지고있는 장치를 없애고 나는 이와 같이 우리의 이미지를 추가 할 것입니다.
따라서이 전체 화면을 만들고이 비디오에 포함 된 해당 파일의 이미지 링크에 붙여 넣기로하겠습니다.
그리고 이렇게 9 개의 이미지 태그를 만들어 이미지 태그를 만든 다음 9시에 붙여 넣으면 아주 느려집니다.
나는 여기에서 모든 라인의 시작 부분을 선택하기 위해 command 키를 누른 다음 이미지 소스를 입력하고 라인의 끝으로 이동하려고하는 숭고한 마법을 사용하려고한다.
그래서 저는 명령을 사용했습니다. 오른쪽 화살표 명령 왼쪽 화살표는 시작 명령으로 바로 끝까지갑니다. 그리고 나서 따옴표와 닫는 대괄호로 끝낼 것입니다.
그래서 그것은 당신이 엘프 인 모든 사람들을 이미지 태그로 묶는 정말 쉽고 빠른 방법이었습니다.
따라서 이것을 저장하면 브라우저로 이동하면 새로 고침 할 때 표시됩니다.
이제 9 개의 이미지가 있습니다.
물론 통합되지 않습니다.
그들은 많은 공간을 차지하고 있습니다.
이제 우리가 할 일은 우리의 스타일 시트로 가서 모든 이미지를 선택하는 것입니다.
그리고 우리가 여기서하고 싶은 첫 번째 일은 단지 그들을 버리는 것입니다.
그래서 시작하는 데 100 픽셀과 같은 것을 주자. 이것은 너무 작을 것입니다.
그러나 나는 당신에게 어떤 일이 일어나고 있는지보고 싶을뿐입니다. 그리고이 모든 이미지들이 이제 함께 라인에 있지만, 우리가 지정하지 않은 것들 사이에 약간의 간격이 있음을 알게 될 것입니다.
우리는 여백이나 패딩 또는 아무것도 설정하지 않습니다.
그래서 무슨 일이 일어나고 실제로 추가되는 약간의 공백이 있고 그것은 스팀 올빼미에있는 기발한 것입니다.
그러나 이미지가 없으면 공백이나 공백이 추가됩니다.
그래서 우리가 제거하고 싶다면 우리는 float을 사용할 수 있으며 float은 문서의 흐름에서 물건을 빼앗아 간다는 것을 기억하십시오.
그래서 새로 고침하면 이제 이미지가 서로 대립하고 기본적으로 그 사이에 공간이 전혀 없음을 볼 수 있습니다.
그리고 나서 우리는 되돌아 가서 그 공간을 우리 자신에 추가 할 수 있습니다.
그래서 우리는 분명히 그들이이 작은 공간을 차지하기를 원하지 않습니다.
우리는 세 번 가고 싶어하고 우리는 그들 사이에 약간의 마진을 원하지만 우리는 그것을 통제하기를 원합니다.
그래서 그들을 떠 다니는 것에 의해 우리는 브라우저가 우리를 위해 추가 한 공백을 없앴습니다. 그래서 실제 공백이 아닌 margin 속성을 사용하여 우리 자신의 사용자 정의 간격으로 들어갈 수 있습니다.
이제 너비를 변경하고 30 %부터 시작하겠습니다.
따라서 이스라엘의 비율은 신체의 부모 요소에 상대적이라는 것을 기억하십시오.
그래서 각각은 신체의 30 퍼센트를 차지할 것입니다.
그리고 제가 30 살부터 시작하는 이유는 그들이 모두 한 줄에 들어가거나 세 가지가 맞는지 확인하는 것입니다.
내 마음 속에서 우리는 그들 사이에 공간을 가로 지르지 않고가는 세 개를 보게 될 것입니다.
그리고 우리가 차지하는 비율이 90 %에 불과하므로 여기에 10 %가 있습니다.
따라서 우리는 실제로 다른 여백을 사용하여 마진을 분할하고 그 사이에 간격을 추가합니다.
그래서 우리는 이미 3x3 격자를 가지고 있습니다.
우리가 다음에하고 싶은 것은 그것을 이렇게 보입니다.
또는 우리는 그들 사이에 간격이 있습니다.
그래서 우리는 실제로 약간의 수학을해야합니다.
그래서 나는 이미 해냈다.
하지만 근본적으로 여기에 여백이 있다고 계산하면 여기에도 여백이 있습니다.
여기에 여백이 있습니다.
그리고 이것에 관해서는이 하나에 5.
그리고이 하나 또는 여섯.
그래서 우리는 10 퍼센트를 가지며, 6으로 나누고 10을 6으로 나눈 값을 6으로 나누어야합니다.
그래서 우리가 할 일은 여백 1 점 6 %라고 말하고 있습니다.
따라서 브라우저로 돌아가 결과를 확인하고 새로 고침하면 간격이 3 개인 균일 한 이미지가 표시됩니다.
그래서 수학은 한 번 더 명중했습니다.
이들 각각은 10 퍼센트입니다.
그래서 그들은 단지 30 퍼센트를줍니다.
그리고 어느 쪽에도 1.6 %의 여백이 있습니다.
그래서 우리는 양측을 좌우 한 점씩 6 번 2 번 플러스 30 %로 가져 가고이 중 하나 하나에 대해 각각 33 % 3 %를 얻습니다.
그래서 1/3 정도가 정확히 반올림하지만 여기에서 할 수있는 최선의 방법입니다.
그래서 삼십 삼 삼 점.
이들 각각을 검증하기 위해 검사 할 수 있습니다.
우리는 거기에 갈.