유용한 CSS속성 사전

1. margin % 단위

자식요소가 마진에 '%'단위를 쓸 때는 부모요소의 값을 기준으로 한다.
-> 부모요소 width: 400px -> 자식요소의 margin: 50%가 뜻하는 바 = 200px씩 떨어짐

2. margin특성 중 중복현상

• 형제요소의 위,아래 마진은 중첩된다(겹쳐진다. 더 큰 값쪽으로). 오류X
• 부모요소의 margin-top(bottom),자식요소의 margin-top(bottom)이 만나는 지점이
  있다면 자식요소의 margin-top(bottom)을 적용했을때 부모요소에 적용이 된 것처럼 나타난다.
• 마진병합을 막는 Hack : 요소 사이에 border: 1px solid transparent 를 준다.

3. box-sizing: border-box

padding값 때문에 요소가 커지는걸 막아준다.

4. line-height

line-height 값은 글꼴 크기의 배수를 뜻한다.

5. text-align

• inline요소를 정렬할때 text-align을 쓴다.
• inline요소에는 직접적으로 적용할 수 없으므로 부모에 적용한다.
• div 안에 span 문자열 (div에 적용)
• p 안에 img (p에 적용)
• div 안에 p 안에 있는 text

6. not 선택자

&:not(:first-child) -> 첫번째 자식요소를 제외한 요소에 스타일을 준다.

7. 속성 선택자

[~~~] : 속성 중 ~~~라는 속성이 있는 요소만 선택

// css
[disabled] { opacity: 0.5; color: red; }
[type="password"] { opacity: 0.5; color: orange; }

// html
<input type="text" value="ZOALA">
<input type="password" value="1234">
<input type="text" value="disabled text" disabled>

[class^=“btn-“] : 클래스가 btn-을 포함한 요소를 선택
[class$=“box”] : 클래스가 box로 끝나는 요소를 선택
[class*=" box-"] : 클래스가 box-로 시작하는 요소를 선택

8. em, rem

em: 자기 자신의 폰트 사이즈값에 영향을 받는다.
container의 width: 60em, font-size: 10px 일때 width = 600px과 같다.
container에 자식, 후손 요소가 있다면 부모인 container의 폰트사이즈가 상속된다.

rem: html에 지정되어있는 폰트 사이즈값(디폴트: 16px)의 영향을 받는다.

9. 0.5px border

사실상 가장 낮은 px단위는 1px이다.
0.5px의 선이 요구되는 경우, height을 1px로 주고 background에 gradient를 위에서 아래로 주고, 0~50%까지 색을 채우고 나머지 50%~100%는 투명하게 처리하는 방법으로 시각적으로는 0.5px처럼 보이게 구현할 수 있다.

height: 1px;
background: linear-gradient(to bottom, var(--color-gray-600) 0%, var(--color-gray-600) 50%, transparent 50%, transparent 100%);

10. calc 함수

calc함수를 적절히 잘 활용하면 반응형에서 요소의 위치나 사이즈를 좀 더 유연하게 조정할 수 있다. calc함수를 쓸 때 연산자 앞,뒤로 공백이 존재해야 함.

background-position: calc(50% + 27vw); : 백그라운드 이미지가 뷰포트 가로너비의 27%를 차지, 가로너비 50%는 넘어가도록 영역지정.
background-size: calc(450px + 40vw); : 백그라운드 이미지의 사이즈가 40vw를 차지하지만 최소 450px이상은 된다.
font-size: calc(20px + 2.5vw); : 폰트 사이즈가 뷰포트 가로너비의 2.5%를 차지하고 최소 20px이상.

11. white-space: nowrap

white-space: nowrap : 줄바꿈을 방지한다.

12. attr()

attr() : html요소의 속성값을 가져온다.

attr(aria-label) : aria-label의 값을 가져온다.
attr(data-name) : data속성 값을 가져온다.

// html
<p data-foo="hello">world</p>

// css
[data-foo]::before {
  content: attr(data-foo);
}

Result -> hello world
참고 https://developer.mozilla.org/en-US/docs/Web/CSS/attr#examples

13. user-select

user-select : 텍스트 드래그 방지와 같은 요소에 사용한다.

-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

14. line clamp

화면이 줄어도 글자가 두 줄만 나오도록 제한한다.

 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2; /* 두줄이라 2 */
 overflow: hidden;

15. outline-offset

outline-offset : a태그의 아웃라인이 안쪽으로 생긴다. (기본은 바깥)

16. clip속성으로 display:none 대체

display: none 지양하기 - 스크린리더가 요소가 있는지 확인하지 못해서 읽어주지 못한다.
대신에 width, height를 0을 주고 clip속성으로 안보이게 잘라내는 방법을 활용할 수 있다.

.skip-nav a {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0); /* 잘라내기 속성 */
    clip-path: polygon(0 0, 0 0, 0 0); /* 좌표를 모두 0으로 */
    white-space: nowrap; /* 줄바꿈 방지 */
}

a태그에 포커스가 갔을 때 모든 속성값을 다시 초기 값(initial)으로 설정하여 다시 보여지게 만들 수 있다.

.skip-nav a:focus {
  position: static;
  width: initial;
  clip: initial;
  height: initial;
  clip-path: initial;
}

17. 텍스트 아웃라인

text-shadow: 1px 1px 0 #000 offsetX offsetY blur color

text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000

18. background-image 활용

이미지, 그라디언트 같이 쓰기

배경이미지를 두개이상 같이 쓸 수 있다. 백그라운드 이미지로 이미지, 그라디언트를 같이 깔아줄 때는 먼저 선언한 부분이 레이어상 위로 보이게 된다.

background-image: url(./images/bg_flower.png), linear-gradient(to bottom, #aaa, #eee);

그라디언트 위치 변화 시키기

background-position: 50% 0, 100px 100px; 배경이미지 포지션 뒤쪽에 정의

19. 이미지를 넣었을 때 자동으로 생기는 아래여백 없애기

vertical-align: top

20. 반응형 이미지 처리

유동적인 이미지 크기
반응형에서 이미지의 크기가 유동적으로 조절이 안될 때 img태그를 감싸는 div태그가 있는지 확인.

비트맵 이미지 사이즈
반응형에서 비트맵 이미지 처리할 때 max-width: 100%는 원본 사이즈보다 이미지가 더 커지는걸 방지한다. height: auto; 도 같이 주기. (버그 방지)

21. clamp()

clamp() : 폰트사이즈를 반응형으로 할 때 주로 사용.

width: clamp(rem(48px), 25vw, rem(100px));

22. css filter 속성

css로 이미지에 필터를 입힌것과 같은 효과를 낼 수 있다.
blur, grayscale, contrast등 필터 속성이 있다.
참고 https://developer.mozilla.org/ko/docs/Web/CSS/filter

23. input checkbox 커스텀

커스텀 체크박스를 만드는 방법으로 label과 가상요소를 사용한다.

/* 기본 체크박스는 보이지 않게한다 */
[type="checkbox"] { 
  -webkit-appearance: none;
  display: none;
} 

/* 체크박스가 체크되었을 때 형제요소인 label만 선택한다 */
[type="checkbox"]:checked + .label .label-text {
  color: #656565;
  text-decoration: line-through;
} 

/* 새로운 체크박스의 스타일을 지정한다 */
[type="checkbox"]:checked + .label .checkbox-icon {
  border: 1px solid #f55f2f;
  background: #f55f2f;
}

/* 가상요소로 체크모양을 만든다 */
[type="checkbox"]:checked + .label .checkbox-icon::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 4px;
  border: 1px solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

/* 체크되지 않았을 때의 기본 라벨과 체크박스 스타일 지정 */
.label {
  display: flex;
  align-items: center;
}

.checkbox-icon {
  width: 1rem;
  height: 1rem;
  border: 1px solid #afafaf;
  border-radius: 50%;
  margin-right: 0.3rem;
  position: relative;
}

https://codesandbox.io/s/damp-breeze-kb7j4b?file=/src/styles.css