저는 숙련된 백엔드 엔지니어이지만 브라우저 기반 GUI 디자인(HTML, CSS 등)은 처음입니다. 대시보드를 구축해야 하다가 Dash를 찾았습니다. 저는 방금 이러한 예제 작업을 시작했습니다.
예제를 실행하면 결과가 문서에 표시된 것과 완전히 다릅니다. 문서에는 사소한 차이가 있을 수 있다고 명시되어 있지만 내 차이점은 전혀 사소하지 않습니다. 예를 들어, 이전 테이블 예 중 하나에서 내 테이블에는 테두리, 배경색 등이 없었습니다. 스타일이 적용되지 않은 것 같습니다. 내가 얻고 있는 결과가 예상한 대로인지, 아니면 뭔가 문제가 있는 것인지 알고 싶습니다.
다음은 예시입니다. 이 예는 레이아웃 튜토리얼 섹션의 "재사용 가능한 구성 요소" 섹션에서 가져온 것입니다. 문서에서 첫 번째 표현은 다음과 같습니다.
하지만 내가 얻은 것은 이것이다:
샘플 코드는 다음과 같습니다.
으아아아Chrome에서 개발자 도구 콘솔을 확인한 결과 CSS 파일을 로드할 수 없다는 오류가 표시되지 않았습니다. 저는 Mac의 PyCharm에서 작업하고 있습니다. 텍스트를 있는 그대로 빈 "app.py" 파일에 복사/붙여넣고 파일을 실행했습니다.
내 결과가 잘못된 건가요, 아니면 단지 내 기대에 결함이 있는 건가요? 더 나은 결과를 얻으려면 무엇을 놓치고 있을까요?
이렇게 나온다면, 내 테이블을 보기 좋게 만들기 위해 좋은 스타일 세트를 어떻게 찾아서 적용해야 할까요? 테이블 스타일을 한 번에 한 세트씩 배워야 하나요, 아니면 더 좋은 방법이 있나요? 스타일시트와 같이 특정 목적을 위해 스타일 세트를 가져와 삽입하는 일종의 "플러그인" 개념이 HTML/CSS에 있습니까? 그렇다면 그러한 "플러그인"을 어디서 찾아야 합니까? 저는 프론트엔드가 React를 사용하고 있다는 것을 알고 있었지만 이 내용이 너무 새로워서 지식이 실제로 도움이 되지 않았습니다.
TIA가 도움을 구하고 있습니다!
P粉6676492532024-02-22 14:54:08
테이블 스타일을 쉽게 지정하려면 Dash Bootstrap 구성 요소 를 사용하는 것이 좋습니다. 저는 이 라이브러리를 사용하여 예제를 다시 작성하고 원하는 출력을 얻었습니다.
으아악출력
테이블을 사용자 정의하는 데 필요한 옵션에 대해 자세히 알아보려면