[css] 잡다한 CSS Tips.1

[주의] 단. 'Can I Use'에서 호환성 체크 필수

1. 상속(inherit)

• 위 태그들은 폰트 크기가 기본 사이즈보다 작다. inherit 속성을 적용하면 동일해진다.
  input, select, button, textarea {font: inherit;}

• 컬러 역시 inherit 이 필요한 a 태그
  a {color: inherit;}

---

2. 크기 지정? (max-width)

• 고정된 폭보다 %를 사용하거나 vh, vw, wmin, wmax등 사용 권장.

• 큰 해상도에서 고정된 폭을 지정할 때 width:보다 max-width: 사용을 권장한다.

• <img>, <object>, <video>, <iframe> 같은 요소는 max-width: 100%로 설정을 잊지 말자.

---

3. 다단 텍스트(columns)

• column-count: {num}
  동일 간격의 columns를 만들때 사용.

• column-width: {min-size}
  쿼리를 사용하지 않고 column을 반응형으로 만들때.

---

4. Background 단축 속성

• background-color: orange;
• background: orange; 👍👍👍

아래와 같은 경우, '반복'되는 부분은 일반 속성으로 적용하면 더 좋다.

# Before.
background: url('img1.png') no-repeat top right / 2em 2em, 
            url('img2.png') no-repeat bottom right / 2em 2em;

# After.
background: url('img1.png') top right, 
            url('img2.png') bottom right;
background-size: 2em 2em;
background-repeat: no-repeat;

/* 개인적으로 변경 전이 더 괜찮아보인다.ㅎㅎ */

# 사용 예시
.div {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: url("profile.jpg") no-repeat center / cover;
}

---

5. 전처리기 필요한가? (LESS, SCSS, Stylus)

• calc(value)
• --variable-name: {value} + var(--variable-name)

---

6. Background & Border 분리하기

보더가 반투명하게 사용됐을때 배경위에 올라가게 된다. 이 두속성을 분리하기위해 background-clip 속성을 사용하면 겹치는 영역을 분리할 수 있다.

background: pink;
border: 20px solid rgba(255, 255, 255, 0.5)
background-clip: padding-box;

단, box-sizing: border-box; 설정이 되야 기존 크기를 유지할 수 있다.

---

7. 배경 이미지 배치 기준 (background-origin)

• -padding-box: border를 뺀 padding이 기준(기본값)
• -border-box: 가장 외곽인 border가 기준
• -content-box: padding을 제외한 content영역 기준

참고. [ 좋은 블로그 ]