260119 (반응형, 모바일 퍼스트, 데스크탑 퍼스트)

html

<header class="pc_top_bar visible-on-md-up">PC 탑바</header>
<header class="mobile_top_bar visible-on-sm-down">모바일 탑바</header>

css

.visible-on-md-up, .visible-on-sm-down {
  display: none;
}

/* 768 이상에서만 보임 */
@media (min-width: 768px) {
  .visible-on-md-up {
    display: block;
  }
}

/* 767이하에서만 보임 */
@media (max-width: 767px) {
  .visible-on-sm-down {
    display: block;
  }
}

모바일 퍼스트

• 기본 스타일을 모바일 기준으로 작성
• 화면이 커지면 min-width 미디어쿼리로 점진적으로 레이아웃을 확장
  작은화면 -> 큰 화면 순서로 스타일 적용
• 현대 트렌드, 유지보수 용이
  https://codepen.io/KangEunsu1/pen/azZJevG

데스크탑 퍼스트

• 기본 스타일을 데스크탑 기준으로 작성
• 화면이 작아지면 max-width 미디어쿼리로 조정ㅈ
  큰화면 -> 작은화면 순서로 스타일 적용
  -레거시 코드, 데스크탑 우선 디자인
  https://codepen.io/KangEunsu1/pen/ByzWXjN?editors=1100