On.

CSS

1) Flex와 Grid를 언제 사용해야할까?

컴포넌트가 1차원적(한 방향)으로 나열이 될 때 flex를, 2차원적(입체적?)으로 나열이 될 때는 grid를 사용해주는 것이 좋은 방법일 수 있다.

2) 재사용성

css도 최대한 코드가 반복되지 않게, 다시 사용되어질 수 있게 작성하는 것이 좋은 개발 방향인 것 같다!

3) h1

h1은 block, 그리고 기본적으로 margin을 가지고 있다.

4) (max/min) width, height

height는 해당 element의 절대적 높이를 정해줄 때 사용.
min-height는 "웹을 아무리 줄여도 element가 최소 이정도 높이다" 라는 것을 정해줄 때 사용
max-height는 "웹을 아무리 늘려도 element는 최대 이정도 높이다" 라는 것을 정해줄 때 사용

5) focus-within

.parent:focus-within {
  border: 1px solid skyblue;
}

parent의 child input element를 클릭하면 테두리가 생기게하는 CSS효과

6) calc 함수

.header {
  height: 50px
}
.content {
  height: calc(100vh - 50px)
}

✔️ 이런식으로 calc를 사용하면 반응형 비슷하게 구현할 수 있고, 쓸데없이 스크롤이 생기는 현상도 해결 가능하다.

✔️ calc안에 연산은 단위까지 정확하게 적어줘야 한다.

7) place-content와 place-items

추후 업데이트해봄...
grid에서 컴포넌트 센터맞추는게 왤케 헷갈리는 걸까.....
items,,,,content,,,,왤케 이름을 헷갈리게 정해 놓은 걸까....하하하...

8) styled component - 부모에서 자식 선언

.element{
  width: 200px;
  height: 200px;
 
  & > img {
    width: 100px
    height: 100px
  }
}

9) flex property

✔️ flex-grow
✔️ flex-shrink
✔️ flex-basis
: 페이지를 늘리나 줄이나 나는 45px을 유지하겠다는 표현 (flex-direction이 row라면 width의 길이를, column이면 height의 길이를 나타낸다!)

.example {
  flex: 0 0 45px;
}

위 3가지의 의미를 분명하게 알아야 하는데,,,,,,헷갈림,,,,,누가 알려줌메

Off.

프론트와 백을 넘나드는 리드 개발자가 되는 그날까지 🔥🔥🔥