css 스타일 적용 문의드려요. - 접속자 집계
본문
visit.skin.php
<!-- 접속자집계 시작 { -->
<section id="visit">
<div>
<dl>
<dd id="font_a"><?php echo number_format($visit[4]) ?></dd>
<dd id="font_b"><?php echo number_format($visit[3]) ?></dd>
<dd id="font_c"><?php echo number_format($visit[2]) ?></dd>
<dd id="font_d"><?php echo number_format($visit[1]) ?></dd>
</dl>
<dl id="gf">
TOTAL MAX YESTERDAY TODAY
</dl>
<dl id="adm">
<?php if ($is_admin == "super") { ?><a href="<?php echo G5_ADMIN_URL ?>/visit_list.php">접속통계 자세히 보기</a><?php } ?>
</dl>
</div>
</section>
<!-- } 접속자집계 끝 -->
///////////////
그리고 style.css 는..
style.css
@charset "utf-8";
/* 방문자 집계 */
#visit {border-bottom:1px dotted #dde4e9}
#visit div {margin:0 auto;width:210px;zoom:1}
#visit div:after {display:block;visibility:hidden;clear:both;content:""}
#visit h2 {float:left;padding:10px 10px 10px 0}
#visit dl {float:left;margin:0 0 0 10px;padding:0}
#visit dt {float:left;margin:0;padding:0 0 0}
#visit dd {float:left;margin:0 0 0 0; font-style:italic; font-weight:bold}
#visit a {display:inline-block;text-decoration:none}
#visit a:focus, #visit a:hover {}
#font_a {color:#47dafa;font-size:24px}
#font_b {color:#c3e355;font-size:24px}
#font_c {color:#888;font-size:24px}
#font_d {color:#ffa138;font-size:24px}
#gf {width:210px;text-align:left;font-size:12px;color:#cccccc;font-weight:bold;letter-spacing:-1px;overflow:hidden}
#adm {width:180px;text-align:left;font-size:12px;font-family:Arial, Helvetica, sans-serif;margin-top:2px}
#adm a {text-decoration:none;color:#666}
#adm a:focus, #adm a:hover {color:#2280a8}
////////////
이렇게 적용을 했습니다.
모양은 나오는데요. ㅜㅜ
이거 스타일 코딩 틀린 거죠?
그누 기본값 스타일 코딩 되어 있는 것 보고
따라서 하기는 했으나 아무리 봐도 틀린 것 같아서요.
누군가 바른 모습을 제안해 주시면
한 방에 알아먹을 자신은 있습니다. ㅜㅜ
부디 꼭 좀 알려주세요. ㅠㅠ
답변 4
#font_a {color:#47dafa;font-size:24px; margin-right:10px;}
#font_b {color:#c3e355;font-size:24px; margin-right:10px;}
#font_c {color:#888;font-size:24px; margin-right:10px;}
#font_d {color:#ffa138;font-size:24px}
10px는 예시고 적당히 줘보세요.
그리고, 아래 부분에 적당히 빈칸 줘보세요.
<dl id="gf">
TOTAL MAX YESTERDAY TODAY
</dl>
ps.
위 html 부분도 위 숫자처럼 <dt><dd>로 나누는 게 바람직해보이긴 하네요.
서체들은 일부러 붙여 놓은 것이라서요. ㅎㅎ 갸들은 그냥 둘래요. ㅎ
제가 알고 싶었던 것은 <dt><dd> 이 아이들 입니다.
기본코드에는 있었습니다. dt 제가 없애버렸습니다. ㅎ
말씀 듣고 보니 뭔가 짠 하고 오는데요?
사실 css 쪽에 집어 넣은 font_a 이런 것들이 모두 똑같은 아이들인데요.
하나 하나 적용하는 것도 틀린 것 같았고요. 폰트 사이즈 같은 것이요.
무엇보다 dt 를 날렸던 것 사용방법을 몰라서였습니다.
ps. < 남겨주신 말씀 접하니 바로 알겠습니다. 수정하겠습니다!!
고맙습니다!!
///////////
dt 넣고 그 안에 숫자를 넣으려고요.
?? 아닌가? ㅎㅎ
궁지에 다시 몰림.. ㅎ
dt에 숫자를 넣으면 개별로 색상 적용을 못 시킬 것 같아서요.
아무튼 dt를 꼭 넣어야 하는 거죠?
일단 검색하여 기본은 익히고 다시 ^^
//////////////
dt dl dd 적응이 쉽지 않아 그런데요.
접속자집계의 경우 ul li 형식으로 사용해도 되나요?
dt dd는 아래 좌표 참고해 작업해 보세요.
http://www.homzzang.com/b/html?sca=Lists
뭔가 멋있습니다.
코드만 집어왔는데요.
id 로 시작을 하고 <span> 태그도 있는데 전혀 생각지도 못했습니다.
알려주신 코드는 체계적인 느낌이 들어요. ㅎ
저 땜시 너무 많은 시간을 쓰셨습니다. 흑..
차려주신 밥상 가지고 잘 뜯어 보겠습니다.
원하는 것이 모두 들어있습니다!! 감사합니다. 홈짱님..
즐거운 추석 연휴 되시길 바랍니다. ^^
홈짱님 번번히 고맙습니다!!
여튼 ㅎㅎㅎ 사고는 쳤습니다. 제 임의로요. ㅎ
<!-- 접속자집계 시작 { -->
<section class="visit">
<div>
<ul>
<li class="font_a"><?php echo number_format($visit[4]) ?></li>
<li class="font_b"><?php echo number_format($visit[3]) ?></li>
<li class="font_c"><?php echo number_format($visit[2]) ?></li>
<li class="font_d"><?php echo number_format($visit[1]) ?></li>
</ul>
<ul class="classified">
<li>TOTAL MAX YESTERDAY TODAY</li>
</ul>
<ul>
<li class="adm"><?php if ($is_admin == "super") { ?><a href="<?php echo G5_ADMIN_URL ?>/visit_list.php">접속통계 자세히 보기</a></li><?php } ?>
</ul>
</div>
</section>
<!-- } 접속자집계 끝 -->
///////////////////
이렇게 고치고..
////////////////////
@charset "utf-8";
/* 방문자 집계 */
.visit {position:relative;float:left;margin-left:10px;width:210px}
.visit ul {list-style:none;margin:0;padding:0}
.visit li {margin:0 0 0 0;padding:0 0 0 0;border:0;float:left}
.visit .font_a {font-style:italic;font-weight:bold;font-size:30px;font-family:Arial, Helvetica, sans-serif;color:#47dafa}
.visit .font_b {font-style:italic;font-weight:bold;font-size:30px;font-family:Arial, Helvetica, sans-serif;color:#c3e355}
.visit .font_c {font-style:italic;font-weight:bold;font-size:30px;font-family:Arial, Helvetica, sans-serif;color:#999}
.visit .font_d {font-style:italic;font-weight:bold;font-size:30px;font-family:Arial, Helvetica, sans-serif;color:#ffa138}
.visit a {color:#666;text-decoration:none}
.visit a:focus, .visit a:hover {color:#2280a8}
.visit .classified {width:210px;text-align:left;color:#cccccc;font-weight:bold;font-size:12px;letter-spacing:-1px;overflow:hidden}
.visit .adm {text-align:left; font-style:normal;font-size:12px;margin-top:2px}
CSS 쪽은 이렇게 고쳤습니다.
article이 맞는지 section이 맞는지 이것도 분간이 안 가서
엄청 고민하다가 에라 하고는 넣어버렸습니다. ^^
아래 참고해 보세요.
http://codepen.io/sinbi/pen/vXLZoL
네, 홈짱님.. 평온하신 추석연휴 되십시오. 꾸벅!
고맙습니다!!
