1,078개의 댓글이 있습니다.
댓글 쓰기
전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.
웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD
전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.
@kiyong114
고맙습니다. 즐거운 한주 되세요. ^^
아….여기에 이런 질문을 드려도 될런지 모르겠습니다만…현재 도움을 받을곳이 전혀없어서요…
네이버 모바일을 보면….옴니아 익스플로어 에서도 깨지지않고 잘나오는데요.. 현재 제가 작업한 http://www.m.hansolopen.com 페이지는 인덱스 페이지를 제외한 나머지 페이지에서 한쪽으로 짜부라져 버리는 현상이 발생합니다만…
이게 단순히 코딩상의 문제인지 더욱 애마하게 만드는것이…pc의 브라우져 들은 제대로 표현이 되는지라…
네이버의 모바일 페이지는 어떤 프로그램의 도움없이..단순히 코딩만으로도 깨지지 않고 구현이 되는건지 궁금합니다…예전 기사에서 모바일 익스플로어는 깨지는 문제가 있어서 골치거리라는 기사를 본적이있었는데…
지금은 잘 나오는걸 보면…어떤 코딩이외의 무언가 있지 않을까란 생각에 질문을 드립니다..
네이버처럼 네이버 처럼….입에 달고 사시는 사장님덕에 죽겠습니다 ㅡ.ㅡ;
송구한 부탁이지만 어떤 팁이라도 있으시다면 조언좀 부탁드립니다 ~~굽신 굽신~~
아..URL 잘못 넣었습니다..^^:
http://m.hansolopen.com 입니다..
@윤군
제가 확인한 결과 옴니아1 익스플로러에서는 네이버 모바일 페이지도 깨집니다. 그리고 모바일 익스플로러는 사용하는 사람이 거의 없어서 타겟브라우저로 고려하지 않는 것으로 알고 있습니다. 혹시 다른 브라우저를 익스플로러로 착각하신것은 아닌지요?
아..답변감사합니다..
아예 코딩을 다시해버렸습니다.
왜인지는 모르겠지만.. css상속에 있어서 처리를 제대로 못하는 현상으로 깨졌던거 같습니다..
마치 쿼크모드로 봤을때 나타나는 현상처럼 깨져버려서 다시코딩하니 잘 나옵니다 ㅡ.ㅡ;
바쁘실텐데 답변 감사드립니다.
안녕하세요?
도움을 청하려고 헤메다가 왔습니다.
제로보드XE 게시판을 홈페이지에사용하고있습니다.
몇달전부터 게시판에 사진을 올리려고 파일첨부 버튼을 눌러도 창이 열리지 않네요.
세 버튼이 모두 말을 듣지 않습니다.
그러나 그 아래에있는 등등은 기능을 합니다.
부탁드립니다.. 감사드리구요^^
@제이미아빠
문제를 해결하기 위한 정보가 너무 부족합니다. 제가 어떻게 하면 도와드릴 수 있을까요?
전화로 통화가 가능할까요?
저는 미국에 있습니다.
brianmhong앳gmail.com 으로 전화번호를 주시면 연락드릴께요
@제이미아빠
일단 XE 공식 사이트에 문의를 해보세요. 그래도 문제해결이 안되면 메일을 주십시오.
정찬명님.. 급해서 그런데요;
배포하신 콘텐츠 위젯 스킨 ‘naradesign’ 을
http://gk24.kr/ 처럼 적용해서 쓰고 있는데 다음,이전 버튼이 작동하지 않습니다.
자바스크립트 쪽은 완전히 문외한 이라 수정좀 빨리 부탁드립니다…ㅠ
다른 유저들도 이부분이 안되서 이 좋은 스킨을 사용 못하고 있으세요;
그리고 사이트 오픈 예정일이 다가오기 때문에 제겐 데드라인 이랍니다…
답변 꼭 부탁드립니다.
gneecom앳naver.com
@그니
제 스킨을 그대로 사용해 보면 그런 현상이 재현이 되지 않습니다. 사용하고 계신 스킨의 js 파일은 제가 배포하던 파일이 아니라 누군가 개작한 것입니다. 해당 스킨을 지우고 다시 설치해 보시는 것이 어떨런지요.
제가 배포하던 js 파일
http://naradesign.net/xe/widgets/content/skins/naradesign/js/content_widget.js
그니님 사이트에서 사용된 파일
http://gk24.kr/xe/widgets/content/skins/XM_gk24_content/js/content_widget.js
제 스킨을 정식으로 다운받는 경로는 다음과 같습니다.
http://www.xpressengine.com/?mid=download&category_srl=18322950&page=3&package_srl=18335369
콘텐츠 위젯 스킨 ‘naradesign’ 이것을 쓰고 있습니다.
다름이 아니라 여쭙고 싶은게 있어서 이렇게 글을 남기게 되었습니다.
지금 이미지+타이틀 이것을 쓰고 있는데 , [게시판이름]+게시물제목+날짜 이렇게 출력을 해서 사용중입니다. 이 “[게시판이름] 색상” , “게시물제목 색상” , “날짜 색상” 이렇게 각각 색상을 변경하고 싶은데 어디서 뭘 고쳐야 하는지 모르겠습니다.
좀 알려주세요.
참고로 사이트 주소는 http://www.xenonplus3.cafe24.com/xe/main 입니다.
질문이 있어서 이렇게 글을 남깁니다.
게시판 글내용보기 부분의 코딩관련 질문인데요..
관련 코딩을 테이블로 처리하는것이 업무상 가장 원할한 내용일터입니다.
예로 제목(타이틀) : 웹접근성에 관련된 내용…….
상단 내용처럼 제목의 내용이 길어질 경우 자동으로 height값의 변동이 있으려면 table처리가 가장 편리하기때문에 그렇게 진행하고싶습니다만…. 금년 웹접근성관련 지침에 dl로 dt와 dd로 권장하는 내용이 포함되어 있다는 윗분의 말로인해…현재 table 처리가 곤란한 상황입니다.
하지만….값이 정해져있지않고 유동적인 상황에서 dt와 dd, li 및 div를 이용하여 디자인적인 요소까지 처리하려니 이것저것 걸리는것이 많아서요…
게시판 list형태같은 경우는 데이터형 table 처리로 진행하였는데, view 관련 화면은 table 코딩이 제한이 되는것인지……정말 하면 안되는지….너무너무 궁금합니다.
아참 그리고, 핵말인데요……필요해서 쓰는게 나쁠까요..아님 코드(float) 남용이 나쁠까요?
뭐가 딱히 나쁘다고 하기엔 알쏭달쏭하고 비난폭주의 여론이 있겠지만…. 좀 더 유연한 대체법의 경중은 따질 수 있지 않을까요?
css 오류가 나서 안된다는 상황에서는 다른 대책들을 사용해야하긴하지만……그래도 정말이지 설득할 여력이 없어서……….혹시나 하는 마음에……논란의 여지가 있음에도…이렇게 글을 남김니다.
혹여 질문의 오해가 있을까 싶어……그 부분을 좀더 말씀드릴께요.
실제 코드진행으로는
.tableView {*zoom:1;}
.tableView:after {content:”";display:block;visibility:hidden;clear:both;}
.tableView * {margin:0;padding:0;}
.tableView dt {float:left;width:69px;padding:5px 10px;border-right:1px solid #dbdad7;border-bottom:1px solid #dbdad7;background:#f8f5ed;}
.tableView dd {float:left;width:190px;padding:5px 10px;border-bottom:1px solid #dbdad7;}
제목
즐거운 웹접근성 및 웹표준화 세미나가 열립니다.
신청일
2010. 10. 09
———————————————————————————————
이 경우 dd의 내용이 마구마구 길어지는 상황이 될때 dt와 dd의 문제점이 발생하는데…이것이 게시판일경우 일일이 발생하는 모든상황을 맞춰줄수는 없을텐데..그걸..또 li나 div로 대체하기엔 아직 제 실력이..미흡한듯해서요…
dd가 길어져도…dt의 디자인적인 요소에 방해없이 dd와 사이즈가 같아질 방법이 있는지…….정말정말…궁금하고…
table로 대체 처리해도 접근성 평가에 문제가 되지 않는지..정말정말……..궁금하고…또 궁금합니다………
갑작스러운 추위에 몸도 마음도..차가운 요즘….따뜻한 답글 부탁드립니다…
댓글을 잘못달았어요ㅠ
ee 1,216 icons from pinvoke에 댓글을 다는바람에 다시 글 올립니다;;
글 삭제가 안되네요ㅠㅠ
———————————————————————–
안녕하세요~ 날씨가 쌀쌀해졌습니다^^;
이번질문은요~
swf파일을 css안에서 불러와야하는데요.
html파일에서 직접 인베드로코딩해 삽입하는거말고..
css를 통해 class로 적용해야합니다.ㅠㅠ
css 소스를 찾아봐도 없네요..
css에서 swf파일을 불러오진 못하는건가요??
방법이 없을까요??
@짱플러스
1. 관리자모드의 Settings 페이지에 가셔서 ‘Optimizer 사용’ 항목을 체크 해제 합니다.
2. 웹 개발자 도구(firefox+firebug)가 탑재된 브라우저를 이용하여 스타일 변경을 원하는 요소에 마우스를 놓고 ‘요소검사’ 메뉴를 클릭합니다.
3. 웹 개발자 도구는 브라우저 하단(또는 새창)에 선택된 요소에 해당하는 HTML/CSS 코드를 표시합니다.
4. CSS 파일의 경로를 확인한 다음 HTML 문서가 참조하고 있는 CSS 코드를 수정합니다.
5. CSS 코드 수정이 끝나면 관리자모드의 Settings 페이지에 가셔서 ‘Optimizer 사용’ 항목을 체크 합니다.
@choigun
dt, dd 형식으로 마크업 할 수 있다면 th, td로 마크업 해도 무리가 없습니다. th 용법만 맞게 작성하시면 테이블로 하셔도 됩니다. CSS 기법 만으로는 dd 요소의 양에따라 dt 요소의 수직 높이가 함께 늘어날 수는 없습니다.
CSS핵은 남용하지 않는것이 좋겠지만 브라우저 호환성에 문제가 없다면 사용해도 괜찮다고 생각합니다. float 속성은 핵이 아니기 때문에 사용에 문제가 없습니다.
@쪼꼬
CSS는 swf와 같은 형식의 부가 어플리케이션을 로드할 수 없습니다. object 요소를 사용하여 html 문서에서 로드해야 합니다.
언제나 따스한 조언 감사합니다. ^———-^)/
정찬명님이 알려주신 스킨은 제가 다운받은 스킨과 같습니다.
그 자바스크립트 파일은 제가 정찬명님의 js가 안되어서 개작해보고 있었던 것입니다. ^^;
http://gk24.kr/?mid=widget_test 보시면 정찬명님의 스킨입니다만 작동이 안되고 있습니다.
또 배포하신 http://www.xpressengine.com/?mid=download&category_srl=18322950&page=3&package_srl=18335369 경로의 댓그을 보시면 사람들이 안된다는 문의글을 남겨놓았더라구요.
블랙카드 : 다음이전 버튼이 안먹어요.. (2010-01-13 14:14 )
lumen : 업데이트를 하니 다음버튼이 에러나네요.
ff에서는 제대로 나오는데 IE8에서는
이전, 다음 버튼이 안먹혀요.
수정 부탁드립니다. (2010-04-03 23:00 )
확인좀 부탁드리고 여건이 가능하시다면 수정좀 부탁드리겠습니다..
너무나 유용한 스킨인데 이부분이 작동이 안되어서 사용하지 못하고 있습니다.
@그니
고맙습니다. js 파일을 원래 상태로 복원해 두시면 제가 다시 한번 확인해 보겠습니다.
제가 개작한 스킨에 정찬명님의 원본 js파일을 js폴더에 넣어놨습니다.
http://ania.co.kr/XM_gk24_content.zip 을 다운로드 받으신후, 좌측탭-이미지,게시글,분류,페이지를 설정에 입력해서 테스트해보시면 됩니다.
이 문제를 해결해보려고 10시간이나 고군분투 했었습니다. ^^;;
안녕하세요…
저희 회사 홈페이지를 만들고 있습니다..
물론 게시판은 제로보드xe를 쓰고요…스킨이 나라디자인인데요..
이곳에 여쭤봐도 되는건지 잘 모르겠어요..
홈페이지는 올플래쉬이고요 아이프레임을 이용해서 게시판을 띄워줬습니다..
제가 여쭤보고자 하는것은 게시판의 색을 변경하고자 하는데..
white.css라는 파일에서 수정을 하면 되는거까지는 알았는데 그 안에서 어떠한 소스를 만져야 수정가능한지 일일히 테스트하기가 번거로워서 이렇게 도움 청합니다…각 소스별 제목이 있는데 수고스럽겠지만 알려주신다면 큰 도움이 될것 같습니다…
@그니
그니님이 주신 콘텐츠 위젯 스킨을 적용해서 테스트 페이지를 만들어 놨습니다. 저는 동일한 증상이 발견되지 않았고 잘 동작 합니다.
http://naradesign.net/xe/page
잘 동작하는 이전/다음 버튼의 onclick 코드와 동작하지 않는 onclick 코드가 서로 다릅니다.
잘 동작하는 이전/다음 버튼의 onclick 코드
onclick=”content_widget_prev(jQuery(this).parents(‘ul.ncwListPagination’).prev(‘table.ncwList’),5)”
onclick=”content_widget_next(jQuery(this).parents(‘ul.ncwListPagination’).prev(‘table.ncwList’),5)”
잘 동작하지 않는 이전/다음 버튼의 onclick 코드
onclick=”content_widget_prev(jQuery(this).parents(‘ul.ncwListPagination’).prev(‘div’).children(‘table.ncwList’),5)”
onclick=”content_widget_next(jQuery(this).parents(‘ul.ncwListPagination’).prev(‘div’).children(‘table.ncwList’),5)”
잘 동작하는 원본 코드로 수정해서 사용해 보세요.
@서형석
웹 개발자 도구를 사용하지 않으면 소스코드를 수정하기가 쉬운일이 아닙니다. 웹 개발자 도구를 사용해 보실것을 추천 드립니다. 마침 웹 개발자 도구 사용법에 대해 잘 설명한 글이 있어 링크 합니다.
http://zbxe.springnote.com/pages/2841408
개발자 도구 사용 전에 반드시 확인해야 할 것은 XE 관리자 모드의 ‘Settings’ 메뉴에 가셔서 ‘Optimizer 사용’에 ‘체크 해제’ 해야 한다는 점입니다. 링크한 문서를 끝까지 읽어보시면 도움이 되실것 같습니다.
추출대상: 게시물
내용형태 : 이미지, 제목
탭형태 : 왼쪽
표시항목 및 순서 : title, regdate, thumbnail
가로이미지수 : 5
목록수 : 5
페이지수 : 3
의 상태에서 Table, UL 출력 모두 해봤지만 도저히 안됩니다.
정찬명님은 지금 썸네일이 없는 상태인데요, 썸네일이 들어가면 이동이 안됩니다.
http://gk24.kr/?mid=widget_test
정찬명님…
전에도 말씀드렸듯이 썸네일이 없는 항목은 잘 작동합니다.
그러나 썸네일을 표시항목에 넣고 (image_title.html 이란 녀석을 실행시키게끔 )해보면
작동하지 않습니다.
http://gk24.kr/?mid=widget_test
정찬명님..
다시 거듭 얘기드리지만, Thumbnail이 표시된 상태에서 테스트를 해보셔야됩니다. table 이나 ul 이나 모두 다 작동이 안됩니다.
이미지수, 게시물 수 5개, 페이지수3개를 주고 image_title.html이 작동되게끔 하려면 thumbnail을 출력함으로 설정하셔야됩니다.
http://gk24.kr/?mid=widget_test 에서 맨 아래쪽을 보시면 작동이 안됨을 알 수 있습니다.
그리고 파이어폭스에서 정찬명님에게 방명록을 남기려고 글등록을 누르면
새로고침이 되어버리듯 글이 남겨지지 않습니다.
똑같은 글을 벌써 3번째 타이핑하네요 ㅡㅡ;;
@그니
그니님의 도움으로 문제가 무엇인지 정확히 파악했고 해결방법도 찾았습니다.
일단 급한대로 다음과 같이 수정해 보세요.
image_title.html 문서에서 아래 항목을 찾은 다음
.prev(‘div’).children(‘table.ncwList’)
다음과 같이 바꿔주세요.
.prev(‘.ncwList’)
모두 4번 등장할 것입니다. 4개의 코드를 모두 변경해 주세요.
문제를 해결한 버전(ver. 0.3)으로 다시 업로드 했습니다.
http://www.xpressengine.com/?mid=download&category_srl=18322950&page=3&package_srl=18335369
고맙습니다. ^^
@그니
그니님의 글이 스팸으로 2건 분류가 되어 있어서 꺼내 왔습니다. 스팸 필터가 99.9% 정도 정확하게 스팸을 걸러주는데 역시 정확하네요! (농담입니다 ㅋㅋㅋ)
이얏호 ㅋㅋㅋ감사합니다.
농담 재밌게 잘하시네용 ㅋㅋㅋ 좋은 하루되세요~
즐겁게 개발하겟습니다.
이제야 확인했어요ㅠㅠ 감사합니다.
어찌어찌 잘 해결이 되었어요^^;
좋은날되세요~
안녕하세요 정찬명 선배님.
다름이 아니라 정말 구현해보고 싶은 코드가 있는데 풀리지가 않네요..
wmode가 window인 플래시위에 div를 올리는 부분인데,
마우스오버 이벤트 발생시에만 wmode 값을 transparent로 바꾸고 싶은데
정작 적용이 잘 되질 않네요,,
다른 해결방안도 고객이 받아주질 않고,, 좋은 방법이 없을까요??
@이성진
div 요소보다 플래시의 z-index가 높아서 div 요소가 플래시에 가리는 문제라면 div 요소 배경에 투명한 빈 iframe을 넣는 방법으로 이 문제를 해결할 수 있습니다.
스킵네비게이션에 대해서 궁금한데요.
위에서부터 순서대로 나열하면 되는거 아닌가요?
예를 들어 메인인 경우 탑메뉴, 본문컨텐츠 이런식으로..
근데 어디서 보니까 본문컨텐츠가 1순위로 되어 있어야 된다고 해서요..
어떻게 나열하는것이 좋은건가요?
@궁금
WCAG 2.0 지침 가운데 이런 항목이 있습니다.
메뉴 건너뛰기 링크를 포함해야 한다는 지침인데요. 이 지침의 핵심은 ‘반복되는 콘텐츠 블럭 우회’ 입니다.
페이지에서 반복되지 않는 링크는 건너뛸 필요가 없습니다. 반복되지 않는 콘텐츠를 건너뛰는 바로가기 앵커는 불필요한 링크로써 오히려 공해가 됩니다.
본문 콘텐츠로 직접 이동할 수 있는 “메뉴 건너뛰기” 또는 “본문 바로가기” 와 같은 하나의 링크면 족합니다.
안녕하세요~ 날씨가 춥습니다~ 불꽃남자 정찬명쌤 감기 조심하시고 건강 챙기세요~^_____________^
@여혜인
불꽃녀자 여혜인도 감기조심하고. 따뜻한 겨울 나기를! ㅎㅎ
ouif에 기재하신 button을 보고 있습니다. anchor
이런식으로 구현하시는데, 가령 tab을 구현할 경우 일반 사이즈와 작은 사이즈를 구현해 보려고 합니다. 이경우 .tab.small {…..} 이런식으로 될듯 한데.
button과 중첩이 되는 상황이 옵니다.
ie6에서 이부분 문제가 있는듯 한데, 혹시 해결할 수 있는 방법은 없는지, 보다 효율적으로 작업하는 방법은 어떤것일지 궁금합니다.
@익명
저라면 .small과 같은 클래스 이름이 겹치지 않도록 네이밍 할 것 같습니다.
찬명님 안녕하세요 항상 블로그에서 좋은글 보면 많이 배우고 있습니다. ^^
질문한가지 해도될런지요
요 아래에 페이지가 하나있는데
http://www.ncat.co.kr/test1/xml05_navigation.html
지금은 정상적으로 플래쉬가 하단 레이어를 덮으나.
표준 규약인
를 넣어버리면
익스6,파폭,크롬등등에서는 자기 div 레이어를 벗어 나지 못하네요.
http://www.ncat.co.kr/test2/xml05_navigation.html
플래쉬 자체가 권장되고 있지는 않는것은알지만 꼭정상적으로 적용하여보고싶습니다.
혹여나 원본파일이 필요하시다면 보내드리겠습니다.
바쁘시겠지만 답변좀 부탁드리겠습니다. ^^
@송선생
표준 DTD를 넣고 뺀 것의 차이를 여쭤보시는것으로 이해됩니다. test2 코드에서 #flashArea 영역의 높이를 250px 으로 지정하면 간단하게 해결되는 문제가 아닌지요. 만약 z-index 문제가 발생한다면 우선 table 레이아웃을 제거하고 div 요소를 이용하여 z-index를 지정하면서 문제를 해결해 보세요.
답변과 조언 정말 감사드립니다. ^^
열었을시에만 위쪽으로 활성화 되고 접었을시엔 하위에있거나 아예 레이어가 없어져야지 정상적으로 사이트 이용이 가능할 꺼같습니다.
250으로 높이값을 주면 열리고 닫히긴 정상적이나 한번 열린이후로는 하위 레이어를 덮어버려 투명하지만 아래에있는 버튼을 클릭 할 수 없습니다.
익스 78은 정상이나 파폭 크롬 사파리 익스6에선 하위 버튼이나 폼들을 클릭 및 사용 할 수 없네요.
말씀하신데로 250을 적용시켜보았습니다.
http://www.ncat.co.kr/test3/xml05_navigation.html
더좋은 방법은 없을까요?
플래쉬 소스를 구입하여 바로 올려놓은거고 실제로는 div를 이용해서 z-index를 사용하려고 계획하에있습니다.
지속적으로 검색하여보고 있는데 http://cafe.naver.com/flashdev/17516 이글이 적용된것같습니다.
안녕하세요? 요즘 html 5가 나왔는데, 그것과 관련해서는 포스트를 올리지 않으시나요? 웹표준 추천책 부탁합니다.
@송선생
아차! 높이값을 250px으로 고정하면 그런 문제가 있었군요. 그렇다면 기본 높이값을 50px으로 지정한 다음 플래시에서 서브메뉴가 열리는 상황에서만 250px이 되도록 하고 서브메뉴가 닫히는 상황에서는 다시 50px이 되도록 스크립트를 작성하면 되지 않을까요? 제가 스크립트 분야 전문가가 아니다 보니 가능한지는 잘 모르겠습니다. 내일 출근하면 플래시 개발자분께 한번 확인해 보겠습니다.
@sera
실전 HTML5 가이드 내려받기 – http://html5.creation.net/html5-guide.pdf 이 문서는 읽어 보셨나요? ^^
그 밖에 다음과 같은 책들을 추천 드립니다.
http://www.yes24.com/24/goods/4315677?scode=029&OzSrank=1
http://www.yes24.com/24/goods/4201443?scode=032&OzSrank=2
http://www.yes24.com/24/goods/3908427?scode=032&OzSrank=4
찬명님 매번 감사합니다. ^^
Css3중급자 입니다. 더 깊이 공부하고 싶은데 수준에 맞는 책 추천 바래요
1. ouif 를 잘 보고 있습니다.
Form Table부분을 살펴 보는데 [td]내에 [div class="item"]이 삽입되어 있는데 특별한 이유가 있는지 궁금합니다. xe와 ouif의 마크업을 서로 비교하고 참고해 보고 있습니다만, 무슨 차이가 있는지 궁금합니다.
2. 네이밍관련하여, 카멜케이스는 피하고 싶고, 하이픈이나 언더바를 사용하려고 하는데
가독성을 볼때 언더바가 용이하지 않을까 생각이 드는데 하위 브라우저나 특정환경에서 문제가 없을지 궁금합니다.
3. .center {text-align:center;}로 사용하는 걸 여러군데에서 볼수 있는데, .text_center나 .text_align_center 로 사용할경우 네이밍이 길어서 불편하다고 볼수 있지만 작업환경 면에서 좋지 않나 생각하고 있습니다. 사실 많이 갈등되는 부분인데… 조언 부탁드립니다.
그럼, 좋은 주말 되세요.
@ㅛ호
CSS3 관련해서 아직 국내에 서적은 드문 편입니다.
아래 서적은 읽어 보셨는지요?
http://html5.creation.net/html5-guide.pdf
http://www.yes24.com/24/goods/4201443?scode=032&OzSrank=2
@익명
1.
[div class="item"] 요소를 제거하고 [td class="item"] 으로 처리해도 동일한 결과를 얻으실 수 있습니다. .item 이라는 클래스 이름은 jQuery가 [label] 요소와 [input] 요소를 선택할 때 필요합니다. 한편 [div class="item"] 요소를 제거하면 상하에 적용된 음수마진 .formTable .item { margin:-4px 0; } 이 빠지게 될 것이므로 [td] 셀의 상하 간격이 더 벌어지는 것이 관계 없다면 [div class="item"] 를 빼셔도 됩니다.
2.
개발자가 헷갈리지만 않는다면 카멜케이스를 쓰거나 하이픈을 쓰거나 언더바를 쓰거나 관계가 없습니다. 언더바가 가독성이 좋은 편인것 같고 카멜케이스는 문자 수를 아껴서 좋은것 같습니다. 하이픈은 마이너스 연산자와 같아서 혼동을 일으킬 수 있기 때문에 피한다는 이야기를 들은적이 있습니다.
3.
클래스 이름도 시멘틱 하게 결정하는 것이 좋습니다. 클래스 이름에 모양이나 배치를 의미하는 이름을 지정하는 경우 모양이 바뀌거나 배치가 바뀔 때 HTML에 포함된 클래스 이름도 함께 바꾸어야만 하는 문제가 있습니다. 따라서 하나의 클래스 이름에 하나의 속성만 담아서 사용하는 방법은 한때 저도 사용했던 방법이지만 현재는 거의 사용하지 않고 추천하지도 않습니다.
안녕하세요.
저의 소극적인 자세를 반성하고, 막 용기내어(?) 다시 글 남깁니다.
(그.. 셀렉트박스에 보더처리요.. ^^;;;;)
기획에서 받은 요건은 “미입력 또는 오류 발생 시 해당 필드에 빨간 테두리 보더 처리” 였는데요.
요건을 보고 고작 생각해낸게,
[div style="position:relative;"]
[span style="position:absolute; top:0; left:0; display:inline-block; width:98px; height:18px; border:1px solid red;"][/span]
[select name="select" style="width:100px; height:20px; padding:2px 0; font-family: 돋움,Dotum; font-size: 12px;"]
[option]Option[/option]
[option]Option[/option]
[option]Option[/option]
[/select]
[/div]
윽, 이정도밖에 생각이 나질 않으니 정말 소름끼쳤습니다 ㅠㅠ
말씀해주신데로 span style=”display:inline-blcok” 으로도 해봤었지만
셀렉트박스 테두리 위로 빨간 보더가 보여야 하기에..
위처럼 코딩을 해봤던 것이었구요;;
기획쪽에서,
셀렉트박스에 디자인을 씌우든 오류메세지를 뿌려주던
스크립트는 쓰일수밖에 없는 것이니
보더처리를 해도 상관없지 않냐고 묻길래
할말을 생각못해 그저 어버버 거렸네요..;;
(일단 일정을 빼서 회의 날짜 잡고 얘기하자고 훽 말해버렸습니다.
결론은 아는만큼 말할수 있다. 읏)
기존의 셀렉트박스를 그대로 쓰면서 배경색을 바꾸는 방법은 다시 한번 얘기해보려구요.
아마도 블로그에 포스팅 해주신 디자인 셀렉트 박스로 갈 것 같긴 하지만요.
원래는 질문과 답변은 이미 끝났지만,
저처럼 하시는 분들….이 없으시겠지만은! 혹시나 해서 글 남겨요..
사실 제가 좀 배울려구요 하하하하
아, 검색을 하는 중에요..
셀렉트박스 위에(?)
span 태그를 이용해서 보더 처리하고
div로 싸서 li로 돌려주는 소스를 봤는데요
span 태그로 보더 처리에 대해 제게 알려주신 방법이
혹시 이것인가요?
(너무 제입장에서만 말씀드려서
제가 무얼 말하고 싶은지 아실런지 잘 모르겠네요.. ㅠㅠ)
답변 감사합니다. 조언을 들으니 아무래도 생각이 다시한번 정리되네요.
웹표준 마크업을 2002년도 부터 해왔고, 나름 빠르게 시작해서 국내에 도입이 되는걸 지켜왔는데…
그동안 사소한 부분조차도 혼자 고민하고 판단하느라…
이렇게 하나하나의 답변이 정말 많은 도움이 되는 걸 실감합니다.
1. class네이밍이 길어질 경우, 하위기종이나 타 환경에서의 처리문제 없을까 걱정했는데…
사실 이러한 부분이 00년도 이전에 제작한 모바일 기기나, 포터블기기에서 인식이 못하는 경우도 있는 것 같았습니다.
오래전 apple사가 작업한 부분에서 이런걸 봤었는데 당시…
예: store-container-inline-corners-wrapbox 이런식의 긴 네이밍도 있었던 것 같습니다.
사실, 시멘틱한 네이밍에 대해서 여러가지 갈등되는 부분이 있습니다.
제가 마크업 할때의 취지는, 누구라도 쉽게 보고 쉽게 수정과 응용을 할 수 있어야 한다는 관점입니다만,
대부분의 작업물들을 보면, 외우거나 익히지 않으면 안되는 네이밍이 다수인 것 같습니다.
누구나 쉽게 조립하고, 분해할 수 있는 환경을 제공하고 싶은데,
그래서 작업할때, 섹션||블록||포지션||이펙트 같은 조합식을 많이 생각하여 작업하고 있습니다만…
작업한 기준이 맞을까 여러가지 만감이 교차되네요.
html단에서의 마크업은 프레임을 잘 잡아둔다면, 차후 리뉴얼이나 메인테넌스 발생시
css단에서의 수정만으로 클리어 될 수 있는 것을 생각하면서 작업하는데, 이게 오류가 될 수 있을까요?
2. xe의 레이아웃을 보면
[div class="extension e1" /]
[div class="content" /]
[div class="extension e2" /]
3칼럼으로 구성이 되어 있는데, e1/content/e2 의 길이가 동시에 늘어날수 있는지 궁금합니다.
보통은 jquery 등을 사용하여 height값을 지정해 주던데, 그외에 방법이 있는지 궁금합니다.
3. textyle에 삽입된 그래프를 보면,
[dl]
[dt]Sun[/dt]
[dd ...]
[dd ...]
[/dl]
형식으로 구성되어 있는데, [dd]의 title만으로는 부족한 것 같아서 [span]요소를 hover시 출력되게 하려고 합니다.
여기서 문제가 하나 발생하는데, 크롬하고 사파리에서의 문제로
[dd] 그래프 요소가 [dl]의 길이를 초과하게 되므로 hover되어 [span]이 출력될 시,
렌더링 부분에서 문제가 발생하는 것 같은데, 이부분을 효율적으로 처리할 수 있는 방법이 없을지 궁금합니다.
안녕하세요 찬명님^^; 정낙훈입니다.
css layout에 도움이 필요해서 다시 찾아왔어요~ 반가워요~;;
XE 레이아웃을 제작하는데 구조가 좀 복잡하다보니깐 찬명님의 도움이 꼭 필요하네요ㅎ;;
http://dev.naver.com/projects/eond/forum/11732/5258/mynote-layout.0.2.gif
일단 설명 드릴게요. 그림을 참조해주세요^^;
———————————————————————————————-
1. wrap (그림에 표현되지는 않았지만 siteNav의 윗쪽 레이어는 모두 wrap으로 감싼 구조입니다.)
1.1. column
float:left 속성의 내부 레이어가 2개 더 있고
왼쪽 레이어엔 태그가
오른쪽 레이어엔 태그가 (태그는 세로로 정렬됨)
1.2. container
1.2.1. colgroup (가변형)
1.2.1.1. snb
1.2.1.2. gnb
1.2.1.3. content
1.2.2. aside
colgroup의 오른쪽에 붙어있으며 넓이에 따라 같이 움직임.
colgroup이 px값의 넓이일 땐 괜찮지만, %의 값을 가질 경우도 고려하면 어떻게 코딩해야할지 모르겠네요^^;;;
2. siteNav
wrap과 siteNav의 상하 배치가 자유로워야 함
siteNav가 최상단으로 가기도 하고, 최하단으로 가기도 하게 만들고 싶습니다.
어떻게 하면 효과적으로 코딩할 수 있을까요.
기본적인 스타일은 default.css 파일 안에 담고
배치 파일은 layout-top,css|layout-bottom.css로 나누어 담으면 될 듯 한데
어떻게 코딩해야할지 모르겠답니다. ^^;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
———————————————————————————————-
여기서 문제는 siteNav를 상단일 경우의 스타일시트와 하단에 위치할 경우 어떻게 작성해야할지 모르겠다는 것이고요.
두번째 문제는 colgroup의 넓이가 가변형으로 설정했는데, px로 잡아줄 경우는 크게 문제되지 않았지만 %일 경우 또 난해해지더라고요.
전체적으로 사실 다 어떻게 레이아웃 짜야할지 모르겠다는 거에요. ^^;;;;;;;
http://eond.com/?mid=test5
이건 전에 코딩했던 건데, 위에 나열한 부분을 포함시킬려고 하니깐
제 실력이 미흡하네요^^;;
좀 도와주세요. 전체적으로 div 레이아웃을 짜주시면 안될까요^^;;
그런데 위 aside 레이어의 경우는 왼쪽 colgroup 레이어의 넓이에 따라 위치는 조정되지만 스크롤에 따라가지는 않게 하고 싶거든요. 이것도 문제에요. @_@;
전체적인 느낌은 이렇거든요. ;;
http://dev.naver.com/projects/eond/forum/11732/5259/eond_tistory.png
안녕하세요ㅎ 그냥 레이어로 모두 다 하는 건 포기했어요. 그냥 table과 div를 적절히 섞어서 하는게 속 편하네요^^;;
http://eond.com/mynote 이거였어요. XE 레이아웃 스킨인데 옛날부터 div로만 해본다고 계속 하고 있는데 아직 못하겠네요 ;;;;
“기본 높이값을 50px으로 지정한 다음 플래시에서 서브메뉴가 열리는 상황에서만 250px이 되도록 하고 서브메뉴가 닫히는 상황에서는 다시 50px이 되도록 스크립트를 작성하면 되지 않을까요? ”
플래쉬 개발자분도 요부분은 아직 답변 없으시던가요?
정상적으로 DTD 넣고 웹표준에 준수하여서 제작해보고싶은데 생각처럼 쉽지가 않네요.
빠쁘실텐데 이것저것 자꾸 질문해서 죄송합니다. ~
안녕하세요. 날씨가 싸늘한데 몸 건강하신지요? 저는 전주에서 선생님의 강의를 들었던 송과장입니다. 언제나 바쁜 하루를 보내시는 것을 알고있습니다만, 궁금한 것이 하나있어 선생님께 질문하고자 합니다.
<>
최근에 홈페이지의 내비게이션은 어떻게 제작하는 것이 웹접근성과 크로스 브라우징에 맞는 것인지를 저에게 물어온 분이 있었습니다.
그래서 저는 바로 웹접근성연구소 홈페이지에 있는 네비게이션의 예를 참조하시라고 알려드렸지요. (다른 회사직원분이라 나라디자인이나 OUIF대신에 그곳을 소개시켜드렸지요. ^^;;;)
홈 > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 javascriptXX 제작기법 > javascriptXX 애플리케이션 콘텐츠 구현 예 > 내비게이션 제작기법
(가로 2단 메뉴 : http://www.wah.or.kr/RIA/Js/example/js_col2/index.html )
이 예를 보여드리고 여기에서 시작하시면 될것이라고 말씀드렸습니다.
그런데 제가 좀 곤란한 상황에 처하게 되었습니다.
위의 예와 같이 작성하면 IE6에서 2단의 메뉴가 제대로 보이지 않습니다. 우측으로 흘러야 되는 것이 정상인데, 아래로 쭉 떨어져 내려옵니다.
가로 2단 메뉴의 예를 IE6로 확인해보시면 한눈에 알아보실 수 있으실 겁니다.
이런 저런 자료를 찾아봤는데, 어떻게 처리해야 올바르게 보일지 알 수 없네요.
‘Horizontal List Item Width Problem’이나 ‘Staircase Bug’의 해결방법으로 쉽게 고칠 수 있을 것이라 생각했는데 쉽지 않네요.
이럴줄 알았다면 속편하게 강사님의 홈페이지를 소개시켜 주는 건데 욕심이 과했나 봅니다.
선생님의 명쾌한 답변을 기대하겠습니다.
감사합니다. 쌀쌀한 날씨에 몸 건강하세요.
안녕하세요. 정선생님. 저는 전주에서 선생님의 강의를 들었던 송과장입니다.
오늘 새벽에 웹접근성 연구소 홈페이지 자바스크립트 예제의 문제점에 대해 질의한 것은 해결되었습니다.
아침에 출근해서 살펴보니, 제가 미처 확인하지 못했던 부분이 보이더군요.
제가 마음이 급하고 당황스러워 제대로 코드를 확인하지 못하고 질의했던 모양입니다.
홈 > 웹 콘텐츠 신기술 제작기법 > 접근성 있는 javascript 제작기법 > javascript 애플리케이션 콘텐츠 구현 예 > 내비게이션 제작기법
(가로 2단 메뉴)
위의 예제는 IE6에서 레이아웃 문제가 발생하지만 두가지를 추가하고, 위치만 정정하니 IE6,7,8, FF, Safari, 크롬 모두에서 별다른 문제없이 동작합니다.
처리방법 :
1. #TopMenuSub ul li 에 position:relative 추가
2. #TopMenuSub ul li 밑의 div 5개에 적당한 값의 width 추가
3. #TopMenuSub ul li 밑의 div 의 위치를 맞추기 위해 left값 변경
별다른 문제도 아닌데, 불편을 끼쳐 죄송스럽네요.
자주 선생님의 홈페이지에 들르게 되는데 들를때마다, 정말 고생하시고 수고하신다는 생각이 듭니다.
노고에 감사드립니다. 쌀쌀한 날씨에 몸 건강하세요.
안녕하세요 창명님^^
경력1년차의 고졸 웹퍼블리셔입니다
늘 블로그와서 좋은정보도 많이 얻고 css설계도 많이 배워가네요^^
뭐 하나 어쭤볼게 있어서요
지금은 학력에 구애받지 않고 회사에 잘 다니고 있지만
경력이 쌓이고 직급이 올라갈수록 대학졸업장이 있어야 한다는
조언을 많이 들어서요
내년에 대학교에 갈까 하는데 단순히 대학졸업장을 따러
아무학과에 가면 그 시간과 물질이 너무 아까울거 같네요
그래서 UI개발과 관련된 학과를 갈려고 하는데
추천해주실만한 학교나 학과좀 알려주시면 감사하겠습니다^^
안녕하세요.
먹고 사니라 바쁜 사이 세상에 XE와 텍스타일이란 것이 생겼고
땀 뻘뻘 흘리며 설치하다보니 본의아니게
텍스타일 zen 스킨의 색깔을 요리조리 바꾸게 되었습니다.
이런 것도, 저작권법에 위배가 됩니까?
혹시나 싶어 글을 남깁니다.
제 주소는 링크해두었습니다.
실은 미적감각이 떨어져, 그냥 제가 좋아하는 색깔로 대체를 하였습니다.
용기가 없어 백그라운드만 바꿔보았습니다.
스킨 구조가 심플하고 마음에 드는지라, 추후 열심히 공부하여
저만의 스킨을 만들고자 합니다.
동기를 부여해주셔서 감사합니다(?!).
@엘제이
아래 코드는 엘제이님께서 적어주신 코드 입니다.
[div style="position:relative;"]
[span style="position:absolute; top:0; left:0; display:inline-block; width:98px; height:18px; border:1px solid red;"][/span]
[select name="select" style="width:100px; height:20px; padding:2px 0; font-family: 돋움,Dotum; font-size: 12px;"]
[option]Option[/option]
[option]Option[/option]
[option]Option[/option]
[/select]
[/div]
이렇게 작성하시면 span 영역이 select 영역을 덮어버리기 때문에 select 영역을 클릭할 수 없게 될텐데요. 이 방법이 통하는지 궁금하네요. 제가 제안드린 방법은 span 요소가 select 요소를 감싸는 방법 이었습니다.
[span style="display:inline-block; border:1px solid red"]
[select]
[option]…[/option]
[/select]
[/span]
보셨다는 소스가 어떤것인지 말만 들어서는 잘 모르겠습니다. 적용된 페이지를 보여주시면 한번 확인해 보겠습니다.
@익명
1.
섹션||블록||포지션||이펙트 같은 조합식을 많이 생각하여 작업하신다고 말씀하셨는데 이게 어떤 방법인지 잘 모르겠습니다. 구체적으로 추가 설명을 부탁드려도 될런지요?
2.
형제 상자의 높이를 동시에 늘어나도록 하는 기법은 CSS만으로는 불가능 합니다. 그러나 CSS 배경이미지를 잘 사용하면 그렇게 보이도록 할 수는 있겠지요.
3.
span 요소가 출력될 때 dl 때문에 어떤 문제가 발생하는지 구체적으로 설명해 주실 수 있는지요? overflow:hidden 속성이 없다면 넘치는 부분도 잘 표시될 것입니다.
@정낙훈
1.
colgroup 상자의 너비는 가변폭으로 지정하면서 aside 상자의 너비는 고정폭으로 지정하는 것은 가능합니다. 그런 형태를 혼합폭(하이브리드) 레이아웃이라고 하지요.
http://naradesign.net/ouif/layout/ 이 예제 페이지에서 ‘HYBRID CE’ 상태가 혼합폭 예제 입니다.
2.
siteNav 영역을 최상단 또는 최하단으로 배치하는 것은 position:absolute 또는 position:fixed 속성을 사용하면 되는데 구현하신 것을 보니 position:fixed 스타일을 원하셨던것 같습니다. position:fixed 속성을 사용하시면 되는데 IE 6 브라우저는 이를 지원하지 않습니다. IE 6 브라우저에서는 fixed 효과를 포기하거나 또는 JS를 사용하는 방법이 있는데 저라면 IE 6에서 똑같이 보이는 것을 포기할것 같습니다. 이미 그렇게 구현 하셨군요.
3.
저런 형태(mynote)의 레이아웃 이라면 화면 배치를 위한 table은 사용하지 않아도 될 것 같습니다.
@송선생
아이쿠. ㅡㅡ; 제가 깜빡하고 있었습니다. 기억하고 있다가 꼭 물어보도록 하겠습니다. 제가 액션스크립트는 잘 모르지만 추측컨데 아마도 가능하다고 말씀하실것 같습니다.
@JSSong
IE6 브라우저의 버그 입니다. 서브메뉴의 폭은 서브메뉴 개수의 너비만큼 충분히 확보되어야 하는데 부모 요소인 li 상자 너비의 영향을 받아서 한 행에 흐르지 못하고 줄바꿈 되는 것입니다. 이 문제를 해결하려면 .TopSubMenu 라는 상자의 너비를 충분히 넓게(예를 들면 100%) 확보하면 됩니다.
@UI개발^^
UI 개발과 직접 관련이 있거나 UI 개발을 주로 가르치는 학과는 아직 들어본 적이 없습니다. 관련 학과(멀티미디어 디자인, HCI, 컴퓨터 공학)를 졸업하면 UI 개발에 도움이 될껍니다. 하지만 관련학과를 고집할 필요는 없다고 생각합니다. 관련학과가 아니어도 본인이 즐겁게 공부할 수 있는 분야가 있다면 선택하면 좋습니다. 한 분야에 정통한 사람은 수두룩 하지만 여러 분야에 대한 지식을 가진 사람은 흔치 않고 이렇게 다양한 지식과 경험을 실무에 접목시키면 매우 창의적으로 일을 할 수 있다고 생각합니다. 저는 현재의 직업과 아무 관련이 없는 행정학을 전공했지만 흥미있게 들었던 몇몇 과목들(경영, 조직, 리더쉽 …)은 언제나 도움이 되고 있기에 즐길 수 있으면 힘껏 도전하라고 말씀드리고 싶습니다.
@우주로 날아가겠어
스킨을 변경하는 것은 저작권법에 위배가 되지 않고 저작권과는 아무런 관련이 없습니다. 안심하고 마음껏 고치셔도 됩니다. 심지어 하단에 표시된 디자인, UI 개발자 정보도 본인의 것으로 바꾸셔도 됩니다. 저희는 오히려 개작 스킨(수정한 스킨)이 많이 나오는 것을 권장하고 있습니다.
안녕하세요 정찬명님.
평소에 Naradiesign 을 통해서 많은 도움을 받고 있는 1人 입니다.
많이 배워가면서도 눈팅만 했엇는데요 질문이 있어서 글을 남깁니다.
http://naradesign.net/wp/2010/02/11/1185/ 이 게시물에 css Navigation Bar. 가
너무 이뻐서 가져다 쓰고 있는데요 IE6 에서 서브메뉴에 링크가 첫번째 클릭때는
동작을 안하는 버그가 있어서 질문드립니다.
png24 배경시에 이런 버그 현상이 있다고 하는데 배경을 모두 gif로 바꾸지 않는한
방법이 없는건지 여쭙고 싶어서요.
안녕하세요!1
우연하게 사이트에 들어와서 정보를 탐색하고 있는… 한 사람입니다^^
머랄까요..
한국에서는 코딩을 할 수있는 웹디자이너였는데…
현재는 꼭 코딩을 웹표준에 맞추어서 해야만 하는… 한국에서 비행기로 9시간 걸리는 곳에서 일하고 있는 코너같은 웹디자이너 입니다..
요새는 웹퍼블리셔이라고 하나요?? 암튼요..
웹표준에 맞춰서 코딩을 하긴 하는데.. 음 문제는 기본이 없는것 같습니다.. 체계적으로 틀이 잡히지 않아서인지.. 때로는 개념이 잘 서지 않기도 하구요..
인터넷으로 찾는 것도 한계가 있고 그렇다고 누군가 옆에서 알려주는 것도 아니고요.. 그래서 책을 좀 보려는데… 웹표준 관련한 css 책 좀 소개 해주시렵니까?? 서점가서 직접 보고 선택하면 좋으련만.. 상황이 갈 수 없어서요..
저의 수준이라면..음…예컨대..
” CSS핵은 남용하지 않는것이 좋겠지만 브라우저 호환성에 문제가 없다면 사용해도 괜찮다고 생각합니다. float 속성은 핵이 아니기 때문에 사용에 문제가 없습니다.”^
요런말 – 핵 – 잘 모르겠습니다… 수준이 바닥인가….;;요.. 머.. 인터넷자료로 독학해서 그런거 같습니다…
안녕하세요, 오늘도 익명으로 몇가지 고민 적어 봅니다.
1. css 작업하는데에 있어서 리셋을 사용하는 경우와, 사용하지 않는 경우가 있는것 같은데, 개인적으로는 공용화라고 해야할까요, 리셋은 사용하지 않는 쪽으로 지향하고 있습니다. 네이버 같은곳을 보면 * {margin:0; padding:0; font-size:12px; font-family:sans-serif;}를 쓴것을 볼수있는데요. 작업시 기준을 어떻게 잡아야 할까요? xe의 경우를 본다면 사용자들이 공용으로 접근할수 있기 때문에 widget이나 module등의 제작에 있어서 문제가 되지 않을까 싶구요. 조금은 융통성있는 디자인이 설계된다고 생각해버리면 좋은데…
반대로 생각하면, 여러 개체들의 출력기준이 브라우저 마다 제각각이므로 리셋해서 새로 정의를 내려주는것도 방법이라고 보는데…. 어떤것이 제한적인 환경이 되는지 고민됩니다.
2. 시멘틱한 네이밍에 대해…
nhn의 작업물을 많이 보려고 하는편인데, 아마 이정도로 작업들 하지 않나 싶습니다.
#wrap
#header
.gnb
#container
.lnb
.content
.aside
#footer
사실상 wrap라는 부분이 container 가 되고, container가 column_global 으로
lnb/content/aside부분이 column_left | center | right 정도로 되야 의미가 맞지 않나 싶습니다. gnb와 lnb 같은 경우는 반복되지 않는 개체이므로 class보다는 id로 제공되어야 하지 않나 싶기도 하구요. 시멘틱 네이밍에 대해 말씀해 주셨는데, 단순한 네이밍보다 오히려 약간은 단어를 조합해놓은 것에 가까운 네이밍이 작업에 용이하지 않나 싶기도 하구요… nhn에서 어떤취지로 위와같은 네이밍이 정의되었는지 궁금합니다.
3. 데이터가 아닌 부분에 대해서는 table을 많이 배제하려고 합니다.
작성폼과 같이 form이 도입되는 부분에는 fieldset으로 감싸주며 dl,ul 로 작성을 하려고 하고, 리스트 부분은 head 부분이 연결되야 하니까 table을 사용하게 되는데…
회원정보 같은 부분을 예로 든다면, write단과 view단 모두 공통적인 부분으로 볼 수 있기에 table을 사용해야만 하는지.. 반대로는, col, cross속성을 띄는 부분이 없다면 오히려 dl,ul들로 write단과 view단을 작업해도 되는게 아닐지 생각해 봅니다.
국내 대표 포털사이트들이 table을 사용안하고도 충분히 출력할수 있는 부분이 있음에도 불구하고, 찍어내듯이 table로 작업을 하는 상황인데… xe 에서도 비슷한것 같구요.
작업성을 고려했을때는 통일화 시키는게 좋을것 같고, 작업성을 우선시한다는 핑계로 마크업을 흐린다는 자체가 애매한데… 이러한 부분에 대해 생각을 어떻게 정리하면 좋을까요…
@최경민
이 경우의 버그는 PNG와는 관계가 없습니다. IE6에 _zoom:0 코드를 적용했던게 문제였네요. 수정해서 업데이트 해두었습니다. 다시 한번 테스트 해 봐주세요. ^^
@비행기로 9시간
저도 인터넷으로 독학 했는걸요. ^^ ‘실용예제로 배우는 웹표준, 웹 2.0을 이끄는 방탄웹, CSS 마스터 전략, CSS 완벽 가이드’ 이렇게 추천 드리고 싶습니다.
@익명
1. 공용선택자 사용은 무엇보다 성능에 문제가 있습니다. 아래 페이지의 기본 page load time과 CSS Selector 부분에 * 공용선택자를 넣은 후의 page load time을 비교해 보세요. 꽤 높은 성능차이가 발생합니다. 브라우저 호환성은 공용선택자를 사용하지 않고도 맞출 수 있습니다. http://stevesouders.com/efws/css-selectors/csscreate.php
2. NHN은 선택자 이름을 시멘틱하게 작성하고 빈번하게 사용되는 요소의 이름을 코딩 규칙으로 정해 두었습니다. id 사용은 되도록 꼭 필요한 곳에만 사용합니다. class와 id 선택자가 하나의 요소를 함께 선택하면서 속성이 충돌하는 경우에 id 선택자가 높은 우선순위를 갖는데요. 우선순위가 높으면 나중에 이 속성을 덮어쓰기가 어렵기 때문에 되도록 우선순위가 낮은 선택자를 사용합니다.
3. 회원가입 폼도 테이블로 마크업 할 수 있습니다. dl, dt, dd 요소로 마크업 할 수 있는 데이터라면 table, th, td 로도 마크업 할 수 있습니다. table을 오남용하는 사례는 화면 배치 목적으로 사용할 때이고 그 밖에 표현하는 콘텐츠가 ‘제목-내용, 주-부, 종-속’ 과 같은 구성을 지녔다면 표로 마크업 할 수 있습니다. 단순히 작업하기 편리하기 때문에 표를 선택하는 것이 아닙니다. 표는 오히려 브라우저마다 표현이 달라서 호환성을 유지하기 더 어려울 수도 있습니다.
안녕하세요. 요즘 집 안에서만 놀고 먹고 자고 그러고 있습니다. ㅎㅎ
한창 홈페이지 만드는데 삼매경인데요 질문 하나만 더드릴게요.
다른 분들 질문에 쉴 시간이 없으시겠지만^^;; 제 것도 받아주세요;
http://eond.com/
메뉴에 쓰인 스크립트가 예전에 css navigation bar 이거에요.
그런데 유독 제가 만든 건(..) 탭키로 작동을 안하네요.
jquery도 따로 불러온 것 없이 xe 내에 있는거 그대로 사용한 거거든요..
(원래는 jquery 불러오는데 XE에는 안 불러와도 동작을 하더라고요.)
그 때문에 혹시 탭키 동작이 안하는 건 아니겠지요? ^^;;
[div style="position:relative;border:1px solid red;display:none;"]
[h2 style="border:1px solid red;"]제목[a href="#"][span style="border:1px solid red;position:absolute;left:0;z-index:2;width:100%;text-align:right;"]더보기[/span][/a][/h2]
내용
[/div]
이건 최근게시물입니다. 기존에 위젯스타일 스킨에서는 게시판 제목을 클릭할 수가 없어 불편했는데 이렇게 처리하면 글제목까지 같이 클릭이 되어 편리한 것 같은데 어떤가요^^;
.toparea{ background:#404040}
.topwrap{width:968px; background:red; margin:10px 0;}
[div class="toparea"]
[div class="topwrap"]
dd
[/div]
[/div]
안녕하세요 궁금한게 생겨서 질문을 남겨봅니다 ^^
이 상황에서 자식의 margin이 먹히질 않는데 .toparea에 width를 주면 IE에서 제대로 먹구 overflow: hidden 까지 해주면 ff/크롬등에서도 정상적으로 먹게되는데 원리가 궁금한데 혹시 도움 받을수 있을까요? ^^
css규격에 보면 Vertical margins of elements that establish new block formatting contexts (such as floats and elements with ‘overflow’ other than ‘visible’) do not collapse with their in-flow children. 라고 되어있는데 부모에게 margin이 없는데(리셋을 해줘도) 왜 병합이 되는 현상이 발생되는지 이상하네요
안녕하세요 찬명님. 위에 탭키로 이동했을 때 포커스 안 잡힌다고 한 글은 해결했습니다.
XE 자체에 jquery가 내장되어있어서 그 때 사용한 js를 따로 삽입하지 않아도 잘 작동한다고 생각해서 js를 따로 추가하지 않았는데,
이번에 js만 삽입해서 다시 해보니깐 포커스가 잡히더라고요^^;;
아마 XE에서는 뭔가가 더 추가되어있나 봅니다. ^^;
결국 js 의 삽입 유무 문제였네요. 그럼 굳라이프;;
허….
지금까지 *{margin:0; padding:0;}을 습관처럼 사용했었는데…
오늘 또 큰 배움 얻고 갑니다.
@자스민
형제 또는 부모자식 관계에서 수직 마진은 병합됩니다. 자식의 수직 마진은 부모의 수직 마진과 병합되면서 마진이 적용되지 않은것처럼 보일 수 있습니다. 이때 부모 요소에 패딩이나 보더를 부여하면 부모 자식간 수직마진은 더 이상 병합되지 않습니다.
안녕하세요 정찬명님… 바쁘시겠지만 한가지 급히 여쭤볼게 있습니다. http://211.117.47.132:8080/web/kor/62 이 페이지를 ie6에서 보면 레프트메뉴가 오른쪽으로 붙어버리는데 이유를 도저히 모르겠네요.. 시간나시면 확인부탁드립니다.. 감사합니다.
@RIVER
IE6에서 봐도 왼쪽 메뉴가 왼쪽에 잘 붙어 있는데요? 다만 파이어폭스 3.6.16 버전에서는 서브메뉴 접고 펼치는 기능에 문제가 있는것 같아요. ^^
문의 드릴것이 있어 이렇게 글 남깁니다.
제로보드 xe를 사용하여 게시판을 만들고 XE Naradesign Board Skin스킨을
적용하여 쓰고있습니다.
이상없이 잘 적용되는가 싶더니.. 글을 하나 클릭하면 내용은 이상없이 보입니다만..
글 밑에 다른 글목록이 보여지면서 그 사이에 ‘검색’이 어중간한 위치에 끼여있습니다..
글 내용이 아무리 늘어나도 글목록 아래에 검색위치가 지정되도록 할 수 있는 방법이
없나요??
http://uplus1007.mireene.com/xe/index.php?mid=uplus1&page=1
p.s 이제보니 관리자로 로그인 했을 경우에만 그런 현상이 나타나네요 =_=…
이거무슨 수정/삭제 버튼이 없으니 도배식으로 되어버리네요;
참고 사진이에요! http://uplus1007.mireene.com/q001.png
안녕하세요^^
좋은 블러그를 잘 관람하고 있는 유저입니다.
초보인지라 궁금한 점이 있어 이렇게 댓글을 씁니다.
귀찮으시면 무시하여도 상관은 없습니다.
게시글 중에 예들들어서 설명한 네비게이션 같은거 바로 클릭해도 볼 수 있게 해놨는데.
(CSS+제이쿼리)
블러그에서도 그런 예제 표현이 가능한가요? 자바스크립을 어떻게 불러오죠?
저는 티스토리를 하고 있는데 가능한가요?
@황상연
제가 예제로 만든 것들은 어떤 종류의 웹 페이지에도 붙일 수 있는데요. 다만 이미 기존에 사용중인 JS 프레임웍이 있는지를 먼저 확인하셔야 합니다. 티스토리에서 이미 jQuery 아닌 JS 프레임웍을 사용하고 있다면 jQuery와 충돌이 날 수도 있습니다. 물론 충돌을 회피하는 방법도 존재 할껍니다. 티스토리에서 jQuery를 사용해도 충돌이 나지는 않는지 일단 적용해 보거나 티스토리 커뮤니티를 통해서 원하는 답을 찾아보세요. 자바스크립트를 불러오는 방법은 제가 작성한 예제 페이지를 새창으로 열어서 소스보기 하시면 알 수 있습니다.
답변 감사합니다^^
한가지만 더 물어볼께 있는데요
정찬명님 처럼..훌륭한 웹퍼블리셔가 되기 위한 최적의 방법이 있나요?
참고로 저는 웹디자인과 크로스브랑우징을 주로 하고 있는데
방향을 웹퍼블리셔로 잡고 있거든요^^
@황상연
제가 훌륭한 퍼블리셔인지는 검증이 안된 사실입니다. 하지만 그냥 제 생각을 말씀 드릴께요. 안과 밖 양쪽에서 주위의 인정을 받으면 훌륭한 UI 개발자라고 생각합니다. 그 인정이라는 것은 기술적인 측면과 인간적인 측면이 있는것 같고 양쪽 모두 골고루 개발 해야 한다고 생각해요. 그래서 저는 제가 함께 일하기 좋은 기술과 인덕을 지닌 사람인지 가끔 질문을 던져 봅니다. ^^
전주에서 강사님께 교육받고 미친사이(오해성 발언인겐가..ㅡㅡ;;)가 된 학생입니다.
어제 교육은 마무리가 되었어요….
즐겁고 유익하고..마냥 흥미로웠던 교육이였어요..
정말 고생많으셨고…많은 가르침 감사했습니다.
뭐….사실 욕심같아선…한 10주짜리 교육이였으면 했지만요…^^
언제나 서슴없이….늘….훌륭한 많은 가르침…정말 감사합니다..
정말 강사님…..최고예요……꺄…멋쟁이~~~
@최군
좋은 피드백 고맙습니다. 한편 저는 최군님이 어떤 인상착의를 가진 학생이었는지 감을 못잡고 있답니다. 저와 함께 막걸리를 마셨다는 것까지는 알겠는데 그 이상의 정보가 없었어요. 알려주세요. ㅎㅎ
욕이라도 할껄그랬나봐요…그럼 확실히 각인이 되었을텐데말이죠…^^
스카웃제의하실 그날까지 열심히 대전에서 일하고 있을께효…풉…^^
@최군
아하. 대전. 그런데 미투 프로필이나 닉네임은 전부 남자로 보여요? 이러니 헷갈리죠. ㅎㅎ
…………하루종일 괴롭고 또 이것저것 해보다 결국은 또 찾아왔습니다….
모바일관련 작업을 하고 있구요….문제는 동영상때문입니다..xhtml DOCTYPE 선언했구요..
mp4로 인코딩했습니다….아이폰…잘나오네효…….(윈도우버젼들은 배려치않았습니다.)
안드로이드…………계속….로딩하더니….안나옵니다….
object를 이용해도..결과는 같구…..xhtml 선언해도 브라우저에서 html5 태그 지원이 된다는 글을 읽은거같아서 video 태그를 사용했으나..결과는 같아요..
흠……..인코딩의 비법이 있는건지…..아님 태그의 비법이 있는건지….아님 스크립트의 비법인지….비법전수 좀 해주세요….눼…??
p.s 비법전수해주시면 닉네임의 전설을 털어놓을께효…..ㅠ.ㅠ
@최군
저도 잘 몰라요. 구글 형아한테 물어보니까 여기 가보라네요. http://goo.gl/Z99pa
아~~~~~구글언니였으면 저에게도 친절했겠는데……..
제가 못본 문서네요………..정말 감사합니다……꺄~~~~
복받으실꺼예요…^-^)/
설마 제가 1000번째 댓글? ㅎ