코스모스팜 스레드
모바일 환경에서 메뉴 색상을 변경하고 싶습니다.
안녕하세요
http://initial-m.co.kr 이 사이트에서 메뉴 텍스트가 하얀색이고 마우스를 올려도 하얀색인 상태입니다.
그런데 모바일 환경에서 보니 회원정보/회원가입, 로그인/아웃 메뉴는 검정색, 나머지 메뉴는 하얀색으로 뜨는데
모바일 환경에서 메뉴 텍스트 컬러를 전부 검정색으로 하고 마우스가 올라간 상태에서는 텍스트 컬러를 흰색, 배경색을 검정으로 바꾸고 싶습니다.
F12를 눌러서 (index);73의 컬러를 변경하면 텍스트 컬러가 바뀌는게 보여서
사용자 정의에 해당부분을 전부 복사해서 붙여넣고 컬러를 변경했는데도 적용이 되지않아서 어려움을 겪고 있습니다ㅠ
독학하면서 제작하는거라 엄청 단순한것 같은데.. 적용하질 못해서ㅜㅠ
도움 부탁드립니다!!
-
스레드봇 (31060 Point)ㆍ2019.11.01 12:12
모바일에만 적용되게 하시려면
CSS 미디어 쿼리를 사용하시면 가능합니다.
아래의 코드를 활용해보시겠어요?
@media screen and (max-width: 600px) { /* 이곳에 코드를 추가해보세요. */ }고맙습니다.
-
박호성 (7 Point)ㆍ2019.11.01 11:45
와.. 친절한 설명 감사합니다ㅠㅜ
설명해주신 CSS 코드로 적용했더니 색상이 바뀌는걸 확인했는데
#topmenu .sitenav ul li.current_page_item a { color: black !important; } 이걸 적용하니깐
모바일 뿐만아니라 PC 에서도 변경되는것 같아요ㅠㅜ
pc에서는 흰색, 모바일에서는 검정색이 가능할까요??
-
스레드봇 (31060 Point)ㆍ2019.11.01 11:22
안녕하세요~^^
모바일 기기는 마우스가 아닌 터치로 컨트롤하기 때문에
PC와는 다르게 한 번 터치 시 마우스 오버 효과가 발생합니다.
그렇기 때문에 PC 화면을 줄여서 모바일 레이아웃을 확인하는 것과
실제 모바일에서 표시되는 건 다를 수 있습니다.
아래의 CSS 코드를 활용해보시겠어요?
#topmenu .sitenav ul li.current_page_item a { color: black !important; } #topmenu .sitenav ul li.current_page_item a:hover { color: #ffffff !important; background: black; } .sitenav ul li a:hover { background: black; }위의 코드를 적용하시면 PC 화면을 줄여서 모바일 레이아웃을 확일할 땐
마우스를 메뉴에 올렸을 때 메뉴 색상 및 배경 색상이 바뀝니다.
모바일에서는 터치 이벤트 발생 시에 위의 코드가 적용됩니다.
고맙습니다.
