조회 수 111 추천 수 0 댓글 24
Extra Form

실시간 검색어 모듐을 수리하여 적용하였습니다 

문제는 이게 1위 하고 나머지 순위들을 색을 다르게 주고 싶은되요 

쉽지 않내요 혹시 어떻게 해야 될까요...?

현재 별짓을 다하고는 있지만 짧은 지식이라 앞으로 나가지를 못하고 있습니다 

 

현재 위젯 소스는 이렇게 되어 있습니다 

 

    <ul>{@$_idx=0}
        <!--@foreach($today as $key => $val)-->
        <li title="{$val->count}" class="search_li{$_idx}">
                        <!--@if($config->link=='Y')-->
                                <a href="{getUrl('','act','IS', 'search_target','title_content','is_keyword',$val->keyword)}">
                    <div class="idx">{$_idx+1}위</div>
                    <div class="keyword">{$val->keyword}</div>
                    <div class="hit">hit:{$val->count}</div>
                </a>
                        <!--@else-->
                                <div class="idx">{$_idx+1}위</div>
                <div class="keyword">{$val->keyword}</div>
                <div class="hit">hit:{$val->count}</div>
                        <!--@end-->
                 {@$_idx++}
         </li>
        <!--@end-->
    </ul>

  • profile
    이런건 주소를 공개해주셔야 빠른 답변을 얻으실 수 있습니다.
    <div class="idx">{$_idx+1}위</div> 여기가 순위인가요?
  • ?
    .search_li{} <<<이부분에서 1 2 3 숫자로 바끼시면 해당부분 css변경하심되지 않을까요?
  • profile

    <div class="idx ranck_{$_idx+1}">{$_idx+1}위</div>

    이렇게 한다음
    css 파일에

    .rank1 {블라블라..}
    .rank2 {블라블라..}

    이러면 될 것 같은데요.

     

     

    rank.png

    이게 그런 방식으로 순위마다 다른 색상을 css에서 표현한 것이구요.

     

    만약 순위만이 아닌 li 전체에 효과를 주시려면 이미 준비가 되어있네요.

    search_li{$_idx}  이부분인데요.

     

    css 파일에

    . search_li0 {블라블라}  <--- 1위

     

     


    저는 개발자는 아니라서.. 그냥 생각이 나는데로 적어봤습니다.

  • profile profile
    아이고 감사 합니다 웹지기님 알려주시는 것으로 한번 해봤습니다
    혹시 이렇게 하는 건지 한번 봐주세요

    <ul>{@$_idx=0}
    <!--@foreach($today as $key => $val)-->
    <li title="{$val->count}" class="search_li{$_idx}">
    <!--@if($config->link=='Y')-->
    <a href="{getUrl('','act','IS', 'search_target','title_content','is_keyword',$val->keyword)}">
    <div class="idx ranck_{$_idx+1}">{$_idx+1}위</div>
    <div class="keyword">{$val->keyword}</div>
    <div class="hit">hit:{$val->count}</div>
    </a>
    <!--@else-->
    <div class="idx ranck_{$_idx+1}">{$_idx+1}위</div>
    <div class="keyword">{$val->keyword}</div>
    <div class="hit">hit:{$val->count}</div>
    <!--@end-->
    {@$_idx++}
    </li>
    <!--@end-->
    </ul>

    CSS

    .rank0{padding:0 4px;background-color: #FF9436; color: #FFF; font-weight:bold;}
    .rank1{padding:0 4px;background-color: #FFA648; color: #FFF; font-weight:bold;}
    .rank2{padding:0 4px;background-color: #FFB85A; color: #FFF; font-weight:bold;}
    .rank_normal{padding:0 4px;background-color: #DDD;color: #666;}

    이 것은 전에 웹지기님이 알려주신 것을 그대로 해본 겁니다
  • profile profile

    .rank_normal 을 활용하시려면

    class 부여할때 조건을 거셔야 합니다.
    첫번째일때 두번째 세번째 일때 아니면 rank_normal 을 갖게 하는 if 조건문이요.

    그리고 지금 rank1이 이위에 해당하게 +1을 해준것이므로 rank0는 사용하지 않습니다.

     

    적용하신 곳 주소를 공개하셔야 합니다.

  • profile profile
    웹지기님 사이트 들어가서 보니
    화려 합니다
    갈수록 뭔가 알차 보이네요
    부럽습니다
  • profile profile
    전 이쪽 공부를 전혀 해본 사람이 아니니 다들 저처럼 관리는 가능하실 겁니다.
    XE에서 사용하는 변수나 함수등은 다른 자료 열어서 보다보면 제가 사용하고자 하는 곳에 사용이 가능해집니다.

    그리고 조금 더 응용을 한다면 지금 이 사례처럼 간단한 조건문 같은 것만 응용할 수 있으면
    스킨에서 고쳐서 사용하는건 운영자가 할 수 있습니다.

    다 외우지 않아도 됩니다. 그냥 잘 된 파일 찾아서 복사해서 붙여넣고 새로 만들 수 있으면 됩니다.
  • profile profile

    저도 열심히 공부 중인데 그게 쉽지 않네요 조건문도 어느정도 배워야 하는데 현재로는 아직이네요
    부럽내요 저런 것을 저정도 할수 있으시니 사이트가 갈수록 알차 보이고 뭔가 다양한 기능과 커뮤니티 적인 요소가 넘처 나는 것 같습니다 +_+

  • profile
    방법은 다양합니다.

    1. <div class="idx">{$_idx+1}위</div>여기의 div에 if문으로 $_idx가 0인 경우에만 style을 직접 주기
    <div class="idx"<!--@if($_idx==0)--> style="color: red;"<!--@end-->>{$_idx+1}위</div>

    2. 위에서 style대신 class를 추가하고 위젯 css에 class를 추가하기
    <div class="idx<!--@if($_idx==0)--> fontcolorred<!--@end-->">{$_idx+1}위</div>
    css에서
    fontcolorred { color: red; }

    3. 위젯 css에서 nth-child를 이용해서 첫번째 li의 첫번째 div에만 color값을 주기
    ul li:nth-child(1) div:nth-child(1) { color: red;}

    음... 또 어떻게 있을려나요.

    테스트까지 해본 정확한 코드가 아니고 대충 예상되는대로 적어봤습니다.
  • profile profile
    Double'U' 님 안녕하세요 알려주신 대로 하니 1위는 색이 변경이 됩니다
    나머지는 위에 웹지기님 처럼 할려니 힘드내요
    제가 알려주신 내용중 3번이 이해가 잘 안됩니다
    전체적인 소스 좀 알려주시면 안될까요 ...?
    고맙습니다 ㅠㅠ
  • profile profile

    <div class="idx <!--@if($_idx<3)-->rank{$_idx}<!--@else-->rank_normal<!--@end-->">{$_idx+1}위</div>

     

    이건  .rank0  부터 사용하는 방식입니다.

  • profile profile
    감사 합니다 웹지기님 잘 됩니다 ㅠㅠ
    제가 사이트를 알려드리면되는데 조금 그래서요 지금 적용해놓은 곳이 관리자 페이지에 적용후 다 만들어지면 이동할려고 하다 보니 사실은 사이트를 알려드려야 그게 경우 인데 지금 그렇치 못하네요
    너무나도 감사 합니다 (--)(__)
  • profile profile
    3번은 css 선택자를 공부하시면 됩니다. -0-;;;




    ul 안의 첫번째 li의 첫번째 div에만 글씨를 빨강색으로 지정한 것입니다.
    왜 이렇게 선택자가 구성되었냐면

    1위 글자가 있는 요소의 가장 위에는 ul이 있고 그 아래 li가 있고
    그 아래 a태그가 있는데 요건 생략했고, div들이 있죠.

    그런데 li는 foreach문으로 반복됩니다.
    그래서 첫번째 li를 nth-child(1)로 써서 선택한 것입니다.

    li안에 있는 요소들이 a태그를 빼면 div들이 있는데 첫번째 div에 순위가 있죠.
    그래서 여기에도 li와 마찬가지로 nth-child(1)를 쓴 것입니다.

    괄호안에 숫자를 쓰면 해당 요서의 몇번째를 의미하는데 n을 사용할수도 있습니다.
    2n+1을 넣으면 홀수번째가 되죠.
    학창시절 수학시간에 배운것을 써먹을때가 있네요.
    수학이 이렇게 중요합니다. -0-;;;;

    그렇게 만들어진 코드가 이렇습니다.
    ul li:nth-child(1) div:nth-child(1) { color: red;}

    1위가 아닌 다른 순위들에게도 고정된 색을 넣고 싶다면.
    저거 윗줄에다가
    ul li div:nth-child(1) { color: blue;}
    이걸 넣어주면 됩니다.

    ul li div:nth-child(1) { color: blue;}
    ul li:nth-child(1) div:nth-child(1) { color: red;}

    요렇게 되겟죠.

    윗줄에서 ul안에 있는 모든 li안에 div중 첫번째 것에게는 글자색을 요렇게 지정.
    두번째 줄에 의해서 ul안에 있는 첫번째 li의 첫번째 div는 글자색을 다르게 지정.

    순서도 중요합니다.
    뒤에 있는 것이 우선순위를 가지거든요.

    2등 색은 두번째 li일테니
    ul li:nth-child(2) div:nth-child(1) { color: black;}
    요렇게 지정할 수 있겠죠.


    그런데 실제로 되는지는 안해봐서 장담을 못하겠습니다. -0-;;;;;;;;;;
    소스코드보고 대강 예상한 것이라서요.
  • profile profile

    적용하니 이렇게 됩니다 ㅎㅎㅎ

     

    ugdhfsb.PNG

  • profile profile
    요거 공부를 해야 할것 같네요 엄청 유용할것 같습니다
    너무나도 감사 합니다
  • profile profile
    가상 선택자를 이용하면 모든 요소마다 class를 지정하지 않아도 되서 편해요~
    어렵지 않은 개념이니 공부하시면 좋아요~
  • profile profile
    네 그러내요 진정 필요한 것을 이제야 오늘 알았습니다
    고맙고 감사 합니다
  • profile profile
    혹시 이것도 아셧어요?

    css에서도 간단한 계산이 가능해졌어요.

    width: calc(100% - 45px);
    요런게 되요. 만세!!
    (빼기 기호 같은 수식기호에는 앞뒤로 띄어쓰기 필수에요.)
    일일이 계산해서 넣어주지 않아도 되더라구요.
  • profile profile
    width: calc(100% - 45px);
    위에 있는 CSS는 어디에 자주 사용되는가요 ...?
    알아 뒀다가 사용 할려고요
  • profile profile
    음....
    예를 들면요.
    상단 메뉴와 하단 카피라이트 부분을 fixed로 고정시켜 놓고 본문영역을 나머지로 채우고 싶어요.
    상단이 100px이고 하단이 100px이고 브라우저의 화면이 900px이면 본문의 높이는 700px이 되어야 하잖아요.

    그런데 브라우저마다 크기가 다 다르니... 후처리를 했어야 했죠.
    자바스크립트로 화면의 세로 크기를 가져와서
    빼기를 해주고 계산된 값을 본문 영역의 높이에 넣어줬어요.
    게다가 컴터가 느리면 늦게 계산되서 높이가 화면이 다 뜨고 바뀌기도 해요.

    그런데 이걸 calc를 쓰면 자바스크립트를 안써도 되고 한줄로 해결되죠.
    height: calc(100% -200px);
    요렇게요.

    물론 본문영역을 싸고 있는 요소의 높이도 지정되어있어야 하구요. %를 써야 하니까요.
    body부터 다 높이를 지정해주는 게 좋아요.
  • profile profile
    메뉴를 만들때도
    타운을 예로 들면
    좌측의 로고 부분이 100px이고 나며지를 메뉴로 쓰는데
    메뉴들을 싸고 있는 요소의 넓이를 calc로 계산할 수 있죠.
  • profile profile
    오 ~~~ 이건 한번 제가 해보면서 배워야 할것 같내요
    대충 감은 옵니다
    자바를 사용안하고 한반에 해결할수 있는 좋은 방법 같습니다
    오늘 많이 배우내요 ^^;;;
  • profile profile
    지금 "width: calc(100% - 200px);"를 사용해보니 끝내주는군요
    일정한 사이즈로 맞추고 나서 화면을 움직이나 거기에 맞께 크기가 줄어들고 커지는군요 정말 좋내요 완전 굳 입니다 감사 합니다 (--)(__)
  • profile profile
    저도 자바스크립트로 % - px을 계산해서 사이즈 조절하게 만들면서 왜 css는 계산식이 없을까 짜증을 냈었죠.ㅋ

    css3에서부터 나온거라서 나온지는 벌써 몇년이 지났는데....
    ie8에서 지원이 안되죠......

    그래서 아마 나왔을때 관심을 안가졌나봅니다...

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