자식요소가 마진에 '%'단위를 쓸 때는 부모요소의 값을 기준으로 한다.
-> 부모요소 width: 400px -> 자식요소의 margin: 50%가 뜻하는 바 = 200px씩 떨어짐
border: 1px solid transparent
를 준다.padding값 때문에 요소가 커지는걸 막아준다.
line-height
값은 글꼴 크기의 배수를 뜻한다.
&:not(:first-child)
-> 첫번째 자식요소를 제외한 요소에 스타일을 준다.
[~~~]
: 속성 중 ~~~라는 속성이 있는 요소만 선택
// 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-로 시작하는 요소를 선택
em
: 자기 자신의 폰트 사이즈값에 영향을 받는다.
container의 width: 60em, font-size: 10px 일때 width = 600px과 같다.
container에 자식, 후손 요소가 있다면 부모인 container의 폰트사이즈가 상속된다.
rem
: html에 지정되어있는 폰트 사이즈값(디폴트: 16px)의 영향을 받는다.
사실상 가장 낮은 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%);
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이상.
white-space: nowrap
: 줄바꿈을 방지한다.
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
user-select
: 텍스트 드래그 방지와 같은 요소에 사용한다.
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
화면이 줄어도 글자가 두 줄만 나오도록 제한한다.
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 두줄이라 2 */
overflow: hidden;
outline-offset
: a태그의 아웃라인이 안쪽으로 생긴다. (기본은 바깥)
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;
}
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
이미지, 그라디언트 같이 쓰기
배경이미지를 두개이상 같이 쓸 수 있다. 백그라운드 이미지로 이미지, 그라디언트를 같이 깔아줄 때는 먼저 선언한 부분이 레이어상 위로 보이게 된다.
background-image: url(./images/bg_flower.png), linear-gradient(to bottom, #aaa, #eee);
그라디언트 위치 변화 시키기
background-position: 50% 0, 100px 100px;
배경이미지 포지션 뒤쪽에 정의
vertical-align: top
유동적인 이미지 크기
반응형에서 이미지의 크기가 유동적으로 조절이 안될 때 img태그를 감싸는 div태그가 있는지 확인.
비트맵 이미지 사이즈
반응형에서 비트맵 이미지 처리할 때 max-width: 100%는 원본 사이즈보다 이미지가 더 커지는걸 방지한다. height: auto; 도 같이 주기. (버그 방지)
clamp()
: 폰트사이즈를 반응형으로 할 때 주로 사용.
width: clamp(rem(48px), 25vw, rem(100px));
css로 이미지에 필터를 입힌것과 같은 효과를 낼 수 있다.
blur, grayscale, contrast등 필터 속성이 있다.
참고 https://developer.mozilla.org/ko/docs/Web/CSS/filter
커스텀 체크박스를 만드는 방법으로 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