CSS 5차시

- FLEX ITEM 속성

• flex-grow(0): item의 크기 증가
  number / initial / inherit
  - item이 container의 남는 부분을 채운다. 요소 내부에서 할당 가능한 공간의 정도를 선언
  - 기본값이 0이며 선언한 숫자 만큼의 상대적인 공간을 할당함
  ex) flex-grow: 0;

    <style>
        .container {
            background-color: #ddd;
            display: flex;
        }
        .item {
            border: 1px dashed;
            padding: 0.5rem;
            flex-grow: 0;
            /* 기본값이 0이므로 생략가능 */
        }
        .item:nth-child(2) {
            flex-grow: 1; 
      }
    </style>

 

• flex-shrink(1): item의 크기 감소
  number / initial / inherit
  - item은 기본적으로 줄어들 수 있다.(shrinkable) 기본값은 1이며 0일때는 줄어들지 않는다.
  ex) flex-shrink: 1;

<style>
        .container {
            background-color: #ddd;
            display: flex;
        }
        .item {
            width: 200px;
            border: 1px dashed;
            flex-shrink: 1;
            padding: 0.5rem;
        }
        .item:nth-child(2) {
            flex-shrink: 0;
        }
    </style>

 

• flex-basis(auto): 화면을 기준으로 item의 넓이 비율 선언
  - container {flex-wrap: wrap}에서만 작용
  number / auto / initial / inherit
  

    <style>
        .container {
            background-color: #ddd;
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            border: 1px dashed;
            padding: 0.5rem;
            flex-basis: 50%;
            box-sizing: border-box;
        }
    </style>

 

• flex(0 1 auto): flex-grow flow-shrink flex-basis

 

• align-self(auto): 특정 item의 수평 정렬
  auto / stretch / center / flex-start / flex-end / baseline / initial / inherit
  - 개별 item에 지정하여 flex container의 정렬 방식을 제어

    <style>
        .container {
            background-color: #ddd;
            display: flex;
            align-items: center;
            height: 100px;
        }
        .item {
            width: 100px;
            border: 1px dashed;
        }
        .item:nth-child(4) {
            align-self: flex-start;
        }
    </style>

 

• order(0): item의 정렬 순서 지정
  number / initial / inherit

<style>
        .container {
            background-color: #ddd;
            display: flex;
        }
        .item {
            border: 1px dashed;
            padding: 0.5rem;
        }
        .item:first-child {
            order: 3;
        }
        .item:nth-child(2) {
            order: 2;
        }
        .item:nth-child(3) {
            order: 1;
        }
    </style>

 

 

---

 

- grid: 격자 레이아웃

    <style>
        .container {
            background-color: #ddd;
            display: grid;
            grid-template-columns: repeat(3,minmax(0,1fr));            /* 열의 갯수 3개, minmax: 최소0부터 최대 1fr */
            gap: 0.25rem;    /* item 사이의 간격 */
        }
        .item {
            border: 1px dashed;
            padding: 0.5rem;
        }
    </style>

 

- transform

  translate(이동), scale(크기), rotate(회전)

  javascript와 함께 쓰여 동작을 나타냄

• translate: 원래 위치를 기준으로 이동한다. transform: translate(x축, y축);ex) transform:translate(10px, 10px);
• scale: 중심을 기준으로 element의 크기가 변한다. transform: scale(x축, y축); ex) transform: scale(2,2);
• rotate: 중심을 기준으로 시계방향으로 회전 transform: rotate(**deg);ex) transform: rotate(45deg);

 

- Responsive style (반응형 스타일)

  화면 크기 (break points)에 따라 스타일을 다르게 설정한다.

  @media키워드를 사용하지 않으면 모바일 화면이 기준이 된다.

    <style>
        .container {
            background-color: #ddd;
        }
        .title::after {
            content: "small devices";
        }
        @media (min-width: 780px) {
            .title::after {
                content: "Medium devices";
            }
        }
        @media (min-width: 1024px) {
            .title::after {
                content: "Large devices";
            }
        }
    </style>
    <div class="container">
        <h3 class="title">Devices: </h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p>
    </div>

 

- style images

  object-fir: cover;로 설정하면 사진이 깨지지 않는다.

 

 

- background-image : image를 element에 삽입

• linear-gradient(방향, 시작색상, 끝색상)
  - 색상은 여러개 넣을 수 있음
  - 방향의 기본값은 to bottom
  ex) background-image: linear-gradient(to right, #000, #fff);

 

• url (이미지 주소): 주소를 따라 이미지 산출
  ex)backgroudn-image: url(http://www.####.####)

 

• background-size
• background-position
• background-repeat: 이미지가 element보다 작을 때 반복되어 element를 다 채우는 것