CSS

헤매었던 내용 정리

• backgroundimage를 가운데정렬 하려면
  background-position을 center로 바꾼다.

• background를 어둡게 하면 중요한 포인트를 부각하는데 유용하다.
  z index를 사용하여 bg-cover를 따로 만든다.

  .bg-cover {
    position: absolute;
    background-color : rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    z-index:1;
  }

• 글꼴을 반응형으로 하려면
  px 대신 rem을 사용한다.

• 좋은 한글 폰트로 font-family: 'Jua', sans-serif;가 있다.
  사용하려면 사전에 아래 명령어 입력이 필요하다.

@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

• 좋은 영어 폰트로
  font-family: 'Georgia', serif; 가 있다.
  내장되있기에 별도의 import가 필요 없었다.

• 마우스 포인터 가져갔을 때 객체를 반응하게 하려면
  (ex. 이미지를 약간 확대)

.col-md-4 {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transition: all 0.1s ease-in-out; // 부드러운 모션을 위해 추가
}
.col-md-4:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
.img {width:225px; height:180px; overflow:hidden } // 부모를 벗어나지 않고 내부 이미지만 확대

• 특정 스크린 사이즈에서 화면/글꼴 등의 CSS를 변경하려면 미디어 쿼리 사용

  @media (max-width:991px) {
  html,body {
     font-size: 0.7rem;
  }
  .background {
    position: relative;
    background-image:url("https://cdn.pixabay.com/photo/2015/03/26/09/41/tie-690084_960_720.jpg");
    background-size: cover;
    background-position: center;
    font-family: 'Georgia', serif;
    height: 80vh;
    }
  }