CSS Flexbox & 반응형 웹 만들기

기본적인 flexbox 레이아웃 사용법

박스들을 감싸는 부모 요소에게 display : flex를 사용하면 된다.
그럼 박스들이 기본적으로 가로정렬로 배치된다.

<div class="flex-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.flex-container {
  display : flex;
}
.box {
  width : 100px;
  height : 100px;
  background : grey;
  margin : 5px;
}

자주쓰이는 flexbox의 세부 속성들

.flex-container {
  display : flex;
  justify-content : center;  /* 좌우 방향의 정렬 */
  align-items : center;  /* 상하 방향의 정렬 */
  flex-direction : column; /* flexbox의 방향 */
  flex-wrap : wrap;  /* 넘치는 요소 wrap 처리 */
}
.box {
  flex-grow : 2;  /* 폭이 상대적으로 몇배인지 결정 */
}

모던 웹에서 사용하는 단위 정리

.box {
  width : 16px; /* 기본 px 단위 */
  width : 1.5rem; /* html태그의 폰트사이즈의 1.5배 */
  width : 2em; /* 상위요소 폰트사이즈의 2배 */
  width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */
  width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */
}

반응형 웹을 만들 때 head 태그에 들어가야 할 내용

아래 내용이 들어가 있어야 모바일에서도 예쁜 레이아웃을 만들 수 있다.

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

<아래 내용 참고>
사이트 초기 zoom 레벨이나 폭을 지정해주려면 name="viewport" 라는 속성을 부여하면 된다.

width=device-width는 모바일 기기의 실제 폭으로 렌더링 해주세요 라는 뜻dlek.

요즘 스마트폰 가로 해상도가 1920px을 넘어가는 폰들이 많은데, 이것만 보고 1920px 에 해당하는 페이지를 띄워줄 수는 없겠지?

그래서 실제 접속시 스마트폰 기기의 실제 가로폭을 보고 렌더링하라고 명령하는 부분이라고 생각하면 된다.
initial-scale=1 이 부분은 접속시의 화면 줌레벨 설정이다.

meadia query 사용방법

CSS 파일 최하단에 아래 내용을 적는다. 원하는 폭에 도달했을 경우에만 내부에 정의된 CSS를 적용하게 된다.

@media screen and (max-width : 992px) {
  .box {
    font-size : 40px;
  }
}
 
@media screen and (max-width : 768px) {
  .box {
    font-size : 30px;
  }
}

Bootstrap 권장 Breakpoint?

media query는 필요할 때 마다 사이즈를 넣고 작성하는 것 보다는 미리 모바일/태블릿 레이아웃으로 변하는 기준점(breakpoint)을 정해놓는 것이 중요하다다.

Bootstrap 라이브러리가 권장하는 breakpoint 사이즈 1200px / 992px / 768px / 576px이다.

필기노트...