이찬우
10
2020-09-15 11:10:31 작성 2020-09-15 11:42:06 수정됨
7
179

css 적용 질문입니다.. class속성의 태그가 안먹허요 ㅠㅠ


현재 문제가 .btn으로 css를 적용하고 싶은데 적용이 안되고.. id속성을 이용해서 적용은 잘됩니다..

현재 jQuery css도 적용중입니다.

도대체 문제가 무엇일까요? 브라우저 캐시, 우선적용순위 등등 다생각해보았는데..

css에 코드도 몇줄없어서 그런것도 없어보이는데.. 도움을 좀 주시면 감사하겠습니다..

코드를 올리는게 젤 정확하다고 생각하여 올려보겠습니다.. 짧은 코드입니다..

<link rel="stylesheet" type="text/css" href="styles_to_main.css?ver=1"/>

-------------------------------------------------------------------------------------------------------

<div data-role ="page" id="main">

<div data-role="header" data-position="fixed" id="top">

<table id="menubar">

<tr>

<td><a href= "#main" data-iconpos="notext"><img src="coinone_logo_blue.svg" /></a></td>

<td><button class ="btn" id="transaction_btn" onclick="location.href='#transaction'" >거래소</button>/td>

<td><button class ="btn" id="asset_btn" onclick="location.href='#myAsset'" >자산</button></td>

<td><button class ="btn" id="center_btn" onclick="location.href='#customerCenter'" >고객센터</button></td>

<td></td>

<td>

  <button class ="btn" id="join_btn" onclick="location.href='#join'" >회원가입</button>

  <button class ="btn" id="login_btn" onclick="location.href='#login'" >로그인</button>

</td>

</tr>

</table>

</div>

-------위의 코드는 css가 적용될 파일입니다.--------------------------------------------------------------------------------


0
  • 답변 7

  • 시닙이
    1k
    2020-09-15 11:21:58

    클래스 파일을 올려주세욥 

  • 이찬우
    10
    2020-09-15 11:29:47

    @charset "UTF-8";

    #main, #top {background-color: #F0EDEC;}

    a { text-decoration: none; font-size: 12pt; font-weight: normal;}

    #menubar { width: 95%; margin: auto;}

    td { text-align:center; padding-left: 10px; padding-right: 10px;}


    .btn {

    color:#8F8D8D;

    background-color: #F0EDEC;

    transition-duration : 0.7s;

    }


    #transaction_btn, #asset_btn, #center_btn {

    color : black;

    background-color: #F0EDEC;

    border: none;

    box-shadow: none;

    transition-duration : 0.7s;

    border-radius: 12px;

    }


    #transaction_btn:hover, #asset_btn:hover, #center_btn:hover {

    background-color: #CDE3F7;

    }


    #join_btn:hover, #login_btn:hover {

    background-color: #D7D4D4;

    }

    css 파일입니다...
  • 시닙이
    1k
    2020-09-15 11:52:03

    일단 올려주신 소스로 돌려보니

    btn은 다먹고있구요 .btn 보다  #transaction_btn, #asset_btn, #center_btn   요놈이 우선순위가 높아서 이CSS 먹는거 같은데욥 

  • 이찬우
    10
    2020-09-15 11:57:20

    혹시 회원가입 , 로그인 버튼도 확인해보셨나요? 그부분은 따로 css 설정한게 없어서

    .btn이 먹혀야 되는데.. 저는 안먹히더라고요 .. color랑 background-color 가 회색으로 바껴야되는데.. 기본 버튼세팅의 색으로 되어있습니다..

  • 이찬우
    10
    2020-09-15 12:03:41

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    제가 헤더부분에 이부분을 빠드렸는데 , 저기있는 css때문에 color와 background가 우선순위에서 밀리는걸 확인하였습니다.. 이우선순위는 바꿀수가 없는걸까요?

  • 시닙이
    1k
    2020-09-15 12:26:36
  • fanno
    35
    2020-09-15 12:28:56 작성 2020-09-15 12:30:26 수정됨

    !important 를 적용해보시는건 어떠신가요?


    시닙이 님께서 링크 주신게 있네요 ㅎ 


  • 로그인을 하시면 답변 을 등록할 수 있습니다.