채택완료

웹진형 게시판에서 이미지 있고 없는 경우 리스트

2019-03-11 (월) 08:50:32 4,937
|

답변 5개 / 댓글 4개

채택된 답변
+20 포인트

잘 보시면 모두가 webzin이 아니라 중간 중간 article이 있습니다.

즉 지금 article이 처음에 나오고 다시 한칸씩 밀려서 나오는 패턴 같습니다.

그런데 굳이 article 하고 webzin을 나눌 필요가 있나?

그냥 webzin하나로 해도 될것 같은데

답변에 대한 댓글 1개

클래스를 다르게 설정해본 이유는,

webzin_list 클래스는 사진크기 만큼 텍스트 공간을 줄이기 때문에

.webzin_list > ul > li { float: left; width: calc(100% - 210px); }

webzin_list 클래스를 별도로 설정해서 사진이 없는만큼 텍스공간을 100%로 준거거든요.

.article_list > ul > li { float: left; width: 100%; }

하여간 한칸씩 밀리는 것을 체크해보세요. (첫글을 webzin으로 해보세요)

답변에 대한 댓글 1개

오랜시간 조언해주셔서 감사합니다.
첫글을 webzine_list 해도 일그러지는 것은 마찬가지네요.
아쉽지만 이렇게 가면서, 시나브로 좋은 아이디어들을 조언받으면서 고쳐나가야 겠네요.
감사드립니다.

구글 디벨로퍼로 보시면 코드에

<!-- 리스트 시작, DIV 선택 (webzine_list, article_list)  ----------->
    <?php
        if ($is_checkbox && $thumb['src']) {
            echo "<div class='webzin_list'>"; }
        elseif ($is_checkbox && !$thumb['src']) {
            echo "<div class='article_list'>"; }
    ?>

        <ul>
<!-- 체크박스 및 이미지 존재 여부에 따른 표시------------------------->

안에 문장이 하나도 안 보입니다.

https://teamtreehouse.com/community/using-php-to-change-class-name-of-list-item

와 같이 class name만 php로 넣어 보세요..

구글 developer에서 코드를 봤을 때 webzine or article이 보여야 됩니다.

답변에 대한 댓글 1개

이 부분을 이래와 같이 단순화시켜봤는데, 결과는 똑 같습니다.

<div class="<?php if ($thumb['src']) { echo "webzin_list"; } elseif (!$thumb['src']) { echo "article_list"; } ?>">

<ul>

파이어팍스의 인스펙트로 찾아보면, 이전과 같이 클래스가 맨윗쪽(최근) 것 두 건만 article_list료 표시되고, 나머지는 모두 webzine_list로 표시됩니다.
다른 뭔 해결책이 없을까요?

실제 데모사이트를 봐야 정확하게 알수가 있을 것 같습니다.  php if문이 제대로 동작을 안한것 같은데..

(즉 webzine이나 article의 CSS는 맞다고 봐야 겠죠.)

php if보다는 javascript등을 사용해서 class의 네임을 webzine이나 article로 변경하는 것을 찾아보세요.  

답변에 대한 댓글 1개

안녕하세요.
아래 주소입니다.
http://www.hyunn.com/bbs/board.php?bo_table=language&page=
부디 좀 방법을 찾아주세요.
감사합니다.

답변을 작성하려면 로그인이 필요합니다.