간혹 보면 글 읽기 화면에 글 목록을 제공하면서 현재 읽고 있는 글이 어떤 글인지 표시가 나도록 처리해 주지 않은 스킨들이 있습니다. 이게 제법 불편한 상황이 되는데요. 이유는 내가 읽고 있는 글 다음 글을 찾거나 이전글을 찾기 위해서는 목록에서 현재 읽고 있는 글이 표시가 나야 합니다.

 

제가 블로그,회원소통,파트너쉽 게시판에 사용하고 있는 스킨이 그러한 경우인데요.

 

이런 경우 직접 수정해서 표시가 나도록 해볼 수 있을 겁니다.

 

 

 

그냥 간단하게 해당목록에 백그라운드 컬러로 표시가 나도록 만 해보았습니다. 표현하는 방법은 다양하게 각자 취향에 맞체 추가를 할 수 있겠죠.

 

일단 목록단위의 엘리먼트가 무언지 덩어리를 찾으셔야 합니다. 개발자도구를 보셔도 쉽게 구분이 되고 소스를 보셔도 금방 알아챌 수 있습니다. 목록이라는 것은 반복문으로 글번호만 바뀌면서 출력되는 반복문에서 사용됩니다. 

 

이 반복을 하는 단위를 찾으면 되는데....

 

 

소스에서 보실때는 list 를 당당하는 파일에서

 

<li loop="$document_list=>$no,$document">

 

이런식으로 loop 로 반복을 시키는 케이스가 있고 

 

foreach 로 반복시키는 케이스가 있고 합니다. 유심히 보시면 어떤 것인지 확인하실 수 있습니다.

 

 

<li loop="$document_list=>$no,$document"> 케이스를 예를 들면

 

<li loop="$document_list=>$no,$document"<!--@if($document_srl==$document->document_srl)--> style="background-color:#f8f9fa;"<!--@end-->>

 

이런식으로 현재의 읽고 있는 글번호와 목록의 글번호가 일치할때 style="background-color:#f8f9fa; 의 백그라운드 컬러가 적용되도록 조건을 걸어 코드를 작성하면 됩니다.

 

여기서 주의점은 조건문은 앞쪽의 코드와 붙여서 작성하고 조건문 안의 코드는 공백 하나를 띄워주고 작서을 해야 합니다.

 

이유는 조건문은 실제 브라우저에는 적용되지 않고 조건으로만 사용되고 조건이 일치하면 조건문 안의 것이 브라우저에 적용이 될텐데 이때 공백이 없으면 앞쪽 코드와 붙어버려서 에러가 나거나 의도한 작동이 되지 않는 무의미한 코드가 되어버립니다.

 

 

**주의 사항**

위와 같인 style을 직접 적용하면 다크모드에 대응하기 어렵습니다.

 

귀찮더라도 조건을 걸어 class 명을 부여하여 해당 class에 css를 적용하여 다크,라이트 모드에 대응하는 색상이 적용되도록 해야 바람직합니다.

 

<li loop="$document_list=>$no,$document"<!--@if($document_srl==$document->document_srl)--> class="selected"<!--@end-->>

기존에 class가 부여되지 않아 새롭게 만드는 케이스로 selected 라는 class명이 부여되도록 했습니다.

 

 

 

기존에 이미 사용할 class가 부여된 경우

class="abcd"

 

<li loop="$document_list=>$no,$document" class="abcd<!--@if($document_srl==$document->document_srl)--> selected<!--@end-->>"

 

새롭게 부여된 .selected 에 필요한 효과(배경색 등)를 css에서 처리해 주면 되겠죠?