라즈베리파이 전자액자 만들기 ⑦ : 매직미러 모듈(글자, 배경) 색상 위치 변경하기, CSS 활용

매직미러(MagicMirror) CSS 수정하기

• ~/MagicMirror/css/main.css : default로 되어 있는 main.css를 수정해도 되지만 건드리지 않고 새로 만들어줄 예정
• css폴더에 'custom.css' 생성
  • 동일한 내용이 main.css와 custom.css가 있으면 custom.css에 있는 내용이 반영됨
  • 기본적으로 웹프로그래밍의 html, css를 하실 수 있으면 입맛에 맞게 하면 됨!
  • 그게 아니라면,,,아래 링크에 있는 설명들을 참고해서 변경해보고, 구글링으로 css 기본적인 걸 공부하면서 봐도 됨(근데 라즈베리 파이를 건드릴 정도면 css정도는 금방 보시지 않을까 생각함...ㅋㅋ)

강좌에 나와있는대로 세팅을 해주게 되면

• 글자색 : 검정(color:#000)
• 배경색 : 반투명 흰색(background-color:rgba(255,255,255,0.4)
• 배경상자 모서리 라운드 : border-radius:8px
• 모듈 사이 간격 : padding : 8px

변경하면 아래처럼 된다.

 

 

 

 

 

 

 

 

 

 

 

 

https://sohyemin.tistory.com/333?category=821094 

#19/28 [매직미러 HowTo] / 스텝 3