모각코 -css(4)

12-2 미디어 쿼리 알아보기

• 미디어 쿼리
  접속하는 장치에 따라 특정한 css 스타일을 사용하는 방법

• 미디어 쿼리 구문
  @media [only|not] 미디어 유형 [and 조건] * [and 조건]

화면크기에 따라 이미지 달라지게 하기

<style>
    body {
      background: url(images/bg0.jpg) no-repeat fixed;  /* 기본 배경 이미지 지정 */
      background-size: cover;
    }
    @media screen and (max-width:1024px) {
      body {
        background: url(images/bg1.jpg) no-repeat fixed;  /* 가로가 1024px 이하면 bg1.jpg 지정 */
        background-size: cover;
      }
    }
    @media screen and (max-width:768px) {
      body {
        background: url(images/bg2.jpg) no-repeat fixed;  /* 가로가 768px 이하면 bg2.jpg 지정 */
        background-size:cover;
      }
    }
    @media screen and (max-width:320px) {
      body {
        background: url(images/bg3.jpg) no-repeat fixed;  /* 가로가 320px 이하면 bg3.jpg 지정 */
        background-size: cover; 
      }
    }
  </style>

@media screen and (min-width:768px) and (max-width:1439px)
미디어 유형이 screen이면서 최소 너비가 768px 이고 최대 너비는 1439px일 경우에만 적용할 css

12-3 그리드 레이아웃

그리드 레이아웃
:반응형 웹 디자인에서 웹문서 요소를 배치하는 기준
웹사이트 회면을 여러 개의 칼럼으로 나눈 후 웹 요소를 배치
화면을 규칙적으로 배열하므로 레이아웃을 일관되게 유지할 수 있다.

1. 가변 그리드를 css의 float속성으로

2. 플렉서블 박스 레이아웃

수평방향이나 수직방향 중 하나를 주축으로 정하고 박스를 배치
여유 공간이 생길 경우 너비나 높이를 적절하게 늘리거나 줄일 수 있음

1. 플렉스 컨테이너 (부모 박스)
2. 플렉스 항목(자식 박스)
3. 주축(main axis) 가로
4. 교차푹(cross asix) 세로

• 플렉스 박스 항목을 배치하는 속성

  -justify-content:주축 방향의 정렬 방법
  -align-items: 교차축 방향 정렬
  -align-self: 교차축에 있는 개별 항목의 정렬 방법
  -align-content: 교차축에서 여러 줄로 표시된 항목의 정렬방법

• 플렉스 컨테이너를 지정하는 display 속성

  플렉스 박스 레이아웃을 만드려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야한다. 즉 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고 그 부모요소를 플렉스 컨테이너로 만들어야한다. 이떄 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 이 부분에 플렉스 박스 레이아웃을 적용하겠다고 지정을 해야한다.
  

  ---

  기본은 row(가로) / flex(세로인 column)으로 생각하자

  ---

  display 속성값 -flex: 컨테이너 안의 플렉스 항목을 **블록레벨**로 요소를 배치한다. -inline-flex: 컨테이너 안의 플렉스 항목을**인라인 **레벨 요소로 배치합니다.

• 플렉스 방향을 지정하는 flex-direction 속성

  주축방향을 지정하는 속성
  -row: 주축을 가로로 ,왼쪽에서 오른쪽 (기본값)
  -row-reverse: 주축을 가로로 ,오른쪽에서 왼쪽
  -column: 주축을 세로로, 위쪽에서 아래
  -column-reverse : 주축을 세로로, 아래에서 위

• 플렉스 항목의 줄을 바꾸는 flex-wrap 속성

  컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정
  -nowrap: 플렉스 항목 한줄에 (기본)
  -wrap: 플렉스 항목 여러줄에
  -wrap-reverse: 플렉스 항목 여러줄에, 시작과 끝점 바뀜

• flex-direction과 flex-wrap을 한번에 지정하는 flex-flow 속성

#opt2{
      flex-flow: row nowrap;  /* 왼쪽에서 오른쪽, 한 줄 */         
    }  주

• 주축 정렬 방법을 지정하는 justify-content 속성

  -flex-start:주축의 시작점에 맞춰
  -flex-end:주축의 끝점에 맞춰
  -center: 주축의 중앙에 맞춰
  -space-between: 첫번째 항목과 끝항목을 주축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에
  -space-around: 모든 주축에 같은 간격으로
  

• 교차축 정렬 방법을 지정하는 align-items

  -flex-start: 교차축 시작점 기준으로 배치
  -flex-end: 교차축 끝점 기준으로 배치
  -center: 교차축 중앙 기준으로 배치
  -baseline: 문자 기준선에 맞춰 배치
  -stretch: 항목을 늘려 교차축에 가득차게 배치
  

• 특정항목만 정렬 방법을 지정하는 align-self 속성

  align-items과 사용하는 값 같다.
  align-items은 플렉스 컨테이너를 지정하는 선택자에서 사용하지만align-self는 플렉스 항목 선택자에서 사용

    .container {
      width:450px;
      height:150px;
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:20px;
      display:flex;         /* 플렉스 컨테이너 지정 */
      align-items: center;  /* 교차축의 중앙에 배치 */
    }   
    #box1 {
      align-self: flex-start;  /* 교차축의 시작점에 배치 */
    }
    #box3 {
      align-self:stretch;       /* 교차축에 가득 차게 늘림 */
    }

• 여러줄일 때 교차축 정렬 방법을 지정하는 align-content속성

  주축에서 줄 바꿈이 생겨 플렉스 항목을 여러줄로 표시 할 때
  -flex-start: 교차축 시작점 기준으로 배치
  -flex-end: 교차축 끝점 기준으로 배치
  -center: 교차축 중앙 기준으로 배치
  -space-between: 첫번째 항목과 끝항목을 교차축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에
  -space-around: 모든 교차축에 같은 간격으로
  -baseline: 문자 기준선에 맞춰 배치
  -stretch: 항목을 늘려 교차축에 가득차게 배치
  

3. css 그리드 레이아웃

최근에 등장한 css 표준
수평 방향이나 수직방향 어디로돈 배치 가능
미치 레고 처럼 블록을 끼워 맞추듯 요소를 배치

주축/교차축 개념이 없다
row와 column으로 화면을 구성

• 그리드 컨테이너를 지정하는 display 속성

  1) 부모 컨테이너에 display:grid선언부터 하자

-grid : 컨테이너 안의 항목을 블록레벨 요소로 배치
-inline-grid : 컨테이너 안의 항목을 인라인 레벨 요소로 배치

• 칼럼과 줄을 지정하는 grid-template-columns, grid-template-rows

  (fr사용이 더 적합)

  #wrapper {
  display:grid;
  grid-template-columns: 200px 200px 200px; 너비가 200px인 칼러 3개
  1fr 1fr 1fr=1:1:1 
  grid-template-columns:repeat(3, 1fr); 너비가 같은 칼럼 3개 
  grid-template-rows:100px; 줄 높이가 100px
  grid-template-rows: minmax(100px, auto);  /* 줄 높이 최소 100px */ 
  }

fr은 상대적인 크기를 지정함

최솟값과 최댓값을 지정하는 minmax() 함수

gird-auto-rows: minma(150px , auto)

자동으로 칼럼의 개수를 조절해 주는 auto-fill,auto-fit

#wrapper1{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));  /* 화면을 꽉 채울만큼 칼럼 너비를 늘려서 표시 */
      margin-bottom:20px;
    }
    #wrapper2{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));  /* 칼럼 최소 너비만큼 채워서 표시 */
    }    

grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); / 화면을 꽉 채울만큼 칼럼 너비를 늘려서 표시 /

그리드 항목의 간격을 지정하는 grid-column-gap, grid-row-gap,grid-gap 속성

• grid-column-gap 칼럼과 칼럼사이 간격
• grid-row-gap 줄과 줄사이 간격
• grid-gap 칼럼 줄 한번에 지정
  justify-content와 align-content도 사용

그리드 라인을 이용해 배치

템플릿 영역을 만들어 배치하기

 1) 우선 템플릿 영역에 이름 지정한다
.box1 {
        background-color:#3689ff;
        grid-area:box1;
      }
      .box2 {
        background-color:#00cf12;
        grid-area:box2;
      }
      .box3 {
        background-color:#ff9019;
        grid-area:box3;
        }
      .box4 {
        background-color:#ffd000;
        grid-area:box4;
      }
     2) 한줄에 들어갈 템플릿 영역은 ""로 묶고, 빈영역은 (.)를 넣는다.
       #wrapper{
        width:700px;
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        grid-template-rows:repeat(3, 100px);
        grid-template-areas: 
          "box1 box1 box1"
          "box2 box3 box3"
          "box2 . box4";
      }