2021-05-27 (45일차) flex-box, flex-shirink, flex-grow, min-height, 반응형 이미지, 배경이미지, 이미지 위에 글씨(텍스트), 미디어쿼리, @media, 반응형 상단바, position : fixed, overflow-x : auto

155강~160강

 

 

- 개구리 flex box 게임

 

- 디펜스 flex box 게임

 

- flex box playground 익히기

 

#문제. flex를 이용해서 성배 레이아웃 만들기

 

- flex-shirink

  flex-shirink : 0;을 넣어주면 화면이 아무리 작아져도 자신의 너비를 고정시키고 있음

  기본값 : 1

 

- flex-grow  

  flex-grow : 1; 을 주면 최대로 늘어난다

  나란히 있는 태그들에 모두 flex-grow : 1;을 주면 일정한 비율로 나뉘어 늘어난다.

  예외 ) 나란히 있는 태그들의 내용의 너비가 다르다면 (고유의 너비가 있는 상태)

           남는 여백을 똑같이 나누어 갖는 것이기 때문에 일정한 비율로 나누어지지 않음

  해결책 )  태그들에게 width : 0;을 준 후 flex-grow :1 을 주면 완벽한 비율로 나누어짐

 

- min-height

  : 최소 높이

   min-height : 100vh; => 내용이 없어도 높이는 그대로, 내용이 늘어나면 그에 따라 높이도 늘어남

 

- 반응형 이미지 넣는 방법

  img {  width : 100%; display : block; height : 100%; object-fit : cover;  }

 

- 이미지 위에 글씨( 이미지 배경) 넣는 방법

  어려워서 링크 참고.. https://www.youtube.com/watch?v=61yFlkdxGcY

 

< @media >

- 상단바가 모바일 모드에서 축소되어, 따라다니도록 하는 방법

  : 미디어쿼리 이용

  : 탑바에 맞게 사이즈 조정하기 (ex) 메뉴의 좌우 패딩 값, 로고 크기, 메뉴 크기 등…

 

ex) @media ( max-width : 700px ) {

    .top-bar {

    height:40px;

    background-color:white;

    position:fixed;

    top :0;

    left:0;

    width:100%; }

    body {

    padding-top:40px; }   → 탑바가 하단 내용을 안 가리게 하기 위해       

    }

 

- position : fixed;

  : 스크롤바를 따라다님

  ㄴ position : absolute와 같지만 스크롤바를 따라다니지 않음

 

 

- 상단바의 우측의 내용들이 화면이 작아졌을 때, 스크롤바 처리하는 방법

  ㄴ 해당 태그 안에 overflow-x :auto; 넣어주기

 

- overflow-x : auto;

  : 필요시 스크롤바 생성