CssBaseline - Githubissues

baaaam771 commented 2 years ago

범기님 코드를 보면 다 CssBaseline을 쓰신거 같은데 저는 일단 사용을 안하긴 했습니다. 사용하면 페이지 자체가 깔끔해 보이는 효과가 있긴 합니다. 이부분은 다같이 쓸지 말지 이야기 해보는걸로 해요! 저는 쓰는게 좋아보이긴 합니다만 쓰기로 결정하면 본 레포지토리로 옮길 때 전부 추가해 주어야하는 번거로움이 생기긴 합니다.

_Originally posted by @suinj8 in https://github.com/AI-Homepage-Practice-Frontend/AI-Homepage/pull/16#discussion_r866541900_

LimEunSang commented 2 years ago

CssBaseline 이 혹시 뭔지 여쭤봐도 될까요?? 문서도 찾아보고 검색도 해봤는데 뭔지 잘 모르겠어요.

suinj8 commented 2 years ago

저도 자세하게는 모르겠지만 작업 시작할 때 기본 틀을 잡아주는 컴포넌트 인것 같습니다. 사진으로 비교해보면

CssBaseline 적용

CssBaseline 미적용

양 사이드를 비교해보면 적용을 시키면 딱 옆에 달라붙는것을 볼 수 있습니다.

아래사진도 적용시킨 사진입니다.

Footer부분을 보면 스크롤을 최대로 내렸음에도 바닥에 딱 붙어있습니다. 이렇게 CssBaseline을 적용시키면 깔끔하게 보이는 효과가 있습니다.

const Home = () => {
  return (
    <div>
      <CssBaseline />
      <Header />
      <article>
        <Grow in="true" timeout={2500}>

이런식으로 함수 전체에 적용되도록 사용할 수 있습니다.

저는 적용시키는게 깔끔하니 보기좋아서 적용시키는게 좋을거같아요.

euny0ung commented 2 years ago

오 이런 기능도 있군요... 항상 테두리에 여백이 생기길래 어쩔 수 없는건줄 알았는데 방법이 있었네요. 배워갑니다! 저도 적용시키는게 좋을것 같아요.

LimEunSang commented 2 years ago

CssBaseline에 대해 완벽히 이해했습니다. 답변 감사합니다. 제 생각은 여러모로 없는 게 나을거라는 생각이 듭니다!

baaaam771 commented 2 years ago

수인님이 설명해주신 것 처럼 CssBaseLine은 어떤 브라우저를 돌리든 상관없이 일괄적인 스타일을 적용시키려고 추가했습니다 쉽게 정리하면 정규화 시키려고 넣었습니다

처음에 CRA 하면 reset 해줘야하는 box-sizing:border-box 같은거 일괄 적용하려고 했습니다. 전역으로 설정해서 세부적으로 변경할 때는 방식은 동일하기 때문에 추가했습니다 부수적으로 폰트 앨리어싱 문제 같은 것도 해결해줍니다

LimEunSang commented 2 years ago

처음에 CRA 하면 reset 해줘야하는 box-sizing:border-box 같은거 일괄 적용하려고 했습니다. 전역으로 설정해서 세부적으로 변경할 때는 방식은 동일하기 때문에 추가했습니다 부수적으로 폰트 앨리어싱 문제 같은 것도 해결해줍니다

이해 못했습니다. 낼 만나서 물어볼게요!

LimEunSang commented 2 years ago

사용하기로 결정. 나중에 Cssbaseline 오버라이드하여 적용하기.

AI-Research-Center-Homepage / frontend

CssBaseline #21