div를 많이 쓰면 단계적으로 표시되나요..?

[visualer]

저희 사이트

http://gzplayer.com

에다가 게시판을 div를 주로 사용해서 만들었습니다

근데 게시판이 표시될때

단계적으로 표시가 되는데..

그래서 느려보입니다(실제로 느린가는 잘 모르겠습니다.. 쿼리는 빠른편이라..)

혹 div를 많이 사용하게되면

단계적으로 표시되는 현상이 있는지요

초보라.. 부족한점 많지만 도움 부탁드립니다.

[박민권]

제가 보기에는 단계적으로 나타나거나 하지는 않습니다.
게시판 목록 부분을 전부 레이어로 처리하셨는데 힘드셨겠네요. ^^
게시판 목록과 같이 표로 구성된 부분은 테이블로 처리하셔도 괜찮습니다.
테이블로 레이아웃을 짜는 것이 잘못된 것이지 정말 표처리를 해야할 곳은 테이블로
처리하시는 것이 좋습니다.

테이블로 하시더라도 CSS를 사용하면 기존 테이블 방식보다 깔끔하게 만들 수 있습니다.
<div style="스타일"> 이런식으로 직접 스타일을 기술한 것이 많은데 ID와 class를
적절히 주셔서 이런 부분을 점차 줄이도록 해보세요.

#ID.class{}
#ID .class{}

혹시나 위의 차이를 잘 모르신다면 공부해보시구요.
--------------------------------------------------------------------------------
A:link {color:black;text-decoration:none;}
A:visited {color:black;text-decoration:none;}
A:active {color:black;text-decoration:none;}
A:hover {color:#aaaaaa;text-decoration:underline}

이 부분은 불필요한 부분이 많습니다.

A {color:black; text-decoration:none;}
A:hover {color:#aaa; text-decoration:underline}

아마 이것만으로도 님이 원하시는 결과를 얻으실 수 있을겁니다.

--------------------------------------------------------------------------------

테이블 없이 CSS 레이어로 구성하셨다는 것 멋집니다.
아직 미흡한 부분이 있지만 이런 시도조차 해보지 않는 사람이 대다수 입니다.
해봐야 노하우도 쌓이고 실력도 높아지는 것인데 말이죠. ^^

===기타===
#aaaaaa = #aaa, #eeffcc = #efc 로 표현이 가능합니다.

[강민혜]

#ID.class{}
#ID .class{}

혹시나 위의 차이를 잘 모르신다면 공부해보시구요.

이 둘이 어떤 차이가 있나요?
저는 그냥 같은 줄 알고 썼었는데..^^;

[강민혜]

#ID.class{}
#ID .class{}

혹시나 위의 차이를 잘 모르신다면 공부해보시구요.

이 둘이 어떤 차이가 있나요?
저는 그냥 같은 줄 알고 썼었는데..^^;

[강민혜]

#ID.class{}
#ID .class{}

혹시나 위의 차이를 잘 모르신다면 공부해보시구요.

이 둘이 어떤 차이가 있나요?
저는 그냥 같은 줄 알고 썼었는데..^^;

[kukie]

헉.. 막 에러 나더니; 똑같은 글이 3개나 올라갔네요 ^^;;
깜박하고 로긴을 안하고 써서..
죄송합니다..ㅜ.ㅡ

[박민권]

#ID.class{} (1번)
#ID .class{} (2번)

이 둘이 어떤 차이가 있나요?
저는 그냥 같은 줄 알고 썼었는데..^^;

Code: Select all

(1번)
<div id="ID" class="class">아이디가 ID이고 클래스가 class인 객체</div>

(2번)
<div id="ID">
   <div class="class">아이디가 ID인 객체 안의 클래스가 class인 객체</div>
</div>

이런식으로 이용하면 class 이름을 남발하거나 중복되어 충돌될 일이 적어지게 됩니다.

Code: Select all

예제1)

<style type="text/javascript">
   #Menu{width: 300px; height: 200px; border: 1px solid #000}
   #Menu li{color: #666;}
   #Menu li span{font-weight: bold;}
</style>

<ul id="Menu">
   <li>하이하이 <span>05-12</span></li>
   <li>냐옹냐옹 <span>05-13</span></li>
</ul>

예제에서 보시는 바와 같이 class를 쓰지 않고도 #Menu안의 태그들에 스타일의
적용이 가능합니다.

Code: Select all

예제2)

<style type="text/javascript">
   #Box1 .memo{color: #000;}
   #Box2 .memo{color: #666;}
</style>

<div id="Box1">
    <p class="memo">아잉~ 나 검정색 :)</p>
</div>

<div id="Box2">
    <p class="memo">아잉~ 나 회색 :(</p>
</div>

예제2와 같이 memo라는 class가 2개지만 서로 다르게 적용됩니다.
클래스를 단순히 .class 이렇게 선언해 버리면 중복으로 인한 문제가 생기거나
왠만한 클래스 이름은 바닥이 나게 됩니다.
하지만 예제2처럼 상속(?)을 통해 ID .class 와 같이 사용하신다면 클래스 이름이
중복되어 문제가 생기거나 memo1, memo2,... memo999 와 같이 중복을 피하려
클래스 이름을 괴상하게 짓지 않아도 됩니다.

CSS를 잘 사용하기 위해서는 CSS에 어떤 속성들이 있는지 많이 아는 것 이전에
캐스케이딩(계단식의 속성전달?)을 공부하시는 것이 좋습니다.

CSS가 괜히 '케스케이딩 스타일 시트'인 것이 아니랍니다. :)

[kukie]

윽. 젤 위에서 말씀하신게

#ID.class{} 이것과

#ID
.class{}

이것의 차이에 대해 말씀한거였나봐요..
전 ID에 종속되는 class의 점앞에 띄어 쓰냐 안띄어 쓰냐에 따라 또 차이가 있다는 건줄알았어요 '0');

어찌됐든 친절한 답변 감사드립니당 ^^;

[박민권]

#ID
.class{}

#ID
.class{} 가 바로

#ID .class 인 것이지요. 줄바꿈 자체가 떨어진 것이니까요. :)

[kukie]

#ID
.class{} 가 바로

#ID .class 인 것이지요. 줄바꿈 자체가 떨어진 것이니까요.

와하하;;
서로 자꾸 딴소릴 ^^;
#ID
.class{}라고 쓴건

#ID{}
.class {} 를 말한거였어용.. 제가 잘못ㅤㅆㅓㅅ어요.ㅠ..ㅠ

[박민권]

와하하;;
서로 자꾸 딴소릴 ^^;
#ID
.class{}라고 쓴건

#ID{}
.class {} 를 말한거였어용.. 제가 잘못ㅤㅆㅓㅅ어요.ㅠ..ㅠ

#ID{}
.class{} 는

#ID .class{}와는 다릅니다.

#ID .class{} ≠ #ID{} .class{} 서로 다릅니다.

#ID.class{}와
#ID .class{}는 다릅니다.

붙여쓴 것과 띄어쓴 것은 다릅니다.
위의 예제를 보시면 아시겠지만 다릅니다.