📚 공부한 내용

calc()

CSS 속성의 값으로 계산식을 지정할 수 있다.

input {
 width: calc(100% - 80px);
}

연산자는 좌우에 공백이 있어야한다.

부모 컨테이너 width 값에 따라 자식의 width 값이 결정되게, 반응형으로 만들 수 있다.

display: flex;

부모 flex에 자식 item들은 span 같은 inline 요소라도 diplay: block; 속성을 가지고 있다.

container

flex-direction
기본값은 row. column 열방향으로 정렬.

flex-wrap
기본값은 nowrap.
wrap인 경우 부모의 width 값이 주어졌을 때 각각의 아이템 크기의 합이 부모의 width 값보다 커졌을때 줄바꿈.

각각의 아이템 width 값의 합이 부모의 width 값보다 커지면 부모가 display: flex; 상태일 때 각각의 아이템들은 부모 width 크기에서 아이템 갯수의 비율대로 widht 값이 나눠진다.
따라서 아이템들의 크기가 비율대로 나눠지지 않고 유지되길 원할때 flex-wrap을 사용해 줄바꿈을 한다.

justify-content
align-items

item

order
order 값이 주어지지 않으면 마크업한 순서대로 렌더링 되지만, order 값을 주면 값이 작은 순서대로 나타난다. 기본값은 0이다.

flex-grow
item이 확대될 비율을 정한다.
flex-shrink
item이 축소될 비율을 정한다.
flex-basis
flex item의 초기 크기를 지정한다.
width 처럼 동작하지만, flex box에서 item의 width를 지정하고 싶을 때 width대신 사용을 권장한다.

단축 속성 flex: flex-grow flex-shrink flex-basis;

text-shadow

text-shadow: x y blur color;

• 그림자 두껍게 만들기
  두껍게 만들기 위해선 중첩해야한다.

text-shadow: 1px 1px 1px #000;

text-shadow: 1px 1px 1px #000, 2px 2px 1px #000, 3px 3px 1px #000; 

• text-shadow 중첩을 이용한 테두리 만들기

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

transform

요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.

matrix
transform의 값들인 translate(이동), skew(기울기), rotate(회전), scale(확대)를 표시.
a(scaleX) b(tan(skewY)) c(tan(skewX)) d(scaleY) 는 선형 변환,
tx(translateX) ty(translateY) 적용 할 이동.

perspective
하위 요소를 관찰하는 원근 거리이며 값이 크면 원근감이 커지고 낮으면 가깝게 느껴진다.

perspective 속성은 관찰 대상이 여럿이기 때문에 부모/조상 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정하지만,
transfrom: perspective()는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정한다.

rotate
요소를 회전시킨다.

rotate(angle) angle에는 각도 값이 들어가며, 단위는 단위는 deg, rad, grad, turn 등을 사용한다.
rotateX, rotateY, rotateZ는 각각 X, Y, Z축을 회전 시키며
rotate3d는 rotate3d(x, y, z, angle)의 의미다.

1turn > 360deg

translate
요소의 위치를 수평 또는 수직 방향으로 변경할 수 있다.

translateX, translateY, translateZ는 각각 X, Y, Z축으로 이동하며,
translate는 translate(x, y)르 의미하고,
translate3d는 translate(x, y, z)를 의미한다.

scale
요소를 확대 및 축소 시킨다.

scale(2) 2배 크기만큼 확대.
scale(2, -3) x축으로 2배 확대, y축으로 3배 축소

skew
요소를 기울이며 각도값이 들어간다.

skew(45deg) 45도만큼 기울임.
skew(45deg, 15deg) x축으로 45도만큼 기울임, y축으로 15도만큼 기울임.

transform-origin
transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점·기준점)을 지정한다.

rotate(), skew() 등의 회전, 변형 속성을 사용하기 전에 기준점을 지정해 두는데,
초기 값은 50% 50%으로 요소의 중심점이다.
속성 값은 백분율(%)과 키워드(center, top, bottom 등) 중 하나로 지정할 수 있다.

🤔 새롭게 배운 내용

fr

fr 단위는 유연한 단위로 그리드 컨테이너의 여유 공간을 비율로 나눠 설정한다.

퍼센트(%) 단위와 유사해 보일 수 있으나, 퍼센트 값과 다르게 길이가 아니기 때문에 calc() 함수에서 다른 값과 함께 처리할 수 없다.

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1.3fr 1fr; 
}

vh, vw

vh = viewport height
vw = viewport width

viewport란 화면 Display상의 표시 영역을 뜻하며, vh``vw는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환

100vw, 100vh가 전체 화면의 기준이다.

%와 차이

열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환하고,
% 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환한다.

vmin과 vmax

vh와 vw는 항상 뷰포트의 너비값과 높이값에 상대적인 영향을 받지만,
vmin과 vmax는 너비값과 높이값에따라 최대, 최소값을 지정할 수 있다.

브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고 1vmax는 11px이 된다.
너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 된다.

.box {
    height: 100vmin;
    width: 100vmin;
}

.box {
    height: 100vmax;
    width: 100vmax;
}

backdrop-filter

요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성이다.
요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야한다.

div {
  backdrop-filter: blur(4px);
  ...
}

max-width, min-width

반응형 웹에서 크기를 조절할 때 사용된다.

@media (min-width: 1024px) {
	/* min-width(최소 width)가 1024px, 즉 1024px 이상인 경우에 적용되는 코드 */
    /* 스마트폰 등 가장 작은 사이즈에서의 레이아웃을 기본으로 하고, 점차 확장되어가는 형태로 사용한다. */
}

@media (max-width: 1024px) {
	/* max-width(최대 width)가 1024px, 즉 1024px 이하인 경우에 적용되는 코드 */
    /* 데스크탑용의 가장 큰 화면 사이즈의 레이아웃을 기본으로 하고, 점차 축소하는 형태로 사용한다. */
}