CSS 보충공부

1. text 중앙 배치

• 문자 배치 시 수직중앙 정렬을 하는 방법에는 display:flex를 사용할 수도 있지만 text-align: center를 통해 수평중앙에 맞춰주고, line-hegiht를 요소의 width와 동일하게 맞춰 수직 중앙으로 배치할 수 있다.
• 계산된 스타일을 알아내는 방법

const imgEl = document.querySelector('img')
console.log(window.getComputedStyle(imgEl).display) //inline

2. 마진중첩

※마진 중첩은 위아래에서만 발생을 합니다.
Case1 부모-자식

• 부모의 margin-top과 자식의 margin-top이 만나면 중첩이 생깁니다.
• 부모의 margin-bottom과 자식의 margin-bottom이 만나면 중첩이 생깁니다.
  Case2 이전 형제와 다음형제가 만나는 경우
• 이전 형제의 아래와 다음 형제의 위가 만나면 발생합니다.

3. 말줄임표

• 말줄임표를 위한 세가지 속성

  • letter-spacing // 글자와 글자 사이의 간격조절
  • word-spacing //단어와 단어 사이의 간격
  • white-space: nowrap // 요소의 너비 이상으로 글이 이어지는 것을 허용

    div {
     width: 200px;
     border: 4px solid;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
    }

4. border

• border의 경우 폰트의 색상을 상속받습니다.

5. 이미지의 대체 텍스트 숨기기

• 백그라운드 이미지에 대체텍스트를 적용한경우 화면에서 보이지 않도록 적용하는 방법

  text-indent: -9990px;

6. linear gradient

background-imges에 사용하는 속성입니다.

• WebAPI 브라우저에서 제공하는 기능입니다.
• 각도를 지정할 수 있다.(기본으로0도이다)
• 순서에 따라 그림의 방향이 달라집니다.
• 기본값이 180도입니다.