인프런 커뮤니티 질문&답변
작성한 질문수
index.css 와 App.css에 대해 질문있습니다.
해결된 질문
작성
·
337
2
안녕하세요 공부를 하다가 index.css 파일과 App.css 이 두개가 조금 헷갈리더라구요. 예를 들어 App.css도 폰트를 적용하면 전부다 적용이 되고 index.css도 똑같이 되는데 그럼 index.css는 어떤부분일때 작성이 되고 App.css는 어떤부분일 때 작성이 되는것인지 궁금합니다
답변 2
0
안녕하세요 이정환입니다.
CSS 파일의 용도는 보통 해당 CSS 파일을 어디서 어떻게 import 하고 있는가에 따라 나뉘어집니다.
index.css의 경우 main.jsx 파일에서 불러와지고 있으므로 보통 전체 페이지, 모든 컴포넌트에 공통으로 적용되는 CSS를 작성하게 됩니다. 예를 들면 폰트, 레이아웃 규칙 등이 있을 수 있겠네요
반면 App.css의 경우 App.jsx 파일에서 불러와지고 있으므로 App 컴포넌트만을 위한 스타일을 정의하는 공간이라고 이해할 수 있습니다. 세부적인 레이아웃이나 별도의 스타일이 필요한 경우 이곳에 작성할 수 있겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.
리액트 프로젝트에서 index.css와 App.css는 스타일을 관리하는 두 가지 주요 파일입니다. 일반적으로 이 두 파일은 다음과 같이 사용됩니다:
index.css: 이 파일은 전역 스타일을 정의하기 위해 사용됩니다. 전역 스타일은 모든 컴포넌트에 적용될 수 있는 스타일로, 기본적인 폰트, 기본적인 레이아웃 규칙 등의 전체 애플리케이션에 일괄적으로 적용해야 하는 스타일을 여기에 정의할 수 있습니다.App.css: 이 파일은 특정 컴포넌트에 적용할 스타일을 정의하는 데 사용됩니다. 보통App컴포넌트 또는 다른 특정 컴포넌트의 스타일을 정의하기 위해 사용되며, 좀 더 구체적이고 세부적인 스타일을 정의하는 경향이 있습니다.
이런 구조를 통해 공통적인 스타일과 특정 컴포넌트에 관련된 스타일을 깔끔하게 분리하여 관리할 수 있습니다. 이를 활용하여 스타일 충돌을 방지하고, 코드의 가독성을 높일 수 있습니다.
또한, 스타일 선언은 CSS의 특성상 아래쪽 선언이 위쪽 선언을 덮어씁니다. 따라서 특정 스타일을 다른 파일에서 덮어쓰고 싶다면, 이를 마지막에 선언하여 덮어누를 수 있습니다.
아래 게시물들에서 관련된 정보를 확인하실 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.