CSS 플로트가 포함된 룩북

에 대한

일상 생활에서 수레를 사용하지 않더라도.
플로트를 학습하면 상자에 대한 깊은 이해와 페이지의 정상적인 흐름에서의 동작을 알 수 있습니다.

시작하자!

이 게시물은 이 레이아웃의 룩북 섹션에 관한 것입니다.

우선 이미지를 볼 때 종이에 그림을 그려서 용기가 어디에 있는지, 어떻게 구성되어 있는지, 누가 누구를 포장하고 있는지 상상해 봅니다.

상자가 있는 구조

여기에는 6개의 상자(하위 컨테이너)를 감싸는 하나의 섹션(상위 컨테이너)이 있습니다.



이것은 번역할 수 있는 내 대략적인 스케치입니다.

HTML

<section  class="lookbook">
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
    <div  class="box"></div>
</section>

CSS

.lookbook  {
width:  100%;
height:  80vh;
border:  1px  solid  black;
} 

.box  {
border:  1px  solid  red;
float:  left;
width:  30%;
height:  30vh;
margin:  10px;
}

이는 다음과 같이 번역됩니다.


부인 성명:

순전히 튜토리얼의 목적을 위한 것이기 때문에 이 튜토리얼에는 의미론적 값이 없기 때문에 div 요소를 사용하고 있습니다. 홈페이지 제작시 접근성이 중요하니 sections, articles를 이용하세요.

지금까지 사용한 값을 설명합니다.

.lookbook {
  width: 100%;
  height: 80vh;
  border: 1px solid black;
}

컨테이너의 높이는 항상 내용물입니다. 따라서 내 섹션의 높이를 갖도록 값을 지정해야 합니다. 여기서 전체 화면이 되도록 100vh(뷰포트 높이)로 사용할 수 있지만 전체 상자를 볼 수 있도록 80으로 사용하겠습니다.
이것이 유일한 방법입니까? 아니요. height: 80vh를 overflow: auto로 대체할 수 있습니다.

.box {
  float: left;
  width: 30%;
  height: 100px;
  background: black;
  margin: 0.5%;
}

모든 상자를 왼쪽에 띄우고 각 상자의 너비가 30%이므로 값이 100%를 초과하면 다음 상자가 다음 행으로 이동합니다. 그래서 저는 항상 행당 3개의 상자를 갖게 됩니다.
나는 상자 사이에 이 틈 같은 느낌을 주기 위해 각 상자의 모든 면에 여백을 둡니다.

상자 확장

CSS에는 캐스케이딩이 있고 위에서 아래로 작동한다는 것을 알고 있으므로 이를 활용하고 각각에 대한 새 클래스를 만들 것입니다div .
그런 식으로 상자의 클래스에서 이전에 이미 정의된 각 상자의 각 높이를 덮어쓸 수 있습니다.

HTML

<section class="lookbook">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
  <div class="box six"></div>
</section>

CSS

.lookbook {
  width: 100%;
  height: 80vh;
  border: 1px solid black;
}

.box {
  border: 1px solid red;
  float: left;
  width: 30%;
  height: 30vh;
  margin: 10px;
}

.one {
  height: 25vh;
}

.two {
  height: 50vh;
}

.three {
  height: 25vh;
}

.four {
  clear: both;
  height: 50vh;
  margin-top: -24vh;
}

.five {
  height: 25vh;
}

.six {
  height: 50vh;
  margin-top: -24vh;
}

결과는 다음과 같습니다

내가 사용한 새로운 값을 설명합니다.

.four {
  clear: both;
  height: 50vh;
  margin-top: -24vh;
}

나는 이 클래스가 가장 까다로운 클래스라고 생각하는데, 페이지를 정상적인 흐름 상태로 되돌리기 위해 클리어했기 때문입니다. 이것이 CSS Float를 사용하여 모든 것을 연결하는 방법입니다.

상자의 클래스에 이미 모든 너비가 고정되어 있기 때문입니다. 계단식 효과를 사용하여 각 상자의 높이를 덮어씁니다. 그리고 margin-top을 사용하여 요소를 끌어올린 다음 내 섹션의 컨테이너 내부에 정렬했습니다.

이미지의 문제

이제 구조가 있고 상자 안에 이미지를 사용하기로 결정했지만 이런 일이 발생했습니다.

HTML

<section class="lookbook">
  <div class="box one">
    <img src="https://via.placeholder.com/500" />
  </div>
  <div class="box two"></div>
  <div class="box three"></div>
  <div class="box four"></div>
  <div class="box five"></div>
  <div class="box six"></div>
</section>

이것은 완전히 괜찮습니다. 이미지는 자체 너비와 높이를 갖습니다. 상자가 이미 정의되어 있기 때문에 부모 요소 내에서 잘 작동하도록 이미지에 알려야 합니다.

어떻게 해야 할까요? CSS가 답입니다.

이것을 img element 의 css 에 추가합니다.

CSS

img {
  width: 100%;
  height: 100%;
}

이미지 수정

HTML

<section class="lookbook">
  <div class="box one">
    <img src="https://via.placeholder.com/500" />
  </div>
  <div class="box two"><img src="https://via.placeholder.com/500" /></div>
  <div class="box three"><img src="https://via.placeholder.com/500" /></div>
  <div class="box four"><img src="https://via.placeholder.com/500" /></div>
  <div class="box five"><img src="https://via.placeholder.com/500" /></div>
  <div class="box six"><img src="https://via.placeholder.com/500" /></div>
</section>

CSS

.lookbook {
  width: 100%;
  height: 80vh;
  border: 1px solid black;
}

.box {
  border: 1px solid red;
  float: left;
  width: 30%;
  height: 30vh;
  margin: 10px;
}

.one {
  height: 25vh;
}

.two {
  height: 50vh;
}

.three {
  height: 25vh;
}

.four {
  clear: both;
  height: 50vh;
  margin-top: -24vh;
}

.five {
  height: 25vh;
}

.six {
  height: 50vh;
  margin-top: -24vh;
}

img {
  width: 100%;
  height: 100%;
}

이제 우리의 것borders을 제거할 수 있습니다.

그리고 여기 CSS Floats를 사용하여 만든 Lookbook이 있습니다.

미래를 위해

CSS Grid를 사용하여 동일한 룩북을 수행하는 방법에 대한 새 게시물을 작성하려고 합니다.
이 튜토리얼이 CSS Float에 대해 더 많이 이해하는 데 도움이 되기를 바랍니다.

내 소셜

질문이 있거나 100Devs 부트캠프에 있다면 저를 팔로우하세요.

트위터:
Github: https://github.com/mpfdev