테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

이거 원인이 뭘까요? 채택완료

sinbi 6년 전 조회 3,580
답변 8
목록

 

 

 

 

첫 번째 이미지 보면  /  기호가 밑으로 내려가 있습니다.

레이아웃 구성은 현재  두 번째 이미지처럼 되어 있어요.

즉, 이미지들 밑으로 여백이 생겨서 밑으로 내려갑니다.

 

원인이 대체 뭘까요? 아래 스타일을 줘도 안 듣네요.

 

#head_sns * {margin:0; padding:0; }  

 

 

주소는 아래와 같습니다.

 

https://homzzang.com/

 

 

 

이런 경우는 CSS 공부한 후, 처음 겪네요. ㅎ

#html #css
댓글을 작성하려면 로그인이 필요합니다.

답변 8개

채택된 답변
+20 포인트
진서기
진서기
6년 전
#head_sns {
  1. display: inline-block;
  2. float: left;
}

 

 

이렇게 해보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

n
neko24
6년 전
오 이거 잘되네요
s
sinbi
6년 전
방금 해결책을 찾고 와보니, 진서기 님이 제대로 답변해주셨네요. ^^
https://codepen.io/sinbi/pen/PVwbmO

PS.
float:left 넣으면 별도로 inline-block 안 넣어도 되더라구요.
float 속성이 기본적으로 inline-block 시키는 기능도 내장되어 있더군요.

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

s
sinbi Expert
6년 전

관심 갖고 답변주신 분들 모두 감사합니다.

덕분에 오늘 공부 제대로 했네요. ㅎ

 

원인은 li:after에 float:right 속성이 들어가서 그렇네요.

이 녀석이 들어가면 다른 요소가 인라인이나 인라인블럭 요소일지라도 float 가 안 들어갈 경우,

자체적으로 줄바꿈시키는 현상이 있더라구요.

 

또, 

float가 붙으면 해당 요소와 그 안의 모든 요소의 기본 속성이 기본적으로 inline-block 속성화 되네요.

 

https://codepen.io/sinbi/pen/PVwbmO

https://codepen.io/sinbi/pen/aXzpww

로그인 후 평가할 수 있습니다

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

c
cure
6년 전

여러 해결방법이 있겠지만

#head_sns 에 float:left 를 넣는것이 가장 편합니다

 li display가 list-item인 상황에서 inline이나 inline-block의 요소들은 미묘한 여백을 가지게 되는데

#head_sns의 inline-block설정과 li:after 의 마진 사이에 미묘한 여백이 있게 되서

여백을 없애는 여러 방법중에 현 상황에서는 #head_sns 의 float를 조절 하는게 편하고

 

다른 방법으로는 li의 display를 table 계열로 조절할수도 있겠으나 다른 li들은 이런게 필요 없으니

큰 의미 없겠습니다

로그인 후 평가할 수 있습니다

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

플래토
플래토
6년 전

</p>

<p><ul>

                                           <li>

<div id="head_sns"></p>

<p>        <a href="<a href="https://homzzang.com/plugin/social/popup.php?provider=naver&url=%2F"" target="_blank" rel="noopener noreferrer">https://homzzang.com/plugin/social/popup.php?provider=naver&url=%2F"</a> class="sns-icon social_link sns-naver" title="네이버">

        <img src="<a href="https://homzzang.com/img/head/social/naver.png"" target="_blank" rel="noopener noreferrer">https://homzzang.com/img/head/social/naver.png"</a> alt="Naver">

    </a>

    

        <a href="<a href="https://homzzang.com/plugin/social/popup.php?provider=kakao&url=%2F"" target="_blank" rel="noopener noreferrer">https://homzzang.com/plugin/social/popup.php?provider=kakao&url=%2F"</a> class="sns-icon social_link sns-kakao" title="카카오">

        <img src="<a href="https://homzzang.com/img/head/social/kakao.png"" target="_blank" rel="noopener noreferrer">https://homzzang.com/img/head/social/kakao.png"</a> alt="Kakao">

    </a>

    

    

        <a href="<a href="https://homzzang.com/plugin/social/popup.php?provider=google&url=%2F"" target="_blank" rel="noopener noreferrer">https://homzzang.com/plugin/social/popup.php?provider=google&url=%2F"</a> class="sns-icon social_link sns-google" title="구글">

        <img src="<a href="https://homzzang.com/img/head/social/google.png"" target="_blank" rel="noopener noreferrer">https://homzzang.com/img/head/social/google.png"</a> alt="Google">

    </a>

    

    

    </p>

<p>        <script>

        jQuery(function($){

            $("#head_sns").on("click", "a.social_link", function(e){

                e.preventDefault();</p>

<p>                var pop_url = $(this).attr("href");

                var newWin = window.open(

                    pop_url, 

                    "social_sing_on", 

                    "location=0,status=0,scrollbars=1,width=600,height=500"

                );</p>

<p>                if(!newWin || newWin.closed || typeof newWin.closed=='undefined')

                     alert('브라우저에서 팝업이 차단되어 있습니다. 팝업 활성화 후 다시 시도해 주세요.');</p>

<p>                return false;

            });

        });

    </script>

    

</div></p>

<p></li>

                        <li><a href="<a href="https://homzzang.com/bbs/login.php?url=%2F"" target="_blank" rel="noopener noreferrer">https://homzzang.com/bbs/login.php?url=%2F"</a> onclick="sidebar_open('sidebar-user'); return false;">로그인</a></li>

                        <li><a href="<a href="https://homzzang.com/bbs/register.php">회원가입</a></li>" target="_blank" rel="noopener noreferrer">https://homzzang.com/bbs/register.php">회원가입</a></li></a>

                        <li><a href="<a href="https://homzzang.com/bbs/password_lost.php"" target="_blank" rel="noopener noreferrer">https://homzzang.com/bbs/password_lost.php"</a> class="win_password_lost">정보찾기    </a></li>

                                                            

                                    </ul></p>

<p>

 

에서 보시면

 

밑으로 빠지지 않게 하시려면

  • 바로 아래에 있는

    를 

    다른것으로 대치해보시는게 좋을듯 싶습니다.

     

    • 구조로 된것과 다르게

    •  

    형태로 되서  after 가 먹을 공간이 없는거 같네요

    구성을 다르게 하시거나

     

  • 형태로 맞추시는게 좋을듯 싶네요

    • 로그인 후 평가할 수 있습니다

    답변에 대한 댓글 3개

    s
    sinbi
    6년 전
    그렇게 이미 해봐서 해결은 할 줄 아는데, 원인이 궁금해서요. ^^;;
    말씀하신 방법대로 할 경우, id="head_sns" 부분을 head.php 쪽으로 빼야 되나서...

    되도록이면 해당 소스는 몽땅 Hz-social_login.php 라는 별도 파일에 넣고,
    head.php 파일에는 include 코드만 넣으려고 그렇습니다.

    또, 원인도 정말 궁금하기도 하구요..ㅎ
    �
    플래토
    6년 전
    .at-lnb ul > li::after {
    }
    에 있는

    box-sizing:border-box;
    와
    margin-right :-17px
    두개를 제거해보세요

    그러면 위치는 올라갑니다.
    여백을
    다른방법으로 주셔야 할것같네요

    :;after 에 위에 것 없애고
    margin-left:5px;
    가량 추가하면 괜찮은데요
    �
    플래토
    6년 전
    원인은

    width가 설정되지 않은 태그들끼리
    영역싸움을 하다가

    float:left 로 인해 밀려야하는데

    태그의
    after에 의한 컨텐츠가 추가된게 원인입니다.
    한마디로 자리게 없는데 우겨넣은것이라고 볼수있지 않을까 생각합니다.

    다른 태그들은 <li><a>텍스트</a></li>
    구조인데

    밀리는 영역은 <li><div><a><img></a><a><img></a><a><img></a></div></li>
    라서 공간이 협소한거죠

    그러면 구조를 재설정해서 동일한 태그의 패턴으로 맞추어주는게 상책입니다.
    그게 아니라면 개별적으로 미세소정을 해서 틀안에 서로 맞는 공간을 할당해줘야 하지 않을까 싶네요

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

    T
    Tonta
    6년 전

    </p>

<p><style>li #head_sns ::after {

    float: right;

    color: #ccc;

    content: "/";

    margin-right: -17px;

}

</style></p>

<p>
    이렇게 한번 넣어봐주세요 

    죄송합니다 위에 제대로 안읽어서

    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 1개

    s
    sinbi
    6년 전
    위 소스를 추가하니까, / 무늬가 이미지 갯수만큼 늘어나네요.ㅎ

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

    T
    Tonta
    6년 전

    div 를 제거하니까 정상적으로 작동합니다

    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 1개

    s
    sinbi
    6년 전
    위 댓글에 이미 적어놨는뎅..^^;;
    「이미지들을 감싸는 요소를 제거하면 사라지긴 합니다. 」

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

    진서기
    진서기
    6년 전

    원은은 모르겠으나

    #head_sns{

        display:inline-block;

    }

    추가해 보세요

    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 3개

    s
    sinbi
    6년 전
    그것도 이미 해봤네요. ㅜㅜ
    확인차 다시 넣어봤습니다. 소스 보기 하면 나올거에요.
    �
    진서기
    6년 전
    파이어폭스 개발자도구에서 넣으니 잘 되던데요~
    s
    sinbi
    6년 전
    크롬에서는 안 되네요. ^^;

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

    亞
    亞波治
    6년 전

  • 시작이 빠져 있네요....^^

     

    </p>

<p><style>

#head_sns {display:inline; margin:0; padding:0}

.at-lnb ul > li {border:0px solid silver;}

#head_sns * {margin:0 !important; padding:0  !important; }

</style></p>

<p>

<div id="head_sns">

    <a href="<a href="https://homzzang.com/plugin/social/popup.php?provider=naver&url=%2F"" target="_blank" rel="noopener noreferrer">https://homzzang.com/plugin/social/popup.php?provider=naver&url=%2F"</a> class="sns-icon social_link sns-naver" title="네이버">

        <img src='<a href="https://homzzang.com/img/head/social/naver.png'" target="_blank" rel="noopener noreferrer">https://homzzang.com/img/head/social/naver.png'</a> alt='Naver'>

    </a>    

    <a href="<a href="https://homzzang.com/plugin/social/popup.php?provider=kakao&url=%2F"" target="_blank" rel="noopener noreferrer">https://homzzang.com/plugin/social/popup.php?provider=kakao&url=%2F"</a> class="sns-icon social_link sns-kakao" title="카카오">

        <img src='<a href="https://homzzang.com/img/head/social/kakao.png'" target="_blank" rel="noopener noreferrer">https://homzzang.com/img/head/social/kakao.png'</a> alt='Kakao'>

    </a>    

    <a href="<a href="https://homzzang.com/plugin/social/popup.php?provider=google&url=%2F"" target="_blank" rel="noopener noreferrer">https://homzzang.com/plugin/social/popup.php?provider=google&url=%2F"</a> class="sns-icon social_link sns-google" title="구글">

        <img src='<a href="https://homzzang.com/img/head/social/google.png'" target="_blank" rel="noopener noreferrer">https://homzzang.com/img/head/social/google.png'</a> alt='Google'>

    </a>

        <script>

        jQuery(function($){

            $("#head_sns").on("click", "a.social_link", function(e){

                e.preventDefault();</p>

<p>                var pop_url = $(this).attr("href");

                var newWin = window.open(

                    pop_url, 

                    "social_sing_on", 

                    "location=0,status=0,scrollbars=1,width=600,height=500"

                );</p>

<p>                if(!newWin || newWin.closed || typeof newWin.closed=='undefined')

                     alert('브라우저에서 팝업이 차단되어 있습니다. 팝업 활성화 후 다시 시도해 주세요.');</p>

<p>                return false;

            });

        });

    </script>    

</div>

</li></p>

<p>

     

    • 로그인 후 평가할 수 있습니다

    답변에 대한 댓글 4개

    s
    sinbi
    6년 전
    li 시작과 끝 ...둘다 제대로 있는뎅...^^;

    <li><?php include(THEMA_PATH.'/Hz-social_login.php'); //소셜로그인 - 홈짱 ?></li>

    이미지들을 감싸는
    <div id="head_sns"> ~ </div>를
    <span id="head_sns"> </span>으로 바꿔도 동일 증상입니다.

    이미지들을 감싸는 요소를 제거하면 사라지긴 합니다.
    다만, 왜 저 감싸는 요소로 인해 하단에 여백이 생기는지 도무지 모르겠네요.

    ps.
    저 위에 스타일들은 문제해결에 도움이 안 되서 모두 제거. 있으나 없으나 증상 동일.
    �
    亞波治
    6년 전
    페이지 소스보기 하시면 <li> 가 없는것으로 나옵니다....ㅠㅠ
    s
    sinbi
    6년 전
    크롬에서 요소 보기 해봐도 제대로 있는뎅..^^;;
    Ctrl + F5 누른 후 크롬에서 확인해 보세요.
    분명 제대로 있는 거 맞는뎅...ㅎ
    �
    亞波治
    6년 전
    크롬 개발자 도구에서는 정상적으로 나오네요....^^;;

    ::after 이부분에 뭔가 작업을 해야 할듯요.

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

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

    로그인