background-image,flex

백그라운드 이미지 넣기

<style>
    /* 백그라운드 기본 반복
    background-repeat: repeat-x 
       백그라운드 반복 없음
    background-repeat: no-repeat*/
    .container {background-image: url(image/t.png);
        background-repeat: repeat-x}
    header {background-image: url(image/f.png);
    background-repeat: no-repeat;
    background-position: center;}
    .birds{background-image: url(image/b.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;}
</style>

사이드바에 그라데이션 넣기

.sidebar{background-image: linear-gradient(to bottom, #e5e9dc, #FFF);}

코드 가독성 높이기

설정
format on save 체크 
tab size - 2 
default formatter - prettier 
ctrl+s (저장)시 코드 정렬됨.

flex 사용하기

    <style>
      html,
      body {
        background-color: #ffeead;
        margin: 10px;
      }
      .container > div {
        padding: 10px;
        text-align: center;
        font-size: 2em;
				/* 기본 글자 크기 16 px 
				em 인경우 곱하기 2배임으로 32px임. 
				text-align:left: ; 로 글자 위치 지정할수 있음*/
        color: #ffeead;
      }
      .home {
        background-color: #96ceb4;
      }
      .search {
        background-color: #ff6f69;
      }
      .logout {
        background-color: skyblue;
      }
      .container {
        border: 5px solid #ffcc5c;
      }
    </style>

flex 값 지정하기

  .container {
        border: 5px solid #ffcc5c;
        display: flex;}
        /*세로줄을 가로줄로 정렬
        justify-content: ?; 가로 정렬*/
        <br>
  /*home태그 margin-right로 고정시키기*/
 .home {background-color: #96ceb4;
        margin-right: auto;}

 /*flex 너비 지정하기*/
 .search {
        background-color: #ff6f69;
        flex: 2px;
      }

/*order 순서 지정*/
.home {
        background-color: #96ceb4;
        margin-right: auto;
       order: 1;
      .search {
        background-color: #ff6f69;
        flex: 2px;
        order: 3;
      }
      .logout {
        background-color: skyblue;
        order: 2;
      }

  /* flex-wrap : wrap; 디폴트 no-wrap */
  flex-wrap: wrap;