CSS로 제작하는 것은.. 어렵네요 > 자유게시판

자유게시판

CSS로 제작하는 것은.. 어렵네요 정보

CSS로 제작하는 것은.. 어렵네요

본문

음 자료와 표현은 분리되어야 한다는 명제를 충실하게 수행하고 싶은 
사람입니다. ,ㅠ
그래서 그누보드를 설치한후 모두 분해(?)하여 CSS로 재조립(?)하며 진행하는데
게시판 부분은 당연히 table을 쓰지만 익숙했던 font태그같은 것을 버리려니 눈물만 납니다.
마치 스킨을 하나씩 제작하는 느낌이라고 할까요.. 그럴 실력은 아니지만 뭐 그렇게
진행하고있습니다. 어렵네요. ㅜ.ㅜ

그래도 의미있는 작업같습니다.
테이블로 할때보다 디자인이 멋지지는 않지만
크로스 브라우징이 되는 것을 확인할때면.. 뿌듯하기도 하구요..
다만 png 투명처리하는 부분이 어렵네요 ㅜ.ㅜ ㅎㅎ
CSS작업하시는 퍼블리셔 분들 다같이 화이팅입니다.

p.s 파일 첨부 여러게 되는 게시판 스킨 있으신분 계신가요..
저는 검색이 약해서 잘 못찾겠네요ㅠ,ㅠ
추천
1
  • 복사

댓글 11개

크로스 브라우징은.. 테이블로 했을때에 더 깔끔하게 되지 않나요.??
크로스 브라우징만 따진다면.. 테이블 만한게 없는것 같습니다. ㅋㅋ

CSS작업 처음에는 힘든데..
한번만 하고나면..
나중에 문제 생기는 부분도..
비슷하기 때문에 쉽게 쉽게 풀어 나가실수 있습니다.

CSS 잘만 사용하면 테이블로 할때보다 훨씬 멋진 디자인이 나올수 있습니다.^^
레이아웃도 손쉽게 여러가지 모양으로 변할수 있고..
CSS파일 조금만 손보는것으로.. 커뮤니티 형태에서... 블로그 형태로 변환도.. 손쉽게 가능하니..
이게 진정한 CSS의 매력 아닌가 합니다.

테이블로 레이아웃하면.. 만들기는 쉽지만.. 변경이 힘들고,
검색엔진에서 검색 내용들을 잘못 인식할 가능성이 많죠..

어찌되었든.. CSS 레이아웃 화이팅 입니다.~~
헛...저도 1주일전부터 표준웹(?)을 공부하기 시작했는데요.

저는 인덱스 파일부터 스타일 시트로 꾸미는거 공부하고 있는데....

rexz님은 그누보드를....ㄷㄷㄷ

암튼 동반자를 만나니까 반갑네요..ㅎ

정상에서 만납시다...^^
헛~ 여기도 동지 있습니다.^^
이 기회에 CSS Club이라도 하나 맹글면 좋겠네요.

CSS에서 몇가지 안되는 점들이 있다고 하셨는데 좀더 들여다 보시면 그렇지 않다는걸 아실겁니다.

//게시판 부분은 당연히 table을 쓰지만

이라고 말씀하셨는데, 테이블을 썼다고 CSS마크업이 아니라는건 잘못된 인식인듯 합니다.
꼭 필요한 부분은 테이블을 쓰되 CSS마크업을 하면 되겠죠.
실제 삽질의 진수는 스킨인데.. 도전해보세요.
실효성의 문제는 차치하고 스킨도 100% CSS로 가능합니다.

다만 레이아웃에서 테이블의 사용은 가급적 피하는게 좋다는건 알려진 사실이구요.

CSS의 장점중에서 랜더링이나 표준 문제를 떠나서 스타일시트를 잘 활용하면 파일사이즈가 반이상 줄어듭니다.
당연히 트래픽이 그만큼 줄어들겠죠??

또한 잘된 HTML+CSS마크업은 스타일시트가 제거된 상태에서도 순차적인 랜더링이 보장되기 때문에 사이트를 이용하는데 무리가 없습니다.

어떻게 보면 CSS이전에 제대로된 HTML마크업이 선행되어야 한다는 거겠죠..

개인적으로 CSS마크업은 한번 제대로 해놓으면 이식성, 확장성등에서 탁월한 효율을 발휘한다는점이 큰 매력인듯 합니다.

참고하시라고 제가 현재 삽질중인 링크 몇개 올립니다.
엄격모드인데 가급적 IE Hack을 쓰지않고 해보는거라 꽤 까다롭네요.
http://tottoe.com/ 레이아웃, 메뉴등..
http://tottoe.com/bbs/board.php?bo_table=toes 글작성외에 모두..
http://tottoe.com/bbs/board.php?bo_table=faq 이건 FAQ 특성상 리스트만..
http://tottoe.com/gallery/ 플래시 갤러리인데요, 여기도 모두..

추가로 png 투명처리는 사이트 전체적으로 적용하면 상당히 무거워지더군요.
아래는 엘리먼트별로 적용하는 핵인데 괜찮은듯 합니다.
repeat 속성은 지원을 안합니다. 참고하셔서 테스트 해보세요.
#selecter { width:196px; height:45px; background:transparent url('/img/menu/left_menu_title_index.png') no-repeat scroll 0% 0%; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/left_menu_title_index.png', sizingMethod='crop'); }

위처럼 한꺼번에 혼합해서 코딩해도 되고,
아니면 아래처럼 ie6 png투명처리를 위한 핵 부분만 모아서 별도의 css파일로 링크하는 방법을 사용해도 될겁니다.
_background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/left_menu_title_index.png', sizingMethod='crop');
iepngfix.htc 검색해 보시면, ie6에서도 배경에서 repeat 속성 지정 할수있습니다.
나머지 브라우져에선 그냥 다 되고요.
그래서 저는 언젠가부터 투명 png도 디자인에 꾀 많이, 유용하게 쓰고있습니다.
그외에 superpng라는 포샵 필터도 추천합니다^^
네.. 그러시군요.
전체적으로 적용하는경우 iepngfix.htc나 자바스크립트를 써본적이 있습니다.
다만 저사양PC+IE6 에서 투명배경 랜더링이 자연스럽지 못한게 아쉽더군요.(여백이 회색으로 나타났다 투명배경으로 덮어씌워지는 현상이 보임)
핵은 부분적으로 png를 사용한 경우나 저사양 환경에 비중을 두고 작업하실때 참고가 되셨으면 합니다.
superpng에 대한 정보 감사합니다.^^
아 맞습니다. 페이지 전체 로딩이 끝나야지 여백이 투명으로 나옵니다.
배경에서 repeat이 된다는 것 때문에 쓰고 있긴 합니다만, 저사양이나 인터넷환경이 좀 느릴경우엔 거슬릴 수 있겠네요.

superpng 는 포샵 플러그인인데 필터로 제가 잘못썼네요^ㅆ^
플록님때문에 갑자기 도전의식이 강하게 든다는..
그냥 표준코딩 포기하고 있었는데
예제사이트 보니 멋집니다. +_+
저는 표준이나 유효성 통과 목적보다는 실질적인 효과에 중점을 두고 삽질을 합니다.

지금 기본스킨 쓰기폼을 해보는데 심심할때 하나씩 도전해보는것도 재미있더군요.
http://tottoe.com/bbs/write.php?bo_table=review 일단 레이아웃만 해봤습니다.
플록님// 호호 png문제는 플록님의 의견대로 했습니다. nhn널리에서 보고 해결했습니다.
그리고 table도 당연히 크로스브라우징에 쓰일수 있다고 생각합니다. 저는 오히려 div를 어떻하면
줄일까 생각하고 있거든요..
div가 편하다 보니 생각보다 엄청쓰네요 ㅎㅎ 아직 미천한 실력이라 그런것 같습니다. ㅎㅎ
그리고 참고 사이트 대단히 감사합니다 큰도움이 되었네요.. ㅎㅎ
© SIRSOFT
현재 페이지 제일 처음으로