이거 원인이 뭘까요?
관련링크
본문
첫 번째 이미지 보면 / 기호가 밑으로 내려가 있습니다.
레이아웃 구성은 현재 두 번째 이미지처럼 되어 있어요.
즉, 이미지들 밑으로 여백이 생겨서 밑으로 내려갑니다.
원인이 대체 뭘까요? 아래 스타일을 줘도 안 듣네요.
#head_sns * {margin:0; padding:0; }
주소는 아래와 같습니다.
이런 경우는 CSS 공부한 후, 처음 겪네요. ㅎ
답변 8
- display: inline-block;
- float: left;
이렇게 해보세요.
오 이거 잘되네요
방금 해결책을 찾고 와보니, 진서기 님이 제대로 답변해주셨네요. ^^
https://codepen.io/sinbi/pen/PVwbmO
PS.
float:left 넣으면 별도로 inline-block 안 넣어도 되더라구요.
float 속성이 기본적으로 inline-block 시키는 기능도 내장되어 있더군요.
<li> 시작이 빠져 있네요....^^
<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>
<div id="head_sns">
<a href="https://homzzang.com/plugin/social/popup.php?provider=naver&url=%2F" class="sns-icon social_link sns-naver" title="네이버">
<img src='https://homzzang.com/img/head/social/naver.png' alt='Naver'>
</a>
<a href="https://homzzang.com/plugin/social/popup.php?provider=kakao&url=%2F" class="sns-icon social_link sns-kakao" title="카카오">
<img src='https://homzzang.com/img/head/social/kakao.png' alt='Kakao'>
</a>
<a href="https://homzzang.com/plugin/social/popup.php?provider=google&url=%2F" class="sns-icon social_link sns-google" title="구글">
<img src='https://homzzang.com/img/head/social/google.png' alt='Google'>
</a>
<script>
jQuery(function($){
$("#head_sns").on("click", "a.social_link", function(e){
e.preventDefault();
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"
);
if(!newWin || newWin.closed || typeof newWin.closed=='undefined')
alert('브라우저에서 팝업이 차단되어 있습니다. 팝업 활성화 후 다시 시도해 주세요.');
return false;
});
});
</script>
</div>
</li>
li 시작과 끝 ...둘다 제대로 있는뎅...^^;
<li><?php include(THEMA_PATH.'/Hz-social_login.php'); //소셜로그인 - 홈짱 ?></li>
이미지들을 감싸는
<div id="head_sns"> ~ </div>를
<span id="head_sns"> </span>으로 바꿔도 동일 증상입니다.
이미지들을 감싸는 요소를 제거하면 사라지긴 합니다.
다만, 왜 저 감싸는 요소로 인해 하단에 여백이 생기는지 도무지 모르겠네요.
ps.
저 위에 스타일들은 문제해결에 도움이 안 되서 모두 제거. 있으나 없으나 증상 동일.
페이지 소스보기 하시면 <li> 가 없는것으로 나옵니다....ㅠㅠ
크롬에서 요소 보기 해봐도 제대로 있는뎅..^^;;
Ctrl + F5 누른 후 크롬에서 확인해 보세요.
분명 제대로 있는 거 맞는뎅...ㅎ
크롬 개발자 도구에서는 정상적으로 나오네요....^^;;
::after 이부분에 뭔가 작업을 해야 할듯요.
원은은 모르겠으나
#head_sns{
display:inline-block;
}
추가해 보세요
그것도 이미 해봤네요. ㅜㅜ
확인차 다시 넣어봤습니다. 소스 보기 하면 나올거에요.
파이어폭스 개발자도구에서 넣으니 잘 되던데요~
크롬에서는 안 되네요. ^^;
div 를 제거하니까 정상적으로 작동합니다
위 댓글에 이미 적어놨는뎅..^^;;
「이미지들을 감싸는 요소를 제거하면 사라지긴 합니다. 」
<style>li #head_sns ::after {
float: right;
color: #ccc;
content: "/";
margin-right: -17px;
}
</style>
죄송합니다 위에 제대로 안읽어서
위 소스를 추가하니까, / 무늬가 이미지 갯수만큼 늘어나네요.ㅎ
<ul>
<li>
<div id="head_sns">
<a href="https://homzzang.com/plugin/social/popup.php?provider=naver&url=%2F" class="sns-icon social_link sns-naver" title="네이버">
<img src="https://homzzang.com/img/head/social/naver.png" alt="Naver">
</a>
<a href="https://homzzang.com/plugin/social/popup.php?provider=kakao&url=%2F" class="sns-icon social_link sns-kakao" title="카카오">
<img src="https://homzzang.com/img/head/social/kakao.png" alt="Kakao">
</a>
<a href="https://homzzang.com/plugin/social/popup.php?provider=google&url=%2F" class="sns-icon social_link sns-google" title="구글">
<img src="https://homzzang.com/img/head/social/google.png" alt="Google">
</a>
<script>
jQuery(function($){
$("#head_sns").on("click", "a.social_link", function(e){
e.preventDefault();
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"
);
if(!newWin || newWin.closed || typeof newWin.closed=='undefined')
alert('브라우저에서 팝업이 차단되어 있습니다. 팝업 활성화 후 다시 시도해 주세요.');
return false;
});
});
</script>
</div>
</li>
<li><a href="https://homzzang.com/bbs/login.php?url=%2F" onclick="sidebar_open('sidebar-user'); return false;">로그인</a></li>
<li><a href="https://homzzang.com/bbs/register.php">회원가입</a></li>
<li><a href="https://homzzang.com/bbs/password_lost.php" class="win_password_lost">정보찾기 </a></li>
</ul>
에서 보시면
밑으로 빠지지 않게 하시려면
<li> 바로 아래에 있는
<div id="head_sns">
</div>
를
다른것으로 대치해보시는게 좋을듯 싶습니다.
<li>
<a></a>
</li>
구조로 된것과 다르게
<li>
<div>
<a></a>
</div>
</li>
형태로 되서 after 가 먹을 공간이 없는거 같네요
구성을 다르게 하시거나
<li><a>형태로 맞추시는게 좋을듯 싶네요
그렇게 이미 해봐서 해결은 할 줄 아는데, 원인이 궁금해서요. ^^;;
말씀하신 방법대로 할 경우, id="head_sns" 부분을 head.php 쪽으로 빼야 되나서...
되도록이면 해당 소스는 몽땅 Hz-social_login.php 라는 별도 파일에 넣고,
head.php 파일에는 include 코드만 넣으려고 그렇습니다.
또, 원인도 정말 궁금하기도 하구요..ㅎ
.at-lnb ul > li::after {
}
에 있는
box-sizing:border-box;
와
margin-right :-17px
두개를 제거해보세요
그러면 위치는 올라갑니다.
여백을
다른방법으로 주셔야 할것같네요
:;after 에 위에 것 없애고
margin-left:5px;
가량 추가하면 괜찮은데요
원인은
width가 설정되지 않은 태그들끼리
영역싸움을 하다가
float:left 로 인해 밀려야하는데
태그의
after에 의한 컨텐츠가 추가된게 원인입니다.
한마디로 자리게 없는데 우겨넣은것이라고 볼수있지 않을까 생각합니다.
다른 태그들은 <li><a>텍스트</a></li>
구조인데
밀리는 영역은 <li><div><a><img></a><a><img></a><a><img></a></div></li>
라서 공간이 협소한거죠
그러면 구조를 재설정해서 동일한 태그의 패턴으로 맞추어주는게 상책입니다.
그게 아니라면 개별적으로 미세소정을 해서 틀안에 서로 맞는 공간을 할당해줘야 하지 않을까 싶네요
여러 해결방법이 있겠지만
#head_sns 에 float:left 를 넣는것이 가장 편합니다
li display가 list-item인 상황에서 inline이나 inline-block의 요소들은 미묘한 여백을 가지게 되는데
#head_sns의 inline-block설정과 li:after 의 마진 사이에 미묘한 여백이 있게 되서
여백을 없애는 여러 방법중에 현 상황에서는 #head_sns 의 float를 조절 하는게 편하고
다른 방법으로는 li의 display를 table 계열로 조절할수도 있겠으나 다른 li들은 이런게 필요 없으니
큰 의미 없겠습니다
관심 갖고 답변주신 분들 모두 감사합니다.
덕분에 오늘 공부 제대로 했네요. ㅎ
원인은 li:after에 float:right 속성이 들어가서 그렇네요.
이 녀석이 들어가면 다른 요소가 인라인이나 인라인블럭 요소일지라도 float 가 안 들어갈 경우,
자체적으로 줄바꿈시키는 현상이 있더라구요.
또,
float가 붙으면 해당 요소와 그 안의 모든 요소의 기본 속성이 기본적으로 inline-block 속성화 되네요.
