23_10_15 CSS 공부정리

[코딩애플] 중급모듈

 

-배경 그라데이션 넣는법

linear-gradient( direction, color1, color2, …, color3 )

예시)

      .jbGrad01 {
        background: linear-gradient( to bottom, yellow, red );
      }

https://www.codingfactory.net/10838

 

CSS / linear-gradient - 선형 그라데이션 효과 만들기

 

-이미지 배경 어둡게 하는법

.my_img1 {

    filter: brightness(0%) //0%가 검은색 100%이 원본

}

.my_img2 {

    filter: brightness(50%)

}

.my_img3 {

    filter: brightness(100%)

}

 

-flex박스 안에 img를 넣었을때 생길 수 있는 문제점

이런 식으로 요소들 사이에 흰 줄이 생기는 경우가 있음

-해결 방법 

• .portfolio-item img { object-fit: cover; }: object-fit 속성은 대체 텍스트가 아닌 img요소에서만 작동합니다. 이 속성은 대체 텍스트 박스와 지정된 너비와 높이에 맞게 콘텐츠 크기를 조절합니다.
• img { display:block; }: 기본적으로 이미지는 인라인 요소로 처리되며, 이 경우 주위에 약간의 공간(whitespace)을 남길 수 있습니다. 이 공간은 다양한 폰트 메트릭스(font metrics)에 의해 결정됩니다 - 일반적으로 글꼴 '선'('line') 주위의 공간입니다.

-나는 디스플레이 블록을 하니 해결됨. 이미지는 인라인 요소이기때문에 wh100%를 해도 다 안채워지는 경우가 있다. 

따라서 이 경우 display:block를 하자!

 

-이미지를 가로정렬 하기 위해서 position absolute 였던 것을 풀고 float를 left, right로 줘서 가운데정렬은 구현했으나, 휴대폰이 바닥에 딱 달라붙지 않는 문제 발생. 어떻게 해야할 지 모르겠다.

 

-너비가 2000px이 넘어가는 모니터도 요즘 많기 때문에 가장 큰 컨테이너에 max-width를 주는 것이 좋다. 나는 덤으로 margin 0 auto;를 주니 모니터가 클때 가운데 정렬도 되서 좋은것 같다.

body {

    max-width : 1600px;

    margin : 0 auto;

}