반응형으로 만들기 | 풀스택개발 EastFlag

미디어쿼리와 Grid 시스템 이해

웹을 반응형으로 만들기 위해서는 미디어 쿼리를 사용해야한다.

앵규러가 모바일에 최적화되도록 용량을 줄여주는 역할을 한다면 반응형으로 보이기 위해서는 미디어 쿼리가 필요하다.

부트스트랩3과 4가 가장 다른 점은 4에서는 flex 레이아웃을 사용한다는 점이다.

grid 사이즈는 3과 4가 차이가 없다.

.col- (extra small devices – screen width less than 576px)
.col-sm- (small devices – screen width equal to or greater than 576px)
.col-md- (medium devices – screen width equal to or greater than 768px)
.col-lg- (large devices – screen width equal to or greater than 992px)
.col-xl- (xlarge devices – screen width equal to or greater than 1200px)

메인화면 구성

부트스트랩 카드를 이용해서 4개의 카드를 배치한다.

div 블럭이므로 세로로 4개가 나란히 배치될것이다.

<div class="card">
  <div class="card-body">
    <h4 class="card-title">1주차</h4>
    <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h4 class="card-title">2주차</h4>
    <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
  </div>
</div>

<div class="card">
  <div class="card-body ">
    <h4 class="card-title">3주차</h4>
    <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h4 class="card-title">4주차</h4>
    <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
  </div>
</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

md에서는 가로로 3개가 sm 에서는 2개 그 이하에서는 카드가 한개가 배치되도록 바꿔보자.

<div class="row">
  <div class="card col-sm-6 col-md-4">
    <div class="card-body">
      <h4 class="card-title">1주차</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
    </div>
  </div>

  <div class="card col-sm-6 col-md-4">
    <div class="card-body">
      <h4 class="card-title">2주차</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
    </div>
  </div>

  <div class="card col-sm-6 col-md-4">
    <div class="card-body ">
      <h4 class="card-title">3주차</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
    </div>
  </div>

  <div class="card col-sm-6 col-md-4">
    <div class="card-body">
      <h4 class="card-title">4주차</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
    </div>
  </div>
</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

디버깅툴을 사용해서 row 클래스를 찍어보면 row가 flex 라는것을 알 수 있다.

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.row {

display: flex;

flex-wrap: wrap;

margin-right: -15px;

margin-left: -15px;

}

또한, md와 sm 에 대해서 미디어쿼리가 설정된것을 볼 수 있다.

@media (min-width: 768px)
.col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

@media (min-width: 576px)
.col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

@media (min-width: 768px)

.col-md-4 {

flex: 0 0 33.333333%;

max-width: 33.333333%;

}

@media (min-width: 576px)

.col-sm-6 {

flex: 0 0 50%;

max-width: 50%;

}

grid 레이아웃이라 박스들이 붙어있다. 이 박스들에 마진값을 주면 어떻게 될까?

이 박스들에 마진값을 주면 12 칸을 넘어가므로 원하는대로 만들수가 없다.

박스를 감싸는 래핑박스를 두고 그 안에 넣어야 마진값을 설정할 수 있다.

<div class="row">
  <div class="col-sm-6 col-md-4 p-2">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">1주차</h4>
        <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-4 p-2">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">2주차</h4>
        <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-4 p-2">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">3주차</h4>
        <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-md-4 p-2">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">4주차</h4>
        <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      </div>
    </div>
  </div>
</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>

</div>

상단 메뉴 바 구성

먼저 부트스트랩의 navbar 컴포넌트에서 collapse되는 햄버거 메뉴를 테스트 해보자. 여기서는 부트스트랩 형태의 collapse가 아니라 좀 더 일반적인 방법으로 구현해본다.

우측 상단 메뉴 리스트를 sm 구간에서는 보이고 그 이하에서는 보이지 않도록 해보자.

d-none은 모든 구간에서 안보이게 하는것이고 d-sm-flex는 sm 구간에서 flex로 설정한다.

앞에서 부터 순서대로 적용이 되므로 화면을 줄이면서 테스트해보자.

    <ul class="navbar-nav hidden-xs-down d-none d-sm-flex">

1	<ul class="navbar-nav hidden-xs-down d-none d-sm-flex">

sm 이하 구간에서는 이제 메뉴 리스트가 안보이므로 sm 이하 구간에서 햄버거 메뉴나 드랍다운 메뉴를 배치하고

클릭하면 하단 메뉴가 펼쳐지도록 하자.

https://ng-bootstrap.github.io/#/components/dropdown

위에 나온 example를 그대로 복사해서 붙이고 sm 구간에서는 안보여야 되므로 d-sm-none만 추가한다.

    <div ngbDropdown class="d-inline-block d-sm-none">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
      </div>
    </div>

<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>

<button class="dropdown-item">Action - 1</button>

<button class="dropdown-item">Another Action</button>

<button class="dropdown-item">Something else is here</button>

</div>

메뉴 위치가 우측 하단에 오도록 placement를 추가하고 dropdown-item으로 변경한다.

    <div ngbDropdown class="d-inline-block d-sm-none" placement="bottom-right">
      <button class="btn btn-outline-light" id="dropdownBasic1" ngbDropdownToggle>dropdown menu</button>
      <div ngbDropdownMenu>
        <button class="dropdown-item" routerLink="/jquery" routerLinkActive="active">jquery</button>
        <button class="dropdown-item" routerLink="/todo" routerLinkActive="active">todo</button>
        <button class="dropdown-item" routerLink="/heroes" routerLinkActive="active">heroes</button>
        <button class="dropdown-item" routerLink="/admin" routerLinkActive="active">admin</button>
        <button class="dropdown-item" routerLink="/login" routerLinkActive="active"
                *ngIf="!authService.isLogIn()">login</button>
        <button class="dropdown-item" (click)="authService.logout()"
                *ngIf="authService.isLogIn()">logout</button>
      </div>
    </div>

<button class="btn btn-outline-light" id="dropdownBasic1" ngbDropdownToggle>dropdown menu</button>

<button class="dropdown-item" routerLink="/jquery" routerLinkActive="active">jquery</button>

<button class="dropdown-item" routerLink="/heroes" routerLinkActive="active">heroes</button>

<button class="dropdown-item" routerLink="/admin" routerLinkActive="active">admin</button>

<button class="dropdown-item" routerLink="/login" routerLinkActive="active"

*ngIf="!authService.isLogIn()">login</button>

<button class="dropdown-item" (click)="authService.logout()"

*ngIf="authService.isLogIn()">logout</button>

</div>

heroes 수정

scss에 ul에 패딩을 0으로 준다.

md 이하 구간에서는 한줄 꽉차게 하고 md 이상 구간에서는 50%만 차지하게 한다.

<ul>
  <li class="d-flex m-1" *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero===selectedHero"
    routerLink="/heroes/detail/{{hero.hero_id}}">
    <span class="rounded-left p-2 bg-primary text-light text-center col-2 col-md-1">{{hero.hero_id}}</span>
    <div class="rounded-right p-2 bg-light text-dark col-10 col-md-5">{{hero.name}}</div>
  </li>
</ul>

<ul>

<li class="d-flex m-1" *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero===selectedHero"

routerLink="/heroes/detail/{{hero.hero_id}}">

</li>

</ul>

이번에는 가로로 2줄이 되도록 배치해보자.