구글 블로그 같은 스킨인데 같은 위치에서 색상 코드가 바뀔 수 있나
이럴 수도 있다고 하는데요, 왜 그런지 아니면 수정하는 과정에서 이것저것 만지고 되돌려놓지 않았을까요. 같은 스킨인데 같은 위치에 색상이 바뀔 수 있는 이유를 추정하면
1. 반응형 디자인을 위해 미디어 쿼리를 사용하여 특정 화면 크기에서 색상이 변경될 수 있고
2. JavaScript를 통해 동적으로 스타일이 변경될 수 있습니다. 페이지 로드 후 스크립트에 의해 색상이 조정될 수 있고
3. CSS 변수를 사용하여 동일한 클래스에서 다른 색상 값을 참조할 수 있고
4. 부모 요소의 스타일에 따라 자식 요소의 색상이 영향을 받을 수 있습니다.
이러한 이유로 색상이 바뀔 수 있다고 하는데 아직은 이해하지 못하고 다만 원하는 결과만 나오니 더 이상 세세하게 따지고 싶지 않은데요,
구글 블로그를 만들면서 같은 스킨을 적용하고, 또 새로운 스킨이라면 실제로 적용하기 전에 테스트 블로그에 먼저 올리고 결과를 확인하고 실제로 적용하고 있습니다. 그런데 이전에는 느끼지 못했는지 본문에 링크 걸린 문장이 빨간색으로 보입니다.
이것을 파란색으로 바꾸려고 찾아보니 스킨에는 링크 걸린 코드가 보이지 않습니다. 일반적으로 링크는
post-body a:link, /* 아직 클릭하지 않은 링크 */
post-body a:visited, /* 방문한 링크 */
이렇게 표시되는데요, 이 부분을 찾았는데, a:visited는 찾았는데, a:link는 어떻게 표시되어 있을까요.
사실 이 부분도 어렵지 않습니다. a:link, 라고는 표시되어 있지는 않지만, a:visited로 찾으니 바로 위에
a{
color:$(body.link.color)
}
이렇게 적혀있는데요, 이 부분이 링크를 담당하는 색상이며 그 색상은 body.link.color 에서 적용한 색상에 따르겠다는 내용입니다. 이러면 쉽습니다.
link.color 로 검색합니다. 이 부분인데요, 여기서도 색상은 main.color 에서 정한 색상을 따르겠다고 합니다. 그렇다면 다시 main.color 색상을 봐야죠. 바로 위에 main.color칼라를 지정한 코드가 있습니다.
<Variable name="main.color" description="Theme Color" type="color" default="#f2132d" value="#f2132d"/> 여기에 #f2132d 빨간색 계통으로 지정되었습니다. 여기 있는 색상을 수정하면 블로그 전체 색상이 흩뜨려질 수도 있습니다. 통상 메인 색상은 여러 곳에서 사용하고, 본문 링크는 해당 섹션에서만 적용합니다. 그러니 위에 있는 코드에서 색상은 수정하지 말고 아래 link.color가 있는 곳만 파란색 계통인 #000ff로 변경합니다. 그리고 색상 변경은 궁금하면 바꾸고 결과를 보고 이상하면 다시 돌려놓으면 됩니다. 색상 적용이 다른 소스에 영향을 미치는 것은 아니니까요.
<Variable name="body.link.color" description="Link Color" type="color" default="#0000ff" value="#0000ff"/> /* default="$(main.color)" 이 색상을 #0000ff 수정 */
코드를 만지는 것이 겁이 나는 분을 위해 색상을 수정했습니다.
그리고 이곳을 찾지 못했다면 키보드 기능키 F12를 눌러 개발자도구로 들어갑니다. 사실은 어제 오랜 시간 동안 개발자도구에서 보냈습니다. 조금 이상한 부분이 있더군요.
F12 개발자도구를 사용하는 방법은 이전 포스팅을 참고하시고 설명을 잠깐 드리면 먼저 수정하거나 찾고 싶은 화면을 띄워놓고 F12로 들어와서 Elements 탭을 누르면 관련 코드가 쭉 나옵니다. 수정하고 싶은 화면을 찾는 방법은 삼각형에 커서를 대면 왼쪽 화면에 블라인드가 쳐집니다. 색상이 덮이죠. 그러면 커서가 있는 삼각형에 찾고 있는 화면을 처리하는 코드가 있습니다. 이런 방법으로 마지막까지 타고 들어갑니다. 지난번 F12키로 특정 섹션을 찾았는데요, 오늘은 본문 텍스트 내부에 걸린 링크를 찾아보겠습니다.
사실 위치 찾는 것은 어렵지 않습니다. 삼각형을 커서로 훑어서 찾는 것은 똑같습니다. 같은 방법으로 이번에는 링크가 걸린 본문 내용을 찾았습니다.
한 번 더 타고 들어가니 링크가 걸린 텍스트는 전체가 <p></p> 태그로 묶여있네요. 여기서 해당 문장을 클릭합니다. 그리고 그대로 아래로 내려옵니다.
위에서 클릭한 내용에 적용되는 클래스를 몽땅 보여주는데요, 여기를 보면 맨 위에서 보았던 a:visited 색상은 blue로 지정되어 있고, 그 아래 a 링크는 빨간색 #f2132d이 지정되었는데 취소 선이 그어져 있습니다.
앞서 스킨에서 이상하다는 부분이 이것인데요, 본분에 링크가 걸린 곳이 처음에는 빨간색 #f2132d 이었는데, 이곳을 클릭하고 나면 당연히 파란색으로 바뀝니다. 그런데 이상하다는 것은 그다음부터 다른 포스팅에 링크를 만들면 링크를 클릭하지 않아도 파란색으로 나옵니다. 이상하죠. 분명히 아무것도 손댄 것도 없는데 링크 색상이 바뀌버리더군요.
그렇다면 처음에 링크 색상을 #f2132d에서 #0000ff로 바꿀 필요도 없습니다. 하지만 이제는 알고 있는데 수정하지 않으면 또 언제 이전으로 돌아갈지도 모르니까요. 분명히 a 링크에 빨간색이 저절로 취소되었다는 것은 어떤 과정에서 이루어졌는지 모르겠습니다. 스킨코드에 AI가 적용되어 수시로 이상하게 바뀌는 것은 아닐 테고, 어쨌든 오늘은 그동안 F12를 이용해서 큰 섹션만 처리했습니다. 프로필 자리를 없애거나 푸더 여백을 없애거나 하나의 클래스를 전체를 숨겼는데, 오늘은 본문 속에서 세밀한 부분까지 F12 키를 이용해서 처리할 수 있게 되었네요.
개발자 도구로 HTML 소스 위치 찾는 방법, 이렇게 쉬운 것을