꿈꾸는 개발자, Front-end Developer

Trust that the dots will connect in your future.

#CSS #Dev #EJS #HTML #Hexo #JavaScript #dev #jQuery #smallTalk #번역 #삽질 #신세계 #이론 #정보처리기사

Mac Chrome에서 배경색이 다르게 보임


20170922-2-1

언제부터였을까요…

처음부터 그랬던 걸까요…

Mac용 Chrome에서 제 웹사이트를 보았을 때 배경색이 달라 위 스크린샷처럼 박스들이 훤히 드러나는 것 말이죠…


오늘 문득 눈에 띄어 발견하고서는 소름이 돋았습니다.

‘지금까지 똑같은 걸 봐놓고, 여태 이걸 몰랐나?’

하고 말이죠. T.T

검색을 해보니 작년부터 제기된 문제 같은데(https://bugs.chromium.org/p/chromium/issues/detail?id=633805),

해결이 제대로 안 된 것 같습니다.

패치 파일을 통해 해결하는 방법이 있는 것 같은데, 그 방식으로 해결한다고 해도 제 컴퓨터에서만 제대로 보일 뿐,

다른 Mac chrome 사용자들에게는 그대로일테니 다른 방법을 모색해야만 합니다.


중앙 Search 부분과 그 오른쪽의 색이 다른 것으로 보아

‘특별한 정보가 주어지지 않고 자동으로 채워진 부분의 색이 다른 것은 아닐까?’ 라는 추측을 해봅니다.

Search 부분의 블럭 전체에 배경색을 설정해 보았습니다.

20170922-2-2

오…Search 부분의 블럭 전체에 배경색을 주니 그 만큼의 색이 채워졌습니다.

추측한 부분이 어느 정도 들어 맞는 것 같습니다.


현재 CSS 설정은 bodybackground-color 값을 준 상태이고, 전체 블럭 container의 바깥 부분에 다른 색이 표시되고 있습니다.

그.렇.다.면!

body 보다 상위 element(DOM)인 htmlbackground-color 값을 줌으로써 문서 전체에 배경색을 설정하여

자동으로 채워지는 부분이 없도록 만들어 보겠습니다. 하위 element인 bodybackground-color는 중복될테니 지워버리구요~

html {
background-color: #1e2838;
}

그 결과는?!




20170922-2-3

ㅎㅎㅎㅎㅎㅎㅎ망했습니닿ㅎㅎㅎㅎㅎ

아이고~

html에 줄 수 있는 속성에는 background-color가 없나봅니다.

가운데 Search 부분은 아까 따로 배경색을 줬으니 그대로 배경색이 남아있는 것일테고,

body는 배경색을 지웠으니 기본색 흰색이 표시되는 것이겠지요.

쳇… 일단은 다시 body에 배경색을 줘야겠습니다. 똑같이 body에만 주면 지금까지 한 일이 헛수고뻘 짓 같으니

괘씸죄로 html도 묶어서 배경색을 줍니다.

html,body {
background-color: #1e2838;
}

..

…?!

헐…

20170922-2-4

…깨끗하게 나오네요…

해결되어 버렸습니다…

(한국어로 수동태 쓰는 것을 지양합니다만, 이건 수동태가 맞는 것 같습니다…)


오늘도 엉덩이로 디버깅을 합니다.


#엉덩이디버거

#dev #smallTalk