따찌님 0

가장 쉽게(?) CSS 코드를 적용하는 법입니다.

먼저 크롬으로 트게더 페이지를 여세요. 색상 수정을 원하는 영역을 우클릭 한다음 검사를 클릭하세요. 

현재 예시에서는 좌측 상단의 '트게더 전체 메뉴'의 배경색을 수정해볼게요.

이 스샷은 이미 색상 수정을 한 스샷입니다. 우측에 파란색 박스 및 별표 표시한 곳을 보면

#main .menu-wrapper>.header{

 background: #6441a5;

 color: #fff;

 padding: 0.45em 1.4em 0.45em 1em;

 font-weight: bold;

}

부분이 현재 수정할 css이고 따찌님 트게더 css에 적용해야 되는 css입니다. background는 배경색이고 color는 폰트입니다.

수정된 css를 따찌님 트게더 css 부분에 적용하시면 됩니다. 크롬 우클릭 - 검사 기능에서 직접 background 등을 변경해서 

자기 크롬창에서 미리보기 형식으로 테스트는 해볼 수 있습니다.

단 배경색은 좌측 하단의 '유용한 링크', '트위치 스케쥴'과 연동되어 있고, 폰트는 '트위치 스케쥴'은 다른 css를 수정해야됩니다.

트위치 스케쥴에 우클릭하고 보시면 

#main .menu-wrapper>.header>a { 

} 라는 약간 다른 css에 묶여 있습니다. 

방법 자체는 간단하나 우클릭 - 검사를 통해서 보시면 영역에 따라 정확한 css부분이 어디인지 헷갈리실수도 있습니다. 

그리고 가끔 제대로 우클릭을 해도 정확히 수정하고 싶은 영역이 기본으로 선택되어 있지 않을수도 있습니다.

(상단창에서 해당하는 영역의 css를 마우스를 갖다대면서 찾아야됩니다)

직접 background: color: 등을 수정해보시면...아실겁니다.

https://tgd.kr/8677364?q=css

윗 링크를 참고하면 좋을듯 합니다. 약간 다른식의 css를 적용하긴 했으나(앞에  link-color 이런식으로 단어에 색상 하나를 묶고 그 단어를 활용한 스타일입니다) 보시면 도움이 될듯합니다.