CSS 스타일 모음

< CSS 스타일 모음>

      color: rgb(231, 213, 50); (개발자 도구-styles 에서 color 값을 찾을 수 있음)

      font-size: 15px; 1.5em;(기준값(16px 또는 상속받은 경우 상속받은 값) 대비 배율)

      font-weight: bold (글자를 두껍게)

      text-decoration: none;

      text-align : center;

      border:5px solid red; (컨텐트의 테두리, none == 테두리 없음)

      padding:20px; (컨텐트와 테두리 사이의 간격)

      margin:20px; (컨텐트 테두리 사이의 간격)

      display:block; (or inline; grid; none;)

      width:100px; (블럭의 가로 폭 설정)

      border:5px solid pink;

      display:grid;

      grid-template-columns: 150px 1fr; (컬럼 폭 : aaa는 150px, bbb는 나머지 전체를 사용)

      grid-template-columns: 150px 1fr; (컬럼 폭 : aaa는 150px, bbb는 나머지 전체를 사용)

      grid-template-columns: 1fr 1fr; (컬럼 폭 : aaa, bbb가 컬럼폭을 1:1로 사용)

      grid-template-columns: 2fr 1fr; (컬럼 폭 : aaa, bbb가 컬럼폭을 2:1로 사용)

      @media(max-width:800px) {div{display:none;}} 

      @media(min-width:800px) {div{display:none;}}

      background-color: black;

      font-family: sans-serif, gulim, monospace; (앞에 있는 font가 없으면 뒤에 것 적용)

      position: static; relative; absolute; fixed;

      float: left; right;

      box-sizing : border-box; (패딩값을 줘도 넓이가 크게 늘어나지 않게 해 줌.)

      display: flex; (container class에 flex 속성값 부여)

      flex-direction: row; (가로로 일렬로 배치)

      justify-content: center; (x축 가운데 배치)

      justify-content: flex-end; (x축 우측 배치)

      align-items: center; (y축 가운데 배치)

      z-index: 1~ (맨위), ~ -1(맨뒤) ... --> 상대적 index 값으로 우위가 결정됨.

      trnasition : height 2s, width 2s; (각 css 속성별 적용시간을 설정)

      trnasition : all 1s; (모든 css 속성을 1초에 적용)

      trnasition : all 1s ease-in; (나중 속도를 더 빠르게)

      transform: rotate(10deg); (오른쪽으로 10도 기울임)

      transform: rotate(-10deg); (왼쪽으로 10도 기울임)

      transform: translateX(100px); (오른쪽으로 100px만큼 이동)

      transform: translate3d(30px,0,0); (px 값을 시리얼하게 올리고 내림으로써 애니메이션 효과를 낼 수 있음)