질문/조언질답게시판

상단 메인 메뉴중에서 특정 메뉴만 "background" 색을 다르게 하고 싶은되요 

이게 가능 할가요 ...?

  • profile
    네 css로 몇번째인지 정해서 가능해요
  • profile profile
    암만 찾아봐도 메뉴 css 만 보이더군요 혹시 순서를 정해서 코드를 삽입 하고 css 를 입혀야 할까요... 검색을 해봐도 안나오고 해서 답답하여 질문 올려 봅니다 ㅎㅎ
  • profile

    이온디님 말씀처럼 css로 순번에 따라 색상 지정도 가능하구요.

    다른 방법으로는 if 문 넣어서 인라인 스타일을 줄 수도 있을 거예요.
    이 경우엔 (어떤 레이아웃 쓰시는지 모르겠지만) 레이아웃 html 파일에서 메뉴 불러오는 부분 소스를 올려주시면 더 자세한 도움을 얻으실 수 있을 겁니다.

  • profile profile
    현재 사용중인 레이아웃 입니다
    https://www.xpressengine.com/index.php?mid=download&package_id=18642464
    엘카님거에요 제가 아직은 if문을 아직 몰라서요 배운다 배운다 하고 못하고 있네요 ...
  • profile profile
    css로 하셨다니 다행이에요ㅎㅎ
  • profile profile
    광복절에 하나 배우고 갑니다
    감사 합니다 if 빨리 배워야 할것 같습니다
  • ?
    nth-child 요거 검색해보세요.
  • ? profile
    감사 합니다
    지금 한번 검색을 해볼게요 ㅎㅎ
  • ? profile

    진짜 감사 합니다 이거 바로 됩니다 ㅎㅎㅎ
    #gnb .li1:nth-child(7) {
    background: red;
    }
    이렇게 했습니다 숫자7은 자신이원하는 특정메뉴 순서 입니다
    이거 정말 좋습니다
    다시 한번 감사 합니다

     

     

    :nth-child(number) {
        css declarations;
    }

  • profile ?
    ;)
  • profile profile
    nth-child는 숫자만 넣으면 해당 번째의 것에만 적용되죠.

    추가로 맨 앞에 nth이름에서 알수 있듯이 n방정식이 가능합니다.
    2n은 짝수를 의미합니다. 2n은 even으로 대체가 가능하죠.
    2n+1은 홀수, odd입니다.

    이를 응용하면 한줄에 3개의 요소가 있고 줄넘김을 해야 할때 매 3번째마다 오른쪽 여백을 없애려고 한다면
    nth-child(3) { margin-right: 0; }
    nth-child(6) { margin-right: 0; }
    nth-child(9) { margin-right: 0; }
    nth-child(12) { margin-right: 0; }
    이렇게 계속 쓰는 것이 아니고
    nth-child(3n) { margin-right: 0; }
    이렇게 하면 됩니다.

    실전에서는 3n+1같이 들어가 있는 요소에 따라서 1을 더해주거나 하는 등이 필요할수도 있더군요.
    (계산 실수로 인해....)

    비슷한 것은 nth-of-type라는 것이 있고
    first-child, last-child같은 것도 있습니다.

    "css 선택자"던가?로 검색하면 자세한 정보를 찾으실 수 있을꺼에요.
  • profile profile
    역시 감사 합니다 이번에 정말 귀한거 하나 배웠습니다 ㅎㅎ
  • profile ?
    2차메뉴 자간 넓이를 다르게 할려구 비슷한 방법으로

    .gpe_munu{position:absolute; left:0px; top:0px;}
    /*└(1차메뉴)*/
    .gpe_munu ul.topnav{position:relative; text-transform:none; }
    /*.gpe_munu ul.topnav .topnav_line_hide{position:absolute; right:1; top:11px; width:2px; height:13px;} 1차메뉴 우측라인 숨김*/
    .gpe_munu ul.topnav:nth-child(2) {letter-spacing: 0px;}
    .gpe_munu ul.topnav li.mnav_li{position:relative; float:left;}
    .gpe_munu ul.topnav a.mnav{display:block; width:100px; height:49px; line-height:49px; color:#d5d5d5; font-size:16px; font-weight:800; text-align:center;}/*1차메뉴*/
    .gpe_munu ul.topnav a.mnav:hover{text-decoration:underline;background-color:#fff;}
    .gpe_munu ul.topnav a.mnav.active{color:#fff200; text-decoration:none;}
    /*└(2차메뉴)*/
    .gpe_munu ul.subnav_d02_m{position:relative; margin-top:-1px; clear:both; background-color:#fff; text-align: center; letter-spacing: 10px; border:1px solid #ff4948; border-top:0; text-transform:none; display:none; zoom:1;
    -moz-box-shadow:1px 1px 4px rgba(1,1,1,0.9); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.1); box-shadow:1px 1px 4px rgba(0,0,0,0.1);}
    .gpe_munu li.subnav_d02{position:relative;}
    .gpe_munu li.subnav_d02 a{display:block; width:98px; font-size:13px; line-height:26px; padding-left:4px; zoom:1;}/*2차메뉴*/
    .gpe_munu li.subnav_d02 a.on2{color:#000; background-color:#ededed; zoom:1;}/*2차 활성시*/
    .gpe_munu li.subnav_d02 a.on2_no{color:#4f4f4f; background-color:#fff; zoom:1;}/*2차 기본*/
    .gpe_munu li.subnav_d02 a.on2_no:hover{color:#000; background-color:#f6f6f6; zoom:1;}/*2차 오버시*/


    css 수정해봤는데 변화가 없네요 ㅠㅠ 어떤 부분에 nth-child 넣어야하는걸까요..
  • ? profile
    html 부분이 없네요.
    이것만 봐서는 알수가 없어요.
    url을 남겨주세요.

서버에 요청 중입니다. 잠시만 기다려 주십시오...