CSS 플로트가 있는 Lookbook

에 대한

우리가 일상 생활에서 Float를 사용하지 않더라도.
float를 학습하면 상자와 페이지의 정상적인 흐름에서 상자의 동작에 대해 깊이 이해할 수 있습니다.

시작하자!

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

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

상자가 있는 구조

여기에 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에 Cascading이 있고 위에서 아래로 작동한다는 것을 알고 있으므로 이를 활용하고 각각에 대해 새 클래스를 만들 것입니다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를 사용하여 모든 것을 연결하는 방법입니다.

상자의 클래스에 모든 너비가 이미 고정되어 있기 때문입니다. Cascading 효과를 사용하여 각 상자의 높이를 덮어씁니다. 그리고 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 그리드를 사용하여 이와 동일한 룩북을 수행하는 방법에 대한 새 게시물을 작성할 의도가 있습니다.
이 튜토리얼이 CSS Floats에 대해 더 많이 이해하는 데 도움이 되기를 바랍니다.

내 소셜

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

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