LabEx
로그인무료 가입

CSS 스타일링 기본

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 CSS 프로그래밍의 기본 사항을 탐구합니다. CSS 를 사용하여 웹 페이지의 스타일을 지정하고 시각적으로 매력적인 디자인을 만드는 방법을 배우게 됩니다. 이 랩을 마치면 CSS 구문, 선택자 (selectors), 속성 (properties) 에 대한 확실한 이해를 갖게 되며, 이를 자신의 프로젝트에 적용할 수 있게 됩니다.

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

전체 너비 이미지

index.html과 style.css에 코드를 작성할 수 있습니다.

전체 너비 이미지를 생성합니다.

  • 부모 요소의 가운데에 이미지를 배치하려면 left: 50% 및 right: 50%를 사용합니다.
  • 뷰포트 크기에 상대적으로 양쪽에서 이미지를 오프셋하려면 margin-left: -50vw 및 margin-right: -50vw를 사용합니다.
  • 뷰포트에 상대적으로 이미지 크기를 조정하려면 width: 100vw 및 max-width: 100vw를 사용합니다.
<main>
  <h4>Lorem ipsum dolor sit amet</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
    lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
    ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
    eu, faucibus interdum felis.
  </p>
  <p>
    <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
  </p>
  <p>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
    gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
    eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
    Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
  </p>
</main>
main {
  margin: 0 auto;
  max-width: 640px;
}

img {
  height: auto;
  max-width: 100%;
}

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

요약

축하합니다! 전체 너비 이미지 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.