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

업그레이드 준비하기

  매직미러에 어떻 기능들을 넣을 것인가에 대해서 앞서서 얘기를 했었습니다. 기능들을 추가하기 위해서는 여러가지 앞으로 해야할 일들이 많을텐데 그를 위해서 이것 저것 시도해 보려고 합니다. 여기서 배운 것을 가지고 하나씩 매직미러에 직접 설치할 수 있는 기본을 배워 봅시다.

 

모듈의 색깔 바꿔보기

  사진을 찍는 것을 좋아해도 색깔에 대한 감각은 없습니다. 그래서 간단하게 모듈의 색을 변경하는 방법만을 알려드리겠습니다. 색은 직접 선택해 보시기 바랍니다. 예를 들어 설명 드리려고 하는 것은 각 모듈, 예를 들면 날씨의 배경색을 만들고 글자 색을 바꿔서 구글 포토가 보여질 때, 사진의 색깔에 가려서 글자가 보이지 않는 경우가 없게 하기 위함입니다. 그리고 나중에 포토 앨범이 보여질 때는 시계나 뉴스 등의 모듈이 보여지지는 않게 하는 방법을 안내 하긴 하겠습니다만 흰색 글씨보다는 여러분의 감각에 맞게 색상을 변경해 보시기 바랍니다.

 

그림 134. 모듈 색상 변경

 

[그림 134]를 보시면 각각의 모듈에 흰색의 배경이 생겼고 글자색도 검정색으로 변경이 되어 있습니다. 어떻게 바꾸는지 따라서 해 보도록 하겠습니다.

 

CSS란 무엇일까?

  CSS는 Cascading Style Sheet의 약자로 위키피디아를 찾아 보면 마음에 들지는 않지만 종속형 시트라고 번역을 해 놨습니다. 인터넷 홈페이지를 만드는데 쓰이는 HTML과 같은 언어를 이용할 때, 실제로 화면에 표시는 방법을 기술하는 언어라고 합니다. HTML이 인터넷 웹페이지의 몸체를 담당한다면 CSS는 액세서리 처럼 꾸미는 역할을 합니다. 

그림 135. main.css

매직미러 디자인

  [그림 135]는 매직미러의 css 폴더에 있는 main.css로 매직미러의 얼굴을 담당하고 있다고 합니다. 내용을 잘 살펴보면 배경색, 넓이, 높이, 폰트 등을 설정한 것으로 보여지는 곳들이 있습니다. main.css를 이해할 수 있도록 설명을 하도록 하겠습니다.

 

요소선택자 :	html, img, p, div 등의 요소명을 적어서 나타내는 선택자 입니다. 여기서는 선택자가 html인데 이 경우 전체 페이지의 모든 요소에 모두 같은 스타일이 적용 됩니다. 즉, 커서는 없고 배경색은 #000가 된다는 것입니다.
Cursor :	마우스 커서를 나타내는 것으로 none는 마우스 커서를 안보이게 하는 것이며 그 외에는 default, help, pointer, move 등 우리가 보아왔던 모든 마우스 커서로 설정을 할 수 있습니다.
Overflow :	컨텐츠가 너무 커서 요소내에 다 들어가지 않을 때, 어떻게 보여줄 것인지를 정합니다. 그 속성으로는 hidden, visible, scroll, auto의 네 가지를 가지고 있습니다. 예를 들면 박스에 문단을 표시할 때 visible로 표시를 하면 문단이 박스를 넘어서도 표시가 됩니다.
background:	배경색을 지정합니다. #000는 16진수로 검은 색을 나타냅니다. 웹에서 16진수 웹용 칼라 코드를 검색, 참고하시기 바랍니다.

 

 

 

::-webkit-scrollbar :

브라우저의 스크롤바를 지정하는 속성입니다. Width, height 등의 속성을 가지고 있습니다. Display를 none으로 지정하면 스크롤바가 나타나지 않습니다.

 

margin :	바깥쪽 여백을 의미합니다. 예를 들어 사각형을 그리고 margin을 주면 사각형 선의 바깥쪽 여백을 뜻합니다, 반대는 padding이며 픽셀(px) 값을 갖습니다.
position :	레이아웃 또는 객체를 배치할 때 사용하는 옵션이며 absolute는 원래의 위치와 상관없이 위치를 지정할 수 있으며 절대 위치라고 합니다. 절대 위치의 시작점은 모니터의 좌측 상단 모서리 입니다. 그 외에 relative, static, fixed의 옵션을 가질 수 있습니다.
height, width	높이와 너비를 픽셀 단위로 나타내며, calc 함수를 이용하여 계산을 할 수 있습니다. height만 예를 들어 설명하겠습니다. 100%이면 전체 높이입니다. 모니터의 해상도에 따라서 서로 다른 값이 될 수 있겠습니다. 거기에서 120px을 뺀 값을 높이로 지정하고 있습니다.
font-family :	글꼴을 여러개 ‘,’를 구분자로 입력할 수 있습니다. Sans-serif는 고딕체 계열, Serif는 바탕체 계열, Monospace는 가로세로가 같은 폰트로 이미 정의되어 있으며, 그 외는 따옴표 사이에 폰트 명을 넣습니다.
font-weight :	글꼴을 진하게 표시하는 속성이며 400은 보통, 700은 볼드이며  100에서 900까지의 값 중에서 선택을 할 수 있습니다.
em :	웹에서 사용되는 단위로 컴퓨터외 모바일에서도 크기 조정이 가능하며 1em은 12 폰트, 16px, 100%와 동일합니다.
-webkit-font-smoothing :		폰트를 더 부드럽게 표현하기 위한 속성입니다. Antialiased는 계단현상 없이 부드럽게 표현하라는 것이며 그 외에 Auto, none을 선택할 수 있습니다.

 

 

선택자	.dimmed, .normal, .bright를 말하며 이해를 돕기위해 아래에 id와 class를 만들었습니다. 참고하세요.  다음에 보이는 class가 선택자가 됩니다.

 

이제 구분자에 대해서 이해가 되셨다면 config.js에 있는 문장들이 대략적으로 이해가 되시리라 믿습니다.  Config.js 중에서 다음의 하나를 보시죠.

.xlarge라는 구분자는 font-size는 75px이고 line-height 역시 75 픽셀이며 글자간격을 의미하는 letter-spacing는 음수까지 지정할 수 있어 -3px 이라고 이해하실 수 있으면 됩니다.

그 외에  config.js에서 나온 속성들을 다음에 소개합니다. config.js 파일을 열어서 같이 보세요.

 

text-transform:	문자를 대문자로 전환하는 속성입니다. Capitalize는 각 단어의 첫문자를 대문자로 uppercase는 모두 대문자로 lowercase는 모두 소문자로 지정이 됩니다.
white-space:	공백과 줄바꿈을 지정합니다. 중요한 두 개의 속성은 각각 다음과 같습니다. nowrap은 공백은 채우지만 가로로 긴 줄에서도 줄 바꿈을 하지 않고 표시합니다. pre는 연속된 공백을 그대로 표시합니다. 또한 긴 줄도 줄바꿈 하지 않고 표시합니다.
pointer-events:	HTML 요소들의 터치나 마우스 이벤트를 핸들링 할 수 있는 속성입니다. none은 비활성화 시키며 auto로 다시 활성화 시킬 수 있습니다.

 

모듈에 배경색 넣기

Custom.css 수정하기

  각 모듈의 배경색을 넣거나 바꾸기 위해서는 앞에서 배운 바와 같이 css 파일의 수정이 필요합니다. ~/MagicMirror/css/main.css 파일이 우리가 수정을 해야 할 파일입니다. 앞 장에서 이미 살펴본 바 있습니다. 

 

그런데 매직미러에서는 직접 main.css 파일을 수정하지 않고 같은 폴더에 custom.css 파일을 만들어 놓으면 매직미러 시스템이 main.css 파일을 읽습니다. 그 후에 custom.css가 있으면 이어서 읽어 스타일을 반영하게 되어 있습니다. 그런데 동일한 내용이 main과 custom에 각각 있을 때, main에 있는 내용은 무시되고 custom에 있는 내용이 반영이 됩니다. 즉, css는 나중에 나온 것이 먼저 나온 것을 대체하게 됩니다. 이는 같은 파일에서도 동일합니다.

앞을 보시면 동일한 구분자 .mm2가 두 번이 나옵니다. 앞에는 font-size가 75 픽셀로 설정을 했고 그 아래에서 다시 24 픽셀로 변경을 했습니다. 이와 같을 때 .mm2의 font size는 24 픽셀이 되고 앞에 정의된 75 픽셀은 무시된다는 것입니다.

기억하세요.

배경색과 글자색

  이제는 왜 main.css를 수정하지 않고 custom.css를 만들어 사용하려고 하는지 이해를 하셨을 것입니다. 탐색기에서 ~/MagicMirror/css 폴더로 이동을 해서 마우스 오른쪽 버튼을 눌러 custom.css 파일을 만들어주고 지니로 열어줍니다.

 

앞의 테이블을 보면 좌측이 main.css이고 우측이 custom.css 입니다. 우선 body와 header에 많은 속성들을 정의되어 있습니다. 그리고 동일한 것들을 우측 custom.css에 재 정의하고 있는데 모두 color가 들어간 속성들입니다. 기존의 색깔에서 #000(블랙)으로 변경을 했습니다. 글자색, 배경색을 모두 블랙으로 변경을 했습니다. 이대로 실행을 한다면 글자가 안 보일 것입니다.

 

  .module 다음에 ‘.’과 모듈이름을 넣어 각각의 모듈을 지정합니다. 예를들면 맨 아래에 .moudle.newsfeed는 매직미러 맨 하단부의 뉴스를 보여주는 모듈이었죠. 이와 같이 우리가 구현한 모든 모듈들을 리스팅을 했습니다. 그리고 각각 background-color, border-radius, padding을 동일하게 지정을 해 줘서 모든 모듈이 같은 디자인을 갖도록 했습니다. 

  rgba함수는 색상을 설정합니다. 색의 3원소 빨강, 녹색, 파란색의 약자죠. 그리고 a는 투명도를 나타냅니다. 투명도는 소수점이 있는 숫자로 표시를 하는데 그림이 뒤에 보이게 되므로 투명도를 두어 비춰 보이게 하는 것입니다. 위에 설정된 0.4는 40% 투명도를 가진다는 의미입니다. [그림136] 우측 상단에 보시면 R, G, B가 각각 보이고 그 우측에 숫자가 나타나 있습니다. 이 숫자들이 가리키는 색깔은 그림 좌측의 십자가가 가리키는 색상을 말하는 것입니다. 모두 255를 선택했다면 흰색이 됩니다. 모든 모듈의 배경색이 흰색이라는 것입니다.

 

그림 136. RGB 색상표

 

  border-radius는 직사각형의 네 꼭지점을 둥글게 표현해주는 정도를 나타내는 것이고, padding은 margin과 함께 이해를 해야 합니다. 직사각형을 떠올려 보시기 바랍니다. 직사각형을 이루는 선이 있습니다. 거기서 선과 내부에 글자가 표시 될 곳까지의 거리가 padding입니다. 그리고 선에서 반대쪽으로 직사각형과 외부의 다른 구성요소와의 거리를 나타내는 것이 margin입니다.  

하지만 같은 설정을 여러번 반복한다는 것이 비효율적으로 보여집니다. 그래서 css에서는 다음과 같은 방법을 제공합니다.

효율적인 CSS 코팅방법

 

 

  앞서 각 모듈별로 동일한 설정을 여러번 해 주었는데 위와 같이 구분자를 “,”로 구분하여 나열을 하여도 됩니다. 보다 효율적인 코딩이 되겠습니다.