찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

Responsive

• Is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices(like setting the viewport)

Use percent

width:100%;

• will be responsive and scale up and down, but the tag can be scaled up to be larger than its original size

• better solution will be to use the max-width

  • if max-width property is set to 100%, never scale up to be larger than its original size

Use vw unit

• Means the “viewport width”, 1vw = 1% of viewport width

Media Queries

With media queries you can define completely different styles for different browser sizes

<style>
  .left,
  .right {
    float: left;
    width: 20%;
  }
  .main {
    float: left;
    width: 60%;
  }
  /* use a media query to add a breakpoint at 800px */
  @media screen and (max-width: 800px) {
    .left,
    .main,
    .right {
      width: 100%;
    }
  }
</style>