링크버튼 위치변경 어떻게 해야할까요..
본문
<section class="sns">
<h2 class="txt_tit">1111</h2>
<ul class="list_sns">
<li><a href="<?php echo $mf['daum_blog']; ?>" class="daum" target="_blank">다음블로그</a></li>
<!-- <li><a href="<?php echo $mf['daum_cafe']; ?>" class="daum_cafe" target="_blank">다음카페</a></li> -->
<li><a href="11" class="naver_post" target="_blank">네이버포스트</a></li>
<li><a href="<?php echo $mf['naver_blog']; ?>" class="naver_blog" target="_blank">네이버블로그</a></li>
<!--<li><a href="<?php echo $mf['twitter']; ?>" class="twiter" target="_blank">트위터</a></li>-->
<li><a href="<?php echo $mf['facebook']; ?>" class="facebook" target="_blank">페이스북</a></li>
<li><a href="h11" class="youtube" target="_blank">유튜브</a></li>
<li><a href="11" class="naver_tv" target="_blank">네이버TV</a></li>
</ul>
</section>
css
.sns{float:left;}
.sns .txt_tit{font-size:20px;color:#1e4da5;font-weight:400;}
.sns .list_sns{margin-top:9px;}
.sns .list_sns li{float:left;text-align:center;}
.sns .list_sns li a{display:block;width:100%;padding-top:63px;font-size:12px}
.sns .list_sns li .daum{background:url(../image/main/img_sns01.png) no-repeat center top;}
.sns .list_sns li .daum_cafe{background:url(../image/main/img_sns02.png) no-repeat center top;}
.sns .list_sns li .naver_post{background:url(../image/main/img_sns03.png) no-repeat center top;}
.sns .list_sns li .naver_blog{background:url(../image/main/img_sns04.png) no-repeat center top;}
.sns .list_sns li .twiter{background:url(../image/main/img_sns05.png) no-repeat center top;}
.sns .list_sns li .facebook{background:url(../image/main/img_sns06.png) no-repeat center top;}
.sns .list_sns li .youtube{background:url(../image/main/img_sns07.png) no-repeat center top;}
.sns .list_sns li .naver_tv{background:url(../image/main/img_sns08.png) no-repeat center top;}
원래 4X2였는데 제외할것을 제외하고 3X3로 변경을 하려고하는데 어디를 고쳐야할까요? ㅠㅠ
답변 3
F12 키를 누르신 후에. 저 빨간색 동그라미 버튼을 누르면 마우스가 변하는데.
이 때에 보이는 웹 화면에서 작성자께서 수정하고 싶은 것의 마우스 주변에 가까이 가져다 대면, 옆의 F12 창에서 Elements 탭에서. 해당 객체가 선택이 됩니다. 이후에,
아래에 Styles 탭이 있는데(F12 옆에 나오는 개발자 도구에서) 그곳에서 속성들을 유심히 살펴봐 주세요.
Parent가 되는 녀석을 택해야 해요.
일단 소스코드상으로만 봤을 때에는 .sns 인 애가 가장 부모 Elements로 보이는데 제가 봤을 떄에는 이것 말고도 애네들을 감싸주는 Wrapper가 더 있어 보여요.
크기를 어떤 녀석이 결정하는지 찾아보시고, 그 크기를 적절한 크기로 줄이면 될 것 같아 보여요.
자세한 답변 감사합니다!
채택 감사합니다!
보니까, div 박스 크기로 그냥 나열되는 것 같은데. 해당 박스의 크기를 조정해서 3x3 으로 만들 수 있어 보입니다. 어디에선가 해당 float layout이 적용되는 박스의 크기를 알맞은 값으로 변경해 주면 되지 않을까요?
이미지 정도 변경하는 수준이라.. 혹시 박스 크기를 설정할 수 있는 곳 css에서 찾아봐야할까요?
해당페이지를 띄우신 상태에서
개발자도구를 열으시고
완쪽상단의 요소지정버튼을 클릭후
화면에서 아이콘을 클릭해보시면
어떤 css에 적용되었는지 개발자도구에 잘 표기됩니다
그후에 css를 임의변경하시면서 확인하시는게 가장빠르고 정확합니다
그 내용을 실제소스에 적용하시면 되죠
