웹폰트 반응형 레이아웃

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 font-weight: 300;
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot');
 src: url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.eot?#iefix') format('embedded-opentype'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.woff') format('woff'), url('//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWebLight.ttf') format('truetype');
}

body, input, textarea, select, button, table, p {
    font-family: 'NanumBarunGothic','나눔고딕',NanumGothic,'맑은고딕',MalgunGothic,'돋움',Dotum,Helvetica,'Apple SD Gothic Neo',Sans-serif;
   
    -webkit-font-smoothing: subpixel-antialiased;
    line-height: 1.9;
    font-size: 19px;
    box-sizing: border-box;
}

#container, #footer, #header {
margin: 0 auto;
max-width: 768px;
min-width: 460px;
}

@media screen and (max-width: 450px){}
@media screen and (max-width: 768px) and (min-width: 451px) {}
@media screen and (min-width:994px) {}

</style>

---

// Break Point
$tablet: 768px;
$laptop: 1020px;
$desktop: 1400px;
 
 
// Mixins
@mixin tablet {
  @media (min-width: #{$tablet}) {
    @content;
  }
}
 
@mixin laptop {
  @media (min-width: #{$laptop}) {
    @content;
  }
}
 
 
@mixin desktop {
  @media (min-width: #{$desktop}) {
    @content;
  }
}