css 작성중 부분부분 점이 찍히는 문제.
관련링크
http://ssr.woobi.co.kr
289회 연결
본문
홈페이지를 만들고 있는데요.
로고좌측과 최근게시물 좌측에 점이 찍혀있는데요.
어떤 이유인지 알수가 없네요 ^^;
궁금한것 투성이입니다.
직접 css를 건들여가면서 만드는게 처음이라서 어렵네요 ㅠㅜ
먼저 css 입니다.
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input, #hd ul{margin:0; padding:0;}
/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Nanum Gothic', 'malgun gothic', 'dotum'}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Nanum Gothic', 'malgun gothic', 'dotum'}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family:'Nanum Gothic', 'malgun gothic', 'dotum';font-size:1em}
button {cursor:pointer}
textarea, select {font-family:'Nanum Gothic', 'malgun gothic', 'dotum';font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:#000;text-decoration:none}
a:hover, a:focus, a:active {color:#000;text-decoration:underline}
/* HTML ELEMENTS
body { background-color:white; font:62.5% Georgia,'Times New Roman',serif; letter-spacing:1; } */
/* 가로스크롤 제거 */
html { overflow:scroll; overflow-x:hidden; }
/* COMMON CLASSES */
.break { clear:both; }
/* HEADER */
#header { height:600px; }
.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; }
/* NAVIGATION */
#nav-outer { height:120px; padding-top:11px; position:relative; top:0px; background-image:url("../images/headerbg.png"); }
#navigation { height:100px; width:960px; margin:0 auto; }
/* Header Navigation */
#headernav{position:relative;margin:0 auto;width:960px}
.btn {position:absolute; top:185px; height:90px; width:25px;cursor:pointer; }
#back {left:-25px;background-image:url("../images/btn_back.png"); }
#back:hover { background-image:url("../images/btn_backo.png"); }
#next {right:-25px;background-image:url("../images/btn_next.png"); }
#next:hover { background-image:url("../images/btn_nexto.png"); }
/* slider shadow */
#shadow { position:relative;margin:0 auto;width:960px }
.image {position:absolute; top:468px; height:26px; width:960px;}
#sshadow {left:0px;background-image:url("../images/slideshadow.png");}
/* slider shadow 2 */
#dshadow { position:relative;margin:0 auto;width:960px }
.images {position:absolute; top:-180px; height:26px; width:960px;}
#dsshadow {left:0px;background-image:url("../images/slideshadow2.png");}
/* CONTENT */
#content { position:relative;top:20px;margin:0 auto;width:900px;height:600px;clear:both; }
/* MENU */
#menu { position:relative; top:0px; left:420px; list-style:none; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { text-decoration:none; font-weight:bold; padding-right:20px; }
/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:960px;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
/* 상단 레이아웃 */
#hd {z-index:4;position:relative;min-width:960px;background:#fff}
.hd_zindex {z-index:10 !important}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_wrapper {position:relative;margin:0 auto;padding:0px 0;width:960px;zoom:1}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
/* 상단 회원가입 등 링크 */
#tnb {float:right;margin:0 auto;padding:0;list-style:none;zoom:1}
#tnb:after {display:block;visibility:hidden;clear:both;content:""}
#tnb li {float:left;margin:0 0 0 0px}
#tnb a {display:inline-block;padding:0 10px;height:5px;color:#e2dbdb;letter-spacing:-0.1em;line-height:2.4em}
#tnb a:focus, #tnb a:hover, #tnb a:active {text-decoration:none}
#tnb img {margin-right:3px}
/* index 컨텐츠 */
#latest {float:left;margin:0 auto;padding:0;list-style:none;zoom:1}
#latest li {float:left;margin:0 0 0 0px}
#latest a {display:inline-block;padding:0 10px;height:5px;color:black;letter-spacing:-0.1em;line-height:2.4em}
/* ----------------------------- menu --------------------------- */
/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* Menu */
.menu {
height: 40px;
width: 960px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
/* Links */
.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 18px;
text-decoration: none;
border-left: 1px solid #999999;
font-family: 'Nanum Gothic', 'malgun gothic', 'dotum', sans-serif;
font-weight: bold;
font-size: 13px;
color: white;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
/* Sub Menu */
.menu ul {
position: absolute;
top: 39px;
background-color: rgba(0,0,0,.3);
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
}
.menu ul li:last-child a { border: none; }
그리고 index입니다.
<?php
define('_INDEX_', true);
include_once('./_common.php');
// 초기화면 파일 경로 지정 : 이 코드는 가능한 삭제하지 마십시오.
if ($config['cf_include_index']) {
if (!@include_once($config['cf_include_index'])) {
die('기본환경 설정에서 초기화면 파일 경로가 잘못 설정되어 있습니다.');
}
return; // 이 코드의 아래는 실행을 하지 않습니다.
}
if (G5_IS_MOBILE) {
include_once(G5_MOBILE_PATH.'/index.php');
return;
}
include_once('./_head.php');
?>
<div id="header">
<!-- jQuery handles to place the header background images -->
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>
<!-- Top navigation on top of the images -->
<div id="nav-outer">
<div id="navigation">
<!-- 상단 시작 { -->
<div id="hd_wrapper">
<ul id="tnb">
<?php if ($is_member) { ?>
<?php if ($is_admin) { ?>
<li><a href="<?php echo G5_ADMIN_URL ?>"><b>관리자</b></a></li>
<?php } ?>
<li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>
<?php } else { ?>
<li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/login.php"><b>로그인</b></a></li>
<?php } ?>
</ul>
<ul>
<li><a href="http://ssr.woobi.co.kr"><img src="images/logo.png" border="0"></a></li>
</ul>
</div>
<div id="menu">
<ul class="menu">
<li><a href="#">회사소개</a>
<ul>
<li><a href="#">인사말</a></li>
<li><a href="#">회사연혁</a></li>
<li><a href="#">조직도</a></li>
<li><a href="#">사업영역</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</li>
<li><a href="#">주요사업</a></li>
<li><a href="#">제품안내</a>
<ul>
<li><a href="#">국내벽돌</a></li>
<li><a href="#">수입벽돌</a></li>
<li><a href="#">바닥재</a></li>
<li><a href="#">연결보강</a></li>
</ul>
</li>
<li><a href="#">현장갤러리</a></li>
<li><a href="#">고객센터</a>
<ul>
<li><a href="#">자주하는질문</a></li>
<li><a href="#">묻고답하기</a></li>
<li><a href="#">온라인견적</a></li>
</ul>
</li>
<li><a href="#">커뮤니티</a>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">자유게시판</a></li>
</li>
</ul>
</div>
</div>
</div>
<!-- Slideshow controls -->
<div id="headernav">
<div id="back" class="btn"></div>
<div id="next" class="btn"></div>
</div>
<!-- 슬라이드 배너 아래 그림자 -->
<div id="shadow">
<div id="sshadow" class="image"></div>
</div>
</div>
<div id="content">
<ul>
<li><?=latest("basic", "notice", 5, 25)?>
<?=latest("basic", "qna", 5, 25)?>
<?=latest("photo", "gallery", 5, 25)?></li>
</ul>
<ul>
<li><img src="images/customer.jpg"><img src="images/intro.jpg"></li>
</ul>
</div>
<div id="dshadow">
<div id="dsshadow" class="images"></div>
</div>
답변 3
. 이 찍히는 이유는
list-style:none; 로 하여서
li 로 해당되는 부분이 . 이 생기지 않도록 해보시기 바랍니다.
<ul style='list-style:none;'>
<li><a href="http://ssr.woobi.co.kr/" class="attribute-value">http://ssr.woobi.co.kr"><img src="http://ssr.woobi.co.kr/images/logo.png" class="attribute-value">images/logo.png" border="0"></a></li>
</ul>
위와 같이 교체해보세요.
레스트님 잉끼님 답변 감사합니다.
list-style:none;
를 추가하면 되는거였군요. ^^
진심으로 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
