3-타일 레이아웃

소개

이 랩에서는 display: inline-block을 사용하여 3-타일 레이아웃을 만드는 방법을 배웁니다. width와 calc를 사용하여 컨테이너를 3 개의 열로 균등하게 나누고, 공백을 피하기 위해 font-size를 설정합니다. 이 랩을 마치면 float, flex 또는 grid를 사용하지 않고 깔끔하고 반응형 타일 레이아웃을 만드는 방법에 대한 이해도가 높아질 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 96%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

3-타일 레이아웃을 만들려면 float, flex 또는 grid 대신 display: inline-block을 사용하십시오. width를 calc와 함께 사용하여 컨테이너의 너비를 3 개의 열로 균등하게 나눕니다. 공백을 피하려면 .tiles에 font-size를 0으로 설정하고, 텍스트를 표시하기 위해 <h2> 요소에 20px로 설정합니다. 블록 사이의 공백을 없애기 위해 font-size: 0을 사용하는 것은 상대 단위 (예: em) 를 사용하는 경우 부작용을 일으킬 수 있습니다.

<div class="tiles">
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
  <div class="tile">
    <img src="https://via.placeholder.com/200x150" />
    <h2>30 Seconds of CSS</h2>
  </div>
</div>

.tiles {
  width: 600px;
  font-size: 0;
  margin: 0 auto;
}

.tile {
  width: calc(600px / 3);
  display: inline-block;
}

.tile h2 {
  font-size: 20px;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 3-타일 레이아웃 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.

반응형 타일 레이아웃 만들기

소개

3-타일 레이아웃

요약