제가 div로 게시판 스킨을 만들고있는데 정보
제가 div로 게시판 스킨을 만들고있는데본문
list.skin.php 코딩중인데.. 흠흠
게시글 하나당 사용되는 div가 6~7개 정도네요..
이렇게 div를 덕지덕지 붙이면 속도에 영향을 줄까요?
속도에 영향을 준다면 어떤방향으로 코딩을 해나가야 할까요
고수분들의 조언 부탁드립니다!
추천
0
0
댓글 10개

float 를 적절히 사용하고 div, ul, li, dl, dt, p, span 등을 혼용하면 대부분 커버됩니다.(종속 개념을 이해하시고요. 작업이 마무리 되면 중복 사용을 위해 external 로 마무리 해주시고요.)
잘은 모르나 파폭에서 보면 div 로 제작된 사이트가 더 로딩이 빠른 것 같습니다.
기본적으로 이미지의 width 와 height 을 넣어줘도 속도가 개선된다네요.
그리고 그누스킨에서는 % 를 많이 사용하게 되는데 정확한 픽셀값을 지정해 주어야 각 브라우저에서 큰 틀이 깨지지 않습니다. % 를 적용하더라도 정확한 나누기값이 떨어져야 하고요.
기타 자세한 사항은 고수분께서 답변 달아주실 겁니다.
잘은 모르나 파폭에서 보면 div 로 제작된 사이트가 더 로딩이 빠른 것 같습니다.
기본적으로 이미지의 width 와 height 을 넣어줘도 속도가 개선된다네요.
그리고 그누스킨에서는 % 를 많이 사용하게 되는데 정확한 픽셀값을 지정해 주어야 각 브라우저에서 큰 틀이 깨지지 않습니다. % 를 적용하더라도 정확한 나누기값이 떨어져야 하고요.
기타 자세한 사항은 고수분께서 답변 달아주실 겁니다.

아미가님! 좋은 말씀 감사합니다.
극강하수 초보 입장에서는 조금 어려운 부분이 있는데요.
"중복 사용을 위해 external 로 마무리"한다는 것은 어떤 개념인지요?
간단한 예제를 보여주실 수 있으신지요?
극강하수 초보 입장에서는 조금 어려운 부분이 있는데요.
"중복 사용을 위해 external 로 마무리"한다는 것은 어떤 개념인지요?
간단한 예제를 보여주실 수 있으신지요?
<link rel="stylesheet" type="text/css" href="<?=$g4['path']?>/css/style.css" >
이런식으로 css를 넣어주는거죠
import 방식이라고 있는데 그것보단 external로 css정의하는게 더 호환성이 높다고 알고있습니다,.
이런식으로 css를 넣어주는거죠
import 방식이라고 있는데 그것보단 external로 css정의하는게 더 호환성이 높다고 알고있습니다,.

감사합니다. 무언지 감이 오는 것 같습니다.^^

internal : 쉽게 말해 소스에 바로 코딩하는 것입니다.
예) <div style="line-height:1.2em;height:120px;width:200px;">내용</div>
external : 외부에 미리 스타일을 지정한 후 불러오는 것입니다. 두 가지로 해석이 가능한데 아예 외부로 연결하는 경우와 페이지 내에서 head 내에 선언해 주는 두 가지 경우가 있습니다.(이 후자도 어찌보면 인터널 방식이라고 할 수 있겠지요.) 효율성을 높이기 위해서는 외부 연결을 추천
두 가지 모두 미리 스타일을 선언해 놓고 불러오는 방식에서는 공통점이 있습니다.
외부에 스타일시트 파일을 만들어 놓고 링크를 불러오는 경우(그누에서 사용됨)
<link href="css.css" type=text/css rel=stylesheet>
해당 페이지 상단에서 미리 선언해 주는 경우(스킨들에서 많이 사용되는 경우. 최근에는 스킨도 별도로 스타일시트 파일(.css)을 만들어 사용하는 것이 일반적입니다.
<style type="text/css">
//해석 못하는 브라우저를 위해 주석을 넣기도 하는데 요즘은 의미가 없습니다. 그래서 생략
#myframe { margin:0; padding:0; width:900px; text-align:center; }
.mytd { width:50px; height:100px; }
</style>
사용 예)
한 페이지 내에서 중복 사용할 경우
<div class="mytd">중복은 class 로</div>
레이아웃과 같이 단 1회만 사용하면 id(고유하다는 의미로 해석) 로 처리
<div id="myframe">1회만 사용해야 하니 id로 스타일에서는 앞에 . 이 아닌 # 으로</div>
이게 스타일시트의 기본 골격입니다.
예) <div style="line-height:1.2em;height:120px;width:200px;">내용</div>
external : 외부에 미리 스타일을 지정한 후 불러오는 것입니다. 두 가지로 해석이 가능한데 아예 외부로 연결하는 경우와 페이지 내에서 head 내에 선언해 주는 두 가지 경우가 있습니다.(이 후자도 어찌보면 인터널 방식이라고 할 수 있겠지요.) 효율성을 높이기 위해서는 외부 연결을 추천
두 가지 모두 미리 스타일을 선언해 놓고 불러오는 방식에서는 공통점이 있습니다.
외부에 스타일시트 파일을 만들어 놓고 링크를 불러오는 경우(그누에서 사용됨)
<link href="css.css" type=text/css rel=stylesheet>
해당 페이지 상단에서 미리 선언해 주는 경우(스킨들에서 많이 사용되는 경우. 최근에는 스킨도 별도로 스타일시트 파일(.css)을 만들어 사용하는 것이 일반적입니다.
<style type="text/css">
//해석 못하는 브라우저를 위해 주석을 넣기도 하는데 요즘은 의미가 없습니다. 그래서 생략
#myframe { margin:0; padding:0; width:900px; text-align:center; }
.mytd { width:50px; height:100px; }
</style>
사용 예)
한 페이지 내에서 중복 사용할 경우
<div class="mytd">중복은 class 로</div>
레이아웃과 같이 단 1회만 사용하면 id(고유하다는 의미로 해석) 로 처리
<div id="myframe">1회만 사용해야 하니 id로 스타일에서는 앞에 . 이 아닌 # 으로</div>
이게 스타일시트의 기본 골격입니다.

저 같은 초보를 위해 상세한 설명까지 주셔서 감사드립니다.
제대로 개념을 잡는 기분이네요~^^
제대로 개념을 잡는 기분이네요~^^

속도 측면에서 그렇다면.....
제가 생각하는 건 태그를 뭘쓰던지 그놈이 그놈일거라 생각듭니다.
속도차이는 브라우져에 따라 나는 차이가 훨씬 더 크게 작용하는게 아닌가 생각되구요.
제가 생각하는 건 태그를 뭘쓰던지 그놈이 그놈일거라 생각듭니다.
속도차이는 브라우져에 따라 나는 차이가 훨씬 더 크게 작용하는게 아닌가 생각되구요.

속설에 의하면 정확한 태그 규칙을 사용할 경우 검색하는 시간이 그만큼 줄어든다고 합니다. 앞서 설명에도 나와있지만 이미지에 정확한 width 와 height 을 적용하는 경우가 예가 되겠지요. 그누는 지정되지 않는 부분이 많습니다.
더불어 external css 를 사용할 경우 중복되는 태그를 최소화할 수 있어 페이지가 더 가벼워진다는 것(아시다시피 table 로 만들어진 사이트는 스타일 사용에 한계가 있지요.)
이 정도가 제대로 스타일시트와 div 를 활용하여 속도 향상을 보는 것이 아닐까 추측해 봅니다. 물론, 웹표준화에 근접할 수 있고요.
말씀대로 익스와 파폭으로 놓고 보자면 파폭이 월등히 빠릅니다. 특히, 해외 사이트 서핑할 때는 피부로 체감하는 수준 그 이상이지요.
더불어 external css 를 사용할 경우 중복되는 태그를 최소화할 수 있어 페이지가 더 가벼워진다는 것(아시다시피 table 로 만들어진 사이트는 스타일 사용에 한계가 있지요.)
이 정도가 제대로 스타일시트와 div 를 활용하여 속도 향상을 보는 것이 아닐까 추측해 봅니다. 물론, 웹표준화에 근접할 수 있고요.
말씀대로 익스와 파폭으로 놓고 보자면 파폭이 월등히 빠릅니다. 특히, 해외 사이트 서핑할 때는 피부로 체감하는 수준 그 이상이지요.

아 다른건 아니구요..^^
체감속도라는게, 사실 0.1초 차이라도 못느낄거구요..
같은 페이지를 익스에서는 1초 크롬에서는 0.1초 정도 걸린다는 걸 느낍니다.
있는 신경없는 신경 써가면서 일일이 값다주고 0.5초이상을 땅기는게 아니면 전 섬세한 코딩은 안할려구요.. 안그래도 너무 피곤한 작업입니다.ㅠㅠ
체감속도라는게, 사실 0.1초 차이라도 못느낄거구요..
같은 페이지를 익스에서는 1초 크롬에서는 0.1초 정도 걸린다는 걸 느낍니다.
있는 신경없는 신경 써가면서 일일이 값다주고 0.5초이상을 땅기는게 아니면 전 섬세한 코딩은 안할려구요.. 안그래도 너무 피곤한 작업입니다.ㅠㅠ

전, 제 껏만 코딩하다보니 나름대로 신경쓰면서 계속 수정중입니다.
직업적으로 하시는 분들에게는 엄청난 고역이 될 테지요.
참고로, 요즘 xml+css, ajax 소스 등을 구해서 짜깁기 하는 중인데 테이블로 만들어진 사이트로는 한계가 있다는 것을 절감하였고
당장 div 로 알림창 띄우는 것과 자바스크립트로 새창으로 띄우는 것의 속도 차이와 디자인 차이가 현격히 크다는 것을 느끼고 나니 갈수록 table 을 멀리하게 되었습니다.
말씀대로 이것저것 신경 다 쓰고 몇 달에 걸쳐 홈페이지 만들어 준다고 클라이언트가 알아 줄 리 만무하지요. 전 제 사이트니 이것저것 개선하는 것이고요.
그래서 30만원짜리 홈페이지와 천만원짜리 홈페이지가 질적 차이가 나는 것이기도 하겠지요.
직업적으로 하시는 분들에게는 엄청난 고역이 될 테지요.
참고로, 요즘 xml+css, ajax 소스 등을 구해서 짜깁기 하는 중인데 테이블로 만들어진 사이트로는 한계가 있다는 것을 절감하였고
당장 div 로 알림창 띄우는 것과 자바스크립트로 새창으로 띄우는 것의 속도 차이와 디자인 차이가 현격히 크다는 것을 느끼고 나니 갈수록 table 을 멀리하게 되었습니다.
말씀대로 이것저것 신경 다 쓰고 몇 달에 걸쳐 홈페이지 만들어 준다고 클라이언트가 알아 줄 리 만무하지요. 전 제 사이트니 이것저것 개선하는 것이고요.
그래서 30만원짜리 홈페이지와 천만원짜리 홈페이지가 질적 차이가 나는 것이기도 하겠지요.