NARADESIGN:BLOG » 방명록

방명록

최근(2009.02) 워드프레스를 2.7 버전으로 판올림 하면서 기존에 사용중이던 방명록 플러그인(TP-Guestbook)을 정상적으로 사용할 수 없게 되었습니다. 방명록의 모든 글이 한 페이지에 노출되고 최근글이 가장 아래쪽에 정렬되어 불편할 것입니다. 가능한 빠른 시간내에 개선하겠습니다. 한 페이지에 적은 양의 글만 노출이 되고 오래된 글들은 페이지네이션 할 수 있도록 고칠 예정입니다. 현재 사용중인 테마가 페이지네이션이나 댓글 정렬 순서를 지원하지 않아서 아마도 테마를 변경해야 하는 큰 공사가 예상 됩니다. 여전히 글 작성은 가능합니다. 글쓰기.

505개의 댓글이 있습니다.

supporter 11월 23rd, 2006 at 17:51
디자인에 도움이 될듯 싶군요.
http://tmlgt.byus.net
정찬명 11월 23rd, 2006 at 19:17
사진마다 supporter 님의 워터마크가 들어가 있던데요.
어떻게 하면 도움을 받을 수 있는지 좀 난감하군요.
1004ant.com 12월 12th, 2006 at 19:47
댓글 보고 다녀갑니다. 님들 중 http://naradesign.net/wp/2006/11/24/94/ 이글 읽고 opera 사용하고 있는데… 참 신기하네요..
정찬명 12월 13th, 2006 at 10:02
방명록에 글 등록 감사합니다 ^^; 방명록 만들어 놓고 워낙 파리가 날려서 괜히 만들었나 싶었지요.ㅎㅎㅎ. Opera 사용하시면서 재미난 일들 생기면 또 공유 해주세요. 올블로그에서 Opera 관련 태그를 RSS로 구독하고 있습니다. http://1004ant.com/60 포스트는 잘 보았습니다. ^^a
김휴철 12월 19th, 2006 at 9:58
좋은 글 잘 읽고 있습니다.
나만 그런지는 모르겠는데 오페라나 파폭에서는 괜찮은데 IE 6에서는 오른쪽 스크롤 바가 안나오네요…
정찬명 12월 19th, 2006 at 17:40
코멘트 감사합니다. 한참을 모르고 있을 뻔 했습니다. 다행히도 문제는 즉시 수정이 되었구요. 딴에는 ‘모범을 보여야지’ 라면서 신경을 쓴다고 쓰는데도 항상 부족하네요ㅡㅜ; 좋은 하루 되세요!
강성국 12월 28th, 2006 at 12:18
안녕하세요~

좋은 자료 매번 잘 보고 있습니다.

한 해 마무리 잘하시고 건강하세요~

아 참 http://browsershots.org/ 이 사이트 아시나요?

그러면 이만 ㄴ–ㄱ=3
정찬명 12월 28th, 2006 at 17:27
성국님 죄송합니다. ’shots’ 라는 키워드 때문에 스팸필터링 되었더라구요. ’shots’ 라는 키워드를 필터링 하지 않도록 제거 했구요. 적어주신 사이트는 저도 몇일전에 테스트 해보았습니다. 좋더군요. 시간이 조금 오래 걸린다는게 흠이죠? ^^; 저는 그냥 여전히 IE, FF, OP, SF 정도만 테스트 할 계획이라서 자주 사용할 일은 없을것 같습니다^^
Laputian 1월 20th, 2007 at 12:41
pda에서 쓰는 방명록입니다 :)
정찬명 1월 22nd, 2007 at 18:39
테스트 감사합니다 ^^ Snap 스크립트를 제거했는데 한번 더 테스트 부탁 드립니다. IE 에서 여전히 문제가 되는지 알고 싶습니다.
별별 1월 25th, 2007 at 12:39
항상 좋은 소식만 있었으면 좋겠구나. 새로운 곳에서도 열심히 해서 꼭 승리하길 바란다.
김요한 1월 25th, 2007 at 12:44
찬명님, 감사합니다!!
제 블로그의 첫 코멘트를 달아주셨군요 ㅠ,.ㅠ

저, msn 메신져 있으시면 추가해주세요~
hiphapis aaaat~!! hanmail.그물

입니다~
정찬명 1월 25th, 2007 at 13:01
고맙다, 나의 오랜 친구. 승리도 좋지만 항상 낮은 곳으로 임하라는 나름의 좌우명 비슷한걸 실천하려고 애쓰며 살고 있다. 나를 사랑해주고 존경해 주는 사람이 없다면 승리가 다 뭔 소용이더냐. 너 또한 새로운 환경에 잘 적응하는것을 믿어 의심치 않고 곧 누구보다 잘 해낼꺼라 믿는다. 항상 건강하고 또 자주 보자꾸나.
정찬명 1월 26th, 2007 at 4:09
글쓰고 바로 나타나지 않아서 놀라셨겠군요. WP의 Akismet Spam 이라는 도구가 처음으로 실수를 했는데 그게 요한님의 이 글이었어요 ㅋㅋㅋ. 스팸이 아니라고 체크해 주었으므로 앞으로는 실수로 걸러내지 않을 것입니다. 도구라는게 참 좋다가도 이렇게 믿을 수가 없어요. ㅡㅡ; MSN 추가 해두었습니다.
김요한 1월 26th, 2007 at 10:28
아, 전 다른곳에서 이미 한번 당했던 기억이 있어서…ㅠ,.ㅠ
다행이 이번엔 심리적으로 대비를 한 상태에서 당했네요~ㅎㅎ
정찬명 1월 26th, 2007 at 10:41
이번에는 걸러내지 않았군요! 축하드립니다!ㅎㅎㅎ.
정찬명 1월 29th, 2007 at 17:06
1/29 오후 1~2 시간 정도(2007.01.29, 15~16시경) 일시적인 접속장애가 있었습니다. DB관련 작업을 수행하지 않았음에도 불구하고 이런 오류가 발견되어 호스팅 업체에 문의하려고 해당 게시판에 접속해 보니 저 이외에도 같은 문제를 격고 있던 다른분들의 DB Connection 오류 질의가 다수 등록되어 있었습니다. 처음있는 일이라 무척 당황스럽더군요. 호스팅 업체의 전화가 불통이라 게시판에 문의를 남겼더니 다음과 같은 답변을 얻을 수 있었습니다.

안녕하세요, ○○○○ 호스팅입니다. 서비스 이용에 불편을 드린 점 사과드립니다. 사용하시는 서버의 DB쪽에 부하가 발생하여, 예상치 못한 오류가 발생, DB에 접속이 일시적으로 거부되었습니다. 현재 조치가 완료되었으며, 정상적인 이용이 가능한 상태입니다. 본의아니게 서비스의 이용에 불편을 드린 점 사과드리며, 추후 이러한 일이 발생하지 않도록 지속적으로 모니터링 하겠습니다. 감사합니다.

이 문제로 제 블로그에 접속장애를 격으신 분들은 약 30여분 정도로 추산 됩니다. 그 분들께 정말 죄송합니다.
김주원 1월 31st, 2007 at 17:06
좋은 정보들이 많네요^^
웹표준에 허우적 거릴때….(지금도 별반 차이는 없지만) 왜 제가 이곳을 못찾은거죠?
북마크 해놓았습니다. 자주 들르겠습니다.
정찬명 1월 31st, 2007 at 17:09
앗! 감사합니다! 제게 북마크의 영광을 주시다니요. 좋은 포스팅을 위하여 더욱 분발해야겠다고 다짐합니다 ^^a
miriya 2월 2nd, 2007 at 13:15
요즘 다음 카페에서 marquee 태그중 behavior 속성만 태그제한을 하고있습니다.
marquee 전체라면 비표준 태그를 배제하자는걸로 이해할 수 있겠는데..
왜 behavior 하나만 막는걸까요?
정찬명 2월 2nd, 2007 at 13:57
지금 확인해 보니 카페 초기화면에서는 behavior를 지원하고 있는데 게시물에서는 behavior를 사용하면 코드가 그대로 출력되는 오류가 있군요. 만약 비표준 태그를 배제하려는 정책이었다면 코드를 그대로 출력시키는 형태로 두지는 않았을 것입니다. 따라서 제가 생각할 때 이것은 십중팔구 오류인것 같습니다.

한 가지 추측할 수 있다면 CSS에도 behavior 속성이 있는데 CSS 코드에서 사용되는 behavior는 *.htc라는 확장자를 지닌 자바스크립트 파일을 로드시킬 수 있습니다. 예: <strong style=”behavior:url(script.htc)”> 따라서 악의적으로 사용되는 경우 CSS코드를 이용하여 얼마든지 자바스크립트를 로드하고 그것으로 나쁜짓을 할 수 있다는 뜻입니다. Daum에서는 그것을 막을 요량으로 behavior 라는 문자열을 무효하게 만들면서 엉뚱하게도 그것이 IE 전용 마크업인 maquee 태그의 behavior까지 무력화 시키지 않았나 라고 추측할 수 있을것 같습니다.

IE의 비표준 코드 때문에 그 누구보다 웹 표준 마인드로 무장되어 있는 Daum의 UI개발자들을 애먹이고 있는 사례중의 하나가 아닐까 싶네요.
miriya 2월 2nd, 2007 at 16:18
음.. 제가 확인할때는 “[안내]태그제한으로 등록되지 않습니다” 라는 문구가 들어갔는데 방금 보니 바뀌었네요.
아무래도 마퀴태그를 쓰는 카페 유저들이 많기 때문에, marquee는 지울 수 없겠고..
htc를 로드해서 장난을 칠 가능성이 있는, 위험한 behavior만 지우라는 무언의 안내같네요. 답변 감사합니다.^^
MZX 2월 4th, 2007 at 20:29
안녕하세요. 좋은 글 보고가요.
저로써는 다 어려운 글들이지만 많이많이 배울거 같습니다. ^^
정찬명 2월 5th, 2007 at 12:48
도움이 되신다니 다행입니다. 글을 쓸 때 쉽게 이해할 수 있도록 쓴다고 나름대로 고민을 하긴 하는데 제가 놓치는 부분이 많은가 봅니다. 제 깜냥을 다른분들께 쉽게 널리 알릴 수 있도록 더 많은 고민을 하도록 하겠습니다. 또 저는 아직 많이 부족하기 때문에 다른분들로 부터 지적받는 것을 좋아합니다. 궁금하거나 잘못된 지식이 발견되면 아낌없는 질문이나 댓글을 부탁드립니다.
전수근 2월 14th, 2007 at 12:15
안녕하세요^^ 좋은 글 잘 보고 갑니다..
PHP로 설치형 블로그를 제작 중입니다.(개인적인 공부)
`CSS`, `웹 접근성`, `웹 표준` 등등 대부분의 글들이 많은 도움이 되는군요^^ 다시한번 감사드립니다.
정찬명 2월 14th, 2007 at 13:22
네, 안녕하세요? 반갑습니다. PHP로 만드는 멋진 웹 표준 블로그 기대하겠습니다! 제작이 완료되시면 이곳에 다시한번 들러서 꼭 전해주세요! 좋은 하루 되시구요.
임원빈 2월 15th, 2007 at 0:02
안녕하세요? 다름이 아니라 뭣좀 여쭤 볼려고 하는데…
( 방명록인데 이런데다 써서 우선, 죄송합니다 (__ ) 메일주소를 찾아보아도 찾아 볼수가 없어서 =.=;; )
난해한 질문이라도, 제가 아직 웹표준, 웹접근성에 대해 개념이 안잡혀 있어서 그런거니 양해 부탁 드립니다 ( _ _);;;;

웹표준이라는 개념은, 웹이 창시 될때 부터 같이 생기게 된 것 인가요??
http://link.allblog.net/1512129/http://hacker.golbin.net/wp/archives/566/
임원빈 2월 15th, 2007 at 0:04
위에 글을 읽어다가 생각난 것 인데… 웹이 창시될때 웹표준이라는 것은 존재 했지만, 우리가 웹을 잘 못 배워서
현재 우리나라 홈페이지들이 대부분 웹표준,웹접근성이라 고는 전혀 찾아볼수 없는 홈페이지들이 된 것인지… 궁금합니다…
정찬명 2월 15th, 2007 at 10:24
이런 글을 쓸 수 있도록 방명록을 열어둔 것입니다. 방명록이라는 이름이 오히려 적절하지 않은 것 같네요^^ 메일주소는 /wp/about/ 페이지에 공개되어 있습니다.

공식적으로 ‘웹 표준’ 이라는 개념이 생기기 시작한 것은 1994년 W3C가 창설된 시점인 것으로 알고 있습니다. 하지만 팀 버너스 리는 웹을 만들면서 애초에 ‘웹의 보편성’을 염두해 두었고, ‘웹 표준’에 대하여 전혀 의도하지 않았다고 말하기는 어려울 것입니다. 따라서 공식적으로는 W3C 으로부터 ‘웹 표준’이라는 개념이 생기기 시작했다고 볼 수 있지만 이미 웹이 만들어지는 순간부터 ‘웹 표준’이 고려되고 있었다고 보아야 할 것 같습니다.

그리고 국내 웹사이트들이 해외에 비하여 웹 표준이나 웹 접근성이 취약한 것은 사실이고 그것은 웹을 가르치는 사람이나 배우는 사람도 모두 무지했기 때문이라는 사실에는 의심의 여지가 없습니다. 이것은 잘못된 교육이 답습되도록 내버려둔 국가의 책임이 크다고 생각합니다. 이와 관련하여 국가기관에 해당하는 ‘한국정보문화진흥원, 한국소프트웨어진흥원, 정보통신접근성향상표준화포럼’ 등에서 다양한 노력을 하고 있지만 아직까지 한국의 웹에 전반적인 영향을 미치지 못하고 있다고 보여집니다. 강제력이 없기 때문입니다.
장헤원 2월 19th, 2007 at 10:55
헐… 왜 짤리지 ㅜㅜ
다른분은 안봤으면 하는데요… 쪽팔려서리. 다름이 아니라… 저는 23살이고요 학교를그만두고 제 웹서버구축해서 작업해보고 싶어서요 ㅎㅎ 지금 html책이랑css
정찬명 2월 20th, 2007 at 12:13
장헤원님 죄송합니다. 지금 ‘html책이랑css’ 라는 문자 이후부터 짤리기 시작하는데요. 해당 문자 이후에 어떤 문자를 적으셨는지 메일로 좀 부탁드리겠습니다. 어떤 문자를 만나면서 짤리는 것 같습니다. 이곳에 적으시면 또 짤릴 수 있으니 번거로우시겠지만 메일로 다시 한 번만 더 부탁드립니다. 제 메일주소는 dece24앳gmail.com 입니다.
장혜원 3월 9th, 2007 at 15:21
식사는하셨는지요 꾸벅 __ 대단하신데요 nhn *.* 전 대구 촌놈인데 대학교 갈려다가 무작정 서울상경해서 스타워즈인가… 빌딩13층 nhn 무작정 찾아갔죠 ㅡㅡ; 근데 양쪽에 문인가 ㅡㅡㅋ 카드있어야들어가데요 -0-;;( 제가 광고수익모델 관련된쪽에 잡생각이 많거든요 ㅡㅡ; ) 를 A4용지에 무작정 작성해서 도브사장님이 광고문의 하러 카드긁어서 들어가시더라구요 그래서 뒤로 살짝 들어가서 카운터에서 무작정 ” 사장님 보러왔습니다^^” 아가씨왈”예약 하셨나요?” ㅡㅡ^ 아뇨.. 대단한 분이셨다 ㅡ,.ㅡ ㅋㅋ 그래서 빈둥되다가 카운터 아가씨에게 제안서 좀 사장님에게 전해달라고 카고 집에 왔죠 ㅋㅋ 근데 지금 생각해서 괞찮은 모델인데 ㅡ,.ㅡ;; 너무 아마추어틱했고 날려적었어요 ㅡㅡ; 3년정도지난 지금생각해도 아주 좋은 모델이라고 생각해보는데 ㅡㅡ; 저기.. 정찬명님 제가 스스로 웹쪽에 뛰어들어보려거든요 근데 100만원뿐이라 머어떻게 해야 웹을 디자인하고 구성하고 관리할수 있는지.. 단편적으로 밀리언달러페이지.COM 있자나요 그건 어떻게 짠건지 궁금해용 ㅡㅡ; 초짭니다. 곧 최고가 되서 nhn와 협력하는 사이트 만들꺼예요 ㅡ,.ㅡ 궁금한건요 저기… 인터넷속에보면 광고방법,비즈니스모델등이 벤치마킹이라는 이름으로 마구마구 표절 되자나요 이건.. 어떻게 이해해야되는지 -0-;;궁금해요
정찬명 3월 9th, 2007 at 17:25
장혜원님이 더 대단하신것 같군요. 제가 질문의 요지를 파악하지 못해서 어떤 답변을 드려야 할지 모르겠습니다. 제가 이해할 수 있도록 알기 쉽게 질문해 주시겠어요? 지금 장혜원님의 질문은 너무 포괄적입니다. 좀 더 구체적으로 고민해 보시고 제가 짧게 답변할 수 있는 질문들을 부탁드립니다. 그리고 마케팅 분야는 제 전문문야가 아니라서 섣불리 답변드리기 어렵지만 어디까지가 표절이라고 불러야 하는지 그 경계를 제게 설명해 주실 수 있을까요? 지금의 열정이 수십년간 변함이 없다면 반드시 꿈을 이루실 수 있다고 생각합니다.
Widyou 3월 12th, 2007 at 13:29
안녕하세요
우연히 이곳까지 링크타고 왔는데
알찬 정보가 많은곳 같네요.. 바로 rss추가 궈궈~

웹개발에 관심이 많아서 이곳이 맘에 들은것 같기도 하네요.
앞으로 궁금한거 생기면 바로 메일 날려도 될까요?

잘 구경하고 갑니다~

(미투쓰시네요? 초대장 생기시면 저좀 떠올려주시요.. 하하..)
유지현 3월 12th, 2007 at 13:33
하하..이런..
이름칸에 닉네임을 버릇처럼 써버렸네요..
다른분들 댓글보고 알아챘지만 수정이 안되서..
죄송합니다.. 이런 뻘쭘할때가..
정찬명 3월 12th, 2007 at 14:25
유지현님 반갑습니다 ^^; 닉네임 쓰셔도 괜찮습니다. 실명쓰는건 제가 좋아하는거지 다른분들에게까지 권장하거나 강요하는건 아닙니다. 닉네임을 쓰시고 싶으시면 그냥 편하게 닉네임 쓰셔도 됩니다. 여기가 공산국가는 아니잖아요 ^^ 궁금한거 생기시면 여기든 어디든 보내주시구요. 안타깝게도 미투데이 초대장이 4장 뿐인데 지난주에 이미 예약이 다 끝나서 드릴수가 없게 되었습니다. 메일로도 요청하신 분이 있는데 두분 모두에게 무척 죄송하네요. 또 초대장이 나오거나 아니면 정식 서비스가 런칭될 때까지 기다리셔야 할 것 같습니다. 초대장 아끼는 더블트랙이 오늘은 참 야속하네요 ㅡㅜ; 사람을 이렇게 미안하게 만들고 말이죠 ㅜㅜ;
nmind 3월 12th, 2007 at 17:58
찬명님 질문이 있습니다.
드림위버8에서 리모트 정보와 테스트 서버 주소를 입력해서 사용중인데 프로그램만 끄면 저장해논 아이디와 패스워드가 없어져 버리는데 무슨 좋은 방법이 없을까요?
정찬명 3월 12th, 2007 at 18:27
nmind님, 저도 그런 경험이 있는데요. 아마 설치파일중에 어떤 파일이 삭제되서 그런것 같습니다. 저는 레지스트리 청소기를 한번 잘못 돌린 이후로 그런 증상이 나타나서 완전히 삭제하고 다시 설치를 했습니다. 이런 경우는 아마 Adobe에 문의를 하셔도 다시 설치하라는 말 밖에 들으실 수 없을껍니다.ㅡㅡ; 다만, 다시 설치하시기 전에 사이트관리 대화상자를 이용해서 사이트 ‘내보내기’ 기능을 먼저 수행하시면 예전의 사이트 설정을 다시 ‘불러오기’ 하여 사용할 수 있게 됩니다.

만약 등록된 사이트가 10개라면 ‘내보내기’를 10번 수행하셔야 합니다. 그건 좀 불편하죠 ^^;
Widyou 3월 13th, 2007 at 7:09
하하 마음만이라도 감사합니다
너무 미안해하시니까 제가더 미안하네요

자주 들르게 될 것 같습니다.. 잘부탁드립니다
pompon 3월 14th, 2007 at 9:59
안녕하세요? 네이버블로그에서 web 2.0에 대한 좋은 자료 접하고
이리로 넘어왔습니다
저는 웹디자이너입니다.
프리로1년정도 일했고 조그만한 웹에이전시에서 일한지 6개월 정도밖에 안되었고 회사에서 임금이 나오질 않아 다른 곳에 지원하면 경력이 모자른다고 퇴자맞기 일수 입니다.
하여 지금 가지고 있는 기술에서 좀더 일보전진하고 싶은 생각에
웹2.0을 공부하고자 에이콘에서 나온 책까지 샀거든요.
그런데 어디서부터 손을 대야할지 모르겠습니다.
저는 무작정 노란책부터 연습으로 하고 있는데
또 저희 동료는 xhtml은 결국 xml이니 xml을 공부하는 게 낫다고 하고
뭐가뭔지 맥이 잡히질 않아서 여쭙니다.
어떻게 무엇부터 시작해야할까요?
막연한 질문일 수도 있는데 꼭 도움 얻고 싶습니다.
어떻게든 저는 이바닥에서 살아남고 싶습니다. 경력으로 딸린다고 임금도 안주는 곳에서 마냥 앉아 있을 수 만은 없거든요.
앞서가시는 분으로 도움꼭 부탁드립니다.
감사합니다.
정찬명 3월 14th, 2007 at 10:49
pompon님 반갑습니다. 아직경력을 증명할만한 이력이 쌓이지 않아서 어려움을 격고 계시는군요. 누구나 처음에는 그렇게 시작하는것 같습니다. 저도 그랬고 제가 아는 누구나도 그렇습니다. 하지만 웹 디자이너라는 직업은 포트폴리오가 전부라고 해도 과언이 아닐만큼 다른 경력은 중요하게 생각되지 않는 직업중 하나라고 생각합니다. 저도 직장에서 웹 디자이너 후임을 채용하는 면접에 참여한적이 몇번 있었지만 가장 최근 1~2년의 경력과 포트폴리오를 가장 먼저 보고 중요하게 생각합니다. 오랜 경력이 그사람의 실력과 상관관계가 없는 경우도 많기에 최근 1~2년의 경력만 중요하게 생각하는 것입니다.

프리렌서로 일하시면서 그리고 비록 임금은 받지 못했지만 6개월간 일하시면서 쌓은 포트폴리오를 최대한 활용하세요. 그리고 웹 디자인은 상호작용하는 문서를 만드는 일이기 때문에 그래픽 퀄러티에 못지않게 (X)HTML이나 CSS에 유난히 관심을 가지게 되신것은 당연하고 바람직하다고 생각됩니다. 그리고 웹 표준 퍼블리싱 능력 또한 pompon님의 경쟁력이 될 수 있습니다. 웹 표준에 대하여 혼자 스터디 할 수 있는 자료를 소개해 드립니다. http://naradesign.net/wp/2006/12/18/103/ 몇 권의 책을 소개 하고 있습니다. 그리고 http://standardmag.org/ 라는 커뮤니티 활동에도 관심을 가져 보세요. 저 이외에도 pompon님과 같은 생각을 하고 있거나 도움을 받을 수 있는 전문가들이 많습니다.

그리고 어떤 일을 시작하기에 가장 중요한 것은 바로 동기라고 생각합니다. 단지 살아남기 위해서 어떤 일을 하는 것은 살아남을 만한 정도의 실력만 갖출 수 있을 뿐이라고 생각합니다. 일을 즐기면서 지속적으로 할 수 있을만한 모티브를 스스로 찾아내서 목표로 삼아보시기 바랍니다. 타인과의 경쟁보다 내 자신과 경쟁하고 일을 놀이처럼 생각할 수 있을만한 동기가 있다면, 그리고 그것을 수십년간 지속시킬 수 있는 열정이 확보된다면 어느덧 꿈에 한걸음 다가서 있는 스스로를 발견할 수 있다고 생각합니다. 힘내세요!

PS : 못받은 월급은 저도 소 한마리값 정도 됩니다. ㅡㅜ;
pompon 3월 14th, 2007 at 22:52
답글감사해요..
앞으로 자주 놀러오겠습니다.
^0^;
김정례 3월 15th, 2007 at 0:14
안녕하세요…

오늘도 야근 중입니다…

그 와중에 html 을 table 안에 table 또 그 table 안에 또 table 을 넣지 않는 것이 좋다고 프로그래머가 그러더군요…
그러면서 div 테그에 대해서 말을 하고… 어떤 차이가 있을까 하고 웹에서 검색하여 여기 저기 떠돌다가 나라디자인을 방문합니다….
정찬명님의 일목요연한 정리 글과 친절한 답글까지… 읽어보고 갑니다…

저도 자주 찾아 뵐꺼 같아요… 궁금한 것들이 많아요… 경력은 쌓여가고 있으나 찬명님이 다른 분께 말씀하신 것처럼 중요치가 않으니…
그걸 유지하려면 새로운 것들 트렌드(?)라고 할까요?? 꾸준히 익혀야 되잖아요… 공부할 것들이 많아지는군요… ^^*
정찬명 3월 15th, 2007 at 0:47
김정례님 반갑습니다! 저도 야근 중입니다. ㅡㅜ; 멋진 동료를 두셨네요! 얼마전까지만 해도 제가 유지보수를 담당하던 한 공공기관 웹사이트는 레이아웃을 위한 중첩 테이블을 10여겹이나 사용해서 문서를 편집하려고 열기만 하면 드림위버가 다운되는등 아주 곤란한 상황도 있었습니다. 테이블은 웹페이지의 구조에도 좋지 않지만 웹 문서 저작자에게도 좋지 않다는 거죠 ^^a 여하튼 드림위버가 말을 안듣는 바람에 메모장으로 손코딩하느라고 아주 혼난 기억이 나네요. 부족하나마 많은 도움이 된다면 좋겠구요. 웹 표준이나 접근성에 관련된 고민거리가 있으시면 언제든 환영입니다.^^
민서 3월 20th, 2007 at 17:40
안녕하세요,,책보다 질문이 있어서요..^^
633페이지에서요.
1. [New CSS Rule]-Tag와 Advanced의 차이는 뭔가요?
th, td를 한꺼번에 정의할때 Tag를 쓰면 안되는건가요?그룹이기 때문?

2. 책대로 따라하다 보니 CSS가 요렇게 나오는데요.

border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #ccc;
border-bottom-color: #ccc;

책에는
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;

요렇게 나와있는데 말이져..왜 그런건가요?
다시 정리를 해줘야 하는건지..알려주세염..
민서 3월 20th, 2007 at 17:41
아..괄호가 없어져 버리넹..
1번 질문 다시요.
1. [New CSS Rule]-Tag와 Advanced의 차이는 뭔가요?
th,td 를 한꺼번에 정의할때 Tag를 쓰면 안되는건가요?그룹이기 때문?
민서 3월 20th, 2007 at 18:15
3.640페이지에서 레이아웃용 div 잡을때 손코딩으로 잡아줘야 하나요?
드림위버에서 넣는 방법이 있는지요?
민서 3월 20th, 2007 at 18:16
아..3번질문은 취소여~ㅎ..이런 바보같은 질문을..-_-
정찬명 3월 21st, 2007 at 0:06
민서님께, 휴~ 다행입니다. 비교적 쉬운질문을 해주셔서요^^; 어려운 질문 하실까봐 사실 조마조마 해요~ㅎㅎㅎ.

답변 1)
드림위버에서 Selector 를 지정하실 때 Class, Tag, Advanced 를 선택하게 되어있죠. th, td 는 사실 Type Selector(=Tag) 이기 때문에 원래는 Tag를 선택하셔도 되지만 th, td를 한꺼번에 그룹지어 정의하려고 하기 때문에 Advanced 를 선택하는 것입니다.(추측하신 상황이 정확히 맞습니다.) 만약 Tag 를 선택하신다면 th 따로 td 따로 두 번 정의하시거나, 또는 th 한 번만 정의하신 다음에 CSS 코드를 직접 찾아서 th 선택자에 td 를 추가로 적어주셔야 한답니다. 동일한 스타일을 적용할 것임에도 불구하고 th 와 td 를 따로 두 번 정의 하는 방법은 비효율 적이기 때문에 책에서는 한꺼번에 정의하고 있는 것이죠. 한편 Advanced 를 선택하시면 이렇게 여러개의 선택자를 한꺼번에 묶어서 정의할 수 있고 ID 와 pseudo-class 를 정의할 수 있습니다.

답변 2)
민서님께서 작성하신 코드와 책에서 제시하고 있는 코드의 렌더링 결과는 동일합니다. 다만 책에서는 대표속성을 사용하고 있습니다. 책 602~604 페이지에 보시면 대표속성에 대한 이해와 드림위버에서 대표속성을 사용하는 방법에 대하여 설명되어 있습니다. 우선 급한대로 여기서 설명드리자면 Preperences(Ctrl+U) > Category > CSS Styles > When creating CSS rules: Use shorthand for > (Font, Background, Margin and Padding, Border and border width, List-Style) 항목에 모두 체크하시면 앞으로는 대표속성으로 코딩될 것입니다.(이 설명은 604 페이지에 있는 내용이죠 ^^) 대표속성으로 코딩하는 방법은 코드 수를 줄여주며 코드의 가독성을 높여줍니다. 대표속성에 대하여 책을 읽어보시고 이해가 부족한 부분이 있다면 다시 질문해 주세요.

좋은 하루 되시구요 ^^

PS : 태그를 지원하지 않아서 제가 글을 수정해 드렸습니다. 나중에 추가로 쓰신 글들은 원하시면 지워드릴께요 ^^
민서 3월 21st, 2007 at 10:16
자세한 답변 감사합니다..^^
앞부분을 건너뛰고 보다보니..
모르는거 있음 또 올게요~~휘리릭))))))))))))))))))))))))
강성국 3월 30th, 2007 at 19:25
안녕하세요!

맛집 처럼 사람이 붐벼서 제가 들어갈 틈이 없네요 ㅎㅎ

저두 질문이 있어서 왔어요 ㅎ.ㅎ;;

div 박스를 브라우져 크기 상관없이 수직, 수평 가운데 정렬을 하고 싶거든요.
div 박스안에 div를 만들면 답이 아닌것 같구요.

좋은 방법을 지도 받고 싶습니다 (__)

잘부탁드립니다 꾸벅 (__ );;
정찬명 3월 30th, 2007 at 19:50
box의 width와 height값이 px으로 고정된 상태라면 그것이 가능 합니다. 하지만 box의 너비와 높이가 유동적인 값이라면 수직 수평 정렬은 불가능 하게 됩니다. box의 너비와 높이가 고정된 경우라면 다시 코멘트 주세요. 예제코드를 보여드리겠습니다.
김안주 4월 3rd, 2007 at 16:40
안녕하세요..^^
웹표준에 대해 관심 갖고 공부하고 있는 디자이너 겸 코더 인데요…^^a
검색 하던중 이곳에 들어오게 되었어요.
제가 필요했던, 궁금했던 많은 정보를 얻어갈 수 있어서 너무 좋았어요..
감사의 뜻으로 이렇게 흔적 남깁니다. (__)(^^)
앞으로 자주 올 것 같아요. ^^
정찬명 4월 3rd, 2007 at 18:05
김안주님, 반갑습니다^^; 흔적 남겨주셔서 감사합니다! 보람 만땅~ 기분좋네요^^
정찬명 4월 4th, 2007 at 21:26
[공지] CSS 벗기 행사(CSS Naked Day)에 참여중입니다! 제 블로그는 4월 5일 하루동안 External CSS가 제거된 상태로 보일 것입니다.
최용진 4월 5th, 2007 at 9:52
나라디자인이 위키형태로 바뀌었네.. 잘 지내지 찬명아…어제 간만에 기영이랑 술 한 잔 기울이면서
네 얘기 했다…바쁘게 지내는 것 같아 보기 좋네.. 종종 와서 봐도 웹표준 공부에 도움이 많이 된다…
요즘에 우리회사 디자이너 담당 하는 친구도 웹표준에 강한 충격을 먹은 듯, 웹 표준 보는 게 재밌다고
하더라구..Head First 던가 그 책 사서 열심히 공부 하더라구..
수고하구..숙하고 울 아람이도 보고 싶네.. 어떻게 지내는 지.. ^^
정찬명 4월 5th, 2007 at 10:29
형~ 보고싶어요~ 저도 형 생각 많이 하면서 지내고 있습니다. 벌써 이곳 올라온지 45일 정도 되네요. 대전에는 부모님 뵈러 한번 내려갔다 왔는데 시간이 여유가 안되서 연락도 못하고 왔네요. 찐하게 술 한잔 하고 싶은데 말이죠. 제 블로그가 위키형태로 바뀐것은 아니구요^^ CSS 디자인을 하루동안 벗겨놓는 행사에 참여하고 있는 겁니다. 웹 표준을 지키게 되면 CSS를 제거해도 문서의 구조가 깨지지 않는다는 것을 보여주는 퍼포먼스 같은 거에요. 매년 4월 5일 지구촌의 모든 웹 개발자들이 이 행사에 참여하는 그날까지!ㅎㅎㅎ. 디자이너분께 CSS가 제거된 제 블로그 한번 보여주세요. 아마 내년에는 그분도 참여하게 될껄요.ㅎㅎㅎ. 한잔 기울이는 그날까지 항상 건강하시구요!
황수진 4월 5th, 2007 at 11:28
안녕하세요, ○○은행 e-비즈니스부의 황수진이라고 합니다.
웹표준, 웹접근성 관련하여 몇가지 궁금한 점이 있어서..
dece24앳gmail.com 으로 메일을 보냈습니다.
바쁘시더라도 꼭 한번 읽어보시고, 아낌없는 조언 부탁드립니다.
정찬명 4월 5th, 2007 at 14:17
황수진님, 반갑습니다. 회신해 드렸습니다. 일단 빠른 회신을 드리기 어렵다는 양해말씀을 드렸구요. 너무 좋은 질문을 주셔서 그 질문목록과 저의 답변 목록을 다른 분과 공유해도 될런지 요청드리는 내용의 회신을 보냈습니다.

PS :
수진님의 글 중 제 이메일 주소가 스팸로봇에 노출이 될 우려가 있기 때문에 ‘@’ 를 ‘앳’ 으로 수정 하였습니다.^^;
정찬명 4월 7th, 2007 at 1:39
[공지] CSS 벗기 이벤트를 마칩니다. 식목일과 같은 날이었는데 나무를 심지 못한 대신 많은 분들에게 웹 표준 마인드를 심어 주었던 날이라고 생각합니다 ^^; 행사 끝. -주인백-
주인선 4월 10th, 2007 at 9:50
안녕하세요.
홈페이지에 자주 방문 할같아요 ^-^
좋은 정보 감사히 얻겠습니다.
정찬명 4월 10th, 2007 at 10:46
주인선님, 반갑습니다^^ 잘 보시고 좋은 내용은 다른분께도 반사시켜 주세요.(넉살도 좋군요ㅡㅡ;) 댓글 감사합니다. 좋은 하루 되시구요~! ^^
황태경 4월 13th, 2007 at 20:29
안녕하세요. 황태경이라고 합니다.
조용히 읽기만 하고 흔적도 안 남기면서 가끔씩 들르기만 하는 사람입니다.
찬명님의 댁에 제가 자주 들르는 이유는
컨텐츠가 엄~청 많아서도 딱히 아니고, 디자인이 엄~청 좋아서도 아닙니다.

찬명님의 글체가 맘에 듭니다.
[..했어여~], [..님아] 등등등…아시죠? 제가 이런말 싫어라 하거든요.
물론 포스팅 해주시는 알찬 내용은 읽는 사람으로 하여금, 참 정성들여 올려주시는 구나…
하는 걸 충분히 느낄 수 있을만큼 알찬 내용입니다 ^_^
앞으로도 종종 방문하겠습니다. 쭉 알차고 좋은 포스팅 부탁드립니다.
좋은 하루 되세요
황태경 4월 13th, 2007 at 20:30
참 제 홈페이지는 아직입니다.
얼마전까지 있었는데, 여차저차 닫은채로 아직이네요.
나중에라도 오픈하면 인사드릴께요
황태경 4월 13th, 2007 at 20:39
도배하는 것 같아서 죄송한데 말씀 드릴께 있어서 다시 왔습니다. 하하하
방명록 [새글쓰기]의 최소 양식에 그러니까, 이름과 이메일 말입니다.
쿠키로 남겨 놓으시는 방법을 선택하셨군요. 많이들 쓰는 방법이잖습니까?
근데 저도 정찬명님과 같이 스펨메일을 죽어라 싫어 합니다.
그래서 예전 있던 제 홈페이지에선 이런 쿠키 기능, 특히 이메일관련은 절대 쓰지 않았습니다.
아시다시피 요즘 (일명)봇들이 워낙 다양한 방법으로 이메일을 수집하잖습니까?
그 수많은 방법중, 이 쿠키를 훑어보는 놈들이 극소수지만 있다고 저명한 보안관련 사이트에서
말하더군요.
물론 웹상을 돌아다니는 봇이 아닌, 악성코드 형식으로 뿌려져 개인 PC의 로컬을 뒤적거리는 그런 것 들이겠죠…

저 편리한 기능의 대안은 못 올리고 도망 갑니다.
황태경 4월 13th, 2007 at 20:48
앗 또 도배를…
제가 정찬명님 홈페이지 제대로 안 훑어보고 쿠키 어쩌고 하면서 아는체를 했군요…
이런 컴맹 들켰다..
바로 밑의 글은 없던걸로 해주세요 ㅠ_ㅠ
근데 방명록 글 수정,삭제도 가능케 해주세요~!!
정찬명 4월 17th, 2007 at 3:14
황태경님, 반갑습니다! 오늘 하루가 어떻게 지나갔는지도 모르게 가벼려서 무척 늦게 답변 드리네요^^; 저에게도 스토커가 생긴것 같아서 무척 기분 좋습니다. 방명록을 이렇게 요란하게 작성 해주시다니요ㅎㅎ. 제가 워드프레스를 고쳐서 쓰다가 보니까 이메일 받는 폼이라던가 등등.. 제 마음대로 바꾸기엔 제 능력밖의 일이었습니다. 아마 대안을 말씀해 주셔도 제가 바꾸기는 쉽지 않을것 같습니다. 그리고 평범한 제 문체를 좋아해 주신다니 감사합니다. 제가 블로그를 쓰는 이유중의 하나는 제 지식을 다른분들과 나누기 위함인데 읽는 독자를 생각하면 반말을 해서는 안될 것 같다는 생각에 존칭을 쓰고 있습니다. 또 지나치게 격의 없이 하거나 한글의 품위를 해치치 않으려고 노력하는 편입니다. 그러다가 보니 글이 좀 딱딱한 느낌이라 읽기에 편하지는 않으실텐데 그래도 그렇게 봐주시니 얼마나 황송한지ㅎㅎ. (’ㅎㅎ, ㅋㅋ’ 이정도는 애교라고 생각하고 자주 씁니다^^; 하지만 이마저도 보기싫다고 하시는 분들도 분명 있으실 꺼에요). 여하튼 칭찬해 주시니까 또 힘내서 밀린 포스팅 해야겠다는 생각이 불끈 솟아오르는데요. 직장을 옮긴 이후로 요즈음 너무 바빠졌어요. ㅡㅡ; 새 환경에 완벽하게 적응할 때 까지 좀처럼 여유시간 찾아쓰기가 쉽지 않을 듯 합니다. 황태경님, 오늘도 좋은 하루 되시구요! 그리고 방명록 도배는 언제든 환영입니다.ㅎㅎ.
가우리 4월 18th, 2007 at 21:21
이번 KWAG 워크샵되 뵈려는데, 아쉽게 놀토에 학교에서 꽃동네로 끌고가네요…

저 대신 제 친구 흥섭과, 현인 그리고 동아리 후배인 성범군이 출동합니다!
정찬명 4월 18th, 2007 at 21:49
아.. 안타깝네요. 저는 그 전날 회사 워크샵(안면도..)에 참가하느라 KWAG 행사에 늦을 수도 있겠어요. 아무래도 그럴 확률이 높아 보이네요. ㅡㅡ; 그런데 저희는 이미 안면이 있지 않던가요? ^^a (정확하게 기억이 잘 안나는군요 ㅡㅡ;) 여하튼 다시 선린인터넷고 멋쟁이들과 만날 생각하니 설레여요! ㅎㅎㅎ.
가우리 4월 19th, 2007 at 21:09
이미 안면은 있죠! ㅋㅋ
CDK 2차때는 저도 앞에 나가서 발표했습니다
이정주 6월 5th, 2007 at 22:23
안녕하세요 선배님. 정주고닷컴의 이정주입니다.

윤석찬님 통해 이렇게 선배님도 만나고 기분이 좋내요.
더군다나 같은 분야의 선배님을 말이죠.

저는 드림위버 CS3를 즐겨쓰는데 모르는거 있음 물어봐도 될지요??^^

현재는 석사로 활동중입니다.

데브나이트 행사는 대전대학교 컴퓨터공학과 학생들에게 열정과 경험을 심어주고자 데려가 보았습니다.
그러다 그중 제일 많은 집단이었던것 같내요.

아무튼 후배로서 너무 반갑고 좋은 자료들 많이 있어 아마 자주 찾아올것 같습니다.

그럼 안녕히계세요
정찬명 6월 7th, 2007 at 1:26
후배님 반가워요! 이렇게 만난것도 반가운데 같은 학교 후배가 뜻깊은 행사에 참여해서 좋은 성적 거둔것도 축하할 일이네요 ^^ 드림위버를 CS3를 사용한다니 질문은 언제든 환영이구요~ 같은 분야에 있으니 언젠가 우리 만날 날을 기약해요 ^^
이정주 6월 14th, 2007 at 0:11
선배님~ 선배님의 플리커에서 사진을 보고 왔습니다.
사진기를 너무 잘 다루시는지 너무 잘 나왔습니다. 저도 사진을 좋아하여서 큰돈 들여 DSLR을 2년전에 구입했지만 실력은 여전히 냉냉한 수준입니다.T_T(현재는 렌즈탓을 하고 있습니다)
엇 그리고 밑을 보는 순간 웹어플리케이션 컨퍼런스 2007에 참가 하시나 보내요?
저는 엊그제 신청을 했습니다. 지방에서 오면 무료라고 하더라구요. 좋은 시간이 될 것 같습니다.
그런데 열정적인 학생들 몇명을 데리고 가려고 하는데 영 나서는 사람이 없어서 안타깝습니다. 더군다나 시험기간이라 시험에만 집중되어 있는 상태구요.
현재 저는 프로젝트 참여중인데도 불구하고 가려고 합니다. 뜻깊은 자리 놓칠수가 없더라구요.
선배님이 언젠가 볼거라고 예측한게 벌써 다가올지도 모르는 예감이 사뭇 드는군요.

만약 저의 레이더망에 선배님을 보게 된다면 먼저 인사드리겠습니다.^_^
시력이 1.5라 레이더망이 쫌 넓습니다..^^
정찬명 6월 14th, 2007 at 10:11
어랍~ ㅎㅎ 우리 벌써 만나는 건가요? 저는 사진촬영 자원봉사로 신청을 해 둔 상태 입니다. 지방에서 오면 무료라구요? 정말 좋네요.ㅎㅎ 훈훈한데요. 시험기간임에도 이런 컨퍼런스에 참여하는 그 열정이 부럽습니다. 후배님 얼굴을 제가 모르니 저를 잘 찾아봐 주세요^^
박주헌 6월 15th, 2007 at 17:05
안녕하세요 ^_^ 웹표준과 웹접근성에 관심이 많은 학생?입니다ㅎ
자주 이 사이트 들렸었는데 처음으로 글을 써보네요ㅎ
이 사이트에서 웹표준과 웹접근성에 대한 많은 정보들을 얻었네요ㅎ
항상 사이트 제작시 table 로 레이아웃을 짜다가 css 를 이용하여 레이아웃을 짜려니깐 여간 힘든게 아니네요
제가 준비하는 대회가 하나 있는데 대회 규정이 웹표준을 준수해야되다보니 평소에 하던 방식을 바꾸려니깐 어렵네요ㅠ_ㅠ
앞으로 좋은 인연 됐으면 해요^____^
진사야 6월 18th, 2007 at 17:32
안녕하십니까 :-)
웹표준과 관련한 정보를 얻으려고 떠돌아다니다 슬쩍 들러보았습니다.
유용한 자료들이 많네요. 오아시스 하나를 본 느낌입니다 (??)

앞으로 종종 들러서 배우고 가겠습니다-
아무쪼록 잘 부탁드립니다. 좋은 하루 보내세요 -
정찬명 6월 18th, 2007 at 19:04
박주헌님 반갑습니다. 학생으로 믿어야 할지 아닌지 아리송 하지만 저와 같은 분야에 관심 가지신 분을 한 분 더 만나게 되어 무척 기쁩니다^^ 무척 훌륭한 대회가 있군요.ㅎㅎ. 어떤 대회인지 살짝 소개시켜 주세요~ ^^ 좋은 성적 거두시길 간절히 기원드립니다. 아자~ 아자~!
정찬명 6월 18th, 2007 at 19:09
진사야님 반갑습니다! 오아시스라고까지 표현해주시니 몸둘바를ㅎㅎ~ 저야말로 잘 부탁드리구요. 만약 뭔가를 배우시게 되시면 제게도 가르침을 좀 전수해 주세요. 요즈음 공부를 좀 안했더니 무척 뒤쳐진 느낌이 드네요 ㅡㅜ; 저도 잘 부탁드립니다^^ 사이트 공사중이시던데 완벽표준 지켜서 멋지게 오픈하세요~! 사이트 얼마나 완성 되었는지 종종 감시하러 들르겠습니다. ㅋㅋ.
이정주 6월 19th, 2007 at 21:53
선배님 아무래도 대전대컴공과에서는 혼자가게 될 것 같네요. 일단 저도 스탭을 하고 싶었지만 스탭은 마감이므로 해당이 안되겠죠? 그래서 나름 비공식 스탭이라 자칭하고 사진이나 많이 찍을려구요. 저의 취미가 영상편집이라서 이번 행사도 영상 하나 만들까 하는 생각에 준비중이고 있습니다. 다음의 데브나잇행사도 만들어야 하는데 컴퓨터가 엊그제 작동을 시작해서 늦어지고 있네요. 아무튼 꼭 만나뵙고 싶네요. 힘이 되신다면 저를 보조스탭으로 좀 어떻게 안될까 하는 조그만한 바램이 생기네요–;;;
낼모레 뵙겠습니다~^^
정찬명 6월 20th, 2007 at 10:18
오~ 영상 편집이라.. 오히려 제가 찍은 사진을 영상편집할 때 넣어달라고 부탁해야 겠는걸요 ^^; 동영상에 멋진 스틸사진이 필요하다면 언제든 제것을 가져다 써주세요. ㅎㅎ. 내일 보자구요~!
민서 6월 22nd, 2007 at 11:26
안녕하세요…전에 몇번 들렀다가 질문드리곤했는데 기억하시는지..^^
요즘 표준코딩으로 이래저래 만들고 있는데요, 적응이 안되서 그런지 막히는 부분이 의외로 많더라구요.
제가 의도했던 데로 잘 안나오기도 하고…원하는 위치가 아닌 엉뚱한데 가 있기도 하고…
특히 처음 레이아웃잡을때 시간이 꽤 걸리더군요..소스찾아보면서 코딩할려니까 짜증나기도 하고 그렇더라구요..ㅠㅠ
(확, 테이블 코딩으로 쓱삭쓱삭 해치우고 싶은 생각이..ㅎ)
찬명님 책을 간간이 보기도 하는데 웹표준에 관련 예제는 뒤쪽에 조금밖에 나와있지 않아서 아쉽더군요.
드림위버8의 기능에 관한 내용이 대부분이고 나와 있는 예제도 기존 테이블코딩으로 되어 있는 것이더군요.
그래서 웹표준으로 만들어진 다른 사이트를 보면서 소스를 분석해보고 있거든요. 그런데 그것도 다들 제각각이라..-_-;;
좀 더 세부적으로 공부하려면 xhtml 관련서적같은걸 봐야할까요? 조언 좀 부탁드림다.
정찬명 6월 23rd, 2007 at 3:56
예전에 제가 소개해 드린적이 있는 자료들도 읽어 보셨나요?
http://naradesign.net/wp/2006/12/18/103/

제가 쓴 책은 공저된 서적이었고 당시 다른 저자분들께 웹 표준 기반의 저술을 부탁했지만 그분들의 상황이 허락하지 않았기에 아쉬움이 많이 남습니다.

그리고 http://standardmag.org/ 포럼에는 CSS 전문가들이 많으므로 그곳에서 많은 질문과 답변을 검색해 보시기 바랍니다. 웬만한 답은 그곳에서 거의 찾으실 수 있습니다.

또는 조훈, 신현석 님의 CSS 관련 강좌를 한번 들어보시는 것도 좋을것 같습니다. 대부분 유료라서 부담이 되실까 모르겠지만 아깝다고 생각하지 않으셨으면 좋겠습니다.
이정주 7월 2nd, 2007 at 12:06
그동안 잘지내셧는지요? 저는 웹앱스콘에서의 여파가 아직도 가시지 않은채 잘지내고 있어요. 그당시 아침부터 건강하기만 했던 저 자신이 초기감기 증상으로 많이 힘들어했습니다. 왜 그날 감기가 걸릴려 했는지 모르겠네요. 마지막 전길남박사님께서 운동하라는 메시지가 확 와닿더군요. 그리고 그날 기차시간이 다되어가서 인사도 못드리고 가버렸어요. 너무 죄송하내요. 더군다나 그 기차는 이미 떠난지라 약 3시간 대전에 늦어졌내요. 그다음날 회사에서 거의 시체급 상태였내요.^^ 다음에 또 뵈요~ 같이 식사할 여유라도 있었음 좋겠습니다. 그럼 다음에 또 뵙길 바라겠습니다.
정찬명 7월 3rd, 2007 at 22:03
지금쯤 건강은 좋아졌나요? 대전가는 기차 생각보다 일찍 끊기더군요. 저도 대전에서 서울 세미나 참석했다가 기차 끊어져 찜질방 신세 진적 몇번 됩니다 ㅡㅡ; 분당에 오면 언제라도 연락해요. 대단하진 않지만 저희 사무실 구경도 시켜주고 밥도 살께요. 후배들 함께와도 좋아요. ^^
전승엽 7월 4th, 2007 at 10:38
반갑습니다. 웹표준에 관심(?)많은 ㅋ 퍼블리셔입문한지 3개월차 완전 신입인 전승엽이라고 합니다.
처음 공부 하면서 요기 사이트(? _ 처음엔 무슨 회사 사이튼줄 알았습니다 *.*)자주 와서 글보구 갔는데.
네이버 카페 타고 들렸습니다.ㅋㅋ

알면 알수록 공부 할께 많아지고 알아야 할것들이 많아져서 조금은 부담 스럽기도 하지만 멋진 기술,여러표현방법등 정말 멋진것 같습니다.

앗 웹 컨퍼런스에서도 얼굴뵙고 카페에서도 얼굴 뵙고 요즘 하코사 유명인들이 많이 찾아주셔서
완전좋아요 앞으로도 좋은 글 정보 부탁 드립니다.
열심히 공부해서 웹표준을 온천하에~~~ㅋㅋ
이정주 7월 9th, 2007 at 17:28
웹접근성 경진대회….

해야지 하고 예전부터 맘먹고 있다가 어제 메일로 대학원 접수 가능한지 물었더니 해당이 안된다 하더군요. 다시 대학생으로 가고 싶네요…방학이라 학생들 수집할 여력도 없고…대학생의 특혜를 많이 못누려서 정말 아쉬어요. 학부생 몇명 소집하여 참가하라고 권고해봐야겠네요.:)
이젠 슬슬 프리랜스를 계약기간이 끝날 시기가 오내요. 일 끝마치고 웹의 벌판에 막 뛰어 놀려구요. 함께 놀아주시길 바래요 :)
정찬명 7월 9th, 2007 at 20:18
전승엽님, 반갑습니다. 입문한지 3개월이라고 하셨는데 저는 웹에 입문한지 5년만에 웹 표준을 알게 되었습니다. 부끄럽지만 늦게라도 바른 웹 쟁이(?)가 되려고 노력하고 있구요. 승엽님과 같은 생각을 지닌 분들이 더욱 많아졌으면 좋겠다는 생각을 합니다. 알면 알수록 공부할게 많아진다는 말에도 공감해요. 저도 아직 모르는게 백만개 정도 되는것 같습니다.
정찬명 7월 9th, 2007 at 20:27
만약 대전대학교에서 이 대회에 참가한다면 제가 도움이 될 수 있을꺼에요. 모교를 위해 할 수 있는 일이 별로 없었는데 그럴수만 있다면 대환영이죠. 후배들이 이 대회에 접수하게 되면 귀뜸해 주세요.(물론 본인들이 도움을 받기를 원할 때만..^^) 접수하기 전에 제출물(코딩 결과물)을 한번 리뷰해 줄 수 있어요.
정유희 7월 11th, 2007 at 11:24
이런~!!!!
얼마전에 “감격시대” 지나다가 찬명씨 생각나서 간만에 들어와 봤는데. 회사를 옮겼군요!. @.@
nhn 이라~ 잘되었네요~! 아예 서울로 올라갔나봐요. 볼일이야 많지 않아도 그래도 많이 아쉽네요!
미투데이에는 화가 왜그리 난거에요. 답지 않음~ ㅎㅎㅎ~
유명세 속에 항상 치르는게 그런거 쟎아요. 막상 당하면 난 더 열받겠지만~
지토피아 식구들 다들 잘 지내시는지 궁금하네요! 먼동네서 건강하세 지내요! 안뇽~ @.@/
정찬명 7월 11th, 2007 at 20:47
와우~!!!! 유희씨 반가워요. 제가 하도 ‘감격시대’를 좋아하다 보니 그곳에서 저를 떠올리게 되는 군요 ㅋㅋ. 어쨌거나 유희씨 기억속에 남아있다는 사실에 감개무량 하네요.(비록 그것이 술집 때문일지라도.ㅡㅡ;) 지토○아에 있던 eBI 팀원 모두 이엔지로 소속 옮겼어요. 알고 있었던가요? 암튼 저는 지금 분당에 와 있고 한달에 한두번 정도 대전에 내려간답니다. 유희씨도 건강하고 행복하세요!
류준호 7월 14th, 2007 at 23:43
댓글을 달아주신 덕분에 블로그 주소를 알게 됐네요. 재미있는 정보들을 알게 되어 기쁩니다. ^^
정찬명 7월 16th, 2007 at 20:35
좋은글을 포스팅 해주시니까 댓글 드렸지요 ^^ 저도 류준호님 블로그를 알게 되어 기쁩니다!
이정주 7월 17th, 2007 at 22:02
휴~ 경진대회 참가가 힘들어졌네요. 대대적으로(나름) 광고를 했는데 방학이라 그런가 팀 모집이 한명도 안되었어요.T_T 더군다나 참여중인 프로젝트에 감리가 화요일 부터여서 휴일조차 일을 하니 짬이 안나구요. 대학원생도 포함 되었더라면 어떻게든 혼자라도 나가는데 뜻깊은 대회에 아쉬움만 생기네요. 그래도 공부한답시고 짬나는 시간에 접근성에 대한 자료를 읽어보았는데 이참에 공부한거 같네요. :) 선배님 언젠가 모교에 도움이 될 수 있는 기회를 마련하도록 노력할께요. 그때 많이 도와주세요. :)
정찬명 7월 18th, 2007 at 13:37
저런.. 안타깝지만 다음에도 좋은 기회가 또 생기겠죠 ^^ 도움이 필요하면 언제든 OK~
장성민 7월 20th, 2007 at 19:24
안녕하세요.
항상 포스팅된 글들 보면서 많은 공부하고 있습니다.
콱모임때 뵙고 명함을 받아놓기는 했는데, 연락을 드릴 기회가 없었네요. 요즘 통 모임도 없구요.
궁금한 것이 있어서 메일을 보낼까 하는데 괜찮을까요? (gmail)
ㅋㅋ 시간나실때 답변 주시면 정말정말 감사할 것 같습니다.
좋은 글 계속 써주세요. ^^
정찬명 7월 21st, 2007 at 1:16
안녕하세요? 반갑습니다.^^ 장군님 블로그와 우리나라 블로그 잘 보고 왔습니다. 특히 ‘우리나라’ 라는 음악팀이 있다는 사실을 알게 되어 무척 기쁩니다. 콱 모임에도 나오셨었군요. 그곳에서 워낙 많은 분들과 인사를 나누다 보니 모두 기억하지 못해서 가물가물 한점 양해해 주세요 ㅡㅡ; 궁금한게 있으시면 언제든 메일 주셔도 좋습니다. 물론 방명록을 이용하셔도 좋구요. 저는 무엇이든 공유하는 것을 좋아해서 가능하시다면 방명록에 글을 써주시는 것을 더 권장드립니다. 혹시 다른분들도 궁금해 하고 있는 것이라면 모두에게 도움이 될 수 있을테니까요. 좋은 하루 되시구요^^
장성민 7월 21st, 2007 at 14:58
^^
바로 답장메일을 보내주셨더라구요.
오늘 당직이라 회사에 왔는데, 뜻밖에 메일이 와서 너무 놀랐습니다.
자세히 성의있게 답장을 보내주셔서 너무 감동받았습니다. ^^
문제에 대한 해결점(기술적인)을 찾기는 했습니다.
하지만, 아직도 정확하게 스스로 정의내리지 못하는 부분들이 있습니다.
이곳에 써서 함께 공유해보자고 하셔서 메일처럼 예제를 넣어서 질문을 드리지는 못할 것 같네요. ㅋ

“이미지라고 해서 모두 표현을 나타내는 것은 아니고, 정보를 포함하는 이미지의 경우는 마크업하는게 맞다”는 말씀에 공감합니다.
이미지대체기법이 접근성을 완전히 담보하지는 못한다는 말씀도 동의합니다. (css 또는 이미지는 disable 시켰을때)

그런데, “정보를 포함한 이미지”와 “표현을 목적으로 한 이미지”의 경계는 어디인가요?

Logo나 Global Menu 탭이미지는 “정보를 포함한 이미지”일까요? “표현을 목적으로 한 이미지”일까요?
해당 섹션의 명칭을 좀더 비쥬얼하게 보여주기 위해 탭이미지를 사용하게 되는데(텍스트로 해도 되지만) 그럼 표현의 영역이 아닐까요?

작업하신 페이지를 봤는데(물론 다수의 제작자들이 그렇게 하고 있으시죠)..
로 마크업하고, alt로 스크린리더 또는 이미지를 disable 시켰을때를 대비하셨더라구요.

메일에도 그게 제일 쉬운 방법일거라고 처음에 말씀드렸습니다.
그런데, 처음부터 ‘구조와 표현의 분리’라는 명제를 원칙으로 현재까지 가져온 저에게는 계속 의문이 생깁니다.
만약, 찬명님께서 탭이미지가(로고이미지가) “섹션명칭(회사명)이라는 정보를 포함한 이미지다”라고 하신다면,
이번 질문의 궁금증은 풀리게 될 것 같습니다.

아는 것이 없어 쓸데없는 궁금증만 늘어갑니다.
다른분들의 의견도 들어보고 싶습니다.
저보다 훨씬 오랫동안 고민과 작업을 해오신 고수분들의 답변 부탁드립니다. ^^
가우리 7월 21st, 2007 at 19:45
웹접근성 경진대회 고등부 출전했습니다.

학원가느라 시간 투자가 별로 안되어서, 좀 아쉬운 면이 있지만 고3이라는 압박에 후딱 끝내고 정리해서 제출하였는데,

20일에 KADO에서 전화가 왔는데, 학원에 있어서 결국 못받았네요…
정찬명 7월 21st, 2007 at 19:54
이미지라고 해서 모두가 표현요소는 아닙니다. 이미지가 비록 표현요소를 포함하고 있지만 이미지에 텍스트가 포함되어 있거나 그 이미지를 제거 했을 때 콘텐트를 이해하는데 문제가 생긴다면 그것은 더이상 표현요소가 아닌것이 됩니다.(구조가 되는거죠.) 위에서 말씀하신 탭이나 로고와 같은 경우 분명히 텍스트를 포함하고 있을 것이며 그러므로 더이상 표현요소가 아니기 때문에 CSS를 이용하여 배경이미지로 빼는것은 적절하지 않고 img로 마크업 한 다음 대체 텍스트(alt)를 적어주는 것이 정석입니다. 즉, ‘이미지는 모두 표현이다’ 라는 생각은 참이 아닙니다. 또한 표현요소로서 분리해야 하는 이미지는 명백하게 정의되는데 그것은 아무런 ‘의미’를 갖지 못하는 이미지(블릿, 아이콘, 배경…) 입니다. 결국 ‘의미’가 있느냐 없느냐를 기준으로 ‘구조냐 표현이냐’를 가늠하신다면 판단이 좀 더 뚜렷해지실것으로 생각됩니다.
정찬명 7월 21st, 2007 at 20:11
가우리님 팀의 멋진 작품을 기대하겠습니다!
장성민 7월 23rd, 2007 at 10:06
^^ 넵
자세하게 설명주셔서 감사합니다.
쓸데없는 고민에 파묻혀있었는데, 조금은 빠져나오게 되었네요.
^^ 감사합니다~~~~
정낙훈 8월 19th, 2007 at 7:30
이번 제로보드 기본 스킨의 UI를 담당하셨지요? 최근 포스팅된 글을 보면서 기본 스킨의 UI에 대해서
많은 고민을 하셨다는 것을 알게 되었습니다.
그런데 사용을 하다보니 불편한 점이 있더군요.
바구니와 관련하여 이전 ZB4에 있던 전체글 선택하기나 전체글보기기능이 없더군요. 그 이유는 무엇인가요?
편리성을 생각하면서도 그 기능을 넣지 못했던 것은 아마도 제로님의 분류와 제목을 한 셀에 두자는 의견 때문이 아닐까 라고
생각되는데요 이에 대한 정찬명님의 생각은 어땠었는지 여쭙고 싶습니다. ^^;

제 생각에는 분류와 제목을 같은 셀에 두면서
다시 그 셀안에서 2개의 DIV로 나눠서 왼쪽정렬과 센터정렬로 두고 바구니전체선택버튼도 분류왼쪽에 두어도 됐을 것 같거든요.

전체글선택 기능이 왜 없는지와, 한 셀 안에서 다시 셀2개로 나누는 것은 어땠는지에 대한 질문입니다.
답변해주실 수 있으시지요. ^^; (여기서 셀이라고 한 것은 한 칸 한 칸 할 때 칸이라는 의미라는거 아시죠.)
정찬명 8월 20th, 2007 at 13:06
전체글 보기 메뉴가 빠진것은 저는 미처 생각하지 못한 부분이었습니다. 전체 글 보기 기능에 대한 제안은 고영수님께 직접 제안해 주시면 좋을것 같습니다. 그리고 제목에 해당하는 헤더셀 내부에 div 를 두어서 분류를 위한 셀렉트 메뉴를 왼쪽으로 정렬시키고 제목 이라는 타이틀을 가운데로 정렬하는 문제는 조금전에 고영수님께 제안드렸고 반영해 주시겠다는 응답을 들었습니다. 지대한 관심과 피드백에 감사드립니다.^^
정낙훈 8월 27th, 2007 at 9:48
혹시 질문 한 가지만 해도 될까요? ^^;
웹접근성과 웹UI에 있어서 홈페이지 내의 광고에 대해서 알아볼 수 있는 자료는 없을까요.
요즘에는 쉽게 특정 광고주가 아니라도 구글 애드센스를 이용하여 누구나가 블로그나 홈페이지에 광고 배너를 달 수가 있는데
메뉴와 컨텐츠 간의 UI 뿐만 아니라 좀 더 접근성이 쉬운 광고 노출과 클릭으로 유도할 수 있는 그런 접근성과 UI 자료는 없을까 해서 말이죠….
웹 접근성과 UI를 따질 때 광고는 생각하지 않을지도 모르겠습니다만.. ?

TV와 CF광고의 영향을 본다면 지금도 네이버, 다음 등 포털에서의 광고 뿐만 아니라
이제는 이런 개개인의 모든 블로거 혹은 홈페이지 관리자에게도 구글애드센스는 TV와 광고의 연관관계가 될 수 있지도 않을까 해서요.

웹에서 움직이는 그러니깐 내 홈페이지 혹은 블로그를 거쳐가는 유동인구가 많을 수록, 또 그 인구 속에서 광고에 노출되는 사람들과
또 그 안에서 광고를 클릭할 수도 있는 사람이 많아지는
그런 UI와 접근성이 광고에 대한 자료도 생겨날 수 있지 않을까 해서 여쭤봅니다. ^^;;
정찬명 8월 27th, 2007 at 10:26
예전에 제가 작성했던 글이 혹시 참고가 되실지 모르겠습니다.
http://naradesign.net/wp/2007/01/04/106/
장성민 8월 28th, 2007 at 18:51
안녕하세요 ^^ 몇일전에 잠시 뵙고 잠시 친한척 했습니다. ㅋㅋ
질문이 있어서 어렵게 글한번 쓸까합니다. 괜찮으시죠? ^^

작업을 하다가 몇가지 궁금한게 생겼습니다.
먼저, display:none; 에 대한 궁금증인데요.
display:none; 은 익히 들어서 스크린리더가 읽지 않는다고 알고 있습니다. (국내 몇은 읽는다는 말도 들었습니다.)
만약 스크린 리더가 읽지 않는다면, 굳이 마크업할 이유가 없을거라는 생각을 했습니다.
하지만, css 를 제거했을때 곧, 텍스트브라우저의 경우를 생각한다면 마크업의 이유가 있을것 같기도 합니다.
css 를 제거했을 경우를 대비해서 h태그를 display:none; 한 후 일종의 구분자(또는 주석의 역할도 되더군요)로 사용하는 경우도 봤습니다.
이런 경우는 맞는 사용방법인가요?

정보통신 접근성 향상 포럼 사이트(http://www.iabf.or.kr/)의 소스를 보면, 마크업 시작부분에 accessibility 라는 부분이 있습니다.
이 부분은 css 에서 display:none; 으로 처리되어 있는데, 이건 접근성 측면에서 어떻게 판단해봐야하는건가요?
이건 스크린리더가 아닌 텍스트브라우저를 위한 배려로 판단해야하나요?
(사실 텍스트 브라우저의 존재자체도 전혀 가늠이 안가기는 합니다.)
장성민 8월 28th, 2007 at 18:52
이런 수정기능이 없다는걸 까먹었네요. ^^;
지금 생각나는 질문이 이 정도입니다. ㅋㅋ 담에 또 생각나면 질문할까 하는데 괜찮겠죠?
어쨌든 전문가의 답변 기다리고 있겠습니다. ㅋㅋ
정찬명 8월 29th, 2007 at 13:44
헤딩태그 ‘h*’를 display:none 으로 숨겨놓는것에 대하여 서로다른 두 가지 견해를 말씀드리겠습니다.

[찬성론]
디자이너가 ‘h*’ 요소의 출력을 생략해도 무방하다고 판단하여 아예 제목요소를 디자인에서 제외하였는데 이것은 본래 있어야할 요소가 빠진 것이므로 퍼블리셔가 이것을 보충하여 ‘h*’ 요소를 추가한 경우입니다. 이 방법은 CSS의 지원여부에 따라서 콘텐트의 구성이 달라지는 방법이지만 문서의 마크업 자체는 더 견고해지는 측면이 있다고 생각합니다. 또한 이 방법이 접근성을 훼손하는 방법은 아니기 때문에 사용해도 무방하다고 생각하는 것입니다. 오히려 CSS를 지원하지 않는 장치에서의 접근성을 높여주는 방법이 됩니다. 참고로 현재 ‘DAUM’에서 이러한 방법을 사용하고 있습니다.

[반대론]
‘h*’ 요소를 추가하는 것은 의미에는 맞지만 display:none 콘텐트는 CSS를 지원하는 장치에서는 읽어주지 않기로 약속했기 때문에 결국 읽혀지지 않을 요소를 추가하는 방법이 됩니다. 또한 이러한 방법은 CSS를 지원하는 장치와 지원하지 않는 장치 사이에서 논리적인 구성을 다르게 갖습니다. CSS를 지원하는 장치에는 보이지 않던 표현이 CSS를 지원하지 않는 장치에서 보이는것은 바람직하지 않다고 생각합니다.

저도 이 두 가지 견해 사이에서 갈등하고 있는데 양쪽의 견해 모두 틀리지 않다고 생각하며 어떠한 방법을 사용하더라도 두 가지 방법 모두 접근성을 훼손하는 방법은 아니기 때문에 괜찮다고 생각하고 있습니다.

메뉴건너뛰기에 대하여
IABF 등의 웹사이트에서 접근성을 위하여 최상단에 두는 ‘메뉴건너뛰기’ 따위와 같은 요소들을 display:none 으로 마크업하는것은 현존하는 국내의 스크린리더 작동방식에 의존한(국산 스크린리더는 display:none 을 읽음) 근시안적인 방법이라고 생각합니다. ‘메뉴건너뛰기’와 같은 요소들은 display:none 이 아닌 다른 방법으로 얼마든지 표현이 가능합니다. 아래 URL을 참조하시면 ‘메뉴건너뛰기’ 요소를 display:none 이 아닌 다른 방법으로 처리한 것을 확인하실 수 있습니다. http://naradesign.net/open_content/reference/navigation.html 이 예제에서 보시면 아시겠지만 저는 ‘메뉴건너뛰기’ 링크가 시각장애인만을 위한 요소가 아니라고 판단하고 있습니다. 키보드만을 사용하는 모든 사람들을 위한 배려 입니다. 따라서 링크에 포커싱 될 때 해당 링크는 눈에 보이는 것이 좋다고 생각합니다.
정찬명 8월 29th, 2007 at 13:48
네, 언제든 좋습니다. 지금 저를 공부하도록 만들고 계신것 아시죠? ㅎㅎㅎ
mAGa 9월 4th, 2007 at 8:07
display:none을 쓰지않으면서 display:none을 쓰려고하는 목적을 충족시켜주면 양쪽진영 모두를 만족시킬 수 있을것 같습니다만, 다른 경우를 말씀하고 계신것인지 모르겠습니다.
특별한 것은 아니고 흔히 사용하는 트릭인 (padding)+height+overflow:hidden의 조합으로 구조와 의미를 고수하면서도 화면에는 보이지 않고 스크린리더에는 읽히고. 불평할 사람 없을듯합니다만…
정찬명 9월 8th, 2007 at 6:46
의견 감사합니다. mAGa님께서 주신 의견은 찬성론 쪽에 가까우신것 같고 말씀하신 방법도 괜찮은 방법이라고 생각합니다. ^^
db 9월 18th, 2007 at 12:18
찬명님 오랜만입니다.
잠시 들렸다 안부 남기고 갑니다.
추석 연휴 잘 보내시고요~!
mAGa님 여기서 뵈오니 반갑네요.
정찬명 9월 18th, 2007 at 22:03
db님 안녕하세요(__) db님도 즐거운 추석명절 보내시길 바랍니다. db님의 멈추지 않는 부지런함을 항상 존경하고 있습니다 ^^;
성민장군 10월 1st, 2007 at 20:19
^^ 질문이 있어서 질문 좀 하려구요…
드림위버 관련 질문인데요. 사용한지 이제 몇달 안돼서 궁금한게 좀 있습니다.
혹시 드림위버 기능중에..
작업하던 파일을 열어놓은 상태에서 드림위버를 끄고, 다음날 다시 켤때 다시 그 작업하던 파일을 자동으로 열도록 하는 기능이 있나요?
답변 해주시면 감사하겠습니다.
정찬명 10월 1st, 2007 at 23:06
있고말고요~^^ Edit > Preperences > General > Document options > Reopen documents on startup (Check) 좋은 하루 되세요~!
성민장군 10월 2nd, 2007 at 13:42
ㅋㅋ 넵 감사합니다. 너무 좋은 기능이에요~
김영찬 10월 5th, 2007 at 17:45
정말 오랜만에 들렀습니다.

추석은 잘 보내셨는지요^^.

하코사나 CDK에서 찬명님의 글을 아주 재미있게 잘 읽고 있습니다.

항상 좋은 방법들 감사합니다.
정찬명 10월 8th, 2007 at 1:35
영찬님 안녕하세요? ^^ 추석 귀성길에 10시간동안 운전한것만 빼면 그럭저럭 즐거운 추석이었답니다. 최근에는 블로그도 그렇고 하코사나 CDK에 글을 많이 쓰지 못하는 형편인걸요. 재미있게 읽어주셨다고 말해주시니 감사할따름이네요. 영찬님도 즐거운 한주 되시길 빕니다 (__)
엠제이 10월 10th, 2007 at 14:32
안녕하세요.^^
여기저기 살피다가 머물렀는데 낯익은 이름이라..기억을 더듬어봤더니 카페에서 봤더라구요.^^
요~앞에 승엽의 글도 있구.. (반가워 승엽^^)
좋은 정보 많아서 앞으로 자주 들를것 같으네요.
여하튼 찬명님 반갑습니다. 좋은 하루 보내세요.
정찬명 10월 10th, 2007 at 17:27
네 반갑습니다 ^^; 엠제이님도 좋은 하루 보내세요~!
밥스 10월 11th, 2007 at 13:59
눈팅이 하다가 글 남깁니다.
좋은길을 다 읽고 암소리도 안하는건 실례이겠지요.

요새 CSS 가이드를 적으라는 소리에 처음으로 들린 사이트이고
가장 많이 참고하게 되는 사이트이네요 ^^
요새는 N 사에 계신다드니 소문이 사실이군요.
아무튼 날씨도 추운데 감기 조심하시구요
정찬명 10월 12th, 2007 at 19:15
안녕하세요? 반갑습니다. ^^ 닉네임이 낮이 익으시네요. 밥스님도 건강한 한주 되시길 빌께요~!
후니~* 10월 14th, 2007 at 14:34
처음 뵙습니다. ^^

nhn ul lib 에서 적으신글은 잘 봤습니다.

덕분에 많이 궁금했던부분이 제법 해소가 되었구요.. ㅎ

감사합니당~ 자주 놀러올께요. ^^
정찬명 10월 15th, 2007 at 20:32
네, 반갑습니다. 제가 아는 두 번째 후니~님 되시네요 ^^ 자주 놀러오세요~
낭만윤냥 10월 17th, 2007 at 8:32
안녕하세요~~매일같이 들렀지만 방명록은 처음 남기네요~^^;;
글구 매번 좋은글 읽으며 마니 배웠는데 이제서야 인사를 -_-;;
날씨 추운데 몸조심하세요~~ㅋ

p.s : 며칠전에 메일보내드린적 있는데 보셨는지요? 답장을 열심히 기다리고 있는터라 ^^;;;
요즘 많이 바쁘신데 제가 폐끼쳐 드린건 아닌지…(걱정걱정)
정찬명 10월 17th, 2007 at 10:35
아.. 매일같이 들렀다는 뻔한 거짓말에 한번 속아드리죠.ㅎㅎㅎ. 메일에 회신 늦게드려서 정말 죄송했어요. 너무 정신없이 살다가 그만 답장보낼 타이밍을 놓치고 까먹었었는데 방금 회신 드렸답니다. 낭만윤냥님도 건강 유의하시고요. 언제 또 뵐 껀수라도 생기면 좋겠네요 ^^
코더가꿈 10월 22nd, 2007 at 16:33
안녕하세요. 평상시 정찬명님 팬(?) 이라고 할까요..
드림위버8 도서도 열심히 보고 있답니다.

그런데 궁금한게 있어서요.. 현재 찬명님 웹퍼블리셔로 일하시는데요.. 주로 코딩할때 어떤 툴을 사용하시는지요?
전문 웹퍼블리셔는 어떤툴을 사용하는지 궁금합니다.. 답변좀 해주세요.. 저는 심각함 ㅠㅠ
정찬명 10월 22nd, 2007 at 19:52

코더가꿈님, 반갑습니다 ^^ 팬이라고 하시니 일단 속아 드리죠 ㅎㅎㅎ. 다양한 툴을 소개해 드리면 좋을텐데 저는 드림위버밖에 사용해보지 않아서 드림위버 외에 다른것을 추천해 드리기는 어렵습니다. 그래도 다른 툴과의 장단점을 간략하게 설명드리면 이렇습니다.

장점
1. 코드편집모드와 WYSIWYG모드를 동시에 지원합니다.
2. HTML/CSS 코드의 자동완성기능으로 하여금 다른 툴보다 코드 생산 효율이 높습니다.
3. 표준 HTML/CSS 코드를 작성하도록 지원합니다.
4. 퍼블리셔가 상상하는 기능은 왠만하면 지원하고 있습니다.

단점
1. 코드편집모드만 지원하는 다른 툴에 비하여 구동 속도가 조금 느리고, WYSIWYG 모드를 사용하는 경우 더욱 느려집니다.
2. 지원하는 편의기능이 너무 많아서 복잡해 보입니다.

총평
드림위버를 차에 비유하면 중형급 옵션의 차량이라고 표현할 수 있습니다. 급출발은 어렵지만 일단 출발하면 그 순간 가속도가 매우 뛰어나고 갖가지 편의 옵션들을 잘 다루게 되면 매우 편안하게 운전할 수 있는 고급 세단과 같습니다. 드림위버를 추천하지만 드림위버의 WYSIWYG모드는 추천할 수 없습니다. 드림위버의 WYSIWYG모드는 너무 느리고 렌더링도 표준과 일치하지 않습니다. 따라서 드림위버를 사용하되 WYSIWYG모드의 사용은 전체 작업량의 5~10%미만으로 줄이고 코드편집모드에만 의존하는 형태로 작업하실 것을 권장 합니다. 제 경우 드림위버의 WYSIWYG모드를 사용하는 경우는 복잡한 테이블을 편집할 때 뿐이며 기타 디버깅 작업 같은 경우는 Firefox의 Firebug확장툴을 사용하고 있습니다. 아마 국내외를 비롯하여 드림위버는 숙련된 퍼블리셔들에게 가장 인기있는 편집툴이리라 생각됩니다.

참고로 외국에서 실시된 HTML 편집툴 선문조사 결과 페이지를 링크합니다.
http://webdesign.about.com/gi/pages/poll.htm?linkback=http://webdesign.about.com/b/a/253457.htm&poll_id=2822610066

결론적으로 웹 퍼블리셔분들은 드림위버만을 사용하지는 않지만 드림위버를 사용하는 분들이 가장 많은 것으로 보여집니다.
도움이 되셨으면 좋겠네요 ^^
코더가꿈 10월 22nd, 2007 at 22:33
와우~ 구체적인 설명 감사드립니다.^^
내심 드림위버가 아니면 안되는데.. 라는 생각을 하고 있었는데, 드림위버툴을 가장 많이 쓴다는 말씀을 들으니 안심히 되는거 같습니다. 사실 저도 드림위버가 가장 편하다고 생각을 하고는 있었습니다.^^

그런데 궁금한게 또 생겼는데요.. WYSIWYG모드라고 하신게 어떤걸 말씀하시는건지요?
그리고 웹퍼블리셔가 하는 일이 css 설계라는것도 있는거 같은데.. 이부분은 디자인이 나오면 설계가 들어가는건가요.. 아니면 기획단계에서 프로그래머가 디비설계하는 시점에 이런식으로 css만 설계가 들어가는건가요..?

제가 웹디자이너로 3년간 근무하다가 이번에 코더로 직종을 바꿀려구합니다.. 항상 코딩과 디자인을 병행하다가.. 코딩에 흥미를 더느껴서 이러한 선택을 했는데요.. 물론 그냥 코딩을 하면 쉬울텐데.. 웹표준에 맞춰 제작을 해야하는 것들이라서.. 공부는 하고 있습니다만, 많은 어려움이 있을거 같습니다.

찬명님도 웹디자이너로 근무하시다 웹퍼블리셔로 바꾼거 같더라구요.. 그래서 제맘을 그누구보다 잘알거 같아서 이렇게 글남깁니다…

ps. 그리고 찬명님 팬 맞습니다. 비록 오래되진 않았지만요 ㅋㅋ^^
정찬명 10월 22nd, 2007 at 23:36

WYSIWYG모드란, What You See Is What You Get의 두음문자라는 사실은 잘 알고 계시죠? 직역하면 ‘당신이 보는것이 당신이 얻는것’ 이고 좀 알아듣기 쉽게 의역하면 ‘보이는 그대로 얻는것’이라는 의미로 이해되죠.

드림위버의 편집모드는 크게 세가지로 구성되어 있습니다.

* HTML/CSS 코드만 볼 수 있는 Code Vew,
* HTML/CSS 코드와 디자인된 화면을 함께 볼 수 있는 Split View,
* 코드는 보이지 않고 브라우저에서 렌더링 되는 화면과 비슷하게 보이는 Design View 입니다.

위 세 가지 모드 가운데 마지막에 소개한 Design View 모드가 바로 WYSWYG모드이고 디자이너분들께서 주로 사용하시는 모드 입니다. 처음부터 Design View 라고 소개했으면 쉬울것을 제가 WYSIWYG모드라고 소개하여 혼동되신것 같습니다.

한편 Code View 와 Design View 는 단축키를 이용하여 쉽게 전환이 가능하구요. 편집모드 전환 단축키는 Ctrl+` (Ctrl+Back quote)입니다. Back quote 키는 ESC 바로 아래 있죠 ^^;

네, 제 주변에도 상당수의 웹 퍼블리셔 분들께서 웹 디자이너 경력을 갖추고 계시고 웹 기획, 서버사이드 개발 등 다양한 경력을 지니고 계십니다. 또한 처음부터 퍼블리셔인 분들은 드물고 다른 분야 직군과 협업하기 위하여는 코딩외 관련업무지식이 필요하기 때문에 주변직군에서 웹 퍼블리셔로 전향하는 형태가 오히려 권장된다고 보여집니다.
코더가꿈 10월 23rd, 2007 at 8:37
좋은 답변 감사합니다.
생각지 않던 좋은 말씀도 얻어간거 같아요..^^ 한가지 css 설계를 해야한다는 소리가 있던데, 그 시점이 언제이며, 예를 들어 기획단계에서 프로그래머가 디비설계하는 시점인지 아니면 그런거 없이 디자인이 나오면 스케줄에 맞춰 작업해서 프로그래머 한테 넘겨줘야 하는건지 궁금하며, 기본적인 자바까지 해서 전달해야하는건지 알고 싶어요.~~~

자꾸 질문만 해서 죄송합니다.. 하지만 분명 찬명님의 답변글을 읽고 도움되시는 분들이 상당히 많을거란 생각을 합니다.^^
정찬명 10월 23rd, 2007 at 20:12
어이쿠 ㅡㅡ; 점점 어려운걸 물어보시네요ㅎㅎㅎ. CSS는 화면표시용 언어이기 때문에 디자인 시안이 나오지 않으면 설계를 시작할 수 없습니다. 반면 HTML은 구조표시용 언어이기 때문에 잘 작성된 스토리보드 또는 컨텐트 명세서가 있으면 그것을 받자마자 개발, 디자인과 동시에 HTML코드를 작성할 수 있습니다.

하지만 HTML코딩 후 나중에 디자인 시안을 보면 HTML구조를 크게 변경해야 할 수도 있는 상황이 올 수 있습니다. 이러한 경우가 발생하지 않으려면 스토리보드를 작성하는 기획자가 화면의 UI까지 세세하게 명시해 주어야 하는데 현실적으로 화면의 UI설계는 디자이너들의 몫인 경우가 대부분이라서 여기서 이상과 현실의 갭이 발생합니다.

이렇게 디자이너, 퍼블리셔, 서버사이드 개발자가 동시간대에 하나의 사이트를 개발하는 것을 병렬형 개발방식이라고도 하는데요. Y포털에서 이런 방법을 시도했다가 그만 둔 사례가 있습니다.

결국 CSS설계는 화면 UI설계가 선행되어야 하므로 디자인 시안이 나온 직후가 될 수 밖에 없습니다.

네, 저도 혹시나 다른 분들께 도움이 될까 싶어 블로그를 쓰고 있고, 한분 한분의 질문에 되도록 성실하게 답변해 드리려고 노력하고 있습니다. 감사합니다.
코더가꿈 10월 23rd, 2007 at 20:30
감사합니다.^^
코더- table 퍼블리셔-div,css 스스로 정의했는데 맞는지 모르겠군요..ㅎㅎ
많은 도움이 됐습니다.
내일 웹퍼블리셔로 면접을 보는데 대부분이 웹디자인 포트폴리오라서.. 잘될런지는 모르겠습니다. 물론 코딩과 병행했지만서도, 막상 된다고 해도 공부할게 너무 많은거 같습니다. 지금까지 웹디자이너가 될려구 많은 노력을 해왔고 디자이너로 3년간 생활했는데, 예전부터 느꼈지만 디자인보다 전문 웹퍼블리셔로 되는게 꿈이되고, 흥미와 재미가 있는거 같아서 큰맘먹고 전직 할려구 하는데, 잘선택한건지는 모르겠군요..

찬명님의 좋은 말씀 저에게는 큰힘이 되었습니다.
좋은 답변 감사합니다..^^
코더가꿈 10월 24th, 2007 at 21:22
면접 봤는데 합격했네요.^^ 찬명님의 좋은 답변 감사합니다.
앞으로 웹퍼브리셔의 역활과 한국웹 발전에 기어하도록 노력하겠습니다.^^
정찬명 10월 25th, 2007 at 4:09
와~! 축하드려요~ 최고의 웹 퍼블리셔가 되셨으면 좋겠습니다 ^^ 한국 웹이라도 좋고 동네 웹이라도 좋습니다. 코더가꿈님께서 발을 담그셨으니 이 세상 HTML코드가 좀 더 맑고 깨끗해 질꺼라 믿습니다. ^___^
코더가꿈 10월 29th, 2007 at 10:43
찬명님 날씨가 춥네요.. 감기조심하시구요.
궁금한게 있어서 또 왔어요…
예를 들어 작업하실때 작업환경이 asp 면 asp 로 인클루트 까지 해서 프로그래머한테 넘겨주시나요?
아니면 html 로 화면상 보이게만 작업하시나요?

바쁘시겠지만 조언 부탁드려요…^^;
정찬명 10월 29th, 2007 at 23:31
안녕하세요? 또오셨네요^^ 개인적인 경험으로 미루어 말씀드려 보겠습니다. 디자이너라도 보통 asp, jsp, php .. 등등의 인클루드 구문을 익히는 것은 어렵지 않죠. 그리고 그렇게 인클루드 해두면 디자이너도 유지보수 측면에서 유리하다고 생각됩니다. 따라서 여건이 허용하는 한 인클루드를 직접 처리할 수 있다면 직접 처리해 왔습니다.(단, 이것은 제가 에이젼시에 근무하고 인클루드 사용이 충분히 서버사이드 개발자와 협의된 상황에 한정된답니다. 포털에 근무하고 있는 현재는 인클루드 할일이 전혀 없답니다. 현재는 아주 간단한 부분이라도 인클루드를 적용하는지 마는지는 서버사이드 개발자가 판단하고 저희가 임의로 처리하지 않는답니다.)
성민장군 11월 8th, 2007 at 11:30
안녕하세요. 찬명님~~ 요즘 바쁘시죠? 저도 하나하나 체크하느라 정신없어요. 공부도 많이되고 좋네요.. ^^
곧 뒤풀이? 있다는데, 그때 뵙겠네요.

오늘 방문도 역시나 질문이 있어서 들렀습니다.
얼마전에 다른곳에 물었던게 있는데요. iframe height resizing 에 대한 질문이었어요.
여러 방법을 찾아서 해봤는데, ie5,6, ff, op 모두에게 적용되는건 못찾겠어요.
혹시 시간되시면 좀.. ^^

와서 항상 질문만 남겨서 죄송합니다. 술살게요. ㅋㅋㅋㅋ
정찬명 11월 8th, 2007 at 14:26
아래 페이지에 예제가 있네요.
http://guymal.com/mycode/iframe_size/

제가 테스트 해보니 잘 되던데 혹시 다른 문제 있으면 공유해주세요 ^^;
우연근 11월 28th, 2007 at 14:01
안녕하세요?
지금 만들고 있는 게시판 디자인을 div로 적용하려고 고민하다가 나라디자인 홈피를 알게되었습니다.

http://naradesign.net/wp/2007/02/03/113/
우연근 11월 28th, 2007 at 14:03
엇.. 뒷부분이 짤렸네요~ ㅡㅡ;;;

http://naradesign.net/wp/2007/02/03/113/

이 글에 나온 css예제를 살짝 바꿔서 제가 만드는 게시판 기본스킨으로 사용하고 싶습니다. ^^
빌려가도(?) 될까요? ^-^
정찬명 11월 28th, 2007 at 19:05
HTML/CSS 코드는 누구도 소유하거나 특허권을 주장할 수 없겠죠.^^ 제가 안된다고 말씀드릴 수 있는 근거도 없구요. 안된다고 말씀드리고 싶지도 않습니다. 얼마든 좋습니다. 또 소스코드에 naradesign 에서 참조했다는 언급도 안하셔도 되구요.

근데 한 가지 궁금한거 질문드려도 되나요? 보통은 기본스킨이라는게 레이아웃이 없고 게시판 목록을 출력하기 위한 table 태그만 있는것이 정석 아닌가요?

즉, 기본스킨은 테이블만 존재하는 그런 형태여야 확장성이 좋지 않은가 라는 생각 때문에요.
좋은 하루 되시구요.
정찬명 11월 28th, 2007 at 19:08
참, 게시물 목록부분을 div로 코딩하시는건 아니시죠? 그냥 table로 하시는것 맞죠? 게시물 목록 자체는 의미상 table이 맞거든요.
우연근 11월 28th, 2007 at 20:39
ㅎㅎㅎ
저도 목록부분을 div로 만드려고 찾아봤는데
그냥 테이블로 만드세요. 라는 대답이 많더라구요.

그래서 그냥 table로 하려구요. ^^

좋~은 하루되세요. ^^
쥬니캡 11월 29th, 2007 at 9:52
댓글을 타고 방문했습니다. 토픽이 무지 전문적이시네요. 전 잘 이해가 안되는. 앞으로도 자주 뵙겠습니다. 감사합니다.
정찬명 11월 29th, 2007 at 10:51
방문 감사합니다.(__) 전문적인 토픽을 대중이 이해할 수 있게 일반적인 용어로 설명한다는게 참 쉽지 않은 일인것 같습니다.(쓰신 내용중에서 인용^^) 어쩔 수 없는 부분이야 있다손 치더라도 최대한 쉽게 쓰려는 노력을 앞으로 더 해야할것 같습니다. 좋은 하루 되세요 ^^
우연근 11월 30th, 2007 at 2:17
몇일전 말씀드렸던 게시판 디자인
http://openbbs.com/web/core/bbs/?section=list
우연근 11월 30th, 2007 at 2:19
또 짤렸네요. 꺽쇠를 쓰면 짤리는것 같어요.. 편집도 안되서 도배아닌 도배를 ^^;;;;;

아래게시판 완성되면 다시 알려드리겠습니다. ^^

좋은 하루되세요. ^-^
정찬명 11월 30th, 2007 at 10:16
와~ 게시판 만들줄 모르는 제가 보기에는 굉장히 멋져 보이세요 ^^
꺽쇠 넣으면 안된다는 주의내용이 댓글쓰기 화면에는 포함되어 있는데 여기 방명록에는 없네요.
방명록에도 넣어야겠어요.
감사합니다(__)
수상한사람 12월 13th, 2007 at 13:42
안녕하세요, 제 블로그에 답을 남겨 주셔서 감사합니다,
하지만, 장애인에 대한 비유는 뭔가 잘못됬다고 생각이 듭니다,
장애인들은 자신이 되고 싶어서 된것이 아니지만,
웹브라우져 선택과 OS선택은 자신이 하고 시어서 하는 것이기 때문이죠,
그래서 일반인들에게 장애인들을 위해서 계단외에 경사길을 만들어야 한다는 것은 납득이 갈지 모르지만, 이런 근거로 주장을 한다면, 그건 너희들이 그렇게 선택한 것이니 참으라 하는 것으로 반박 당할수 있기 때문입니다, 사회적 약자라는 것은 인정하지만요,,
그런 의미에서 웹표준에 대한 근거로 장애인 비유를 쓰는것은 그다지 좋지 않은거 같습니다,
그것보다는 표준을 지킴으로서 얻을수 있는 효율성과,
다양성이 없어졌을때 생길수 있는 위험함 (공룡의 멸종 같은것이 그렇죠, 지구에 만약 공룡같이 큰동물만 살았다면 지구에는 생명체가 안남아있을겁니다, 어떤 환경이 올지는 아무도 모르는 겁니다, 그래서 다양한 것이 있지 않으면, 어떤 한 위기에서 살아남지 못할수 있는 것이죠), 그리고 다양성이 있을때 생기는 우리들의 발전 가능성 (다양하다는 것은 그만큼 생각이 다양한 것이고, 그만큼 좋은 아이디어를 만들수 있을 가능성이 높아지는 것입니다) 등,, 다양성을 포용할수 있는 표준이란 개념을 가지고 주장을 계속해야 할거 같습니다,,
정찬명 12월 13th, 2007 at 14:16
친구분께서 소수라는 이유 때문에 그런 사람들을 고려하지 않아도 되는 것처럼 말씀하셨다기에 그런 논리라면 장애인도 소수이니까 고려하지 않아도 될까요? 라고 반문하는 차원에서 장애인이라는 언급을 한 것입니다. 수상한 사람님의 의도는 충분히 이해합니다. ‘어쩔 수 없이 불리한 환경에 처한 사람’을 고려하는 것은 ‘장애를 제거’ 하는 시각으로 바라보기 때문에 다소 자기 방어적인 느낌으로 문제해결에 접근하게 되는데 ‘본인의 선택에 의하여 불리한 환경에 처한 사람’의 욕구를 만족시켜주는 것은 유니버설 디자인의 관점으로서 보다 적극적으로 문제를 해결하거나 예방하려는 노력이고 수상한 사람님의 의견이 이와 비슷한 것으로 생각 됩니다. 결국 장애가 없더라도 권익이 보호되어야 한다는 주장에는 저 또한 매우 동의하는 측면입니다. 감사합니다.(__)
후니~* 12월 29th, 2007 at 16:14
정신없이 살다보니 내일모레 벌써 꺾이는군요.. 에혀 ==3

찬명님, 새해 복 터지게 받으세용~ ㅎ
정찬명 12월 31st, 2007 at 12:01
3학년 진급을 축하드립니다! 제가 받는 복에 두배 더해서 훈님도 2008년에 큰 복 받으시길 기원드립니다! ^^
강성국 1월 18th, 2008 at 17:42
안녕하세요~

잘지내시는지요. ㅎㅎ 너무 오랜만에 찾아와서 급 질문해서 속보이지만,, ^^;

속사정을 꺼내봅니다 ㅎㅎ

포털 작업을 하게 되었는데요.

폴더,파일 네이밍 같은 부분은 전문가에게 받고 싶어서 찾게 되었습니다

제가 기존에 작업했던 방식이라던지, 관공서에서는 쓰는 폴더구조라던가, 네이밍 말고, 포털에서 별도로 쓰는 권장 구성이 있는지 여쭤보고 싶어서요 ^^;

html.nhndesign.com 에서 이미지 네이밍 구조도 참고했구요..

지금 네이버는 어떤식으로 네이밍으로 하는지 궁금합니다 ^^;

새해복 많이 받으세요 (’ㅇ’)
이승희 1월 25th, 2008 at 13:22
IE 6.0 에서는 제대로 JS 파일 이미지가 보입니다.
그런데 파이어폭스에서는 저걸 넣으면 안보이는데요
어케 해결가능할까요?
이승희 1월 25th, 2008 at 13:30
위에 이게 빠졌어요..
정찬명 1월 25th, 2008 at 14:38
강성국님 안녕하세요? 회신이 많이 늦어 죄송합니다. ㅡㅡ;

네, 물론 있습니다. 저희팀에서 기존의 HTML/CSS/IMAGE 관련 공통 가이드를 재편집하고 있고 현재는 구성원들의 검토를 거치는 중입니다. 또 이것을 개편될 html.nhndesign.com 에 수록할 예정인데 오픈일정이 확실히 정해지지 않았습니다.

공개 목적으로 만들어지고 있지만 아직 완성되지 않은 내용이라서 죄송하게도 벌써 공유해드리기는 어렵습니다.
기약이 없어서 기다려달라고 말씀드리기는 어려우니 직접 한번 만들어보시는것은 어떨까요 ^^

강성구님도 새해 복 많이 받으세요 ^^
정찬명 1월 25th, 2008 at 14:40
이승희님 ㅡㅡ; HTML 꺽쇠는 [ ] 으로 변환해서 올려주셔야 입력이 됩니다.
방명록에 그런 안내 코멘트를 넣는다는 것이 깜빡 잊고 있었네요.
빠른 시일내에 꼭 고쳐야겠습니다.
다시한번 부탁드립니다.
이승희 1월 28th, 2008 at 13:21
아 다시 올렸습니다. ^^
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
정찬명 1월 29th, 2008 at 6:51
이승희님께서 올려주신 코드 한줄은 표준 DTD입니다. 표준 DTD를 사용한 경우 브라우저들은 표준모드로 동작하고 DTD가 없는경우 Quirks Mode(어물쩡한 대충모드)로 동작합니다. 이는 IE나 FF나 마찬가지 이지요. DTD를 넣고 표준모드로 동작하도록 한 다음 양쪽 브라우저에서 모두 잘 보이도록 해보세요. 그 밖에 어떤 코멘트를 드려야 할지 질문내용이 구체적이질 않아서 좀 막막 하네요. ^^
이승희 1월 29th, 2008 at 9:18
감사합니다… 그런데 말씀 하신 표준 dtd를 넣으면 FF 에서는 JS 파일이 안보이거든요..
JS 파일에 이미지가 있는데 이미지가 다 안보이더라구요.. 그래서 말씀하신 어물쩡한 대충모드를 했더니 보이더라구요;;;;
JS 파일은 FF에서는 안보이는건가요??
정찬명 1월 29th, 2008 at 10:21
아마 IE전용 Javascript를 사용하신것 같습니다. 표준 Javascript 를 사용하셔야 할 것 같아요. ^^
이승희 1월 30th, 2008 at 10:43
^^ 감사합니다.
말씀대로 표준 DTD 사용을했습니다.
여전히 보이지 않는 js에서 여러곳을 둘러보니까 “표준자바스크립트 상 IE 전용인 document.all 등의 문법”이 사용됬을것이라고하는데요
현재 js 파일에는
iebrowser=document.all
이런식으로 작업이 되엇습니다.
그럼 FF 에서는 표준자바스크립트상 document.documentElement 을 사용하라고하는데요
iebrowser=document.all 이면 FF에서는 ffbrowser=document.documentElement 을 사용하면될까요?

한가지더~! FF에서 자바스크립트 콘솔을 사용하라고하는데요
깔았는데
제컴터에서는 자바스크립트 콘솔은 없구요.. 자바콘솔이있네요 사용하는 방법을 알수있을까요?

아 허접한 질문 .. 답변 잘해주셔서 너무 감사드리구요..
좋은하루되세요 ^^
정찬명 1월 30th, 2008 at 16:16
제가 자바스크립트는 다루지 않아서 자세한 답변은 드리기 어려울 것 같습니다. 하지만 표준 자바스크립트(DOM)를 사용하시면 브라우저 벤더를 막론하고 모두 적용이 가능하기 때문에 IE 코드 따로 FF 코드 따로 작성하지 않으셔도 됩니다. FF에서는 Firebug라는 확장툴을 설치하시면 HTML/CSS/Javascript 를 디버깅할 수 있는 인스펙터를 활성화 할 수 있습니다. 자바스크립트 콘솔을 사용하라는 언급은 지금 설명드린 Firebug를 두고 말씀하신 것으로 추측됩니다. 좋은하루 되세요. ^^
박지현 1월 30th, 2008 at 17:46
안녕하세요?
새해 복 많이 받으세요~~~
우선 올해 들어 첨 글을 남기니 새해 인사부터 합니다…^^

콱에서 한번 뵌적도 잇고 한데요… 찬명님의 홈피를 통해 콱을 알아서
작년 초에 세미나도 몇번 갔지요…^^

그런데 요즘 찬명님의 홈페이지가 도메인 주소로 치면 안 열리는 현상이 나옵니다.
전에 저장되어있던 주소로 치고 최근에 몇번 들어왔거든요…
제 컴에서만 이런 반응인건지…ㅡㅡㅋ
정찬명 1월 30th, 2008 at 19:09
지현님, 안녕하세요? ^^ 잘 지내고 계시죠? ㅎㅎ
지현님도 새해 복 많이 받으시구요.

도메인 주소를 직접 입력했는데 연결이 되지 않는것은..
철자를 잘못 입력했거나 URL을 해킹당하고 있을수도 있는… (ㅡㅡ;)
아니면 통신사업자 또는 지현님 PC에서 제 블로그 주소를 유해사이트로 등록했거나 ㅜㅜ;

naradesign.net ← 복사해서 붙여넣기로 테스트 한번 해봐주시겠어요?
이래도 접속이 안되면 정말 뭔가 문제긴 문제네요 ㅎㅎㅎ.

나라디자인 접속이 잘 안되서 좀 그렇긴 하지만..
좋은 하루 되세요 ^^;
이승희 1월 31st, 2008 at 8:51
감사합니다. ^^
좋은 하루되세요 ^^
권경득 2월 29th, 2008 at 18:14
안녕하세요~
조언을 좀구하고자 메일을 보내드렸습니다.
바쁘시더라도, 확인하시고 답변주시면 감사하겠습니다.

남은시간도 알차게 보내시고, 다가오는 주말도 즐겁게 보내세요!!
강성국 3월 1st, 2008 at 11:43
답변해주셔서 감사합니다 -_-;;

지금 홈페이지에 확인해보러 가야겠네요 ㅎ_ㅎ;;

주말잘보내세요~ ^_^/
김일규 3월 5th, 2008 at 18:57
안녕하세요, 즐겨찾기 해놓고 웹표준 공부하면서 사이트를 제작하고 있습니다.
현재 제작중인사이트인데 조언좀 부탁드립니다.
코딩이 맞게 되어 있는지 모르겠음 ㅡㅡ;;

덧글 남겨주시면 수시로 들러서 확인하겠습니다 ㅡㅡ;;;
김진환 4월 7th, 2008 at 16:55
안녕하세요? ^^ 현대해상에 파견되면서 부터 정말 열심히 웹표준을 접하고 있는 일인중 한명입니다.
자주 들르면서도 인사를 못드리고 지나쳐갔었군요.

딱히 여쭤 볼 곳도 없고 하여 경험을 듣고자 여쭈어 봅니다.

전 현재 8년조금 넘은 웹디자이너 입니다.
솔직히 아무리 디자인 공부를 한다고 해도 젊고 새로운 브레인에비하면 날이 갈수록 디자인의 신선함및 감각이 떨어져 가는것을 몸으로 체감이 됩니다. 이젠 젊은 머리와 손에게 눈에 보이는 디자인 부분은 넘길 수 밖에 없는 것인가..하는 생각이 갈 수록 커지는군요.

그리하여 자꾸 시선이 돌아가는 곳이 표준웹가능한 퍼블리셔로의 비중을 많이 두면 되지 않을까 하는 생각이 자주 듭니다.
물론 디자인을 겸할 수도 있겠지요,^^ 할 수 있는 부분이니…

실제 퍼블리셔라 함은 순수 코더의 역할만이 있는것인지…
아시는 영역에 대하여 정보를 주시면 감사하겠습니다.

나이도 이제 30대 중반인지라..ㅡ.ㅡ;; 열심히 어언 10년 가까지 웹디를 해온 시절에 비해 불투명한 미래때문에 요즘 너무 갈등이 심합니다.(오죽하면 이글 쓰기전에 제빵관련을 검색해 봤겠습니까… )
솔직히 전 이일을 평~~~~생은 아닐지라도 일 할 수 있을때만큼은 계속 하고 싶은것이 솔직한 심정이지만,
제 입장이 사업을 차리고 그럴 입장도 아니기에..

아무쪼록 그냥 생각을 여쭙습니다.

참…그리고 지금 사이트 리뉴얼 중이신가요? ^^ 기본 골자만 보이는군요..

항상 건강하시고 행복하세요~
정찬명 4월 8th, 2008 at 0:24
권경득님, 메일로 답변을 드리긴 했는데 깊이있게 조언드리지 못한것 같아 죄송스럽습니다. 꼭 필요한 말만 한다는 것이 자칫 ‘이건 틀렸으니 이렇게 하세요’ 와 같은 뉘앙스로 말한것 같아서 더욱 그렇습니다. 앞으로는 회신을 늦게 드리더라도 성실하게 답변을 드려야겠다는 생각을 했습니다. 감사합니다.
정찬명 4월 8th, 2008 at 1:31
김일규님, 안녕하세요?
제니하우스를 잘 보았습니다. 나름 웹 표준을 준수하고자 노력하시는 모습이 보기 좋습니다 ^^;
조언을 요청하셔서 간단하게 살펴보고 개선할점 몇가지만 코멘트 해드리겠습니다.

1. 제니하우스 로고가 현재 body의 배경이미지로 처리되어 있는데 이것은 h1 요소와 img 요소를 이용하여 전경이미지로 처리하시는 것이 의미적으로 맞을것 같습니다. 그리고 클릭이 가능하도록 처리하고 클릭 했을 때 초기화면으로 이동하는 UI가 사용성을 높여준다고 생각합니다. 이렇게 되면 ‘메인페이지’ 라는 타이틀은 h2가 되어야 겠지요 ^^

2. HTML을 선형화 했을 때 right 영역이 content 영역보다 먼저 등장하고 있는데요. 사용자들이 중요하게 생각하는 내용이 무엇인지 생각할 때 right 영역보다는 content 영역이 HTML 구조상 먼저 등장하는 것이 맞지 않는지 생각해볼 문제라고 생각합니다. right 영역은 보조 네비게이션 영역으로서 content 영역에 비하면 중요도나 접근이 빈번하지 않다는 가정하에 그렇구요. 키보드만을 사용하는 사람들은 본문에 이르기 위하여 Tab 키를 무척 많이 눌러야 할것 같습니다. 이렇게 링크가 많은 경우에는 ‘메뉴 건너뛰기’링크를 제공해 주시면 키보드 사용자와 시각장애인들의 접근성을 높여줍니다. 메뉴 건너뛰기 예제 입니다. http://naradesign.net/open_content/reference/navigation.html Tab키만을 이용해서 조작해 보세요.

3. ‘빠른메뉴’와 ‘대륙바로가기’ 라는 제목은 동등한 수준의 헤딩일 것이라고 생각했는데 h5, h3 으로 다릅니다. ‘메인페이지’라는 제목이 h2라고 가정할 때 ‘빠른메뉴, 대륙바로가기’는 동등하게 h3이 되는것이 맞다고 생각합니다.

4. 불필요한 태그의 중첩. [div class="headlineSub"][h3]제니하우스 새소식[/h3][/div] 이 부분의 HTML 코드 가운데 div는 제거하고 h3 요소만으로도 충분히 디자인 표현이 가능해 보입니다. div 태그는 스스로 아무 의미가 없으므로 콘텐츠 덩어리를 그룹핑 하거나 분리하는 용도로 최소한의 사용만을 권장합니다.

5. CSS 파일이 6개로 분리되어 있습니다. 이런 부분은 저도 초기에 유지보수 이점 때문에 사용하던 방식이었지만 http 요청수를 증가시키는 방법이므로 CSS 파일은 1개로 통합하는 것이 좋습니다.

6. 80여개가 넘는 국가별 국기 이미지가 각각 존재하고 배경처리 되어 있는데요. 이 배경이미지는 1개의 통합 이미지로 저장하고 background-position 기법을 이용하여 같은 배경 이미지를 사용하되 배경이미지의 위치값을 다르게 배치하면 웹 페이지의 속도 퍼포먼스가 훨씬 좋아질 것으로 생각됩니다. 80여개의 이미지는 그만큼의 http 전송을 요구하기 때문에 사이트가 느려지는 원인이 됩니다.

7. content 영역 안쪽의 li 요소 안쪽에는 제거해도 표현상 무리가 없는 span 요소들이 보입니다. span 역시 div와 같이 아무런 의미가 없는 요소로서 텍스트를 그룹핑하거나 분리하는 역할만 합니다. 제가 보기에는 a 요소를 활용하여 표현이 가능하고 a를 감싸고 있는 span은 제거해도 될 것 같습니다.

8. a요소에 title 속성은 오히려 중복 콘텐츠를 제공하여 사용성을 떨어뜨립니다. 이미 a요소 내부에 텍스트로 설명이 되었으므로 title을 제공하는 것은 시각장애인 입장에서 같은 문장을 두 번씩 읽게 만드는 결과를 가져옵니다. 이런 경우에는 빼도 무방할 것 같습니다.

9. 하단의 copy 영역 내부 p 요소는 address 요소로 치환하는 것이 의미적으로 맞을것 같습니다. address 요소는 저작자 및 연락처 정보를 마크업하는 요소 입니다.

10. ‘사이트소개 | 기부안내 …’ 이와 같은 요소 또한 목록이어서 ul, li 요소로 마크업 하는것이 시멘틱 할것 같습니다. 메뉴목록을 수평으로 배치하실 때 사용하셨던 display:inline 기법으로 동일한 뷰를 얻으실 수 있을것 같습니다.

휴~ 쓰다보니 10개를 채웠네요. 힘들었습니다. (ㅡㅡㆀ)
뭐 제 의견이 꼭 정답은 아닐 수 있습니다.
다른분들의 조언도 부탁해 보시고 다른 의견이 있으면 공유해 주세요.
좋은 하루 되시구요 ^^;
정찬명 4월 8th, 2008 at 2:31
김진환님, 안녕하세요? 제빵기능사는 저도 한때 관심있게 생각하던 직업중의 하나였는걸요 ^^; 뭐 제빵만 있었던가요. 사회복지사, 기자 등등.. 이거 아니면 어떤 직업으로 만족하면서 살 수 있었을까 많은 사람들이 비슷한 생각을 한번쯤은 해보았을 줄로 압니다. 저보다 경험이 많으시지만 저 또한 디자이너로 6년간 일했고 웹 퍼블리셔라는 직업으로 전업한지는 1년이 조금 넘었습니다. 그래서 김진환님의 고민에 더욱 공감하고 있습니다. 친구들은 대표이사 직함 가지고 사회생활 하는데 나는 배짱도 없나 싶은 생각도 들구요. 하지만 저는 나름대로 직업적 소신을 중요하게 생각하고 그 소신을 실현하는 직업중의 하나로서 지금 지닌 직업에 만족하고 있습니다. 아마도 디자이너가 되기 전부터 저는 사회적인 형평이나 인권에 대하여 많은 관심을 가지고 있었던것 같습니다. 현재의 직업이 아니었다면 아마도 시민단체나 사회복지단체에서 일을 하고 있지 않을까 생각합니다. 현재의 일은 순전히 적성이나 전공과는 무관하게 좋아하는 일이었지만 좋아하는 일을 하면서도 늘 생각하던 소신을 펼칠 수 있다고 생각한 것이 웹 퍼블리셔 였습니다. 만약 웹 퍼블리셔라는 직업을 지니고 김진환님께서 평소 가치있게 생각하고 계신 어떤것을 실현할 수 있는 기회가 있거나 적어도 이 직업을 즐기실 수만 있다면 추천드리는데 주저하지 않을것 같습니다. 웹 퍼블리셔의 업무관련 기술은 ‘웹 표준, 웹 접근성, HTML, CSS, Javascript, 유관부서와의 커뮤니케이션’ 정도로서 그동안 HTML/CSS 코드를 직접 작성하고 Javascript코드를 이해하고 응용할 수 있는 수준이라면 전업하기에 어렵지는 않을 것으로 생각됩니다. 대신 전업하시기 전에는 충분한 포트폴리오도 필요하겠지요. 한편 전업을 할 것인지의 여부를 떠나서 웹 퍼블리셔로 전업을 해도 충분할 정도의 역량을 쌓아두는 것도 나쁘지 않다고 생각합니다. 어차피 웹 표준 코드를 작성하고 웹 접근성이 현재의 업무중 일부라면 이미 웹 퍼블리셔라고 생각합니다. 디자인을 하고 있다고 해서 웹 퍼블리셔는 아니라고 말할 수는 없으니까요. 디자인 업무에 대하여 잘 모르는 웹 퍼블리셔보다 훨씬 경쟁력 있다고 생각합니다.

소신에 따라서 옳은 결정 내리시리라 믿습니다. 김진환님도 항상 건강하시고 행복하세요. ^^

PS : 4월 9일은 CSS Naked Day (http://naked.dustindiaz.com/) 입니다. CSS를 벗겨내도 페이지를 탐색할 수 있다는 것을 보여줌으로써 웹 표준을 알리고 장려하는 세계적인 운동 입니다. 저는 미리 동참했을 뿐이구요. 아직 리뉴얼은 아닙니다 ^^
김진환 4월 8th, 2008 at 9:35
어이쿠!! 이렇게 빨리 답변을 정성스레 달아 주셔서 너무 감사드립니다. ^^

사람이 어떠한 고민을 가지고 있을때, 이미 그 답은 정해져 어느정도 정해 놓고 있다고들 합니다.
단지 불안감과 불확신감에서 오는 심리적 부담때문에 여기저기 자문도 구해보고 점??술의 이야기에도 귀기울여 보곤 하겠지요.

저도 어쩌면 똑같은 부류일지도 모르겠습니다.

정성스러운 답변에 한결 마음이 편안해지는 것 같습니다.
다시한번 감사드리며 오늘도 먼가를 얻어가 볼까 하는 마음에 들르게 되었네요 ^^

오늘 하루도 즐거운 하루 되시고~ 내일 선거일인데 어찌..쉬시는지요? ^^ 선거하시고 즐거운 휴일 되세요~

(PS. 아아..CSS Naked Day 라는 의미있는 운동도 있군요.^^ 대한민국의 몇%나 가능할지 사뭇 궁금해 집니다. ^^)
김일규 4월 15th, 2008 at 18:27
정찬명님 말씀 너무 감사합니다.
너무 많은 도움이 될것 같습니다.

사실 처음 이곳을 발견하고 수준높고 지적인? 좋은 정보와 때문에..
즐겨찾기 해놓고 오다보니..

어느날 정찬명님이 유명하신 분이란걸 깨닫고 ㅡㅡ;;

혹시나 하는 마음에 질문을 드렸는데 이렇게 좋은 정보와 지적을 주실주는 몰랐습니다.

프린터부터 해야겠네요.. ㅡㅡ;;

앞으로도 자주 방문하여 좋은 정보와 소식 종종 전해드리겠습니다.

말씀 너무 감사합니다.
정찬명 4월 15th, 2008 at 20:16
김일규님 저 그렇게 유명하지 않습니다 ㅡㅜ; 어쨌든 도움이 되시면 좋겠습니다. 좋은하루 되세요!
김일규 4월 15th, 2008 at 22:56
프린터 해서 하나씩 찬명님의 지적대로 수정하고 있습니다.

근데 몇가지 궁금한게 있어요..

하나.

로고를 그냥 h1 으로 마크업하지 않아도 되나요?
웹표준 교과서나 여타 책에서 보니깐..

실제로 h1 으로 로고를 마크업하는것은 메인페이지정도가 좋다고 하고..
근데 보통 h1 으로 로고를 마크업 하기도 한다고 하구요.. 둘다 맞는거 같기도 한데..

방금 로고부분을 수정했는데 그냥 h1 을 메인페이지 페이지 헤드라인 제목으로 해도 되는지요…

둘.

http://www.jennyhouse.info/ko/intro.php

위주소 문서 하단에 address 태그를 이미 사용중인데.. (보통일반웹문서 하단에는 모두 있음..문서공개일,갱신일,연락처 기재)

그래서 맨하단은 그냥 카피id 로 남겼던 것인데..
각문서 하단의 address 와 카피라이터 address 중 어떻게 사용해야 할지 궁금해요..
정찬명 4월 22nd, 2008 at 1:40
김일규님, 안녕하세요? 댓글이 좀 늦더라도 양해 부탁드립니다 ^^

h1을 언제 사용하는 것이 좋은지에 대한것은 명확하게 정의가 내려져 있습니다. 현재 페이지를 계층구조에 따라 다른 문서의 형태로 옮긴다고 가정할 때 가장 큰 제목이 되는 것이 바로 h1 입니다. 따라서 로고는 확실히 h1이 맞다고 판단됩니다. 한편 하나의 페이지에서 h1을 몇번이고 사용할 수 있는지에 대한 것은 명확하게 정의 내려진 바 없으므로 논쟁할 수도 있는 부분입니다. h1을 사이트 로고에 한번 사용한다면 여기에 이의를 제기할 수 있는 사람은 아무도 없지만 h1을 사이트 로고에도 적용하고 콘텐츠 영역의 제목에도 적용한다면 이것은 명확히 틀렸다고는 할 수 없지만 논쟁의 대상이 될 수 있다는 의미 입니다. h1을 하나의 페이지에 몇번 사용할 수 있는지에 대해서는 W3C의 스펙에 표현되어 있지 않기 때문입니다. 웹 표준 교과서를 지금 확인해 보지 못해서 어떤 의도로 “메인페이지 정도가 좋다” 라고 말했는지 정확히 이해가 되지 않는데요. 제 생각은 h1은 메인뿐만 아니라 서브페이지에서도 사이트 로고에 일관되게 사용하는 것이 좋습니다. 제 의견은 로고에 h1, 콘텐츠 영역의 헤드라인(현재 h1으로 마크업된)이 h2가 되는것이 제니하우스의 계층구조를 잘 표현하는 방법이라고 생각합니다. 제가 제안하는 방법대로 마크업 된다면 누구도 이의를 제기할수는 아마 없을껍니다. 하지만 이미 말씀드린대로 h1을 두번 사용한다면 이것을 틀렸다고 할 수는 없으나 논쟁꺼리는 될 수 있습니다.

address 태그는 한 페이지에 몇번 등장해도 무방합니다. 현재는 콘텐츠 영역에서만 사용중이신데요. address 태그는 저작자의 정보를 표현하는 모든 콘텐츠에 사용할 수 있습니다.

의문이 풀리셨는지 모르겠습니다. 궁금한게 있으시면 언제든 댓글 주세요 ^^
김일규 4월 23rd, 2008 at 0:56
찬명님 조언 감사합니다. 오늘 그동안 찬명님께서 말씀하신데로.. 로고가 h1,
메인페이지가 h2
제니하우스 새소식, 설문조사, 빠른메뉴등 검은글씨부분이 부분이 h3, 게시판이름부분이 h4 로 사이트 전체를 셋팅했습니다.

저조차 분석한다고 보다보니 꽤 오래걸리더군요..

처음에 헤드라인 메인페이지 부분을 h1 으로 저정한것들이, 즉 요소들이 밀리다보니.. 헤깔리더라구요..

어쨌든 찬명님 말씀대로 지정하고 나니깐 너무 뿌뜻합니다.

예전에 또 지적해주셨던 부분이.. 하나 더 있는게 그부분은 제가 잘 몰라 임시방편으로 해결해 놓은 부분이 있습니다..

국가별 이미지들에 id 를 주고 80여개가 출력됐었지요..

메인페이지에서 방문객들에게 너무 많은 부담을 주는것같아서 그냥 갯수를 줄였습니다 ㅡㅡ;;

백그라운드 이미지를 지정할경우에 사이트메인 왼쪽부분에 사용자 설정메뉴에서 폰트를 크게 설정할경우 밀리는현상이 생길것 같더라구요..

그래서 그냥 id 로 지정한것을 그냥 쓰고 갯수를 줄였습니다.

개개체를 id 로 다 지정한거는 별도의 페이지에서두 이 id 지정한것들이 유용하게 쓰이거든요..

아직도 정리하고 최적화 할 것이 무척 많겠지만..정말 열성을 다하면서 배워가며 제작하고 있습니다.

책을 항상 갖고 다니면서 읽구요.. 너무 잼있고 뿌듯합니다..

간혹 세계도시풍경도 한번 둘러보시면 눈이 즐거우실거에요..
그리고 시간이 되신다면 ㅡㅡ;; 저희사이트 자유게시판에 네이버 웹표준화팀 정찬명이라고 수고한다고 간단한 글 하나만 ㅋㅋ 그럼 영광으로 생각하겠습니다. ㅡㅡ;
항상 도움을 받아서 정말 고맙습니다.

적어도 메인페이지 정도만은 찬명님께 계속 조언받고 싶어요.

저희사이트는 외국인이 방문하여 한국도시풍경을 보는 곳이라 굉장히 잘 만들고 싶거든요..
김근희 4월 28th, 2008 at 17:00
안녕하세요?
저는 웹디자이너 김근희입니다.
요즘 웹표준 2.0 이란.. 말과 레이어 사용에 대한 정보를 대강 들었는데요
유용한 정보가 많은 것 같습니다.. ㅎㅎ 즐겨찾기에 추가했오요~
전 어떤식으로 변화를 모색해야 할가요? ㅠㅠ
정찬명 4월 29th, 2008 at 2:32
자유게시판에 개편 축하 코멘트 남겨드렸습니다. 한편 저는 개인적인 코멘트를 할 때 꼭 필요한 경우가 아니라면 회사를 연관짓는것이 옳지 않다고 생각해서 ‘네이버’ 라는 언급은 하지 않는점 양해해 주세요 ^^
정찬명 4월 29th, 2008 at 2:55
김근희님 안녕하세요?

제 블로그에는 때때로 검증되지 않았거나 오래된 정보들도 있어서 절대적 진리로 받아들이시면 안됩니다ㅜㅜ; 참고만 해주세요^^ 사실 저는 웹 2.0은 잘모르겠습니다. 웹 표준은 웹 1.0시대부터 존재하던 것이고 이제서야 주목받는 부분인데 많은 분들께서 웹 표준을 웹 2.0과 동일시 하거나 웹 2.0의 조건이라고 생각하시는 것 같습니다. 제가 생각하는 웹 2.0이라는 용어는 이전 세대와 현재 세대의 웹을 구분짓기위해 편의상 만들어진 용어 정도라고 생각하거든요. 웹 표준은 유행이나 시대흐름과는 무관하게 웹의 보편적 설계에 필요한 필수적 측면이구요.

그리고 위에서 언급하신 ‘레이어’라는 표현은 ‘시멘틱한 마크업의 사용’ 또는 ‘Tableless Layout’ 이라는 표현이 본래 의도하신 표현 이라고 생각합니다 ^^; 레이어는 웹 표준과는 무관한 용어 입니다. 모든 div가 레이어는 아니라는 것을 곧 깨닫게 되시리라 생각됩니다.

참고로 제 블로그에 작성한 적이 있는 ‘웹 표준, 추천도서 Best5!’ http://naradesign.net/wp/2007/07/17/124/ 그리고 ‘드림위버를 이용한 웹 표준 코딩 가이드’ 라는 페이지도 http://naradesign.net/open_content/lecture/DW&CSS/ 참고 부탁드립니다. 제가 임의로 권해드리는 것은 아니구요 나름 트래픽이 많은 페이지라서 김근희님께도 도움이 되실것 같습니다.

왕도가 있나요 ㅡㅡ; 조금씩 나아지는 수 밖에요 ^^
최용락 5월 12th, 2008 at 1:32
안녕하세요^^^
학교숙제를 하다가 검색하여 알게되었습니다.
여러가지 자료들도 있고 해서 가끔씩 방문하게 되었습니다.
물론 글을 쓰는건 처음이지만 ^^^;;
다름이 아니오라 염치 불구하고… 질문을 하나 하려고 합니다.
여기 사이트 처럼 위에 있는 메뉴 본문 ㅣ 검색 ㅣ 글분류 ㅣ 최근 글
이렇게 적혀있는부분처럼 자바스크립트를 이용하고 싶어서 나모 웹에디터에서
스크립트 마법사 부분을 이용하였습니다. 해보니 가로로는 되지 않고 세로로만되고
저장을 하고 나서 실행을 시키니 액티브 엑스를 허용해야 되더군요.
이사이트나 다른 사이트 들은 액티브 엑스부분을 허영하라는 부분이 없이
실행이 되는데 이부분도 설정을 해줘야하는건가요???
그리고 죄송하지만 여기 처럼 위에 메뉴부분에 가로로 할수 있는 법도좀 알려주세용
방명록에 질문을 해버려서 죄송합니다 ^^^;;;
정찬명 5월 12th, 2008 at 22:18
자바스크립트에 대하여 IE가 경고 메시지를 띄우는 것은 그 파일이 로컬(내컴퓨터)파일 일때만 그렇습니다. 그리고 말씀하신 메뉴부분은 자바스크립트가 아닌데 이걸 어쩌죠 ㅡㅡ; 자바스크립트를 꼭 사용해야만 하는 경우인지 반드시 생각해 보시고 사용하시는 것이 좋을것 같습니다. 가로 메뉴형태의 목록은 CSS만으로도 충분하거든요. 좋은 하루 되세요.
최용락 5월 12th, 2008 at 22:47
답변 감사합니다. 로컬파일 일때만 이라는 것은 ftp를 이용하던지 계정으로 올리면 경고메시지가 안나온다는 말씀이시죠?? 제가 제대로 이해를 했는지 모르겠습니다…. ㅠㅠ
자바스크립트가 아니었군요 제가 하나도 몰라서 그랬습니다..
css만으로 가능 하다면 다시한번 찾아보겠습니다. 감사합니다.
정찬명 5월 12th, 2008 at 23:12
네, 정확하게 이해하셨습니다 ^^
신승엽 5월 17th, 2008 at 17:32
안녕하세요?

학교 프로젝트로 가상의 회사 홈페이지를 만들어야 합니다. 저는 웹 표준, 웹 접근성에 평소에 관심을 많이 가지고 있었고요. 그렇게 제작하고 있는데요. 한가지 어떻게 하면 좋을까? 쉽게 답이 안 나오는 문제가 있어서요.

달력을 표시해 줘야 하는데요. 각 날짜에 날씨정보랑 신청 가능한 날인지에 대한 정보가 들어가야 해요.

역시 table을 이용해서 보통 달력 모양처럼 요일이 제목에 나오고 6개의 열을 가지게 표현하는 것이 의미에 맞을까요? 아니면 따로 표현해줄 방법이 있나요? 현재 일단 table을 이용하여 달력을 표현했어요.

또 한가지 문제는요. 이 프로젝트의 요구사항이 모바일 페이지도 만드는 것인데요. 전 표준에 맞게 작성 후 별도로 모바일 페이지가 필요없다는 사실을 발표 때 얘기하면 어떨까 싶어요. 그래서 모바일 시뮬레이터 몇 종류를 구해서 확인하며 제작 중인데요. 이게 위와 같은 달력은 휴대폰에서 표현되기에 접학하지 않다는 문제가… 휴대폰 화면에 6열의 table을 표시하는 것은 아무래도 무리더라고요.

정찬명 님이라면 어떻게 하실 것 같아요?

http://sukju.sdisk.net/process/order.php
한번 봐주세요. ^^; 나름대로 정말 노력해 만든 거랍니다. 아직 미완성이지만… 주소도 자바스크립트 없이 우편번호 찾을 수 있도록 처리하였고요.
정찬명 5월 19th, 2008 at 10:58
신승엽님 안녕하세요?

달력은 일반적으로 table로 마크업하는것이 의미에 맞다고 생각하고 있습니다. 그런데 페이지에 방문해보니 table로 된 달력은 보이지 않던데요 ^^

각 셀에 날씨정보와 신청 가능한 날인지에 대한 정보를 표현할 때 텍스트 또는 아이콘이 크지 않다면 모바일 페이지에서 보는것에 큰 문제가 없다고 생각했는데 아닌가요? 직접 보면 좋겠는데 말이죠. 만약 모바일 페이지에서 보는데 문제가 된다면 어떤 문제인지 정확히 확인한 후에 다른 방법을 찾아보는게 좋을것 같습니다.

좋은 하루 되세요.
신승엽 5월 20th, 2008 at 11:44
답변 감사합니다^^;;

달력은 폼을 입력하셔서 다음 단계로 이동하시면 나옵니다.

휴대폰으로 확인해 보니까 각 셀의 글씨가 세로로 나오거라고요.

겨우 한글자 나오는 거죠;;
서주영 5월 20th, 2008 at 14:43
학교 졸업 후 일만하다보니 어느세 제 기술은 낙후되어있고 새로운 기술과 버젼 업된 정보들이 쏟아져서 한계를 느끼던 중 우연히 나라디자인을 접하게 되었습니다.

완전 썡유베리 감솨!

이러한 공간이 있다는 것 자체가 감사할 따름입니다.
고맙습니다.

앞으로도 서로가 좋은 정보들을 공유하며 나눌 수 있는 web의 세상을 만들기 위한 하나 하나의 모습에 흐믓합니다.

건강하세요 ^^
정찬명 5월 20th, 2008 at 23:41
신승엽님께, 현재는 table의 너비가 고정되어 있지 않다보니 화면크기에 맞게 테이블 너비가 줄어들면서 그런 현상이 생기는것 같습니다. table의 너비를 CSS를 이용하여 고정해 놓고 테스트를 해보시는것은 어떨까요?

만약 CSS를 지원하는 모바일 브라우저라면 가로 스크롤이 생길 것이구요.
만약 CSS를 지원하지 않는 모바일 브라우저라면 보통은 td가 inline 형태로 선형화 되거나 또는 block 형태로 바뀌면서 읽기 편하게 되지 않을까 생각됩니다.

별도의 모바일 페이지가 필요없다는 것을 설명하려는 발상은 정말 훌륭한 생각이신것 같습니다 ^^
정찬명 5월 20th, 2008 at 23:45
서주영님 극찬 감사합니다 (__) 자꾸 저를 부끄럽게 만드시네요 ㅡㅡ;
김성광 5월 22nd, 2008 at 13:31
안녕하세요!! 매번 보기만하고 방명록에 글쓰는건 처음인에네요^^

보다가 궁금한게 생겨서요.

찬명님이 쓰신 글중에..

”
* a, applet, frame, iframe, img, map 에서 name 속성은 다음 버전부터 지원하지 않는다.
id 와 name 을 함께 사용하던 마크업의 name 속성은 모두 id 속성으로 교체되어야 한다. name 속성은 공식적으로 폐기하였지만 여전히 XHTML 1.0 Transitional 버전의 문서까지는 지원하고 있다. 하지만 XHTML 1.0 Strict 버전에서 지원하지 않으며 다음 버전에서는 분명히 폐기된다
”
폐기되는 태그가 있다고 하셨는데요.
applet이나 map, name같은건 폐기 되는게 이해가 가는데.

a, frame, iframe, img 태그가 폐기가 되면 이태그를 대체 할만한 태그들이 나와있나염?

특히 a태크나 frame태그가 가장 활용도가 높은데 말이조..
정찬명 5월 22nd, 2008 at 15:21
김성광님, 안녕하세요. 약간의 오해가 있으신것 같습니다. 폐기되는 것은 태그가 아니라 저 태그들에 사용되는 name 이라는 속성 입니다. 참고로 HTML 4 버전에서 공식적으로 폐기된 태그는 applet, basefont, center, dir, font, isindex, menu, s, strike, u, xmp 입니다. 폐기된 태그들은 DTD가 Strict모드에서 사용된 경우에만 문법 오류로 간주하며 Transitional 모드에서는 허용됩니다. 좋은 하루 되세요 ^^
김성광 5월 23rd, 2008 at 9:59
아^^ 그런거였군요~^^ 빠르고 친절한 답변 정말 감사합니다~!

좋은 하루되세염!!ㅎㅎ
김일규 5월 23rd, 2008 at 13:01
찬명님 잘 지내시죠?
잠시 웹표준 정보를 보려 들렀습니다.
지난번의 조언으로 많은 도움이 되었어요.

또 물어볼것이 있어서요.

css 핵을 게시판버튼쪽에서 사용중인데.. 제로보드 버튼 css 따왔음.

display -moz-inline-box
_width

이런부분들이 validator 에서 걸리는군요.

분석을 해보니.. 인터넷 익스플로러 버젼별등 모든 웹프라우저를 고려해서 위에 css 핵 소스가 들어가 있더라구요..

css validator 를 포기해야 할까봐요…
정찬명 5월 27th, 2008 at 0:36
김일규님, 안녕하세요? 제로보드 버튼영역의 CSS는 제가 작성한 코드가 반영되지 않아서 뭐라 말씀드리기가 쉽지 않지만 보여주신 코드는 Firefox Hack 형식 입니다. 다만 그렇게 처리한 이유는 제로보드의 버튼 영역에 해외 기타 국가의 언어를 텍스트로 담아내기 위하여 이미지를 사용하지 않으려 했고 고영수님께서 버튼과 관련하여 CSS 공개코드를 적용하신 부분입니다. 그리고 굳이 그것 뿐만이 아니더라도 제로보드 XE는 CSS Validator는 통과하지 못합니다. 왜냐하면 크로스브라우징을 위하여 CSS Hack을 여러곳 사용하였기 때문입니다. HTML Validator는 중요하지만 CSS Validator는 크로스브라우징을 위하여 포기할 수 밖에 없다고 생각했습니다. 그리고 이러한 방침은 제로보드 뿐만 아니라 네이버에도 동일하게 적용되고 있습니다.
김일규 5월 27th, 2008 at 2:15
댓글 너무 감사합니다. Validator 통과도 중요하지만, Validator 통과 보다도 더 중요한 정보를 얻게된 기분입니다.

너무 감사해요. 또 방문하겠습니다.
호호님 6월 5th, 2008 at 14:34
안녕하세요?

2년 정도 쉬었다가 다시 복귀했습니다.
그동안 웹2.0이라는 개념이 본격적으로 나오면서 많이 바뀐걸 느꼈는데요.

특별히 embed src 태그를 이용해서 플래시를 걸었던 과거와 달리,
object 태그를 권장하는것 같던데요.

문제는 익스프로어에서는 잘 돌아가는데,
파이어폭스에서 object 태그를 이용해서 플래시 파일을 걸었더니
전혀 보이지 않는거예요.

플래시 파일은 js 로 만들어서 라인이 보이지 않도록 처리했구요.

혹시.. 이와 관련된 도움을 받을 수 있을까요?
정찬명 6월 5th, 2008 at 15:07
호호님, 안녕하세요? object가 표준 엘리먼트 이며 현재 Firefox는 object를 지원하지 않고 비표준 엘리먼트인 embed만 지원하고 있어서 object 엘리먼트 안쪽에 embed 엘리먼트를 같이 적어주셔야 합니다. 이렇게 하는 이유는 Firefox가 object를 실행하지 못할 때 object의 자식 엘리먼트를 대체정보로 인식하여 출력해 주기 때문입니다. 이와 관련하여 신현석님의 글이 도움이 되실것 같습니다. http://hyeonseok.com/pmwiki/index.php/Markup/Object 좋은 하루 되세요 ^^
호호님 6월 5th, 2008 at 15:32
감사합니다. 덕분에 해결했어요.
쉬었던 공백만큼 새로운 것들에 대해 두려움이 많았는데,
이 사이트를 통해 빠르게 적응하고 있습니다. 감사….

테이블 태그를 이용해서 레이아웃을 잡고 코딩해 왔는데요,
시멘틱하게 가기 위해선 그래선 안된다는 내용을 보고 css 마스터 전략 책을 사서 공부해 봤는데요. 하면서 의문이 들더라구요. 일일히 손으로 코딩해야 하나요? 아니면 드림위버에서 잡아주는게 있나요?

궁금한게 너무 많아요. 자주 질문 드릴게요.
정찬명 6월 6th, 2008 at 0:47
호호님, 해결되셨다니 다행이네요 ^^; 테이블 엘리먼트의 진정한 의미에 대해서 깨닫게 되신거군요. 축하드립니다. 테이블을 사용하지 않으면서 레이아웃을 구현하는 방법은 웹 표준 마크업으로 구현방식을 바꾸면서 누구나 처음 접하게 되는 고민이라고 생각됩니다.

테이블은 제목셀과 내용셀이 존재하는 2차원의 격자형 데이터 타입을 마크업하는 용도라서 이것을 용도에 맞게 사용해야 하고 화면을 분할하거나 또는 콘텐츠를 그룹핑을 하거나 또는 하나의 콘텐츠를 다른 콘텐츠와 구분짓기 위해서는 div 또는 span 엘리먼트를 사용하게 됩니다.

div 엘리먼트는 블럭레벨 엘리먼트라서 블럭과 블럭을 구분하고 span 엘리먼트는 인라인 엘리먼트라서 인라인 콘텐츠를 그룹핑하거나 분리하는 역할을 합니다. 또한 div, span 엘리먼트는 다른 엘리먼트에 비해서 의미가 가장 약하다고 말할 수 있습니다. 왜냐하면 스스로는 의미를 갖지 않고 단지 콘텐츠를 분리하거나 그룹핑하는 의미만 지니고 있기 때문입니다.

드림위버를 언급하시는 것으로 미루어 기존에는 아마도 WYSIWYG 방식의 편집기(드림위버)에서 표를 이용하여 레이아웃을 잡으셨으리라 생각됩니다. 기존의 방식은 HTML엘리먼트(table, tr, td)가 레이아웃 속성들(width, height, align…)을 지니고 있었기에 WYSIWYG 에디터를 사용하는 방식이 더 수월했다고 생각됩니다. 하지만 웹 표준 마크업 방식은 디자인 요소의 대부분(화면 레이아웃으로부터 정렬과 서체등…)을 CSS코드에 전적으로 의존하기 때문에 WYSIWYG 방식을 이용하기에는 적합하지 않다고 생각합니다. 왜냐하면 기존에는 WYSIWYG 모드에서 HTML 엘리먼트와 속성만 제어하면 되었지만 현재의 방식은 HTML뿐만 아니라 CSS 선택자와 속성/값을 주로 제어해야 하기 때문에 WYSIWYG을 사용하면 정교한 작업이 어렵게 됩니다.

쉽게말해 레이아웃 목적의 table과 같은 경우 특정 셀의 너비나 높이가 잘못된 값을 지니고 있어도 전체적인 화면분할 구조는 크게 깨지지 않기 때문에 제작자가 잘못된 수치값을 입력해도 별 문제가 없었지만 CSS레이아웃은 레이아웃용 너비/높이/마진/패딩 등의 속성이 1px만 어긋나도 레이아웃이 크게 깨질 수 있는 요인이 더 많습니다.

물론 WYSIWYG 방식을 선호한다면 WYSIWYG 방식의 작업이 가능합니다. 드림위버는 대화상자 등을 통해서 레이아웃용 div의 크기와 속성들을 정교하게 편집할 수 있기 때문입니다. 하지만 드림위버의 대화상자를 이용하는 것은 CSS 코드에 대한 이해가 갖추어 지지 않은 상황에서 큰 도움이 되지 않는다고 생각합니다. WYSIWYG 화면에서 속성 패널이나 대화상자 옵션을 조정할 때 어떤 코드가 생성되고 그 코드가 다른 엘리먼트에 정확히 어떤 영향을 미치게 되는지 알고 있다면 사용해도 괜찮지만 그렇지 않다면 WYSIWYG 방식으로 설계하는 것이 장기적으로 도움이 되지 않습니다. WYSIWYG 방식은 CSS 코드에 대한 이해가 갖추어지고 난 이후 선호에 따라 사용하는 것이 좋고 CSS 레이아웃에 대한 전반적인 이해가 부족하다고 판단되면 보류하는 것이 좋습니다.

직접 하드코딩을 시작하게 되시면 처음에는 레이아웃 목적으로 table을 사용하는 것보다 2배 이상 많은 시간을 소비하게 될 것입니다. 주로 사용하던 방식이나 언어가 아닌 전혀 새로운 언어를 사용하기 때문에 당연한 현상입니다. 하지만 CSS에 익숙해지게 되면 table을 이용하여 화면을 배치하는 작업이 정말 끔찍하게 생각되실껍니다. ^^ 나중에는 CSS를 이용하여 화면을 배치하는 작업의 속도가 table을 이용하여 배치하는 시간과 비슷해 지지만 결정적인 차이는 유지보수에서 발생합니다. 1,000 페이지에 포함된 로고 이미지의 화면 배치나 정렬을 단 10초만에 바꿀 수 있는 것은 CSS 레이아웃일 때에만 가능하기 때문입니다.

‘드림위버를 이용한 웹 표준 코딩 가이드’라는 문서 하나를 소개해 드립니다. 주말에 여유있게 천천히 읽어 보시면 실무에 도움이 되시리라 믿고 권해 드립니다. http://naradesign.net/open_content/lecture/DW&CSS/ 좋은 하루 되세요. 감사합니다 ^^
호호님 6월 9th, 2008 at 11:27
안녕하세요? 이 사이트를 통해 많은 도움을 받고 있습니다.

기존에는 익스플로어만 테스트하여 작업해 왔는데, 요즘 생각이 바뀌고 있어서,
파이어폭스나 사파리에서도 테스트하며 작업하려고 노력하고 있어요.

근데… 자바스크립트 제어 부분에서의 지원여부가 헷갈리네요.
아래 URL을 눌러서 보시면 익스플로러에서는 잘 지원되지만
사파리나 파이어 폭스에서는 지원이 되질 않습니다.

어디서 부터 손대야 할지 몰라서요.
한번 살펴봐 주시겠어요?
또한, 이미지를 버튼처럼 쓰기 위해서 cursor:hand을 사용했는데, 이것 역시 적용되지 않네요.
답변 기다리겠습니다.

http://www.hugsys.com/media_test/
호호님 6월 9th, 2008 at 11:48
내용을 읽어보니 cursor:hand는 쓰지 않고도 제어가 가능하겠어요. 호호
정찬명 6월 9th, 2008 at 20:37
호호님, 안녕하세요? document.all 은 표준 메소드가 아니기 때문입니다. 크로스브라우징을 고려하신다면 표준 메소드인 document.getElementById 를 사용하시면 됩니다. 아래와 같이 해보세요.

document.getElementById(’Layer1′).style.display=’none’

이렇게 하시면 W3C DOM을 지원하는 모든 브라우저에서 작동하기 때문에 문제가 없습니다.
좋은하루 되세요.
정찬명 6월 9th, 2008 at 20:39
호호님, cursor:hand 속성은 MS IE 5.5 이하 버전의 브라우저에서만 인식하는 비 표준 속성입니다. cursor:pointer 가 정확한 표현입니다. ^^
호호님 6월 10th, 2008 at 17:33
감사합니다. getElementById로 수정하였고, 이 문제는 테스트 해보니 잘 되네요.
다만, ff에서 동영상 제어는 어떻게 하는지 모르겠네요.

사이트를 뒤져가며 찾아보고 있는뎅.. 시원하게 알 수가 없어서…
도배하는거 같아 넘 미안하지만… 도움을 청할곳이 여기밖에 없습니다.

도와주세요~ ㅠ.ㅜ
정찬명 6월 10th, 2008 at 23:33
호호님, 안녕하세요. ^^; 호호님께서 올리시는 질문이 다른분들에게 도움이 된다고 생각하면서 나름 열심히 답변 드리고 있으니 너무 미안해 하지 않으셔도 됩니다. 다만 동영상을 제어하는 부분은 제 전문분야가 아니라서 답변드리기가 버겁습니다. Window Media Player 대신 다른 스킨을 씌우려고 하시는 것 같은데 맞는지요? 저는 그런걸 잘 모릅니다. ㅜㅜ; 동영상 서비스를 제공하는 웹사이트에서 벤치마킹 해보시는게 제일 빠르지 않을까요?
황운식 6월 23rd, 2008 at 19:58
행님 혹시나해서 왔다갑니다.
여전히 그모습으로 지내고계시는군요…
대전에서 짐싸들고 서울로 이사왔습니다.
언제함 뭉쳐요… 건강하시고 꼭 봐요..^_^
정찬명 6월 23rd, 2008 at 23:34
운식, 반갑다! 서울입성을 축하한다.^^ 직장때문에 올라온건지 유학온건지 궁금하구나. 혹시 분당오면 연락해라. 형이 술 한잔 사마. 너도 항상 행복하고 건승을 빈다!
김세민 6월 24th, 2008 at 20:13
반갑습니다
정찬명씨가 주인인 블로그였군요
특이한 UI의 페이지다 싶었는데…역시나 그런쪽일을 하시는 분이었군요
일하다가 모르는거 있으면 자주 들르겠습니다.
블로그 번창해서 많은 도움 받을 수 있는 페이지가 되길 기대하겠습니다
정찬명 6월 24th, 2008 at 20:59
웹 표준 경진대회 동상을 수상하신 분과 성함이 같은것은 우연의 일치인가요? 아니면 본인이신가요? 특이한 UI는 이제 좀 바꿀 때가 되었는데 영 엄두를 못해고 있네요. 자주 들러주세요. 감사합니다.^^
phoebe 6월 25th, 2008 at 18:24
dece24 gmail로 메일 하나 드렸습니다. ^^
확인 부탁 드려요. ^^
정찬명 6월 25th, 2008 at 22:08
네, 방금 답변을 드렸는데요. 아는게 없어서 저희 고객센터 페이지 링크와 전화번호만 회신해 드렸습니다. ^^
정찬효 7월 21st, 2008 at 21:25
형아, 나 왔다가요.
인터뷰한게 실렸네. 자랑스런 우리형. ^^
정찬명 7월 21st, 2008 at 23:35
우왓! 찬효 네가 왠일이냐? 형아 블로그에 댓글을 다 달고. 요녀석 은규 사진보러 왔지? ㅋㅋㅋ.
이상훈 7월 28th, 2008 at 0:06
안녕하세요. zbXE OFF모임에서 스쳐지나간 CGlink.kr 상훈이라고 합니다. 뒷풀이 왜 안오셨어용.^^
얘기 많이 나누지 못해 아쉽습니다.
질문이 있는데요.
드림위버 베타테스팅까지 하고 계신다니 꼭 물어보고 싶었습니다.
CS3버젼 쓰고있는데 가끔씩 코드를 드림위버가 맘데로 바꿔버리는 증상이 있어서요.
Preferences > Code Rewriting 부분은 몽땅 다 체크OFF 하고 사용하는데도 가끔 그러네요.
그런 증상이 발생하는 코드는 zbXE의 템플릿스크립트가 있는 부분이고 특히 메뉴구성을 위한 나름 복잡한 템플릿스크립트를 정렬만 바꾸는 수준이 아니라 드림위버가 “창작”을 해버리는군요.^^;;;
템플릿문법은 못알아먹기 때문이겠지만… 코드를 자꾸 건드려서 수시로 백업하면서 작업하느라 여간 번거로운 것이 아니네요.
이부분에 관해서 조언을 좀 부탁드리고 싶습니다.
정찬명 7월 28th, 2008 at 11:22
이상훈님, 안녕하세요? 구체적으로 코드가 수정되기 전과 수정된 후의 코드를 볼 수 있다면 확인해 볼 수 있을것 같습니다. 지금은 어떤 코드가 어떻게 변경이 되는지 알 수 없어서 확실히 알기 어렵습니다 ^^
이상훈 8월 2nd, 2008 at 13:10
상당히 간헐적으로 발생하는 현상인지라 일부러 발생하도록 이리저리해봐도 안나오고있네요. 요즘은 스키닝을 안하고있어서… 같은 현상이 발생하면 코드 복사해두고 다시 질문드리겠습니다.^^;;;
정찬명 8월 5th, 2008 at 0:35
다시 재현되지 않길 바래요 ㅎㅎㅎ.
정지훈 8월 17th, 2008 at 7:27
dece24앳gmail.com 이쪽으로 메일드렸습니다. 확인부탁드립니다.
이상훈 8월 26th, 2008 at 19:06
요즘 zbXE 모듈개발때문에 PHP가지고 엄청 삽질과 좌절을 반복하다가 지치고 있었습니다.
어쩌다 한발짝 진전이 있어서 다시 스킨을 만지게 되었죠.
그러면서 역시나 다시 같은 증상이 재현되어버렸습니다.^^

코드가 길어서 제 블로그에 옮겨 적어놨습니다.
http://sanghoon.kr/4723
정찬명 8월 26th, 2008 at 20:01
이상훈님, 안녕하세요?

확실한 물증 잡으신걸 축하드립니다. ^^; 증상을 보니 HTML 엘리먼트 안쪽에 삽입된 템플릿 문법이 복사된 후 엘리먼트 앞쪽으로 자동으로 붙여넣기가 된 것처럼 보입니다. 아마도 통상 엘리먼트 안쪽에서 주석 처리를 하지 않는데 그곳에 주석이 포함되어 있고 드림위버는 이렇게 일반적이지 않은 코드에 당황해서 의도하지 않은 오류를 범하는 것 같습니다.

현재 상황에서 확인해야 하는 옵션은 다음과 같습니다.

Edit > Preferences > Code Rewriting > Rewrite code > Fix invalidly nested and unclosed tags (체크 해제)

이 옵션에 체크되어 있었다면 체크를 해제하고 계속해서 동일한 증상이 반복되는지 확인해 보세요.

만약 체크를 해제한 상태에서 지속적으로 동일한 증상이 나타난다면 제가 버그로 리포트 할 수 있도록 문제의 파일과 오류를 유발하는 스텝을 적어 보내주세요. 버그를 유발하는 스텝은 다른 사람이 따라 했을 때에도 동일한 오류가 나타나는 것이 가장 좋습니다.

이 버그 한번 파고들어가 보자구요! 감사합니다.
이상훈 8월 27th, 2008 at 15:13
아래 신고 드렸던 증상이 발생하는 패턴을 하나 찾았습니다.
셈플코드 파일과 스텝을 같은 URL에 올려두었습니다.
찬명님께서 같은스템을 밟았을때 똑같은 증상이 발생하는지 한번 해봐주세요.^^
정찬명 8월 27th, 2008 at 22:40
네, 감사합니다. 버그 리포트라는게 무척 귀찮은 일인데 수고해 주셨네요. 내일 테스트 해보고 경과를 공유 드리겠습니다.
정찬효 8월 30th, 2008 at 22:13
형아,
사무실 진짜로 이사했구나. 더 좋아졌네?
근데 지난번에 우리 대청댐 놀러가서 찍은 사진 왜 안올려 !!??
그리고 내 싸이 와서 아버지 국궁쏘는 모습 봐봐.
정찬명 9월 1st, 2008 at 21:14
아, 깜빡했다! 찾아보고 올릴께! ^^
정찬명 9월 2nd, 2008 at 1:19
사진 올렸고 싸이에서 아버지 사진 잘 봤다. 언제 형아도 구경가구 싶네. ㅎㅎ. 활도 쏴보구 싶고.
추명구 9월 9th, 2008 at 11:59
정찬명 회원님 안녕하세요. 참여에 추명구 간사입니다. 아래 글에 “대청댐”이라는 단어를 보니 참 반갑네요. 부서를 이동하셨군요. 늘 화이팅하세요.
회원님께 많은 이야기 듣고 싶은데 넘 멀리 있어 안타깝습니다.
저는 우리 구멍가게(우리단체홈페이지) 생각하느라 머리가 아픕니다.
공부도 하고 싶은데 이야기 할 수 있는 사람이 없어서 답답하기도 하구요.
아무튼 회원님의 새로운 시작을 축하드립니다.
또한 타지역에서도 저희들 잊지 않고 후원해 주셔서 고맙습니다.
점심 맛있게 드세요
정찬명 9월 9th, 2008 at 23:30
추간사님 안녕하세요? 이렇게 직접 글남겨 주시고 영광입니다. 제가 아무것도 도움 드리지 못하는데 후원이라뇨 ㅜㅜ; 추간사님 덕분에 나날이 발전하는 대전참여자치시민연대를 보고 있으면 멀리서 지켜보기만 하는 저는 죄스러운 마음 뿐입니다. 지금은 제가 대전에 있지도 않고 시민연대를 돕지도 못하지만 제가 몸담고 있는 분야에서 추간사님과 같은 일을 하고 있다고 생각해 주세요. 대전의 주권을 시민이 갖는 것이나 웹을 모두가 나누어 갖는 것이나 저는 같은 일이라고 생각 합니다. 기회되면 한번 인사드리러 가겠습니다. ^^;
이원민 10월 1st, 2008 at 13:35
소소한 리뉴얼을 하셨네요…
조금 더 컨텐츠에 집중할 수 있을 것 같습니다. 번창하세요..
정찬명 10월 1st, 2008 at 15:12
집들이 오신건가요? ㅋㅋ 감사합니다. 참고로 CSS3 속성을 시험적으로 적용했어요. FF, SF, CR 브라우저에서는 박스 모서리에 라운딩이 적용되어 있고 IE, OP 에서는 박스 모서리에 라운딩 효과가 없습니다.
별별 10월 3rd, 2008 at 2:37
어이~ 여긴 왜.. 갈수록 복잡해 진다냐~ ㅋㅋㅋ.
심플이 베스튼거지. 공학이고 디자인이고. 사람도 마찮가질세…
(나도 안다네. 나 복잡한거…ㅜ,.ㅡ)
잘 살곤 있는감?
이몸은 얼마 전 플젝 마치고 내가 젤 싫어하는 곳으로 간다네. 줸장.
하여간, 환절기 감기 조심하고. 언제 함 보자고…
정찬명 10월 4th, 2008 at 22:00
2년동안 한결같은 모양새가 지겨워서 박스 하나 쳤기로서니 이게 뭐가 그리 복잡하다고 난린가? 나도 보고싶네. 좀 들리게나.
이원민 10월 13th, 2008 at 10:52
댓글을 작성하고 다음글을 보려는데, 이전 다음 텍스트 버튼이 보이질 않습니다.

댓글보기를 클릭 후 댓글을 작성한 다음에 이전 다음 글을 볼 수 있게 해주세요!
정찬명 10월 13th, 2008 at 13:13
네, 저도 그거 참 불편하다고 생각하고 있었는데요. 어디서 무얼 고쳐야 하는지 좀 확인해 보고 가능하면 반영하도록 할께요. 코멘트 감사합니다. ^^;
김진환 10월 15th, 2008 at 8:55
사내 그룹웨어 공지에

대한상공회의소에서 ‘웹 접근성 제고 세미나’개최에 대한 참여글을 보았습니다.

웹 접근성 실무기법

16:40~17:10 웹 접근성을 고려한 게시판 제작 기법을 맡으셨더군요 ^^

아…너무 유익한 세미나일 것 같아 가고싶은 맘이 굴뚝같습니다.
파견은 너무 눈치가 보이는군요..ㅡ.ㅡa

이리저리 바쁘신 모습이 존경스럽고, 부럽기 까지 …^^

성공적인 세미나 되시길 바랍니다.~
정찬명 10월 15th, 2008 at 11:03
격려 감사합니다. 세미나장에 400명까지 수용이 가능하다고 하던데 만원이 된다면 무척 떨리고 감동적일 것 같습니다. 발표 자료들은 KADO에서 공개를 하기 때문에 참석하지 못하신다면 아쉬운대로 발표 자료라도 읽어보실 수 있을 것 같습니다. 참석하지 못하시는 분들도 알아볼 수 있게 발표자료 꼼꼼하게 만들어야 겠네요. ^^;
이원민 10월 17th, 2008 at 16:25
찬명님. 혹시 댓글 내용을 수정하지 못하게 한 이유가 있나요??

댓글을 남기고 나서 다시 읽어본 결과, 오타가 발견이 되어 수정을 하려고 하는데 수정버튼이 없어 수정할 수가 없었습니다.

당연히 수정버튼을 추가 해주실꺼죠?ㅎㅎ
정찬명 10월 17th, 2008 at 16:49
앗, 이런.. ㅜㅜ; 안타깝게도 워드프레스라는 툴은 회원이 아닌 사람이 작성한 댓글은 관리자만 수정하거나 삭제 할 수 있도록 되어 있습니다. 이렇게 실수하는 분들이 가끔 계신데 아무래도 수정이 가능하도록 하는 방법이 있는지 알아봐야 겠네요. 물론 지금 당장은 어렵고 시간이 될 때 살펴볼께요. (대신 잘 못된 글은 인공지능 시스템이 시간 날 때 알아서 수정해 주는 그런 시스템은 있어요.)

PS : 지난번에 제안주신 ‘이전글/다음글’은 잘 반영해 두었습니다. ^^;
이원민 10월 17th, 2008 at 17:40
우하하! 정말 맘에 듭니다 ㅠ_ㅠ
그것도 이전 다음글도 너무 센스있었어요 :)
제 블로그에도 똑같이……………… 반영할겁니다 ㅋㅋㅋ

이군은 따라쟁이~
이원민 10월 27th, 2008 at 16:11
나눔체로 변경하셨군요. 훨씬 더 보기 좋은 것 같은 느낌이 듭니다. :)
정찬명 10월 27th, 2008 at 16:28
다행입니다. ^^; 주말에 한번 적용해 봤는데 싫어하시는 분들도 계셔서 좀 조심스럽기는 했어요. 그러나 나눔고딕 싫어하시는 분들은 굳이 OS에 설치하지 않으셨겠지.. 라는 얇팍한 믿음으로요. ㅎㅎ.
song 11월 3rd, 2008 at 21:14
오늘 만나뵈서 좋았습니다.
좋은 강연도 들었구요. 선물도 감사합니다.
올 초에 CSS로 버튼을 만든걸 해봤었는데.. 오늘 다시 보아서 감회가 새로웠습니다.
그때 작업했던 싸이트가
fotobada.com 였습니다.

나중에 분당에서 연락드리겠습니다.~ ^^;
양영복 11월 4th, 2008 at 9:04
어제 강의 잘 들었습니다.
말씀도 너무 잘하시고 쉽게 설명해주셔서 이해가 팍팍~~
인사라도 드리고 싶었는데 어느새 휙~하고 사라지셨다는…

오늘도 좋은 하루되시고
다음에 뵐 날을 기대하겠습니다^^
정찬명 11월 4th, 2008 at 10:29
song님, 어제 잘 들어가셨죠. 저도 정말 반가웠습니다. song님을 보고 백엔드와 프론트엔드를 아우르는 해박한 지식을 가지신 분 같아서 대단하다는 생각을 했습니다. 분당에 오시면 언제든 연락하세요. 맛있는 밥 사드릴께요. ^^;
정찬명 11월 4th, 2008 at 10:32
양역복님, 안녕하세요? 항상 발표같은 것을 하고 나면 ‘나 왜이렇게 못했지’라고 후회를 하곤 하는데 격려해주시니 감사드립니다. 그리고 제 설명이 잘 이해가 되셨다니 정말 기쁩니다. ^^
미희 11월 4th, 2008 at 23:14
저도 집들이 왔다갑니다;; 왠지 나라디자인의 트레이드 마크 같았던 갈색컬러가 시원한 바다색으로 바뀌어서 좋네요 왠지 지나가 여름의 향기가 느껴지는 것 같기도 하네요. 어둠의 자식이라 몰래 보고 도망가는 것이 더 좋지마는 ^^;;
어제 세미나 잘 듣고 많이 배웠습니다. display : none 아닌 visibility:hidden은 절로 ‘아아 =ㅁ=;; 그래 저 녀석이 있었지..’ 하게 되었습니다. 꽤 오래전에 한번 뵙고 불쑥 인사드려서 무언가 창피하기도 했지만;;; 크윽… ㅜ^ㅜ…
그럼 건강하시고 행복한 하루 하루 보내시길 바라옵니다 :)
정찬명 11월 5th, 2008 at 3:35
쑥스러움을 무릅쓰고 먼저 아는척 해주셨는데 제가 몰라뵈서 정말 죄송하더라구요. ㅎㅎ. 미희님 명함을 받고 보니 기억이 났구요. 다음번에 만나뵈면 얼굴을 확실하게 기억해야 겠습니다. ㅜㅜ; 미희님도 항상 즐거운 나날들 되시길 빌께요!
Outsider 11월 6th, 2008 at 9:24
안녕하세요. 항상 눈팅만 하다가 궁금한게 있어서 질문을 좀 드릴려고 들렸습니다. 주위에는 달리 물어볼때가 없어서요. 버튼에 대한 부분인데요.
얼마전에 제가 제 블로그에
http://blog.outsider.ne.kr/223
아래와 같은 포스팅을 했습니다. 저는 웹퍼블리셔는 아니고 개발자인데요 웹표준에도 관심이 많아서 저런 내용을 적었는데요 많은 생각을 해봤는데 제가 적은 내용이 틀리진 않다고 생각하는데 어떤 퍼블리셔분이 리플로 그럴경우 앵커태그를 썼을때는 클릭할때 주위에 점선이 생기는데 그 점선문제는 어떻게 하냐는 말씀을 하셨습니다.
전 퍼블리셔가 아니라 생각지도 못한 문제였는데요. 링크의 점선문제는 접근성면에서 중요하다고 생각되는데요 그러면 href=”#”을 사용해서 버튼에 클릭을 활성화 되게 사용하는 것이 맞는 방법인지 아니면 다른 방법이 있는 것인지 궁금합니다.
Outsider 11월 6th, 2008 at 9:29
아~ 한번 쓰니까 수정이 안되는군요.
한번도 뵌적은 없는데 블로그는 자주와서 글남겼는데 폐끼치는건 아닌지 걱정되네요.. ^^
정진희 11월 6th, 2008 at 17:15
정찬명님 안녕하세요 ^^
블로깅을 하다 우연히 오게되었습니다.
웹접근성에 관심이 있어 글을 읽다보니 여러 생각을 하게 되네요~
저는 아직도 너무 부족하다는 것을, 배울 것이 많다는 것을 또 한번 느끼게 됩니다.
제 홈페이지는 웹표준을 준수해야지 하면서 알고보면 겉모습만 그랬다는 생각이 드네요.. ㅜ.ㅜ
감사드립니다.
그럼 남은 하루 행복하시길 바랍니다 ^^
박영식 11월 7th, 2008 at 21:59
(WCAG) 2.0 PR이 나왔네요. (http://www.w3.org/TR/WCAG20/)
여기서 1.0에 대한 것을 잘 봐서 바로 들어와 봤습니다.
정찬명 11월 10th, 2008 at 10:16
Outsider님, 안녕하세요? 지난 주 목요일부터 너무 바뻐져서 댓글을 하나도 못달고 이제서야 댓글 드리는점 양해 해주세요. a 태그의 사용성과 접근성에 관하여 제가 글을 쓴 적이 있는데요. 그 포스팅으로 답변을 대신해 드려도 될 것 같습니다. ‘a 태그의 사용성과 접근성. ‘http://naradesign.net/wp/2007/07/11/123/ 결국 href=”#” 보다는 href=”#url” 형식으로 마크업 하시는 것이 의미에도 맞고 접근성도 확보하는 올바른 방법이라고 말씀드릴 수 있습니다. 감사합니다.
정찬명 11월 10th, 2008 at 10:24
유용한 소식 전해주셔서 감사합니다.^^ 참고로 다른분들에게 이것이 어떤 의미가 있는지 소개해 드리기 위하여 간단한 설명을 덧붙입니다.

W3C의 최종 권고안을 흔히 ‘웹 표준’이라 부르는데요. 표준이 되는 단계는 ‘초안(WD)’Working Draft ‘ > 권고 후보안(CR)’Candidate Recommendation > ‘권고 제안(PR)’Proposed Recommendation > ‘권고안(REC)’Recommendation 순 입니다.

Web Content Accessibility Guidelines 2.0 버전은 ‘WD > CR’ 과정을 거쳐 현재 ‘PR’ 이 된 것이고 다음단계인 ‘REC’가 되면 흔히 우리가 말하는 ‘웹 표준’ 이라고 부르게 됩니다.
Outsider 11월 11th, 2008 at 18:04
바쁘신 와중에 답변 감사드립니다.
이은하 11월 13th, 2008 at 11:19
안녕하세요 나라디자인 정말 많은 자료에 대해서 득을 정말 많이 보고 있는 웹디입니다.
매일 자료만 보다 갑자기 글을 쓰게 되내요….

지금은 웹디인으로 열심히 포토삽으로 그림을 그리고 있지만….
앞으로 짧게는 한달,두달 후 웹퍼블러셔 목표로 열심히 공부하고 있습니다.
웹디에 한계성도 직감했고 나이가 어린것도 아니고 밥버리를 바꾸려고 합니다..ㅋㅋ
회사에서도 기회도 주는거 같습니다. 전엔그냥 div코딩이 다인줄 알던 울 사장님… 아예 인식이 변하신듯……

웹퍼블러셔라는 범주중에서도 가장 작은 css.div 코딩에 대해 틈내서 공부하고 있습니다.
웹접근성..웹표준에 대해선 전부터…세미나나 책을 통해 꾸준히 정말….. 천천히 하고 있습니다.

웹표준화에 대해서 웹디로써 많은 반성도 하게 됩니다…
환경떄문에 그랬던 부분도 있고.. 그냥 익숙해서 그랬던 부분도 많은 반성을 하고 있습니다.
ㅋㅋ 글이 잘쓰지도 못하는 글이 길어지내요…ㅋㅋ

웹퍼블러셔로 갈길이 더긴겠지만 웹디인으로써 많은 도움 받고 있으며.. 앞으로 더 부탁드린다는 말씀입니다.^^
즐점심 드세요~^^
정찬명 11월 13th, 2008 at 13:46
덕분에 점심 맛있게 잘 먹었습니다. 같은 직군에서 같은 일을 하는 동료들이 늘어난다는 사실에 마냥 즐거운 마음 입니다. 저도 잘 부탁드릴께요 ^^;
썬졍 11월 18th, 2008 at 14:53
정찬명님의 수제자가 되고 싶습니다-!
한발한발 따라가고 있으니 쪼매만 기다려 주세요~
정찬명 11월 18th, 2008 at 20:09
허걱~ 제가 가진 지식이 얄팍해서 금방 따라오실 수 있을껍니다. ㅎㅎ. 감사합니다. ^^;
깜찍슈기 11월 20th, 2008 at 11:39
안녕하세요~ 웹퍼블리셔의 길에 들어섰을때부터 찬명님의 블로그를 애독하고 있답니다.
올때마다 느끼지만 정말 대단하신 것 같습니다.

제가 다니는 회사도 포털사이트라서 요즘 접근성 관련해서 가이드도 만들고,
TFT도 곧 구성될 예정이랍니다.
아직 많이 부족한데 이런 부분까지 맡게 되서 부담이 크거든요.

그럴때마다 찬명님 블로그에서 도움을 많이 받고 있습니다.

날씨가 많이 추워졌네요. 감기 조심하시고요.
좋은 하루 보내세요~
정찬명 11월 20th, 2008 at 15:51
거의 답변을 못하기는 하지만 CDK에서 왕성하게 활동하시는 깜찍슈기님 글을 저도 자주 보고 있습니다. ‘이렇게 열정적인 분이 또 있구나’ 라는 생각이 들어서 너무 보기가 좋구요. 그 열정은 저도 본받고 싶답니다. 오늘 첫눈도 왔는데 사랑하는 분과 좋은 시간 보내세요. ^^;
세라 11월 20th, 2008 at 16:04
웹표준에 맞춰 코딩하면서 이해할 수 없는 현상을 접하게 되었습니다.
익스플로어에서는 제대로 레이어의 위치가 잡히는데, 파이어폭스나, 크롬에서 보면
3단 col의 경우 똑같은 위치로 잡았음에도 불구하고 자꾸 margin이 먹히는 현상이 생깁니다. 왜 그런지 정말 모르겠어요. 도와주세요.

http://www.lifewater12.net/iloveu/CSSLayout_2.html
도움만 요청하고 가서 면목없습니다. ㅠ.ㅜ
정찬명 11월 20th, 2008 at 16:47
#header 안쪽에 있는 두 개의 로고들이 float 되어 있는데 이것들이 해제가 되지 않아서 뷰가 다르게 보이네요. 저라면 #header에 있는 width, height 값과 #content 안쪽에 포함되어 있는 content 라는 텍스트를 지우고 나서 #header 에 테스트용 border를 1px 임시로 설정해 놓고 아래와 같은 방식으로 float을 해제하겠습니다.

#header{ *zoom:1; } /* IE7 이하 버전의 브라우저를 위한 float 해제 방법 */ #header:after{ content:""; display:block; clear:both; } /* 표준계열 브라우저를 위한 float 해제 방법 */

한편 #header 안쪽 float 시킨 두 개의 박스에 margin을 주셨는데 IE6 에서는 float 시킨 방향과 같은 방향으로 margin이 설정되면 margin값이 두 배로 증가하는 버그가 있으므로 float된 방향과 같은 방향의 margin은 다른 방법으로 처리하셔야 할 것 같습니다. 현재 IE7을 사용하고 계시다면 http://tredosoft.com/Multiple_IE 라는 페이지 하단에서 다양한 버전의 IE 뷰를 확인할 수 있는 툴을 제공하고 있으므로 사용해 보실것을 권장드립니다. 페이지 하단에 ‘Download Multiple IE installer’ 라는 링크를 클릭하시면 됩니다.

아직 국내에는 IE6 사용자가 60%를 넘는 것으로 추정되고 있답니다.
http://trend.logger.co.kr/report/trend_report.tsp?currRptType=pie&rptCode=4050&tps=2008%2F10%2F21&tpe=2008%2F11%2F18&rptType=pie&rptStep=week&mainSel=NAVER%28%B3%D7%C0%CC%B9%F6%29&subSel=&bigCat=
깜찍슈기 11월 21st, 2008 at 10:19
안녕하세요~ 찬명님 ^^
어제 저희 회사에서 웹접근성 TFT Kickoff회의가 있었습니다.

저희 회사는 100인 이상 300인 미만 사업장이라서 2011년 4월11일까지는 웹접근성이
되어 있어야 한다고 알고 있습니다.
웹접근성이 KWCAG의 기준의 몇 %정도 준수해야 장차법 관련해서 문제가 없을까요?
그 기준이 좀 모호하게 느껴집니다. 이 정도는 필수로 지켜야한다라는 항목이 있을까요?
아직 접근성은 잘 모르겠습니다;;;

일단 프로젝트로 메인화면 부터 바꿔 나가기로 했답니다.
하지만 정확한 수치가 필요할 것 같아서 말이죠 ^^
정찬명 11월 21st, 2008 at 10:50
깜찍슈기님 좋은아침 입니다. ^^ 장차법의 유예기간 관련하여 웹사이트의 접근성과 사업장의 근로자 수는 전혀 관계가 없습니다. 근로자수는 장차법의 여러가지 분야 가운데 고용에 관련된 문제와 관계가 있고 웹사이트의 접근성은 민간기업인 경우 장차법 시행 5년 후인 2013년 4월 10일 까지로 유예기간이 정해져 있습니다.

저도 법문을 해석하는 일이 쉽지 않아 처음에는 깜찍슈기님과 같은 오해를 했었습니다. 하지만 민간기업은 확실히 2013년 4월 11일 부터 장차법의 적용을 받게 됩니다. 아직 시간이 넉넉하다고 생각될 수도 있으나 포털과 같은 경우 지금부터 시작해도 늦을지도 모르겠다는 생각이 듭니다. ^^
정찬명 11월 21st, 2008 at 11:04
또한 장차법이 웹사이트의 차별요인을 확인하는 과정에서 ‘인터넷 웹 콘텐츠 접근성 지침’을 참고할 수 있고, 장애인의 차별요인을 줄이기 위한 지침으로서 이것이 매우 효과적인 지침인 것은 분명하지만 지침은 지침일 뿐 장차법으로부터 완전히 안전하다는 것을 보증하지는 못합니다. 이런 일이 일어날 확율은 극히 드물겠지만 모든 지침을 준수했음에도 불구하고 장애인 차별요인은 발생할 수 있다고 봅니다. 지침에 따라 99%의 준수율을 기록했다고 하더라도 1%의 요인으로부터 소송을 당할 수 있기 때문에 이것을 정량적으로 몇 % 이상 지켜야 겠다는 것은 자체적인 제작 지침으로써 분명히 효과적일 수 있으나 100%를 달성해도 장차법으로부터 안전하다는 것을 보증할 수는 없습니다.

따라서 100% 완전함을 목표로 설계하되 지침 가운데 ‘장애인에 대한 신체적 차별요인과 관련이 높은 항목’을 우선적으로 선별하여 가중치를 두고 개발하는 것이 장차법에 대응하는데 효과적이라고 생각합니다.
깜찍슈기 11월 21st, 2008 at 13:52
와~ 친절한 답변 고맙습니다 ^^
좀 더 관심을 갖고 지금부터 하나 하나씩 바꿔나가야겠습니다.
쭈쭈 11월 25th, 2008 at 11:37
안녕하세요~
웹접근성 검색해서 떠돌다가 여기 까지 왔네요

저는 프로그래머인데 웹접근성 그거;;; 너무 귀찮고 힘든존재네요 ㅜ
여기서 많이 배워 갈려구요 디자이너가 html코딩다 하기는 벅찰것 같아서 도와주기도
해야하구.. 저두 프로그램쪽 개선해야할것 같아서요
치치 11월 26th, 2008 at 1:51
오~ 진짜 짱이네요 이 사이트~~~!

지금 하는 사이트에서 웹퍼블리셔의 중요성를 어필하는 중인데… 다들 잘 모르시네요 ^^;; 전 디자이너고 지금 하는 사이트가 좀 이것저것 제약이 많아서 현재 제 실력으로 구현하는 것에 한계가 있어요. 시간도 없고…
따로 잡코리아 같은데서 찾아 봤는데 거의 없던데… 숨은 실력자들 다들 어디 숨어 계신건지 ㅎㅎ

후~~
조금 보다가 앞으로 자주 올 것 같아서 인사글 남깁니다 ^^
즐건 하루 보내세요~
정찬명 11월 26th, 2008 at 2:29
부디 도움이 되시면 좋겠습니다. ^^;
정찬명 11월 26th, 2008 at 2:30
감사합니다. 숨은 실력자들 http://standardmag.org/ 에 많이 숨어 있습니다. ^^ 치치님도 좋은 하루 되세요!
김진환 11월 27th, 2008 at 10:38
안녕하세요~^^
웹표준에 관하여 답답함을 토로할 곳이 제 주변엔 거의 없어 이 곳을 찾게 되는군요^^
(파견중이라 더욱이 그러합니다. ㅡ.ㅡ;)

며칠전에 파견업체의 리뉴얼중인 싸이트의 확인중
이상한 점을 발견했었죠. 익스플로러6 과7, 파이어폭스에서는 전체적으로 어긋남 없이 보이는데 오페라나 사파리에서는 크게 틀어져 보이더라구요.

제생각엔, 파이어폭스위주로 작업을 했다고하면.. 어찌 사파리나 오페라에서 저리 크게 다르게 틀어질까…하는 좀 이해가 되지 않더라구요.

파견업체 웹마스터에게 확인을 한번 해보라 했었죠.

돌아온 답변이 뭔지모를 울화통을 불러 일으키고 말았었더랍니다.
지금은 계속 작업중이고, 익스플로러6하고 7에 맞춰서 작업 중이기 때문에 그러니,
다른건 나중에 맞춰서 작업 할 것이라는 답변을 했다고 하더군요..

리뉴얼을 담당하고 있는 업체는 메이저급 에이전시 중에 하나로 이름을 대면 알만한 손가락안에 드는 업체중 하나인 곳이데..에초 기획단계에서 부터 웹표준을 준수한다고 호언장담했었던 곳에서
어찌 저런 망언을….익스플로러에 맞춰서 먼저 작업을 한다니요…ㅡ.ㅡa
그리고 나중에 다른 브라우저를 맞춘다니요..ㅡ.ㅡ;(맞출란가 모르겠습니다…)

파견업체 웹마스터에게 설명을 해주었었죠.
익스플로러에서 보이긴 제대로 보일지 모르겠지만..
근본적으로 작업순서가 잘못된것이라고, 어쩌구저쩌구 설명을 했지만…

한 기업의 웹표준의 사이트를 고집하는 곳에서 3년이 넘게 있는 웹마스터라는 직책에 있는 사람의 입에서도, 그냥 익스플로러에서 잘 보이면 되는게 아니냐는…그런 대답을 듣고야 말았답니다.
저의 이해력 떨어지는 설명이 이유일 수도 있을것 같아 정찬명씨의’나루명인’으로 소개되었던 인터뷰 글을 포스팅 해서 보여줬었더랍니다. (이해했을지는 모르겠습니다.)

제가 분통이 터졌던건 작업순서가 맞지않아서,
웹표준이 안지켜져서,
웹표준을 알아야 할 직급의 사람이 전혀 이해조차 하지 못하고
사람을 부리고 있어서보다,
제대로 이끌고 나가줘야 할 메이저급 에이전시에서 조차,
당장의 보여주기 위한 도구로 퍼블리싱의 형태만 표준웹코딩으로 하고 웹표준을 준수한다고 하면서 클라이언트들을 이해 시킨다면,
다른 에이전시들도 만일 현실이 그렇다면, 그리고 이런 현상들이 일반화 되고,
익스플로러가 정석의 브라우저인듯이 알고 지나온 수년의 시간처럼
웹표준의 인식이 단지 로 코딩하고 css만 분리해서 코딩하면 되는 것으로
인식된채 수년이 지난다면,
아마도 모든사람이 차별없이 평등하게 웹의 세상을 볼 수 있어야 한다는
근본적인 것은 무시된채,
코딩방법만 로 코딩하고 css만 분리해서 코딩하는 것이 웹표준이고
당연히 많이 쓰는 익스플로러만 생각하게 되지 않을까 하는..

엄청난 오류로 웹표준이라는 것이 대다수의 사람들에게 인식 되어질 수도 있겠구나..
하는 생각이 정말 가슴을 답답하게 하더군요.

너부터 나부터,
기간이 있고 없고를 떠나
인식부터 제대로 심어져 있어야 하지 않을까 싶습니다.
기간이 짧아 터무니 없다, 견적에 맞지도 않는다. 등등의 이유로 합리화 하면서
치부해 버린다면,
웹표준이란 근본취지역시 변질 되고 말지 않을까 싶습니다.

웹사이트의 견적(단가)경쟁과, 기간 경쟁등 과도한
경쟁만을 치루면서 웹이란 초창기 기간을 지나온 현실은
지금 어떻게 되었습니까?
일부의 업체에서는 수명의 인원으로 하루에 몇개씩 판에 박은 듯한 사이트를 찍어내면서 몇 만원이면 사이트하나 만들어 주는 곳도 생겨났고,
지금도 이직종의 많은 사람들은 며칠씩 야근을 하면서 집에도 못들어 가고 계시는 분들이 수두룩 할 것입니다.

당장의 이익만을 보는 짧은 생각들이 이렇게 만들어 버렸고,
계속 된다면, 웹표준역시 변질 될까 염려 스럽습니다.

몇몇 불평불만 있으신 분들께서도 아셔야 할 것 입니다.
그러한 불평불만 때문에 현실과 타협해온 결과가
현재 일하고 있는 불평스럽고 불만족스러운 환경(연봉/급여는 쥐꼬리 만한테 맨날 야근이냐, 왜 작업시간을 이따구로 주냐 등등)이 조성되어 진 것이라는 점을요.
김진환 11월 27th, 2008 at 10:41
아.. 방명록에 글남기면서 흥분한 글만을 남기고, 인사도 제대로 못했습니다. ㅡ.ㅡa

하시고 계시는 일 잘 되시길 바랍니다. ^^

남은 올 한해도 잘 마무리 하시고요. 추운데 건강하세요~

너무 푸념과 걱정스러운 글 길게 남겨 좀 죄송스럽습니다…^^
misol 11월 30th, 2008 at 23:58
답을 달아주시면 찾을 수 있을지 걱정될 만큼 글이 많네요…
질문하나 하고 싶어서 글 남깁니다
address란 태그는 주소를 쓸대 쓰는 태그고 cite는 출처표시를 하는 태그라고 들었는데 주소가 웹사이트 주소를 말하는건가요? 웹상의 자료를 가져올때는 웹 ‘주소’가 곧 출처가 되는데 두 태그를 겹쳐서 써야 맞는건가요?
[q]
[cite/]
[/q]
인가요
[q][cite][address/][/cite][/q]인가요?

또 인용을 알리는 태그에 q와 blockquote가 있는데 q는 여러줄일때 쓰면 안되는건가요?
또 질문이 있는데 이건 여기 할 성격은 아닌것 같지만.. 네이버에서 배포하는 자바스크립트 중에 자동출처표시 스크립트가 있습니다 auto sourcing인가로 된.. 그런데 그 스크립트는 복사된 문서 시작과 끝에 blockquote를 감싸지 않더군요..혹시 왜그런지 아시나요?

-그리고 늘 정찬명님을 XE사이트에서 볼때마다 드린 말이지만 연재 해주실꺼죠?
misol 12월 1st, 2008 at 0:21
글 수정은 안되나요?
추가 질문..
기상청 홈페이지를 가보면 초기 페이지가 플래시로 거의 도배되어 있습니다. 이 경우 시각장애인용 화면 읽는 프로그램이 화면을 읽을 수 있나요?
저는 뭐 그냥 궁금해서 묻는거에요.. 아래글들은 엄청난 분들이군요…
정찬명 12월 1st, 2008 at 15:06
김진환님, 안녕하세요? 다소 안타까운 현실을 잘 묘사해 주셔서 공감을 하지 않을 수 없는 글 입니다.

저 또한 웹 개발자가 IE 브라우저를 기본 브라우저로 사용하여 웹 서비스를 개발한다는 것은 바람직 하지 않고 비효율적이며 언발에 오줌누기 방식이라고 생각합니다.

그런 개발자들은 아주 흔합니다. 때문에 제 노동의 댓가를 받지 못하는 것이고 정해진 틀 안에서 기존의 방식을 고수하며 모험하지 않으려 하기 때문에 발전하기 어렵다고 생각합니다.

그래서 저도 블로깅을 합니다. 꽉 막힌 사람 붙들고 1:1로 이야기 하는 것보다 배우려는 의지가 있는 분들께서 잘 이해할 수 있도록 알기 쉽게 글을 쓰는 것이 제 사명이라 생각하고 있습니다.

안타까운 현실에 너무 마음쓰지 마시고 조금은 돌아서 가더라도 한걸음씩 천천히 개선해 나아가야 겠다는 사명으로 임하셨으면 합니다.

감사합니다.
정찬명 12월 1st, 2008 at 15:37
misol님 안녕하세요? 간단하게 문의주신 엘리먼트들에 대하여 소개해 보도록 하겠습니다.

address 엘리먼트는 ‘제작자에 대한 정보’로써 사람 또는 조직의 이름과 함께 연락 가능한 여러가지 형태의 콘텐츠를 마크업 합니다. 흔히 이메일주소 또는 전화번호나 제작자 정보가 포함된 링크도 address로 마크업 할 수 있습니다. 그러나 의미를 해석할 수 없는 웹 주소 형식은 address라고 보기 어렵다는 판단이라서 URL 만을 address 로 마크업 하는 것은 바람직 하지 않다고 봅니다.

cite 엘리먼트는 ‘출처 또는 다른자원 참조’로써 사람이나 조직의 이름 또는 책이나 논문의 이름을 비롯하여 URI도 출처가 될 수 있습니다.

address 는 콘텐츠의 제작자가 누구인지를 밝히는 정보에 사용되고 cite 는 출처가 무엇인지에 대한 정보를 마크업 하기 때문에 두 엘리먼트 사이에 공통분모가 생겨나기도 하는군요. 하지만 통상 address 는 현재 웹사이트의 제작자를 문서의 처음이나 하단에 표기하고 cite 는 문서 중간중간 세세하게 인용된 출처를 표기하는데 사용되므로 이러한 행태를 참조하시면 되겠습니다.

blockquote 엘리먼트는 ‘긴 인용 콘텐츠’를 마크업 하며 스타일 기본값이 display:block 상태가 됩니다.

q 엘리먼트는 ‘짧은 인용 콘텐츠’를 마크업 하며 스타일 기본값이 display:inline 상태가 됩니다.

blockqute 와 q 엘리먼트는 같은 의미를 지니고 있으며 단순하게 인용된 콘텐츠의 양에 따라서 다른 엘리먼트를 사용하도록 설명하고 있습니다. 그러나 단 한줄의 인용에도 blockquote 엘리먼트를 사용할 수 있고 여러줄의 인용에도 q 엘리먼트를 사용할 수 있습니다. 길고 짧음의 개념은 상대적인 개념이기 때문에 두 엘리먼트 가운데 어떤 엘리먼트를 사용하여야 할 지를 결정하는 것은 제작자의 주관으로 판단할 수 있습니다.

네이버의 자동출처 표시 스크립트에 대하여는 제가 아는바가 없어서 답변 드리기가 어렵습니다.

플래시도 웹 접근성 향상지침에 따라 제작하면 스크린리더가 읽을 수 있으나 모든 브라우저에서 가능하지는 않습니다. 즉, 잘 만들어진 플래시는 ‘IE + 센스리더’ 사용환경에서 읽혀지지만 다른 브라우저에서는 읽지 못하므로 여전히 권장하지는 않습니다.
misol 12월 1st, 2008 at 18:43
대한민국의 수도는 서울입니다
라는 문장이 있을때
대한민국의 수도는 [address]서울[/address]입니다
라고 쓰는 건 아니었군요. 주소라는 의미여서 주소에는 다 쓰는건줄 알았는데 감사합니다.
바라기군 12월 2nd, 2008 at 23:26
안녕하세요 질문하나 여쭐게요.

CSS핵을 이용해서 png를 처리하고 있습니다.
그런데 다름아니라 IE6에서 css Hacked 된 png파일에 링크를 걸어놓으면
링크가 작동하지 않습니다 해결방법은 없는건가요?
정찬명 12월 3rd, 2008 at 0:13
바라기군님 안녕하세요?

IE에서는 png배경이 사용된 엘리먼트에 position:relative | absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative | absolute 속성을 제거하거나 또는 a요소에 position:relative | absolute 속성을 함께 부여해 보세요.

관련글.
http://naradesign.net/wp/2006/12/15/100/
IE 6.x 렌더링 테스트 결과 발견된 문제점
민정화 12월 5th, 2008 at 13:39
안녕하세요~~^^
세미나가 있을때만 멀리서 보다가 어제 처음으로 가까이서 보게되서 너무 반가웠습니당
좋은말씀 너무 감사했고 많은 도움이 된거같습니당~
앞으로 자주 들러서 많이 배우고 갈께용
날씨가 너무 추운데 감기 조심하세요~~~
박찬주 12월 5th, 2008 at 17:26
안냥하세용^0^
어제 보궁~짱팬하기루 해써용~~~~ㅎㅎㅎㅎ
앞으루 마는 정보 부탁드릴께용^^*
요기 오믄 디자인쪽은 마니 모르지만~~~잼난거 가타용~ㅎㅎㅎㅎ
마니마니 배워가서 조은 사이트 마니마니 만들어야 게써용~하하하하!
날씨가 짱춥다고 합니당~
감기조심하세용*^^*
제주소년 12월 6th, 2008 at 20:34
잘 올라가셨는지 모르겠네요 이번에 수업 받은 제주대 학생입니다. ^^
인상깊은 강의 잘 들었습니다. 안전하게 잘 올라가셨는지 모르겠네요 ^^;;
앞으로도 자주 들리도록 하겠습니다. 감기 조심하세요~ ^-^
정찬명 12월 7th, 2008 at 0:43
감사합니다. 저도 디자인은 잘 모르지만 주제넘게 이것저것 하고싶은 이야기를 하고 있네요. 찬주님 희망대로 좋은 웹 사이트 많이 만들어 주세요. ^^
정찬명 12월 7th, 2008 at 0:49
앗, 정화님 ^^; 그날 추운데 잘 들어가셨는지요. 그날 이것저것 이야기를 많이 해서 제가 방해가 되지는 않았는지 모르겠습니다. A도 싫다, B도 싫다, C를 다오. ㅜㅜ; 하지만 한국의 부실한 웹을 건실하게 이끄는 막중한 책임이 있다고 생각하시고 열정적으로 진행해주시리라 믿습니다! 힘내세요! 화이팅! ^^;
정찬명 12월 7th, 2008 at 1:14
와~ 고마워요. 사실 컴공 전공한 학생들에게 UI 이야기가 재미 없지는 않았을까 걱정했어요. ㅎㅎ. 블로그 가보고 누군지 알았네요. ^^; Flex로 만든 다음과 네이버 통합검색 정말 멋진데요! 동균학생의 열정도 정말 인상 깊었습니다.
여나 12월 9th, 2008 at 16:21
안녕하세요 (__)
업무중에 시간날때마다 나라디자인에 와서 예전 글부터 하나씩 읽어나가고 있는
웹디자이너입니다.
유용한 정보가 너무 많아서 하루에 하나씩만 머리 속에 넣고 있어요 ㅎㅎ
한번에 많은 글을 읽으면 머리가 다 받아들이질 못하더라구요 ^^;
참, 늦었지만… 11월에 했던 세미나도 잘 들었습니다! ^^
가끔 방명록에 글 남길게요^^
감기 조심하세요.. 전 이미 걸려서 비실비실… ㅜ0ㅜ
정찬명 12월 10th, 2008 at 10:04
여나님 안녕하세요? 디자이너분께서 제 블로그에 관심가져 주시면 얼마나 황송한지요. ㅎㅎ. 여나님같은 분들이 정말 많이 늘어났으면 좋겠습니다. 간혹 쓸데 없는 글들도 있고 제가 항상 옳은 말만 하는것은 아니니 잘 분별해서 수용해 주세요. ㅡㅡ; 감사합니다.
이재헌 12월 10th, 2008 at 18:17
안녕하세요? 거의 매일 찾아와서 눈팅만 하고 가면서 그동안 인사도 못드렸네요.
저는 웹디자이너이면서 코딩을 겸하고 있는데, 2년전 싸이월드와 함께 작업하다가 싸이월드에서 코딩가이드를 제시하면서 웹표준이란 것을 처음 접하게 되었습니다. 그 이후로 인터넷 여기저기를 떠돌아 다니면서 정보들을 모으고 배우기 시작했는데 이곳에서 가장 알찬 정보들을 많이 접하게 되었던것 같습니다. 항상 감사드리고 있습니다.
덕분에 지금은 드림위버의 위지위그보다는 에디트플러스가 더 손에 익게 되기도 했습니다. 가끔은 포토샵은 손도 안대고 페이지를 만드는 경우도 생기게 되네요. ^^

오늘 하고 싶은 얘기는 이곳에서 가끔 글을 웹표준을 고민하고 실행에 옮기는 직업군이 퍼블리셔로 한정된다는 느낌입니다.
디자이너들은 웹표준에서 가장 소외시 된다고나 할까요? 사실 웹표준이라는 것이 올바로 실행되기 위해서는 퍼블리셔 이전에 디자인 단계에서 부터 고민이 되지 않으면 안된다고 생각합니다.
단순한 크로스브라우징이 아닌 접근성의 측면에서 봤을때, 접근의 제한을 막을 수 있는 요소를 먼저 제거하고 편리성을 줄 수 있는 UI에 대한 고민은 디자이너에서 출발해야 한다고 생각하거든요. 그렇다고 너무 웹표준에 치우친 나머지 비쥬얼을 버려서는 안되겠지요.
웹디자인도 제품 디자인과 마찬가지로 실제로 사람이 사용하는 상품을 만들어 내는 것이므로 일반 편집디자인과는 차별성이 생기는 디자인 행위죠. 컨텐츠의 효과적인 전달과 사용성까지 고려해야 하기 때문에 더욱 복잡하고 힘든 작업 같습니다.

주저리 주저리 쓰다보니 횡설수설이네요. ^^

앞으로도 많은 도움 부탁드릴게요.
정찬명 12월 10th, 2008 at 22:30
이재헌님과 똑같은 고민을 저도 늘 하고 있었습니다. 마치 제가 쓴 글처럼 느껴질 정도로 잘 묘사해 주셔서 속이 후련할 정도 입니다. ^^;

저는 웹 표준, 접근성, 사용성, 브라우저 호환성 이런 개념들을 좀 더 거시적인 안목으로 아우르는 개념으로써 ‘보편적 설계(Universal Design)’ 라는 말을 즐겨 사용하는데요.

이런 개념이 웹 개발 전 직군에 걸쳐 필요하다는 이재헌님의 생각에 매우 공감하고 있습니다. 좋은 글 주셔서 감사합니다. (__)
김일규 12월 17th, 2008 at 0:58
찬명님 오랜만에 글을 남깁니다. 잘 지내시죠?
예전에 조언을 얻었던 관리자입니다.

웹접근성을 한참을 공부하다…
정찬명 12월 17th, 2008 at 10:32
넵 ^^ 잘 지내고 있습니다. 공부 너무 열심히 하시는거 아녀요? ㅎㅎㅎ.
양영복 12월 18th, 2008 at 10:44
스킨 바꾸셨네요?
겨울인데 벌써 봄 분위기가^^
감기 조심하시고 재미있는 내용 많이 많이 올려주세요~~
강위백 12월 18th, 2008 at 10:52
안녕하세요.. ^^
웹접근성 연구소에 영암군청홈페이지자문을 요청한 1인입니다.
찬명님 글은 잘보았습니다.
알고있으면서도 개발팀에 수정을 요청하지못한 제자신이 너무
부끄러워졌습니다.

찬명님의 말대로 조금씩 수정해나가면서 더욱 접근하기쉬운 사이트가
되도록 바꾸어 나가겠습니다.
자문 감사드립니다.
길앞잡이 12월 18th, 2008 at 14:21
안녕하세요~
블로그는 자주오는데
방명록에는 이제야 글을 남기네요~
아직 경험이 적은 저에게
항상올때마다 많은것들을 배우고 갑니다~
이번에 포스팅한 IE 버그에 관한것들
몇가지 스크랩합니다 ~
정찬명 12월 18th, 2008 at 20:14
아, 제가 원래 빨강색을 아주 좋아하는데요. 요즈음은 차분한 초록이 또 끌리네요. 그냥 가끔 제가 지겨워서 배경만 바꿔주고 있습니다. 좋은 하루 되세요. ^^
정찬명 12월 18th, 2008 at 20:20
쉬운 일인데도 주변에서 누가 이야기 해주지 않으면 무심코 놓치는 일들이 저도 많습니다. 이렇게 제 블로그까지 찾아와 주실 정도의 열의를 가지고 계시니 영암군청 웹 사이트가 앞으로 무척 기대가 되는데요. ^^; 웹 접근성 연구소 자문 게시판 자주 이용해 주세요. 감사합니다.
정찬명 12월 18th, 2008 at 20:23
길앞잡이님 워드프레스 설치 동기가 저와 비슷하시네요. 스크랩 하시면서 잘못된 내용은 없는지 한번 꼼꼼히 살펴봐 주세요. ^^; 포스팅 하고 피드백을 받다보면 제 글에서도 심심치 않게 오류가 발견되더라구요. ㅡㅡ; 감사합니다.
Keydayodolf 12월 19th, 2008 at 15:35
Hi people

As newly registered user i only wanted to say hello to everyone else who uses this bbs ;-)
김일규 12월 21st, 2008 at 0:08
찬명님, 잘 들어가셨는지 모르겠습니다.
생각외로 너무도 순수하신 모습에 너무 기뻤습니다.

시간이 늦어서 따로 잘 들어가셨는지 연락을 드리지 못했네요.

다음달쯤에 한번 더 찾아뵙겠습니다.

아참, 저도 블로그를 하나 개설하여 운영하려고 하는데 좋은 블로그툴을 잘 모르겠네요.

괜찮은 블로그 툴 좀 추천해주세요~

외국블로그를 툴은 설치방법이 전부 영어라 이거 원 ㅡㅡ;;

포트폴리오 겸 하나씩 저도 글을 담고 싶어서요..
정찬명 12월 21st, 2008 at 0:44
일규님 같이 열정이 가득한 분을 만나는건 제게도 기쁨입니다. 그날 저녁 다시 회사로 들어가지 못하고 너무 피곤해서 집에들어가 그냥 쓰러져 잠들었네요. ㅎㅎ.

다음달에도 질문꺼리 한 가득 준비해서 오시구요. 외산 블로그 툴들이 어려우시면 국산 오픈소스 추천 드립니다.

XE : http://www.zeroboard.com/
Textcube : http://www.textcube.org/

일규님께서 블로그까지 쓰시면 동료직원분들이나 후배들에게 많은 도움이 되겠네요. 강추! ^^
바라기군 12월 24th, 2008 at 1:14
CSS3(?) 에서는 DIV 불투명을 어떻게 설정해야 되는지 알려주셨으면 합니다 ㅠㅠ

IE8Beta2는 불안정하다고 해도, FF3에서도 IE7에서는 제대로 보이던 filter:alpha(opacity=65); 이 불투명 값이 적용이 되지 않습니다.
어떻게 하면 될까요?
꿈트리 12월 24th, 2008 at 9:52
찬명님 새해가 다가 오네용~

매일 유익한 글 잘읽고 있습니다.^^

오늘도 좋은 하루 되시궁 매리 크리스 마스 하시고

생신 축하드려용~
정찬명 12월 24th, 2008 at 9:56
IE8 브라우저는 기존의 IE전용 속성들이 작용하지 않습니다. 비 표준이기 때문에 지원하지 않는 부분이구요. 대신 또 다른 MS 전용 문법을 이용해서 해결 가능 합니다.

기존의 IE전용 속성 앞에 -ms- 라고 붙이셔야 IE8에서 정상적으로 렌더링 됩니다.
따라서 아래와 같이 작성하셔야 모든 브라우저에서 알파값이 적용 됩니다.

.selector [opacity:0.5; filter:alpha(opacity=50); -ms-filter:'alpha(opacity=50)']

opacity 속성은 IE를 제외한 FF, OP, SF, CR 브라우저들이 모두 지원하는 CSS3 속성 입니다. 하지만 IE 브라우저가 지원하지 않으니 IE 브라우저는 전용속성을 사용해야 겠지요.

IE 6~7 브라우저는 filter 속성에 의존하고
IE 8 브라우저 부터는 -ms-filter 속성에 의존하게 됩니다.

-ms-filter 사용시 유의할 점은 속성의 값이 반드시 따옴표 ‘alpha(opacity=50)’ 안에 있어야 한다는 점 입니다. 따옴표를 생략하면 작용하지 않습니다.
정찬명 12월 24th, 2008 at 10:01
머나먼 타국 땅에서 전해오는 생일 축하 인사를 받으니 감개 무량 하네요. ㅎㅎㅎ. 꿈트리님도 즐거운 크리스마스 되세요! ^^ 감사합니다.
바라기군 12월 24th, 2008 at 21:22
감사합니다^^ 그런데 혹시 DIV 배경만 반투명할 수 있는 방법이 없을까요?
정찬명 12월 25th, 2008 at 0:41
HTML/CSS 기법 가운데 그런 방법은 투명도 적용을 위한 빈 엘리먼트와 콘텐츠를 마크업 하기 위한 엘리먼트를 ‘부모-자식’ 관계가 아닌 ‘형제’ 관계로 분리하여 사용하지 않고서는 원천적으로 불가능한 방법 입니다. 이상적인 방법은 아닌것 같습니다.

저라면 콘텐츠 영역이 반투명 되는 것을 감수하거나 또는 배경으로 PNG-24 포멧을 사용할 것 같습니다.
우룹 12월 25th, 2008 at 17:12
안녕하세요.
두달전 우연히 HTML코드를 검색하다가 이곳에서 웹표준에 대한 글을 읽고 충격에 빠진 사람입니다.
그래서 요즘 추천하신 책들도 구입하고 여기저기 기웃기웃하며 많은 것을 보고 또 코딩도 해보고 있습니다.
그런데 공부하면 할 수록 너무 어려운것 같습니다. (ㅠ_ㅜ)
몇 줄 코딩을 할래도 태그의 성격에 맞게 쓴건지 어쩐건지….
지금도 간단하게 공부하려고 자바스크립트를 이용한 계산기를 만들려고 하는데 난관에 봉착했습니다.
1.2.3.4…. 이런 숫자들만 있는데 이걸 li로 짜는게 맞습니까? 아니면 테이블로 넣는게 맞습니까…
너무 고수님들이 방문하시는 ㅡㅡ;; 이런 블로그에 질문을 올리기가 참으로 부끄럽네요..;;

그리고.. 혹시 다른 분들이 비슷한 질문을 올리셨나 싶어서 방명록의 다른글을 확인하려고 했으나 가장 최근 페이지 밖에 안나오네요.
이건 원래 설정이 그런건가요? 아니면 제 컴퓨터 설정이….?

즐거운 크리스마스 되시구요 조언 좀 부탁드립니다. ㅡㅡ;;
감사합니다.
정찬명 12월 26th, 2008 at 6:00
우룹님 안녕하세요? HTML에 관하여 적절한 의미로 사용한 것인지에 대한 고민에 빠지셨군요. ^^; 제가 하나 하나 맞는지 아닌지 알려드릴 수 없으니 물고기 잡는 방법을 먼저 알려드리는게 좋을 것 같습니다.

표에 관한 모든 것.
http://trio.co.kr/webrefer/html/struct/tables.html

표는 ‘2차원의 격자형 구조’로 표현할 수 있는 데이터 또는 ‘헤더와 내용’으로 구분할 수 있는 데이터를 마크업 하기 위한 요소 입니다. 따라서 표에 th와 같은 제목행이 없다면 표가 아닐 확률이 높습니다.

말씀하신 계산기 숫자판에 th로 마크업 할만한 제목셀이 있나요? 없다면 아마 표가 아닐껍니다. 저라면 ol 또는 ul 으로 마크업 할 것 같습니다.

PS : 즐거운 연말연시 되시구요. ^^ 저도 몰랐는데 방명록은 글 검색이 안되더군요. ㅜㅜ; 웹 표준에 관한 궁금증은 http://standardmag.org/ 이곳에서도 해결할 수 있습니다. 방문해 보세요.
우룹 12월 26th, 2008 at 10:30
답글 너무 감사드립니다. trio홈페이지도 너무 아름답네요. ㅠ_ㅜ
김일규 12월 26th, 2008 at 18:26
찬명님 크리스마스 잘 보내셨나요?

블로그 셋팅하고 있습니다. 이거 블로그 툴에 대해서 먼저 많이 다뤄봐야겠네요.
이것저것 건드려서 변경하려니깐 먼저 툴에 대해서 자세히 알아야겠네요
위치로그는 뭐여 ㅡㅡ;; ㅋㅋ

아직 준비중이지만 주소는 남기고 갑니다. 몇개 테스트글을 잠시 펐어요. ㅎㅎ
정찬명 12월 26th, 2008 at 23:42
와우~ 새 블로그 개설 축하드려요! 알차게 꾸려가서 많은 분들께 사랑받는 블로그 되세요. ^^; 헌데 옮겨가신 제 글에는 출처 표기는 꼭 해주셔야 해요. 제 글은 저작자 표시, 비영리, 변경금지 조건으로 공유에 동의하고 있습니다. ^^
김민성 12월 29th, 2008 at 18:25
우연히 들렀는데 유익한 내용이 많아서 행복한 비명을 지르고 갑니다
내일부터 차근차근 정독해보려고 합니다^^
정찬명 12월 29th, 2008 at 23:36
감사합니다. 오래된 글에는 오류가 있을 수도 있습니다. 보시고 바로잡을것이 있으면 언제든 코멘트 부탁드립니다. 그리고 민성님의 탁월한 견해도 부탁드립니다. ^^
mepay 1월 1st, 2009 at 23:44
안녕하세요. 정찬명님 ^^ mepay 입니다.

새해 기축년에도 복 많이 받으시고, 알찬 포스팅 기대하겠습니다.

다름이 아니라 제가 블로그를 운영중에 도참과 관련된 새로운 사업 모델을 기획중에 있습니다. 정찬명님 입장으로써 본 모델에 관한 생각은 어떠신지 또 이러한것들이 과연 현실성이 있는지 여쭤보고 싶어 실례를 무릅쓰고 이렇게 글을 남겨 봅니다.

http://mepay.co.kr/418

그냥 편하게 훑어 보시고 의견 주시면 감사하겠습니다.
편안한 밤 되세요~
정낙훈 1월 4th, 2009 at 17:26
모서리 라운드된 XE레이아웃을 만들고 있는데 나라디자인 블로그가 그렇더라고요.
그래서 소스를 보다가 모르겠고 그래서 다시 와봤는데.. IE에서는 라운드가 아니군요..^^;;
정찬명 1월 4th, 2009 at 23:09
댓글 드렸습니다. 그 많은 댓글에 일일이 답변 하시는 정성이 감동적입니다. ^^
정찬명 1월 4th, 2009 at 23:12
네, CSS3에서 지원하는 효과이고 현재 FF, SF, CR만 실험적으로 지원하는 속성 입니다. { -moz-border-radius: 10px; -webkit-border-radius: 10px; } 이 부분이죠. ^^;
melt-snow 1월 5th, 2009 at 5:44
안녕하세요.
워드프레스 2.7로 글을 쓰다 도저히 기본 위지위그 에디터가 불편하여 다른 사람은 어떻게 쓰고 있나 궁금해서 남겨봅니다.

기본으로 제공되는 에디터를 사용하시는지요? 아니면 html 태그 편집 모드에서 글을 쓰시는지요? 오른쪽에 카테고리나 각종 설정 창이 차지해서 글 쓰는 칸도 좁고 이미지 파일명이 한글이면 % 인코딩이 되서 불편한 것도 있고 여러모로 난감하더군요. 옛날부터 친해지려고 해도 왠지 다가가기 어려운 워드프레스인데 지금 쓰시는 글 쓰는 환경이 불편하지 않은지 궁금합니다.
정찬명 1월 5th, 2009 at 10:33
저는 워드프레스용 FCKeditor를 만족스럽게 사용하고 있습니다. ^^
http://www.deanlee.cn/wordpress/fckeditor-for-wordpress-plugin/
정낙훈 1월 7th, 2009 at 10:45
찬명님 보여드리려고 스크랩했는데 관련 코멘트 찾다가 며칠간 제 브라우저에 고이 모셔두었던 링크 띄웁니다.;; (브라우저가 너무 느려져서;;)
http://yiaong.egloos.com/4760266
언젠가 한 번 어떤 분이 이 블로그(나라디자인)는 나눔고딕으로 되어있는데 자신은 나눔고딕이 설치되어있지 않아서 이 블로그가 얼마나 이상하게 보이는지 찬명님께 한 번 보라고 하셨던 분이 생각나서,
위의 링크대로 수정하시면 그런 분들에게도 좀 더 잘 볼 수 있는 블로그가 되지 않을까요?

장애인에 대한 댓글이 오고갔던 글이었는데, 인터넷에서의 장애란 몸이 불편한 사람의 장애도 있지만 컴퓨터를 사용하는 컴퓨터의 환경에 따른 장애도 장애지 않겠어요.
크로스브라우징이란 것도 어찌 보면 그런 환경에 따른 장애를 고치자고 하는 것이고 한데..
글꼴 하나 없음으로 해서 저 역시도 한 때 웹폰트로 인해서 장애를 겪어본 입장에서 아마 이런 세세한 설정이 참 보기 좋아 보이네요.

개인적으로는 굴림 대신 정말 한국인에게 보기 편한 글꼴이 생겨나길 바라고
그 대안으로 옆에 개발자를 살려주세요 캠페인처럼 현재는 나눔고딕을 기본서체로 하자는 캠페인을 진행했으면 좋겠다는 생각을 할 정도로 나눔고딕이 편안한 글꼴이긴 합니다만
아직도 가끔 오랜만에 웹사이트를 켜고 나타나는 나눔고딕이 익숙함에서 벗어난 글꼴인 것은 분명한지 아직도 낯설기는 하고 그렇더군요. 그럼에도 그냥 굴림보단 나눔고딕이 그대로 좀 더 나아보인다 싶어서 브라우저 기본 글꼴로 설정해놓고 쓰긴 합니다만,
서울시에서도 남산체 한강체 이러면서 무료로 배포하는 예쁜 글꼴이 나오듯이 (다음도 무료로 배포하는 다음체가 있고; )
음, 가독성에 대해서 얼핏 본 글이 있는데 고딕보다 명조가 좀 더 가독성이 좋다고 하더라고요.
나눔명조에 대해서도 설치는 하지 않았지만 (그림으로 보기엔 별로 맘에 안 들어서)
아마 네이버 등에서 네이버가 말하는대로 좀 더 나은 웹에서의 한글 생활을 위해서
명조를 기본으로 하면서도 나눔고딕처럼 굴림에서 벗어나지 않고
고딕과 같이 보여질 수 있는 진짜 우리나라 기본서체가 만들어졌으면 좋겠다는 생각도 며칠 해봤어요. ㅎ 말로는 좀 복잡하지만 만들고 보면 정말 그런 서체가 기본 서체지 않을까 생각들어요.
정찬명 1월 7th, 2009 at 19:15
저 보여주시려고 스크랩까지 해놨다는 대목에서는 그만 감동의 눈물이 덜컥 쏟아질 뻔 했습니다. ㅜㅜ;

곰곰히 여러번 읽어 봤는데요. 아무리 생각해도 잘 이해가 안되는 부분이 있습니다. 현재 제 블로그에서 발생할 수 있는 문제는 사용자 PC에서 Clear Type을 지정해야 더 깔끔하게 보인다는 점 하나 라고 생각하고 있었거든요.

왜냐하면 서체를 아래와 같은 순서로 지정 했기 때문인데요.

나눔고딕,NanumGothic,”맑은 고딕”,”Malgun Gothic”,AppleGothic,굴림,Gulim,돋움,Dotum,Sans-serif

잘 아시겠지만 사용자 PC에 해당 서체가 없으면 계속해서 다음 서체로 렌더링이 되잖아요. 따라서 ‘나눔고딕’이나 ‘맑은 고딕’이 없으신 분들은 ‘굴림’ 으로 보이도록 되어 있다는 의미 입니다. 그런데 아시다시피 ‘굴림’은 한글 윈도우 시스템 기본 서체 잖아요?

‘굴림’ 앞에 선언된 서체들을 CSS에서 제거해 보면 역시나 ‘굴림’으로 아주 깔끔하게 잘 보여요. 잘 보이지 않는다는 그분께 캡쳐라도 한장 부탁드리고 싶은데요. ㅜㅜ;

코멘트 감사드립니다. 혹시 제가 뭔가 이해를 못한 부분이 있다면 추가 설명 부탁드릴께요. ^^
바라기군 1월 7th, 2009 at 22:57
안녕하세요. 정찬명님^^
오늘도 질문을 하나 드릴게요.

스마트에디터 베이직 기본 스킨은 물론이거니와 어떤 사이트에서도
css에서 font-size:0; 을 설정하면 폰트가 안보이는걸 보았어요.
그래서 적용을 해볼까 했는데
div에 적용을 했더니 http://maria.wesine.com/ 가보시면
“마리아회고등학교는~~” 위에 검은색글씨가 아주 조그맣게 생겨있고,
왼쪽 메뉴에 있는 “2010학년도 신입생입학”부분에 위에도 아주 조그맣게 글자가 새겨져 있습니다.
물론 FF3에서는 보이지 않는건 확인했는데 IE7(비스타)에서는 저렇게 보입니다.

어떻게 글씨를 아예 보이지 않게 할 수 있을까요?
정찬명 1월 8th, 2009 at 1:20
IR(Image Replacement) 기법을 사용하셨네요. ^^; 사용하신 방법은 브라우저에 따라서 말씀하신대로 글자가 보일 수 있지요. 저 상태로 가장 간단하게 처리하는 방법은 a 요소에 { text-indent:-2000px; }과 같이 음수 들여쓰기 마진을 적용하는 방법이 있는데요. 클릭하거나 포커스 될 때 아웃라인이 버튼보다 크게 표시가 되어서 보기 싫다는 단점도 있습니다.

한편 제가 주로 사용하는 IR 기법을 하나 소개하면 이런 것도 있습니다.
http://neal.venditto.org/xmp/nir.html
http://neal.venditto.org/nir.php

핵심은 {z-index:-1}을 이용해서 텍스트를 아예 배경 이미지 뒤로 보내버리는 방법으로써 현존하는 IR 기법 가운데 가장 접근성을 훼손하지 않는 방법 입니다. 단점은 a 요소 안에 span 요소를 하나 더 써야한다는 점인데 저는 크게 죄책감 갖지 않고 잘 쓰고 있습니다. ㅜㅜ;
정낙훈 1월 11th, 2009 at 6:11
(아래 폰트 관련해서, ^^;)
말씀 듣고 보니 그렇네요. 그런게 맞는데 그 분은 왜 그랬을까~요..;

그리고 혹시 이거 아시나요? ^^;
전에 알고 싶었던 건데 이 곳에 어느 분이 질문 올리셨는데 답변을 아직 못 구하신 것 같더라고요. 혹시 찬명님이라면 아실까 싶어 이 곳까지 와서 질문 남깁니다. ^^;
http://miniwini.com/miniwinis/bbs/index.php?bid=qna&mode=read&id=57866

제가 찾아내긴 했는데 표현 방법이 찬명님 아시는 것과는 살짝 다를 것 같아 그냥 링크 띄워봅니다.
설명 http://projectseven.com/tutorials/css/pvii_columns/index.htm
데모 http://projectseven.com/tutorials/css/pvii_columns/basedivfixed.htm
정찬명 1월 11th, 2009 at 6:32
굳이 스크립트까지 사용하면서 꼭 저렇게 할 필요가 없다고 생각합니다. 저런 레이아웃이 필요한 경우 왼쪽 상자의 보더나 배경은 부모 요소에서 배경으로 처리하면 아주 간단하게 해결 되거든요. ^^; 저는 지금까지 저런 박스를 표현하기 위해서 스크립트를 필요로 했던 경우는 없었습니다. CSS만으로도 충분히 가능한 표현입니다.
정낙훈 1월 13th, 2009 at 17:42
li와 dd 사용, 어떻게 구분해서 쓰나요?
그동안 목록을 나타낼 때는 li 태그를 이용해서 나타내었는데
얼마 전 네이버 코드를 보다보니깐 li태그를 써도 될법한데 dd 태그를 사용해서 나타냈더라고요.
나타내는거야 뭘 쓰던 똑같이 보이지만 코드에서 왜 dd를 사용했는지 궁금하더라고요.
http://hanapop.egloos.com/2395979
http://enanim.tistory.com/151
각 태그에 대해서 용도가 위와 같이 나와있긴 하지만 별다르게 구분 없이 쓰여지던데,
혹시 네이버에서는 왜 li를 안 쓰고 dd를 썼는지 이유를 알 수 있을까요?;;
정찬명 1월 13th, 2009 at 20:48
ol, ul, li, dl, dt, dd를 간단하게 설명해 보겠습니다.

ol은 Ordered List 로써 우리말로 순차 목록(순서 있는 목록)이라고 읽습니다.
ul은 Unordered List 로써 우리말로 비순차 목록(순서 없는 목록)이라고 읽습니다.
li는 List Item 으로써 목록 아이템이라고 읽습니다. ol, ul의 자식이죠.

dl은 Definition List 로써 정의목록 이라고 부르지만 무언가를 정의할 때에만 사용하지는 않습니다. 목록 데이터들이 하나의 목록 아이템 안에서 ‘주-종, 주어-서술어, 제목-내용, 단어-설명, 기타 등등…’ 이와 유사한 관계를 가지게 될 때 ol, ul 대신 dl을 사용하게 됩니다.

dt는 Definition Term 으로써 ‘용어’를 뜻하고,
dd는 Definition Definition 으로써 ‘정의’를 뜻하지만

앞서 말한대로 항상 그런 의미를 지닌 콘텐츠에만 사용하지 않아도 됩니다.
폭넓게 사용할 수 있다는 의미이고 더 나아가 dl, dt, dd로 마크업 할 수 있는 콘텐츠는 table, th, td 요소로 마크업 할 수 있습니다.

즉, li 요소는 포함되는 데이터가 ‘주-종, 주어-서술어, 제목-내용, 단어-설명, 기타 등등…’ 이런 관계가 아닌 단순한 하나의 문장(또는 단어)일때 사용하면 적당합니다.

그러나 데이터를 뜯어볼 때 ‘주-종, 주어-서술어, 제목-내용, 단어-설명, 기타 등등…’ 이런 관계가 파악이 된다면 dl, dt, dd 요소를 사용하는 것이 적당 합니다.

네이버는 데이터들의 의미있는 관계들을 잘 파악해서 가장 적당한 요소로 마크업 하고 있기 때문에 dl을 사용했을 것입니다.
봄눈 1월 15th, 2009 at 9:11
오늘 UI 개발자를 위한 북마크 봤는데 너무 잘 정리해 주셨어요~~~
제 북마크 다 버리고… 찬명님 정리된 북마크로… 싹 바꿔야 겠는걸요 ㅠ ㅠ
꿈트리 1월 15th, 2009 at 9:59
헐……블로그가 하루가 다르게 바뀌네요…슝~
길앞잡이 1월 15th, 2009 at 10:36
와우 블로그가 바뀌었네요~ Wiki 라는게 있는데
저에게 도움이 많이되네요~ 언제나 좋은정보들 감사합니다~
정찬명 1월 17th, 2009 at 19:08
모질라 위키 스킨과 룩을 통일 시켰지요. ㅎㅎㅎ.
정찬명 1월 17th, 2009 at 19:13
우주에서 가장 널리 사랑받고 있는 ‘미디어 위키’랍니다. ^^ 한번 설치해 보세요. 개인적으로 사용하든 공동편집용으로 사용하든 완전 강추 입니다!
김일규 1월 18th, 2009 at 8:48
솔직히 말씀드리면, 이전블로그보다 더 나은것 같아요.. ㅋㅋ
위키베타 여신것 축하드립니다.

유용한 링크가 많이 있어서 좋습니다. 언제 저의블로그도 좋은소식들을 담으면 링크할께요.. 아직은..

요즘 너무 좋은 정보들 감사합니다. 설 끝나고 한번뵈요..

아.. 2월 7일날~!
정찬명 1월 18th, 2009 at 17:14
감사합니다. ^^; 웹 표준의날 뵈어요!
꿈트리 1월 19th, 2009 at 9:33
저두 데려 가세요~~~ ㅡㅜ
정찬명 1월 19th, 2009 at 16:18
일단 바다를 건너오세요! ㅋㅋㅋ.
별별 1월 20th, 2009 at 17:27
잘 지내나~
훕.. 본인은 14시간의 정신노동으로 나날이 쇠약해지고 있네.

덕분에 IE6을 버리고, 7로 갈아탔네. 요즘 들어서는 새로운 것에 익숙해진다는 것이 쉽지가 않구만…

08년을 정리하는 것도 쉽지 않았지만, 새로이 시작하는 09년도 쉽지는 않구만.

모쪼록 09년도 나날이 승리하는 한 해 되시게.
항상 건강하고.

* Clear Type이 썩 좋진 않구만. 뷁일세. ㅋ
별별 1월 20th, 2009 at 17:28
매번 느끼는 것인데, 방명록 쓰기는 있지만 왜 수정은 없는가? 뷁!
정찬명 1월 21st, 2009 at 11:11
2001년도에 출시된 애물단지 브라우저를 여태 쓰고 있었다는 말이지? 같은 IT하는 입장에서 이거 너무한거 아냐? ㅋㅋㅋ. 최근에 나온 다른 브라우저들과 비교하면 속도가 많이 느렸을텐데 견딜만 하던가?

Clear Type은 이렇게 한번 조정해 봐. 최근에는 이곳처럼 나눔고딕이나 맑은고딕 사용하는 사이트들이 늘어나서 아래와 같은 설정이 도움이 될꺼야.

시작 > 설정 > 제어판 > 디스플레이 > 화면배색 > 효과 > 화면 글꼴의 가장자리를 다듬는데 다음 방법 사용 > Clear Type

자네가 이걸 모를꺼라고 생각치는 않네만.

PS1 :
댓글 수정이 가능하도록 하려면 방명록이나 댓글 적을 때 ‘비밀번호’를 추가로 적어야 하는데 나는 그렇게 뜯어 고칠 능력도 안되고 현재와 같이 간결한 양식을 유지하는 것이 더 좋다네. 심지어 이메일 등록 양식도 필요 없다고 생각하고 있거든.

PS2 :
혼자 사니 건강 잘 챙기고. 새해에는 뭔가 깜짝 놀랄만한 일로 날 좀 놀래켜 줬으면 좋겠네.
냐냐냥 1월 21st, 2009 at 12:52
안녕하세요. 나라디자인을 보면서 많은공부를 하고있는 디자이너 입니다.
오랜만에 와보니까 폰트가 바뀐거 같아여..
돋움이나 굴림이 아닌거 같은데 일반 시스템 폰트를 어떻게 하면 이렇게 쓸수 있나여?
너무 궁금한데 네이버를 제외한 타 사이트에서는 이런걸 본적이 없네요..
힌트라도……ㅠㅠ

복받으실꺼에여…
정찬명 1월 21st, 2009 at 17:15
냐냐냥님 안녕하세요? 제 블로그의 CSS를 분석해 보시면 아시겠지만 제 블로그 글꼴은 현재 다음과 같이 설정되어 있습니다.

{ font-family:나눔고딕, NanumGothic, “맑은 고딕”, “Malgun Gothic”, AppleGothic, 굴림, Gulim, 돋움, Dotum, Sans-serif; }

현재 냐냐냥님께서 윈도우즈 운영체제를 사용하고 계신다면 ‘나눔고딕’ 또는 ‘맑은고딕’이 설치되어 있기 때문에 설치된 글꼴로 렌더링이 되고 ‘돋움’이나 ‘굴림’으로는 보이지 않을 것입니다. MAC 운영체제를 사용하시고 ‘나눔고딕’이나 ‘맑은고딕’을 일부러 설치하지 않으셨다면 아마 ‘AppleGothic’으로 보일 것입니다.

웹 브라우저는 CSS에서 기술한 서체를 먼저 선언된 서체부터 적용하게 되는데 먼저 선언된 서체가 운영체제상에 존재하지 않으면 그 다음 선언된 서체를 찾아 적용하기 때문에 운영체제에 ‘나눔고딕’이나 ‘맑은고딕’ 서체가 설치된 분들만 이 서체로 볼 수 있습니다.

한편 윈도우즈를 사용하시는 경우 글꼴 가장자리를 부드럽게 다듬는 옵션(계단현상 방지)이 기본값으로 꺼져(표준)있기 때문에 이 설정을 개인이 조정하지 않는 이상 ‘나눔고딕’이나 ‘맑은고딕’ 서체가 좀 덜 선명하게 보이는 단점이 있습니다.

‘나눔고딕’이나 ‘맑은고딕’ 서체를 선명하게 보려면 개인이 직접 다음과 같이 설정하여야 합니다.

시작 > 설정 > 제어판 > 디스플레이 > 화면배색 > 효과 > 화면 글꼴의 가장자리를 다듬는데 다음 방법 사용 > Clear Type

또는

인터넷 익스플로러 > 도구 > 인터넷 옵션 > 고급 > 멀티미디어 > HTML에 항상 ClearType 사용

충분한 설명이 되셨는지요?
냐냐냥 1월 22nd, 2009 at 13:15
간단한 질문에 이렇게 자세히 써주셔서 너무 감사합니다.

다른질문이 또 있는데 나중에 또 쓸께여…ㅎ

안녕히계세요..
김민 1월 22nd, 2009 at 17:24
안녕하세요.
정말 여기에 많은 글이 있군요. 자주 방문해서 글을 프린트와 읽어야 겠네요. 주인장님 좋은 글 많이 부탁합니다. 여기에서 정신노동을 해야 겠네요.잘 부탁합니다.
저는 이만요.

ps,http://naradesign.net/wp/2008/12/07/351/ 이주소 글에 댓글은 제가 단 것이 아닌데요. 동일 이름인것 같은데요. 혹시 메일주소가 같은지확인해주세요.
정찬명 1월 22nd, 2009 at 18:27
감사합니다. 좋은 의견 많이 주세요. ^^

PS :
그분은 이름이 같은 다른 분 같습니다.
메일주소가 다르시더라구요. ^^
EveR™ 1월 28th, 2009 at 12:04
안녕하세요. 여태껏 눈팅만 하다가 오늘에서야 인사를 드립니다. ㅎㅎ
저도 웹표준이나 웹접근성에 대해 빠삭하게 공부하고 실험도 해보고 있습니다.
그리고 지금은 시리니GR보드라는 프로그램을 이용하여 스킨을 제작하고 있고요.
하지만 전 게시판 스킨을 제작하면서 의문이 듭니다.
정말 게시판이라는 시스템이 웹접근성과 공존할 수 있는지..
이 곳에 있는 글을 보긴했습니다만..
읽어보니 실전 초기 단계하고는 거리가 멀다고 생각합니다. ( 그리고 너무 이론적이고요.)
방명록이나 블로그 댓글 형태라면 저도 얼마든지 쉽게 스킨작업을 할 수 있습니다만..
게시판은 도무지 어떻게 CSS를 제거한 상태에서도 어떻게 코드를 짜야 제대로 된 의미를 부여해야 할지 도무지 감이 잡히질 않습니다. 앞이 깜깜합니다.
그리고 외국사이트 같은 경우 후니님께서 게시판 문화가 없다고 하더군요.
정말 게시판이라는 프로그램이 웹접근성과 공존할 수 있을까요?
이건 제가 GR보드를 통해 만든 게시판 스킨 입니다. (아직 만드는 중입니다. )
http://www.slamworld.co.kr/grboard/board.php?id=test

이거 첫 인사부터 좀 까칠하게 말을 한거 같습니다. ㅎㅎ
그러나 저도 이 스킨작업 때문에 거의 1주일을 붙잡고 있었기에 …. ㅠㅠ
좋은 방법이 있다면 부탁 좀 드릴께요~!
김현민 1월 29th, 2009 at 2:13
안녕하세요^^ 반갑습니다.
역시 웹디자인관련분야에 종사?혹은 관심이있는분들은
항상 블로그가 멋진것같습니다.
이 블로그는 어떤기반으로만들어진건지궁금하구요..밑에어떤분말씀대로 폰트도 이뻐서 비스타쓰는데 저는 맑게잘보이네요
저는 그냥 혼자 블로그운영하는데 디자이너도아니거니와 컴퓨터에대해 잘알지도못해서 이런블로그를 어떻게 꾸밀수있는지 관심만 큰 나머지.. 다른분이만든 스킨을 쓰고있습니다. 아무튼 부럽습니다. 건강하세요

ps: 메일 공개안됨 이게 참 맘에드네요!^^
정찬명 1월 29th, 2009 at 2:18
게시판을 너무 어렵게 생각하신것 같습니다. 지금 테스트 중이신 스킨이 접근성 측면에서 그렇게 나쁘다고 생각하지 않거든요. ^^; 제가 작성한 게시판을 한번 봐주시고 EveR님과 다른 부분이 있는지 한번 확인해 주세요.

http://naradesign.net/wp/2008/11/14/257/
http://naradesign.net/open_content/lecture/UIO/board/boardListBasic.html
http://naradesign.net/open_content/lecture/UIO/board/boardReadBasic.html
http://naradesign.net/open_content/lecture/UIO/board/boardWriteBasic.html

제가 EveR님이라면 현제 작성중이신 게시판의

* 헤더셀(th)에 scope=”col” 또는 scope=”row” 속성 추가.
* 검색어 인풋에 title=”검색” 속성 추가.
* input type=”image” 일 때 alt 속성만 마크업 하고 title 속성은 중복되므로 제거.
* CANCEL 버튼은 실수를 유도하고 반드시 필요한 기능이 아니므로 제거.
* CSS로 처리할 수 있는 표현에 관한 속성들을 HTML에서 제거.

정도의 수정을 할 것 같습니다.
하지만 제 코드가 굳이 정답이라고 생각하지 않으셔도 됩니다.
더 좋은 방법이 있을지도 모르니까요. ^^
정찬명 1월 29th, 2009 at 2:34
김현민님 안녕하세요? 텍스트만 잔뜩 있는 곳을 멋지게 봐주셔서 감사합니다. ^^;

제 블로그는 ‘워드프레스’라는 설치형 블로그로 만들어 졌습니다. 해외에서 유명하지만 국내에는 아직 사용자가 많지 않고 현민님께서 사용하시는 ‘텍스트큐브’와 같은 설치형 블로그 툴 입니다. 설치형 블로그툴로써 한국에서는 ‘제로보드’와 ‘텍스트큐브’를 많이들 사용하고 계시는데요. 아무래도 커뮤니티 등을 통해서 한국어로 도움받을 수 있기 때문에 압도적으로 두터운 사용자층을 이룬것 같습니다.

다른 블로그 툴을 써보고 싶으시다면 현재 계정에 ‘워드프레스, 제로보드’도 모두 설치해 보시는 것은 어떨까요? ^^ 제 계정에도 ‘워드프레스, 제로보드’가 함께 설치되어 있거든요. 시간 날때 텍스트큐브도 설치하려고 벼르고 있습니다. ㅡㅡ;

감사합니다. 좋은 하루 되세요!
EveR™ 1월 29th, 2009 at 9:53
좋은 답변 감사합니다.
그런데 scope=”col”과 scope=”row”는 어떤 의미를 두고 쓰는건지…
혹시 가로, 세로로 의미를 묶는 코드인가요?
마지막 부분에 CSS로 처리할 수 있는 표현에 관한 속성들을 HTML에서 제거를 하면 좋겠다고 하셨는데요. 이건 CSS제거할 당시에도 어느정도 보기 좋게 하기 위해서 곰곰히 따져가며 남겨놨어요. ㅎㅎ
폼을 다룰땐 CSS만 의존하면 CSS를 제거하게 되면 보기 않좋아 보이더라구요.
앞으로 자주 놀러와서 좋은 말씀 자주 듣겠습니다.
정찬명 1월 29th, 2009 at 10:25
’scope’는 우리말로 ‘범위, 영역, 시야, 유효범위’ 입니다. 즉, ’scope’ 속성은 ‘th’ 셀의 ‘유효범위’를 선언하는 속성입니다. 속성의 값이 ‘col’ 일 때에는 유효범위가 ‘세로열’(column)이 되고 ‘row’일 때에는 ‘가로행’(row)이 된다는 것을 선언하게 되는 것입니다.

이렇게 선언하는 경우 ‘td’ 셀은 자신의 ‘th’가 무엇인지 명확해지는 장점이 있습니다. 성능이 우수한 화면낭독기는 ‘td’ 셀을 읽을 때 ‘td’ 셀만을 독립적으로 읽지 않고 자신의 헤더가 되는 ‘th’ 셀을 먼저 읽어 주어서 복잡한 표를 눈으로 보지 않고도 이해할 수 있게 됩니다. ‘th’가 상단과 좌측에 모두 존재하고 셀의 개수가 많아지는 경우 이런 속성이 더욱 필요할껍니다.

현재로써는 다른 기계(검색엔진등)들이 ‘th, td’ 의 유효범위를 의미있게 처리하고 있지 않지만 화면낭독기와 같이 ’scope’ 속성을 의미있게 처리하게 된다면 검색엔진의 정확도는 더욱 높아지고 다른 방식으로도 높은 확장 가능성을 갖게 되리라 기대가 됩니다.

제가 작성한 게시판 스킨도 CSS 한번 제거해 봐주세요.
HTML은 아직 저로서도 끝나지 않은 고민이라 서로 배워야 할 것 같습니다.
감사합니다. ^^
EveR™ 1월 29th, 2009 at 20:36
정찬명님께서 만드신 게시판 디자인을 CSS로 제거한 상태에서 보니…
정말 괜찮네요.
필드셋으로 묶어 줌으로써 구분도 명백히 되며 확실히 보기 좋습니다.
이곳에 와서 정말 글을 남긴 보람이 있습니다. ㅎㅎ
정말 좋은 정보 감사합니다~!
정찬명 1월 29th, 2009 at 21:59
봐주셔서 감사합니다. 더 좋은 생각 떠오르시면 언제든 공유해주세요.^^
EveR™ 1월 31st, 2009 at 22:32
안녕하세요. 또 이곳에 제 고민을 털어놓기 위해 왔습니다. ㅎㅎ
다름아니구 저번에 보여드린 게시판 있잖아요.
일단 다 완성시켰구 이제는 한시름 덜어놨습니다.
그런데 IE6 때문에 고민이 이만저만이 아니에요.
맨처음엔 IE6은 무시하자는 생각으로 작업을 시작했는데요.
지금에 와서 갑자기 고민이네요.
IE6을 방치해도 될까 하고요. 제가 IE Tester로 본 결과 일부분이 스타일시트가 먹통이더군요. ^^;;
그래서 이렇게 문의를 드립니다.
과연 이 IE6을 방치해야 되는지 아니면 크로스브라우징 대상으로 포함시켜야 할지 정말 고민입니다.
정찬명 1월 31st, 2009 at 23:12
당연히 포함시키셔야지요.
IE 6.0 점유율은 아직도 한국에서 60% 정도나 됩니다.
그래서 저희가 IE 6.0 업그레이드 캠페임을 하는거 아니겠어요. ㅜㅜ;
http://resistan.com/savethedeveloper/
초슬 2월 2nd, 2009 at 10:34
안녕하세요.
자주오지만 방명록이 있는걸 지금 발견했네요 ㅡㅡ;;
정찬명님께 항상 많은 도움 받고 있습니다.
언제나 좋은글 감사합니다.^^;;
그럼 좋은 하루 되세요.
김칠환 2월 2nd, 2009 at 15:21
안녕하세요~~남남북녀에서 만나뵙던 김칠환 입니다~~
전화통화점 부탁할게요~~ 010-5588-6471
정찬명 2월 2nd, 2009 at 22:28
감사합니다. 이렇게 방명록에 격려말씀 주시는 분들 덕분에 신이 나서 포스팅 합니다. ^^
정찬명 2월 2nd, 2009 at 22:45
죄송하지만 남남북녀라는 곳을 저는 모르는데요. 사람을 잘못 찾으신것 같습니다. 만약 찾는분이 제가 맞다면 전화 주세요. 010-3405-9380 정찬명.
이재헌 2월 5th, 2009 at 9:50
안녕하세요?
글도 안쓰고 눈팅만 하고 있지만 그래도 자주 오던 곳인데 요즘은 바빠서 그나마도 찾아오질 못했네요.

하지만, 토요일에 있을 ‘웹표준의 날’은 신청을 해 놨습니다.
뵐 수 있는 시간을 가질 수 있겠네요.

기대하고 있겠습니다.
정찬명 2월 5th, 2009 at 10:10
재헌님 안녕하세요? 제가 글을 자주 쓰는것은 아니니까 자주 안오셔도 괜찮아요. ^^ 재헌님 기대에 부응할 수 있을지 모르겠지만 아무튼 열심히 준비해 가겠습니다. 웹 표준의 날 뵈어요! ^^
김란영 2월 6th, 2009 at 17:09
안녕하세요 예전에 세미나에서 강의 잘 들었습니다.

제가 작업하다 너무 궁금한게 있어서 여기 적어도 되는지 모르겠지만 물어볼께요 ㅋ

이미지 텍스트가 60자 이상일때 longdesc=” ” 이 태그를 사용해서 넘기잖아요.

책을 보면 대체로 이 방법을 권하고 있는데 링크 페이지로 넘겼다가 원페이지로 넘어

오는데 문제가 없는지 alt 나 title 보다 어떤면에서 좋은지 궁금합니다.

답변 부탁드릴께요 ^^
정찬명 2월 7th, 2009 at 0:56
이미지 대체를 위하여 longdesc를 사용하는 방법은 표준에서 장려하는 방법이나 한동안은 국산 화면낭독기가 이 속성을 제대로 인식하지 못해 현실적으로 장려하지 않기도 했었습니다.

최근에는 이 문제가 개선되어 longdesc 속성을 표준에 따라 인식하고 화면낭독기는 longdesc가 포함된 이미지를 ‘설명있음 이미지’라고 읽어줍니다. 화면낭독기 사용자가 해당 이미지에서 ‘alt+Enter’ 키를 사용하면 longdesc에서 지정한 파일(*.html, *.txt)을 새 창으로 열어서 읽어주게 됩니다.

한편 새 창으로 다른 문서를 여는것은 사용성이 그다지 좋지 않다는 의견도 많이 있기 때문에 longdesc 대신 ‘숨은 텍스트 형식’ { position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; } 으로 제공하는 방법도 나쁘지 않다고 생각합니다. { display:none; }을 이용하여 숨은 텍스트를 제공하는 방법은 화면낭독기 환경 설정에 따라서 읽지 못하는 경우도 있기 때문에 권장하지 않습니다.

추가로 대체 텍스트를 title 속성에 제공하는 것은 바람직하지 않은 문법으로써 권장하지 않습니다. alt와 longdesc는 이미지를 대체하는 의미를 지니고 있지만 title은 대체 텍스트가 아닌 부연설명의 의미를 지니고 있어서 대체 텍스트를 title 속성에 넣는것은 잘못된 용법 입니다.
류중근 2월 8th, 2009 at 21:51
드디어 찾았습니다.

곱게 ‘제로보드’ 만들어 주신 분에게 인사라도 드리려고 왔는데, 열린 페이지가 그냥 제 홈피처럼 ‘얘들 놀이터’ 수준을 확 넘어 버립니다.

‘어떻게 할까?’ 한참을 뒤적이다가 눈이 번쩍 띕니다.

‘방명록’을 찾았거든요.

역시 ‘전문가는 뭐가 달라도 다르네요.’

선생님 같은 대단한 분들이 있기에 세상 사람들이 날로 행복해지는 지나 봐요.

덕분에 적은 노력으로도 많은 행복 얻을 수 있어 무척 기쁩니다.

그만 갈게요.

지금부터 반가운 일만 계속되길 빌면서 떠납니다.

행복은 기본이고 늘 건강히 지내십시오.
정사라 2월 9th, 2009 at 15:32
*ㅁ*
하핫..안녕하세요 정찬명님.
가끔씩 들려 눈팅만 하던 저였는데
지난주에 있었던 “웹표준의 날”에 정찬명님을 실제로 뵙고선..
낯설지 않은 분이시라고 생각만 하다 그만..
저희학교 강사님이였다는걸 기억해냈어욧;;;
참으로 반가웠습니다..하하핫^^;;;
학생 2월 9th, 2009 at 19:06
안녕하세요.
글을 꼼꼼히 읽어보니 사이트가 참 재미있고 배울게 많은거 같습니다.
제가 질문이 있는데 읽어봐주세요.
별거 아닌거 같지만 저는 참 고민이거등여…
사이트 만들때 오른쪽에 따라다니는 퀵메뉴가 들어가는데 이녀석을 제대로 제어하지 못하겠습니다.
밑으로 한없이 내려가기도 하고요… 여러가지 소스를 써봐도 한두가지 문제점이 꼭 나오는데요.. 이 퀵메뉴에 대한 표준 소스는 없는 건가요?
정찬명님은 어떤 방식으로 쓰는지 알고싶습니다.
정찬명 2월 9th, 2009 at 22:12
류중근님 감사합니다. 저는 XE(구 제로보드)의 UI 개발을 담당하고 있으며 XE를 창조하신 분은 따로 있습니다. 제로님(http://blog.nzeo.com/) 바로 이분이시죠. 그리고 현재는 NHN이라는 회사에서 인력과 부대비용등 모든것을 지원하고 있기 때문에 이곳에 남시긴 인사는 제로님과 NHN이라는 회사에 대한 감사의 표시라고 생각하겠습니다. XE에 참여하는 것이 제게는 더 없이 영광된 일이지만 회사에서 지원하지 않았다면 하지 못했을 일입니다. 더 좋은 XE를 만들어 달라는 격려의 말씀으로 알고 저 또한 더욱 노력할 것입니다. 감사합니다.
정찬명 2월 9th, 2009 at 22:52
스크롤에 영향을 받지 않고 화면에 고정된 바로가기 메뉴를 말씀하시는것이 맞다면 HTML과 CSS코드만으로 제작된 아래 예제를 한번 봐주세요.

http://naradesign.net/open_content/reference/fixedLayer/index.html
http://naradesign.net/wp/2007/09/08/128/

브라우저가 표준을 적절하게 지원하는 경우 CSS핵이라는 것을 사용하지 않아도 구현이 가능하지만 현재 MS IE 6 브라우저가 position:fixed 속성을 지원하지 않기에 핵을 사용하게 되었고 그럼에도 불구하고 저 예제는 완벽하지 않습니다.

IE6 브라우저에서 브라우저의 창 너비를 줄이는 경우 바로가기 메뉴 영역이 body에 생성된 스크롤바를 덮어버리는 문제가 있었습니다. 따라서 예제의 #aside 영역에 _z-index:-1 속성을 넣어보기도 하는데 그렇게 되면 바로가기 콘텐츠를 클릭하거나 드래그 할 수 없는 또 다른 문제가 발생하는 등 아직까지 마땅한 묘안이 없는 예제라서 실무에 직접 사용하시는 것은 권장드리지 않습니다.

이런 예제도 있다는 정도만 알아두시고 묘안이 생기기 전까지는 그냥 잘 만들어진 자바스크립트 코드를 찾아쓰시는 것을 권장 드립니다.

네이버의 이용약관 페이지 우측에 비슷한 예제가 있습니다. ‘^top’ 이라는 글자가 화면에 고정되어 스크롤의 영향을 받지 않고 있는데요. 참고가 되실런지 모르겠습니다.

http://www.naver.com/rules/service.html

CSS
#content{ background:#eee; width:800px; height:2000px;} .gotop{position:fixed; _position:absolute; left:50%; top:556px; width:960px; margin-left:-480px; text-align:right; clear:both;} .gotop a{display:block; float:right; position:relative; right:-22px; padding:6px 1px 2px 1px; font:10px Verdana; color:#666; background:url(http://wstatic.naver.com/rules/r8/bu_arrow3.gif) no-repeat 6px 2px;}

HTML
<div id="content">#content</div> <div id="gotop" class="gotop"> <a href="#wrap">top</a> </div> <script type="text/javascript" src="http://www.naver.com/rules/js/namespace.js"></script> <script type="text/javascript" src="http://www.naver.com/rules/js/NaverGuideSupport.js"></script> <script type="text/javascript"> nhn.setup(500,"gotop") nhn.goTopEvt(); </script>

예제에 인용된 img, js 파일을 실무에서 직접 링크하는 것은 네이버의 자원을 부적절하게 사용하는 방법이므로 피해주실 것을 부탁 드립니다. 감사합니다.
정찬명 2월 9th, 2009 at 22:55
제가 학교에서 강의한일이 많지는 않지만 어느 학교 학생이셨는지 궁금하네요. 아는척좀 해주시지 그러셨어요! ^^; 설마 고등학생 때 저를 보신것은 아니시겠죠? 충분히 가능성은 있는 이야기 입니다. ㅎㅎ. 자주 놀러와서 안부 전해 주세요.
정사라 2월 10th, 2009 at 10:55
제가 대학2학년때 1학기 전필 교수님이셨어욧.
그때나 지금이나 맨날 정신 못차리고 있긴한데..ㅋㅋㅋ
B+이라는 후한 점수를 주셔서 정말 감사했습니당 케케켁.
자주 놀러와 많은 가르침 받을께요 교수님~♡^^
정찬명 2월 10th, 2009 at 11:17
아하~ 그랬군요. 너무 반갑네요. 세상 정말 좁아요. 한 학기 강의 였지만 그때 가르쳤던 학생이 이렇게 사회 나와서 현업에 있는걸 보니 굉장히 뿌듯하네요. ^^; 게다가 이런 행사에 참여할 정도의 열정이라면 정신을 아주 잘 차리고 계신겁니다. ㅎㅎㅎ.

PS :
이제는 더 이상 교수님이라 부르지 않으셔도 되요. 사람들이 저 나이 많은줄 알아요. ㅜㅜ;
학생 2월 10th, 2009 at 11:44
답변감사합니다.
레이어 고정시키는 방법은 예전에 블로그 방문시 봤었구요.. 실제 테스트도 해 보았습니다만, 말씀하신것처럼 문제가 발생되서 안하기로 했답니다. 이런 방법도 있구나 하고 공부하면서 개인적으로 사용하고 있습니다.
네이버의 약관 페이지 말고도 네이버 인사이드에 들어가면 스크롤에 따라 움직이는 “top” 버튼이 있는데요… 음…에헥… ;;; 이런질문 할때마다 노력안하는 게으른 학생처럼 보일까 걱정이 되긴 합니다만… 사용하는 스크립트가 워낙 다양하고 모두 이해하기가 어려워서 질문했던 겁니다.
예제소스는 모르고있던건데 너무 감사하구요. 개인적으로 공부하는데만 참고하겠습니다.
안녕히계세요….
정사라 2월 10th, 2009 at 13:16
ㅋㅋ 그러게요~~
세상이 좁긴 무척 좁나봐요.ㅋㅋㅋ 이렇게 생각지도 못한 만남이 있다는걸 이제야 실감을 하네요. 이렇게 만나게 된 이상 그때 가르침을 받았던 학생의 모습이 부끄럽지 않도록 더 노력하겠습니다.^^;;

ps.그럼 앞으로는 교수님이라 호칭 하지 않고 그냥 정찬명님이라고 불러도 될까요? 다음번에 만나게 되면 아는척할테니 잊지말아주세요 >ㅁ<
정찬명 2월 10th, 2009 at 13:48
네, 같이 늙어가는 처지라고 하면 사라님이 너무 억울하시겠지만 저는 그냥 찬명님이라고 불러주시는게 편합니다. ^^
정사라 2월 10th, 2009 at 23:33
ㅋㅋ넵 알겠습니다 찬명님^^ 종종 놀러와 공부 할게요^^*
정낙훈 2월 12th, 2009 at 7:51
안녕하세요 찬명님. XE의 기본 플래닛 스킨에서 코드가 조금 잘못되어 있는게 아닌가 해서 또 찾아왔습니다. ^^;
플래닛 기본 스킨을 사용하는데 제가 만든 레이아웃 스킨에서 오른쪽 컬럼이 내려가버리더라고요.
왜 그럴까 싶어 다른 3단 스킨도 적용해봤는데 똑같이 그렇더라고요.
다른 2단 레이아웃 스킨의 경우 왼쪽 컬럼있고 오른쪽엔 본문이고
바로 푸터가 이어지기 때문에 화면상에 문제가 없어 보였는데
플래닛 오른쪽에 컬럼이 하나 붙고, 푸터가 붙을 경우
오른쪽 컬럼이 다음 줄로 내려가버리는 문제가 발생하더라고요.

확인해본 레이아웃 스킨은 2단의 경우는 공식 레이아웃 스킨과 공식 블로그 스킨이었습니다.
공식 블로그 스킨의 경우는 오른쪽에 컬럼이 있는데도 그런 문제가 안 보였습니다만,
3단의 경우는 부족한 제가 만든 레이아웃 스킨과 http://www.zeroboard.com/17036565 이 스킨으로 확인해봤습니다.
두 개 다 오른쪽 컬럼이 내려가버리더라고요.

그래서 플래닛 스킨을 확인해봤는데 제가 생각하기엔 아마도 플래닛 스킨의 footer.html 파일에서 마지막에 가 하나 더 추가된 건 아닌가 싶어서요.
혹시 이런 확인 작업 부탁드려도 될까요.^^;;
이미 마치신 작업인데 괜히 제가 만든 레이아웃 스킨에서 문제가 있다고 해서 찬명님 괴롭혀 드리는 거 같아 죄송합니다.;;
정낙훈 2월 12th, 2009 at 7:53
제가 만든 레이아웃과 수정한 플래닛은 http://eond.com/planet 이 주소에서 볼 수 있는데, 제가 만든 레이아웃을 살펴봐달라고 하지는 못하니깐.. (__);;
참고로 링크의 화면은 footer.html 에서 마지막 를 제거한 화면입니다.
정찬명 2월 13th, 2009 at 7:15
낙훈님 안녕하시죠? ^^ 깨지는 화면을 보지 않고는 어떤 문제가 있는지 제가 파악하기가 어렵습니다. ㅜㅜ; 깨진 화면을 제가 확인할 수 있는 방법이 없을까요? 코드를 확인할 수 있는 상태로 말이죠. 만약 파일로 보내주시는 것이 가능하다면 dece24앳gmail.com 으로 부탁드립니다. 또는 괜찮으시다면 웹에서 확인할 수 있도록 해주셔도 좋구요.
정낙훈 2월 13th, 2009 at 10:13
http://eond.com/planet
module/planet/skins/xe_planet/footer.html의 10번째 줄
를 원래대로 삽입한 모습입니다.
사용된 레이아웃 파일은 아래 주소에서 다운받으실 수도 있습니다. ^^;
http://eond.com/?module=file&act=procFileDownload&file_srl=165547&sid=32b6341e49a24b2c3e6e4df076ff03c7
게시판은 안 그런데.. 플래닛에서만 그래서 말에요^^;
정찬명 2월 13th, 2009 at 12:05
낙훈님 덕분에 중요한 버그를 하나 잡았습니다. ^^ 말씀하신대로 planet 모듈의 풋터 파일에 잘못된 닫기 div 요소가 하나가 포함되어 있었습니다. 문제의 라인 하나를 지웠구요. 다음 패치 또는 버전 업데이트 때 포함될 것입니다. 감사합니다.

문제의 파일
module/planet/skins/xe_planet/footer.html

삭제된 요소
마지막 라인의 [/div]
정낙훈 2월 13th, 2009 at 14:15
괜한 고생 시켜드리는 건 아닐까 하고 염려했는데 버그라고 하니 다행이네요. ^^
김일규 2월 14th, 2009 at 17:54
찬명님 잘 지내시죠?
역시나 퍼블리싱 때문에 많이 바뻐서 만나뵙자는 전화도 못드리네요.
퍼블리싱 업계쪽에 몸을 담고 있다보니..
몇가지 궁금한 사항이 있습니다.

1)2009년 퍼블리싱 시장에 대한 규모
2)향후, 예를들어 2015년까지의? 시장규모를 예측한다면 어느정도 될까요?
EveR™ 2월 15th, 2009 at 1:06
안녕하세요.
잠깐 눈팅도 할꼄 들렸는데 방명록의 분위기가 활기차네요. ㅎㅎ
아참 그리고 오늘 후니님 결혼식 있다는데 혹시 참석하실껀지…
그리고 이번주엔 7일 중 5번이나 외식 및 고기를 먹네요. ㅎㅎ
동생 졸업식에 친구 군입대에 또 아버지 생신에..
이러다 병나는거 아닌지… ㅋㅋㅋ
그리고 제 홈페이지 작업은 이제 거의 완공단계에 들어갔습니다.
역시 홈페이지 하면 가장 어려운게 매뉴설계 및 컨텐츠 채워넣기!!!!
이게 정말 귀차니즘&짜증이 그냥 몰려와요. ㅎㅎ
게다가 게시판은 한 20번은 손질한거 같아요. 이젠 코드를 보기만 해도 눈이 돌아간다는… ^^:;;
아무튼 이제 빨리빨리 마무리 짓고 여러사람들에게 제 홈페이지를 알려야죠 ㅎ
그리고 제가 아는 지식들을 다른사람들과 하루빨리 공유하고 싶구요.
그럼 전 이제 취침하러 가야겠습니다. 이제 피곤함이 몰려오네요.
그럼 전 이만~~!
정낙훈 2월 15th, 2009 at 12:08
글쎄요, 그냥 일반인이 보기에는 그게 그렇게 크지 않을 것 같습니다.
현재 경제 사정에 따라 이런 IT 쪽의 지원이나 시장 규모가 어느 정도의 자리를 차지할 것 같습니다만 웹사이트의 퍼블리싱이라는 시장 자체는 극히 아주 미미하지 않을까요..
5년 정도의 향후를 바라본다 해도 분야 자체가 경제 발전에 아주 도움이 된다거나 이게 없으면 못 산다 하는 정도의 주요한 업종이 아닌 만큼, 이 IT 시장은 경제가 아주 활성화되고 그에 따라서 이게 성장할 수도 있고 아닐 수도 있는.. 시장 경제 자체로 봤을 때 부가적인 서비스 업에서의 한 분야로 밖에 생각되지 않는데요, 퍼블리싱이 제가 봤을 땐 사회에서의 장애인에 대한 서비스 지원 분야의 규모보다도 더 적은 형태가 아니지 않나 싶습니다.
단순히 퍼블리싱이라는 한정적인 측면을 떠나서 현재까지의 웹사이트의 페이지를 유지하고 관리하는 웹사이트 제작업체에 소속된 퍼블리셔라면 그냥 일반 도서출판사의 편집자와 얼추 비슷한 규모로써 시장이 진행되어지지 않을까요.. 나중에는 책, 잡지사의 에디터나 웹사이트의 웹에디터나 비슷하거나 조금 더 우위에 서지만 도토리 키재기 식 정도의 차이 밖에 나지 않을 정도의 직종이 되지 않을까요??;;; 일반 편집자보다 조금 더 IT 쪽으로 전문화된 인력의 웹에디터 정도의 수준.. 이라곤 하지만 사회적으로 인식이나 대접은 그냥 컴퓨터로 밥 벌어먹고 사는 사람, 혹은 홈페이지 만드는 사람 정도이지 않을까 라고 추측을 해봅니다;;
나에 2월 16th, 2009 at 13:10
인터넷처럼 이슈가 많고 흐름이 원활한 분야에서는 규모를 예측한다는 건 거의 불가능;;
정낙훈 2월 16th, 2009 at 17:05
찬명님 혹시
http://html.nhndesign.com
이 곳에서 본 글인데,
항상 화면의 하단에 레이어가 위치하게끔 하는 글을 본 적이 있는데요,
예전에 보고 따라했었는데 다시 그 글을 보고 싶은데 그 글이 안 보이더라고요.
혹시 여기 있던 글이 글쓴이에 따라서 지워지기도 하고 그러나요?;;
화면 크기에 상관없이 무조건 화면 하단에 푸터가 보이게끔 하는 그런 글이었거든요.
구현한 소스가 있긴 한데 글을 다시 읽고 싶어서 찾고 있는데 잘 안보이네요;;
정낙훈 2월 16th, 2009 at 17:10
그리고오..^^;;
http://html.nhndesign.com/naver_common_layout_ui_library#L6
가변폭3단컬럼에서 왼쪽에 높이100% 정도로 20px 정도 너비의 레이어를 삽입하고 싶은데 방법 없을까요?
http://html.nhndesign.com/guidelines/pattern/naver/layout/3Fluid1.html
여기서..
http://eond.com/files/attach/images/165294/294/165/eond_tistory.png
이 그림처럼 가변3단 폭에서 왼쪽에 100%의 레이어를 삽입하고 싶거든요.
또.. 가변폭3단컬럼이 높이가 100%가 아니던데,div로 높이 100%를 맞추기는 방법이 없을까요 ^^;;
정찬명 2월 17th, 2009 at 1:03
일규님, 안녕하세요 ^^; 덕분에 잘 지내고 있습니다.

웹 퍼블리싱이란 UI 개발을 말씀하시는 것 맞죠?
UI개발 직군의 인력 수요에 대한 규모를 예측한다는 것은 제가 답변하기에 좀 주제 넘는 측면이 있지만 개인적인 의견을 여쭈신 것으로 알고 무책임하게 답변드려 봅니다.

2009년 부터 ‘장애인 차별 금지 및 권리구제 등에 관한 법률’(이하 ‘장차법’)이 시행됨에 따라 공공기관의 수요로 부터 이를 예측할 수 있을 것 같습니다.

국내 웹 사이트 가운데 2009년부터 ‘장차법’의 적용을 받게 되는 공공기관(정부, 연구소, 교육기관)의 비중은 약 1.7% 정도 입니다.

go.kr(0.2%) + re.kr(0.2%) + 교육기관(1.3%) = 공공기관(1.7%)

한국 인터넷진흥원 2008년 12월 인터넷통계 월보

장차법의 적용을 받는다는 것이 곧 전문적인 UI 개발직군의 수요와 비례한다는 가정 하에 2009년 현재 전문적인 UI 직군을 필요로 하는 기관의 수요는 1.7% 수준이라고 말씀드릴 수 있을 것 같습니다.

그러나 2013년 4월 11일 부터 이 법률은 모든 분야로 확대되기 때문에 그때 즈음이면 수요는 기하 급수로 늘어날 것으로 전망 합니다.

2008년 12월 기준으로 국내에서 기업 웹 사이트의 비중은 약 53.9% 인데 2013년에도 이 수치가 크게 달라지지 않는다면 향후 ‘장차법’의 적용을 받아야 하는 웹 사이트는 약 54.6% 수준으로 크게 늘어나게 되고 전문적인 UI 개발 직군의 수요도 크게 증가하여 2개 웹 에이젼시 기업 가운데 한 곳은 UI 개발 직군을 따로 두는 형태로 성장하지 않을까 전망 합니다.

co.kr(53.9%)

한국 인터넷진흥원 2008년 12월 인터넷통계 월보

즉, 통계상 현재는 100개 에이젼시 가운데 단 두 곳만 전문적인 UI 개발 직군을 필요로 하고 있지만 4년 뒤에는 100개 에이젼시 가운데 50여곳 정도는 UI 개발 직군을 따로 두어야 할 만큼 수요가 있다는 의미 입니다.

웹 디자이너 또는 서버측 개발 직군에서도 웹 접근성을 확보하는 일이 가능하지만 기존의 업무에 새로운 과업이 추가되기 때문에 분명히 한계가 있을 것이고 UI 개발직군이 이를 효율적으로 해결하는 솔루션이 되리라 생각 합니다.
정찬명 2월 17th, 2009 at 1:08
EveR™님 안녕하세요? 후니님 결혼식에는 개인 사정으로 참석하지 못했습니다. 음, 훈님께 무척 죄송하네요. ㅡㅡ; 웹 사이트 공사 완료 되시면 앞으로 글 쓰실 때 자신있게 이름에 링크 거시겠네요. 저도 기대 하겠습니다! ^^;
정찬명 2월 17th, 2009 at 1:09
네, 맞습니다. 그래서 상당히 조심 스러운데 개인적인 의견 아래 댓글로 적어 보았습니다. 무책임하게 말이죠. ㅎㅎ.
정찬명 2월 17th, 2009 at 1:18
낙훈님 안녕하세요? 마침 몇일전에 다른분께서도 동일한 질문을 해주셔서 방명록에 답변한 내용이 있습니다.

스크롤에 영향을 받지 않고 화면에 고정되어 있는 레이어 관련 글
http://naradesign.net/wp/guestbook/#comment-45539

http://html.nhndesign.com 에는 그런 자료가 있었는지 저는 기억이 나지를 않네요. 아마도 아주 오래전 자료라면 삭제가 되었을껍니다.
정찬명 2월 17th, 2009 at 1:22
일단 ‘%’단위는 상대적인 값이기 때문에 ‘div’의 높이가 ‘100%’가 되려면 부모 요소에 높이가 지정되어 있어야 합니다. 부모 요소에 높이가 지정되면 그때부터 ‘div’는 부모 요소의 높이를 기준으로 자신의 높이를 ‘%’로 결정할 수 있습니다. ‘div’이 {height:100%}를 갖지 못하는 것은 현재 부모 요소에 높이값이 없기 때문입니다.

html, body 요소에 {height:100%} 를 지정해 보세요. 이 때부터 자식 요소인 ‘div’ 요소들은 ‘%’ 단위의 높이 값을 지닐 수 있게 됩니다.

부디 성공하시길 빕니다. ^^;
김정주 2월 17th, 2009 at 13:11
안녕하세요? 눈팅만 하다 처음 글올리는 건데 몹시 민망하네요^^;;
좀 물어 볼께 있어서요
글이나 이미지에 링크 걸때 생기는 점선 말인데요 보통 검정으로 되는데 여기서 보니 제목에 생기는 점선이 붉은 색으로 되더라고요 어떻게 하는거죠?
다른데 찾아봐도 a:hover 해서 점선스타일 주는 건 있는데 이건 어떻게 해야 하는지 모르겠어서요???
너무 작은 걸 물어 죄송하지만 좀 알려주세요( _._ )
정찬명 2월 17th, 2009 at 13:43
정주님 안녕하세요? 뭘 그렇게 민망해 하세요. ㅎㅎ. 아마도 파이어폭스를 사용하고 계신가 봐요. 파이어폭스는 :hover 상태일 때 글자에 적용된 색을 클릭 또는 포커스 되었을 때의 아웃라인(사용자 포커스 영역을 표시해 주는 점선)에도 적용하고 있습니다. 제 블로그 제목이 :hover 상태일때 #f00 색상이 지정되어 있었기 때문에 파이어폭스에서는 아웃라인도 붉은 색으로 보이는 겁니다.

한편 제가 아는 다른 브라우저(IE, OP, SF, CR) 가운데 이런식으로 동작하는 브라우저는 없습니다. IE는 클릭이나 포커스시 아웃라인을 검정색 점선으로 표시하고 OP, SF, CR 브라우저는 클릭 했을 때는 아웃라인을 표시하지 않고 키보드로 포커스 되었을 때에는 2~5픽셀 굵기의 부드러운 실선이 표시 됩니다.

좋은 하루 되세요!
김란영 2월 18th, 2009 at 14:13
안녕하세요. ^^

질문에 대해서 답변을 너무 잘해 주셔서 감사합니다.

이번에도 작업하다 궁금한점이 있어 들렀어요 ^^;

w3c검사 할때 url에서 발생되는 특수문자가 에러 납니다.

모든 특수문자를 변경해 줬을때 링크가 안걸린다거나 하는 부분이 발생할때가

있는데 이럴때 어떻게 하면 좋을까요??
정찬명 2월 18th, 2009 at 14:15
앗, 저는 아직 그런 경우가 없어서 구체적으로 왜 링크가 안되는지 모르겠습니다. 링크가 잘 걸리는 URL과 링크가 걸리지 않는 URL을 이곳에 적어주시면 좋겠습니다.
김란영 2월 18th, 2009 at 17:10
해결했습니다.

= 기호먼저 처리하고 했더니 자꾸 에러가 나서 & 기호 먼저 처리하니

문제가 없었습니다. 빠른답변 감사합니다. ㅋㅋ
나짱 2월 19th, 2009 at 0:05
안녕하세요.
처음으로 글 남기네요. 웹 표준과 웹 접근성에 관한 글 잘 보고 있습니다.
오늘은 참,,, 답답해서 글 남기네요.
저는 공공기관에서 근무하는 있습니다.
올 4월부터 웹 접근성을 지켜야 되기 때문에 여기저기(?) 알아보고 있습니다.
그런데, 불쑥 어디선가(보이지 않는 손 실제로는 보이는,,, ) 음성솔루션(보이스X)을 도입하라는 압박 아닌 압박을 받고 있네요.
여기저기 글을 읽어도 아직 도입할 단계는 아닌데 라는 생각이 계속 듭니다.
물론 현재 운영중인 웹사이트가 어느 정도의 접근성을 준수하고 있다면 상관없겠지만 그것도 아니거든요.
특히 찬명님이 글 속에 나타난 예산낭비(!)라는게 걸리네요.(물론 이건만은 아니지만요)
담당자가 아니라면 아닌게 되겠지만,,, 맘이 이리저리 쓰이는 건 어쩔 수 없네요.
과연 현 시점(운영중인 웹사이트가 어느 정도의 접근성 준수여부)에서 도입하는 건 아니라고 생각하는데,,,
참 이런글도 있더군요.(http://naxer.springnote.com/pages/2583986)
이글을 봐도 그런 생각이 들구요.
찬명님 생각을 듣고 싶습니다. ^^;;
늦은밤에 괜히 말이 길었네요. 좋은 하루 보내세요~
정찬명 2월 19th, 2009 at 1:08
공공기관에 근무하시면서 이 문제에 대하여 이렇게까지 고민하고 계신 담당자분을 만나다니 참으로 다행입니다. 제 글을 포함하여 다른 분들께서 작성하신 TTS 솔루션에 대한 글을 읽어보셨다면 TTS가 웹 접근성에 오히려 방해가 된다는 사실에 충분히 공감하셨을 줄로 압니다. 아래는 한국정보문화진흥원에서 주최했던 웹 접근성 관련 세미나 당시 시각장애인 김정호님께서 발표하셨던 자료 입니다. 웹 사이트에서 제공하는 TTS가 실제로 시각장애인들의 사용성을 떨어뜨리고 있다는 실증 자료로써 충분하다고 생각되어 인용 드립니다.

잘못된 웹 접근성 보장 사례(김정호) 19~24 페이지
http://www.iabf.or.kr/upload/pds/4.%20%EA%B9%80%EC%A0%95%ED%98%B8_Sense%20Reader%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%9C%20%EC%9B%B9%20%EC%A0%91%EA%B7%BC%EC%84%B1%20%EC%8B%A4%EC%A0%9C(1).pdf

출처 : 한국정보문화진흥원
http://www.iabf.or.kr/Pds/TrendView.asp?board=trend&bseq=2259

TTS 솔루션은 해당 웹 사이트의 접근성 수준에 관계없이 모든 경우에 방해가 될 뿐입니다. 이 솔루션을 설치 함으로써 ‘웹 접근성 품질마크 인증제도’와는 점점 더 멀어질 망정 가까워질 수는 없습니다. 부디 옳은 결정이 내려질 수 있도록 필요하시다면 제가 모든 방법을 동원해서 도와드리겠습니다. 감사합니다.
정낙훈 2월 19th, 2009 at 9:09
안녕하세요 찬명님~ ^^
방명록 페이지 링크가 잘 안 되네요.
이 글을 찾아가고 싶은데 페이지 링크를 눌러도 항상 보이는 건 첫 페이지라서요. ;ㅁ;

스크롤에 영향을 받지 않고 화면에 고정되어 있는 레이어 관련 글
~~http://naradesign.net/wp/guestbook/comment-page-8/#comment-45539~~
정찬명 2월 19th, 2009 at 10:36
낙훈님 안녕하세요? 워드프레스가 2.7 버전으로 업그레이드 되면서 현재 사용하고 있는 방명록 기능( TP-Guestbook Plug-in)을 정상적으로 사용할 수 없게 되었는데 이걸 모르고 있었습니다. 일단 접근할 수 있는 링크라도 알려드리면 좋겠는데 그걸 저도 찾을 수가 없네요. ㅜㅜ; 가능한 빨리 손을 봐서 다시 알려드리도록 하겠습니다. 감사합니다.
정찬명 2월 19th, 2009 at 10:41
낙훈님 일단 여기요. ^^
스크롤에 영향을 받지 않고 화면에 고정되어 있는 레이어 관련 글
http://naradesign.net/wp/guestbook/#comment-45539
정낙훈 2월 19th, 2009 at 10:42
하악..^^; 감사합니다!!;;
그리고 메일로 질문 한 통 보낼게요~ ^^;;
정낙훈 2월 19th, 2009 at 10:47
글 갈무리했습니다. 감사합니다^^;
정낙훈 2월 19th, 2009 at 13:53
그리고 제가 찾는 게 이거에 대한 팁이었습니다. ^^;;
브라우저 크기를 줄여도 항상 하단에 레이어를 볼 수 있게끔..
http://xynex.eond.com/misc/html/minihompy.html

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
[html xmlns="http://www.w3.org/1999/xhtml"]
[head]
[title] new document [/title]
[meta name="generator" content="editplus" /]
[meta name="author" content="" /]
[meta name="keywords" content="" /]
[meta name="description" content="" /]
[style type="text/css"]
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#header {
height: 107px;
background: #E6E6E6;
position: relative;
text-align:center;
padding-top:20px;
border-bottom:1px solid #DDD;
}

#content-box {
min-height: 100%;
margin: -127px 0 -80px;
padding-left:100px;
background:url(../images/bg.gif) 10px 7px;
}
*html #content-box {
height: 100%;
}

#content {
padding: 127px 0 80px;
position:center;
}

#footer {
height: 80px;
background: #ddd;
text-align:center;
}
[/style]
[/head]
[body]
[div id=header][/div]

[div id=content-box]
[div id=content][/div]
[/div]

[div id=footer][!--footer (height 50pixel)--][/div]
[/body]
[/html]
정낙훈 2월 19th, 2009 at 13:54
아마 한게임 관련해서 하단에 항상 카피라이트 구문을 보여야 했는데 저런 코드를 썼다..는 내용의 글이었습니다. ^^;;
한게임 하니깐 생각이 나네요.
http://html.nhndesign.com/?mid=blog&category=91&document_srl=634
여기있다는 것을 ^^;;
정낙훈 2월 21st, 2009 at 9:32
메일 잘 읽어보았습니다. z-index 값 때문에 그런 것이니 margin 은 상관없는 것이었군요. ^^;
그래서 질문이 이해하기 어렵게 질문드렸나 봅니다.;;

그리고 하나 더 여쭙고 싶은 것이 있는데요, DIV가 횡으로 100% 가득찬 게 필요할 때
http://projectseven.com/tutorials/css/pvii_columns/basedivfixed.htm
이런 코드가 있더라고요.
설명은 여긴데,. http://projectseven.com/tutorials/css/pvii_columns/index.htm

BODY에 온로드 해서 지정한 DIV의 높이를 오른쪽에 맞추어서 늘리는 형식인데,
XE의 레이아웃 스킨의 경우 레이아웃 안에
[body onLoad="P7_equalCols2(1,'c1','P','widget','p','c2','span')"]
이런 코드가 들어가버리면 body 태그가 중복으로 들어가버리기 때문에 좀 이상한 것 같더라고요.

만약 이렇게 div를 100%로 맞추는 것이 css로 까다롭다면 그냥 table로 하는 게 옳은 방법 일까요? ^^;;
정찬명 2월 21st, 2009 at 9:45
안녕하세요?
div만으로도 저런 표현이 얼마든지 가능하기 때문에 table은 권장하지 않습니다. ^^;
정낙훈 2월 21st, 2009 at 21:48
[style]
.c1 {}
.c2 {}
.c3 {}
.footer {}
[/style]

[div id=container]
[div id="c1"][/div]
[div id="c2"][/div]
[div id="c3"][/div]
[div id="footer"][/div]
[/div]

c1~c3 까지 옆으로 정렬된 레이어이고 각 너비는 30% 정도입니다.
footer는 그 아래 clear:both; 속성으로 그냥 죽 가로가 100%입니다.

내용은 c2가 100% 가득 차 있으면 왼쪽c1과 오른쪽 c3도 높이가 100%로 가득차야 합니다.
이럴 경우 css만으로 옆 높이에 따라 100% 가득차게 할 방법이 있을까요? ^^;

ps. 높이는 (c1+c2+c3)+footer = 100% 입니다;
정찬명 2월 21st, 2009 at 22:21
div 만으로 형제 요소와 동일한 높이로 늘어나는 상자는 만들수가 없습니다. 원칙적으로 불가능 하지만 반드시 그 방법을 고집할 필요도 없습니다. #container에 배경이미지를 넣는 방법으로 원하는 화면과 똑같이 만들 수 있으니까요.
정낙훈 2월 21st, 2009 at 22:46
그냥 연속된 거라면 배경이미지만으로 되겠는데 배경을 시작하는 이미지와 끝나는 이미지를 넣어두려고 하거든요. 그냥 position:fixed 로 설정해서 항상 그자리에 고정되어있게 해버리면 될까요?; 구조적인 코딩방법이라기 보다는 원칙적으로 불가능하다면 그냥 디자인으로 화면상에 그 위치에 그 이미지가 있어야 한다면 이렇게 하는 게 맞는 거 같기도 한데, 이런 게 많은 경우 이런 식의 코딩보단 그냥 오른쪽 셀이 늘어나면 왼쪽 셀도 늘어나는 table의 특성을 가져와서 코딩하는 게 낫지 않겠나 싶네요. ^^;;
김일규 2월 22nd, 2009 at 20:43
요즘 대한민국공군 웹접근성화 작업중이라 너무 바쁘네요. 주말에도 회사에서 ㅠ.ㅠ
3월에는 꼭 뵈요~!

아 그리고, 아직 갈길이 멀고 뜻어 고칠곳도 너무 많지만, 블로그 일단 오픈했습니다.
한 1~3개월정도 더 손좀봐야 안정화 될듯 하네요..

그래도 꾸준히 저만의 콘텐츠를 담고 싶네요.
응원해주세요.
성양희 2월 26th, 2009 at 17:30
안녕하세요. 오늘 우연히 네이버에서 웹표준에 관한 지식IN 안에 이글 저글을 읽다가 이 곳을 알게 되었습니다. 저도 웹디자이너라고 7년도 넘게 이 일을 하고는 있지만 전문적인 많은 글들을 읽으면서 그동안 너무 주먹구구식으로 그 동안 일을 해오지 않았나 하는 생각에
스스로도 너무 부끄럽다는 생각이 들어 쥐구멍이라도 찾고 싶었습니다.
또 대한민국엔 역시 똑똑한 분들이 너무나 많음에 다시한번 고개가 숙여집니다. 제가 찾던 정보의 댓글까지 꼼꼼히 읽다가 대전에 사시는 줄 알고 반가운 마음에 자기소개를 봤더니 학교를 대전에서 다니신 모양이네요.
제가 대전에서 나서 쭉~ 대전에 있거든요. 근무하셨다는 인디고도 들어본 것 같긴 한대. 현재는 네이버까지 입성하셨다니 정말 대단해 보입니다. 저도 대학교때 LG애드에서 인턴쉽을 잠깐 했었는데 서울 대기업에는 서울 명문대 애들이 대부분이더라고요.(괜한 자격지심?!)
암튼 너무 존경스럽고 제가 대전대를 나오진 않았지만 대전 시민으로 자랑스럽기도 하고.. ㅋㅋ 암튼 그러네요.
너무 주절거렸나요?!
2월도 이틀밖에 남지 않았네요. 어서 꽃피는 봄이 왔으면 좋겠어요.
환절기에 감기 조심하시고 행복하세요.
정찬명 3월 2nd, 2009 at 23:53
정낙훈님께. 만약 저라면 배경이미지로 처리가 가능하다고 판단 되었을 때 일단 배경이미지로 처리하는 방법을 우선 고려하고, 그것이 불가능 할 때 디자인 자체를 바꾸는 방법을 생각해 본 다음, 디자인 자체를 바꾸는 것이 불가능한 상황이라면 그 때는 테이블을 사용하거나 자바스크립트를 사용할 것 같습니다. 즉, 테이블이나 자바스크립트를 사용하는 방법은 어디까지나 최후의 대안으로써 사용을 회피하고자 노력할것 같습니다. 감사합니다.
정찬명 3월 2nd, 2009 at 23:57
김일규님께. 지난주 내내 휴가를 다녀오느라고 글 확인은 했는데 답변은 달지 못했습니다. 블로그가 몇일 사이에 다시 변화 무쌍하게 바뀌셨군요. ^^ 블로그 오픈 축하드립니다. 한가할 때 분당 놀러 오세요. ㅎㅎ.

PS : 페이지 풋터에 오타가 보였어요. ‘겅사중 > 검사중’ ^^
정찬명 3월 3rd, 2009 at 0:16
성양희님께. 저는 대전에서 태어나지는 않았지만 유년시절부터 성년까지 그곳에서 가장 오랜시간을 살았기 때문에 고향이나 마찬가지 입니다. 그래서 저도 대전분들을 만나면 무척 반갑구요. 대전 시민으로써 자랑스럽게 생각해 주신다니 뭐 잘한것도 없지만 무한 영광 입니다. ㅎㅎ.

전혀 없다고는 말할 수 없겠지만 그래도 다른 분야에 비해서 학벌 문턱이 낮은 분야중의 하나가 IT 분야 라고 생각 합니다. 제 주위에도 명문대 아닌 분들이 더 많고 대학을 마치지 않은 분들도 많더라구요.

7년이나 근무하셨으면 저와 비슷한 경력을 가지고 계시네요. 저는 이제 입문한지 9년째 접어드는데 일단 10년은 채워야 겠어요. ‘전문가 10년의 법칙‘이라는게 있더라구요. 저는 아직 전문가가 아니고 전문가가 되는게 제 꿈이거든요.

벌써 3월. 봄이 벌써 와버렸네요. ㅎㅎ.
아름 3월 3rd, 2009 at 19:46
아직은 웹디자이너지만, 종종 들려서 슬금슬금 배워가는 장차 유능한 퍼블리셔를 희망하는 사람입니당 ^.^;
UI개발자를 위한 북마크 페이지가 어쩐지 테러당한 것 같아서 글 남겨요 ㅎ.ㅎ

좋은 하루 되세요 :D
정찬명 3월 3rd, 2009 at 21:18
앗! 로봇들이 가끔 이렇게 와서 심술을 부리고 가네요. 장차 유능한 웹 퍼블리셔 되실 분들이 즐겨보는 페이지를 말이죠. 감사합니다. ^^
정낙훈 3월 9th, 2009 at 20:47
말씀 감사합니다. ^^ 하나 질문이 있는데요, 사이트가 익스나 크롬에서는 조금 안 맞는 부분이 있는데 오페라나 파이어폭스에서는 제대로 보인다면 웹표준에 근접하게 제작하였다고 봐도 될까요??
웹표준 검사에서는 오류가 몇 군데 발생하긴 했는데 나름대로 웹표준에 맞춰서 익스는 고려하지 않고 만들었는데 파이어폭스나 오페라에서만 제대로 보여지고 다른 브라우저에서는 조금 디자인이 제대로 구현되지 않는 부분이 있더라고요.
모든 브라우저에 맞추어 제작한 것이 아니라 오페라나 파폭에서만 잘 보여지는 사이트라면 그런대로 웹표준에 맞추어 제작한 것이라고 봐도 될까요?;;;
정찬명 3월 10th, 2009 at 0:16
사실 제가 웹 표준이라는 말을 입에 달고 사는 사람이긴 하지만 웹 표준이 만능은 아닙니다.

현실 세계에서 웹 표준을 완벽하게 지켰다고 하더라도 브라우저들이 저마다 웹 표준을 조금씩 다르게 해석해서 구현한 부분 때문에 다르게 보이는 부분이 존재할 수 밖에 없습니다.

저희가 목표로 삼아야 하는 것은 웹 표준이 아니라 상호 운용성입니다. 웹 표준은 완벽하지 않기 때문에 브라우저마다 발생하는 차이는 웹 제작자들이 매꾸어야 합니다.

웹 표준이 상호 운용성을 확보하는 가장 손쉬운 방법이긴 하지만 현실 세계에서 브라우저들이 표준에 따라 구현하지 못한 부분을 보완해주는 것으로 완전한 상호 운용성을 확보할 수 있게 됩니다.

물론 웹 표준을 준수했다고 말하려면 문법을 유효하게 처리한 것 이외에도 마크업을 의미있게 작성하는 것도 포함되어야 합니다. 기계적으로 문법 유효성을 획득했다고 해서 끝이라고 생각해서는 안된다고 생각합니다.

결국, 마크업의 문법적 유효성, 마크업의 의미 적적성, 브라우저 호환성, 나아가 웹 접근성까지 모두 만족했을 때 비로소 웹에는 상호 운용성이 충분히 확보되었다고 말할 수 있습니다. 특정 브라우저에서 잘 보인다는 것도 충분히 가치있는 일이지만 거기에 만족하지 않고 다음 스텝을 생각해 주셨으면 합니다.

웹 표준을 충분히 잘 준수 하셨으리라 생각 됩니다. 심지어 문법이 조금 틀려도 괜찮습니다. 하지만 Firefox, Opera 뿐만 아니라 Internet Explorer, Chrome, Safari 에서도 잘 보일 수 있도록 웹 표준의 빈 틈을 매워서 상호 운용성이 충분히 확보된 사이트를 제작해 주신다면 더욱 보람되고 가치있는 일이라고 생각합니다.

감사합니다.
HYLA 3월 15th, 2009 at 4:30
항상 좋은 내용 잘 보고 갑니다.
글 몇개 퍼갔어요 출처는 주소랑 달아놨어요 괜찮죠?
정찬명 3월 16th, 2009 at 20:43
HYLA님, 안녕하세요?
제 글들은 모든 페이지 하단에 명시한 이용방법(저작자 표시, 비영리, 변경금지)에 따라 얼마든지 복제 및 재 배포 하실 수 있습니다. 감사합니다. ^^
김란영 3월 17th, 2009 at 10:34
안녕하세요. ㅋㅋ 의문점이 있어 몇자 글을 남깁니다.

게시판 작업시 라이오 버튼이 공개, 비공개가 있으면 tabindex가 공개까지만가고

비공개는 적용이 안되던데 그 이유가 궁금해서요….. 답변 부탁드립니다.
정찬명 3월 17th, 2009 at 10:57
일단 tabindex 속성을 사용하셨다면 tabindex 속성을 사용하는 것을 권장하지 않습니다.

HTML의 마크업 순서를 논리적으로 유지하면 자연스럽게 tab 순서도 해결이 되는데 그것을 tabindex를 이용해서 바꾸려고 한다는 것은 HTML의 작성 순서가 논리적으로 처리되지 못했다는 반증 입니다.

라디오 버튼 그룹에서 checked=”checked” 속성으로 어떤 항목이 미리 선택되어 있다면 tab키는 라디오 버튼을 모두 탐색하지 않고 checked 된 항목만 탐색하며 라디오 버튼 그룹을 벗어나 다음 콘트롤로 이동합니다.

라디오 버튼 그룹 안에 포함된 라디오 버튼을 탐색하는 방법은 space, ←, →, ↑, ↓ 키를 이용하면 됩니다.
한사랑 3월 19th, 2009 at 10:13
언제나 귀중한 포스팅 감사드립니다. 잘 읽고 있습니다.

혹시 댓글 내용(작성자) 로 검색할 수 있는 기능을 추가하실 예정은 없으신지요?

저같은 경우 포스트 못지 않게 포스트에 등록된 댓글 안에서 봤던 내용들을 검색하고 싶을 때가 많은데… 검색할 수 없는 점이 조금 아쉽더라구요.^^;;
정찬명 3월 19th, 2009 at 11:28
한사랑님 안녕하세요? 좋은 제안 주셔서 감사합니다. 그런 불편이 있는줄 몰랐습니다. 일단 워드프레스 검색창을 제가 개작할 능력이 안되서 구글 검색엔진을 활용하는 방법을 모색해 봤습니다.

아직 CSS를 제 블로그에 맞게 고치지는 못했지만 아쉬운대로 다음 URL에서 검색해 주세요. 이 검색창은 가능한 빨리 현재의 검색창을 대체하거나 병행할 수 있도록 하겠습니다.

http://naradesign.net/search/

감사합니다.
무적 3월 19th, 2009 at 17:08
궁금한게 있어서 여기저기 찾아봐도 답이안나와서 질문 드립니다.
웹 페이지 코딩을 할때요,
푸터영역에 대한건데….컨텐츠가 없더라도 푸터영역은 항상 브라우저의 최하단에
붙어 있게 할 수는 없을까여?

예를들어 게시판에 최대 20개의 리스트가 있다고 할때 20개가 다 채워지면 스크롤이 생기니까 푸터도 자동으로 맨밑으로 가지만 리스트가 채워지지 않을경우 푸터가 채워지지 않은 리스트 공간만큼 위로 올라와 버립니다. …

항상 밑에 붙어있게 하려면 어찌해야 하나요…ㅠㅠ
정찬명 3월 19th, 2009 at 22:01
무적님 안녕하세요?

높이가 항상 100%로 유지되는 레이아웃에 관한 질문으로 이해 했습니다.
마침 신현석님 위키에 잘 정리된 글이 있네요. ^^

http://hyeonseok.com/pmwiki/index.php/Css/Height

html,
body { height:100%; margin:0; padding:0; }

이 부분이 핵심 입니다.

왜냐하면 브라우저들은 내용이 없는 경우 콘텐츠의 높이만큼만 html, body 영역의 높이를 갖기 때문에 이 값을 강제로 브라우저 높이만큼 확장하는 팁 입니다.
현쿠 3월 20th, 2009 at 13:02
저는 항상 만 써오던 습관이있었는데, 오늘 자주다니던 사이트의 소스를 보니 이 한번도 사용되지않고 오직 ~로만 되어있더군요. 놀랐습니다
지금보니 여기도 은 사용하지않았네요!

질문은 과 ~의 사용법에 대한건데, 제 머리론 명확하게 끄집어낼수가 없네요. 기본적으로는 를 사용하는걸 추천하는걸로 알고있는데, 왜 를 추천하는지, 그리고 왜 은 안되는건지(또는 왜 비추하는건지)가 궁금합니다
정찬명 3월 20th, 2009 at 14:24
현쿠님 꺽쇠를 [ ] 으로 변경해서 다시 한번 작성해 주시겠어요? HTML을 지원하기 때문에 직접 입력하시면 경우에 따라 사라질 수 있습니다. 입력하신 코드가 사라져 버렸네요. ^^
현쿠 3월 20th, 2009 at 14:26
아..안내 메세지를 못 봤네요

[br /] 과 [p]~[/p] 입니다
(제가 자주 사용하는게 [br /]입니다)

번거롭게해서 죄송합니다;
정찬명 3월 20th, 2009 at 15:09
br 요소 대신 p 요소를 권장하는 이유를 설명드려 보겠습니다.

첫째, br 요소는 break 라는 의미를 갖고 있으며 콘텐츠에 의미를 부여하는 마크업이 아니라 단순하게 화면에 표시되는 글의 줄 바꿈에 대한 명령 입니다.
둘째, p 요소는 paragraph 라는 의미를 갖고 있으며 담고 있는 콘텐츠가 하나의 문단이라는 것을 의미하고 있습니다.

전자는 콘텐츠의 의미를 마크업 하지 않는 반면 후자는 콘텐츠의 의미를 마크업 하고 있다는 측면에서 다릅니다.

또한 br은 화면 폭이 변경되는 상황에 따라서 융통성 있게 콘텐츠를 보여주지 못하는 단점이 있습니다. 현재 너비에 딱 맞게 br 요소로 줄바꿈 된 문장이 웹 사이트 개편 등을 통하여 폭이 좁아지거나 넓어지는 경우 바뀐 화면에서 볼 때 어색할 수 있겠지만 p 요소로 마크업 했다면 그러지 않아도 되겠지요.

또 오페라 미니와 같은 모바일 브라우저는 웹 페이지를 처음 열었을 때 본문을 바로 찾아가서 보여주는 기능이 있는데 이 때 사용되는 것도 p 입니다. p 요소가 처음 사용된 곳을 본문의 시작 지점으로 인식해서 빠른 탐색을 도와주는 사례죠.

한 가지 더 말씀드리면 시각장애인이 사용하는 화면낭독기는 문단을 기준으로 글을 끊어 읽어주는 기능이 포함되어 있는데 br 요소를 사용하게 되면 br 에서 끊어 읽기 때문에 더 많은 키보드(여러가지 단축키가 있지만 보통 방향키)를 사용해서 문장을 탐색해야 하고 하나의 문장을 여러번 끊어 읽기 때문에 불편이 가중 됩니다.

웹의 의미론적 마크업, 웹 사이트 유지보수 효율, 기계의 접근성, 웹 접근성 측면에서 p 를 사용하는 것이 좋다는 의견 입니다.
현쿠 3월 20th, 2009 at 15:18
감사합니다. 가끔 떠오르면 대체 왜 그래야하는지 몰랐는데 확실히 이해되었습니다:D
현쿠 3월 24th, 2009 at 2:54
또다시 질문입니다^^; 잘려고하다가 문득 생각나서요.
이번건 이해가되는건데, 정찬명님의 의견이 궁금해서 올립니다

글씨크기나 레이아웃 디자인에 사용하는 단위에 대해서인데, 저는 레이아웃은 px로 잡고 폰트는 em으로 잡아둡니다 (레이아웃도 em으로 잡으려니 힘들더군요. 포기해서 편해졌습니다;)

저는 em으로 사용했다는것과, 컨트롤 + 휠로 크기를 조절할 수 있다는것을 알고 있지만, 모르는 사람은(정말 많더군요) 글씨가 너무 작거나 크다고 댓글을 남기더군요. 다시 한번 말하지만 정말 많았습니다;;;

이곳은 body에 1em을 잡고, 전체적으로 0.8em으로 잡은것 같네요. 흠흠…

친한것까진 아니지만 그냥 메일을 주고받는정도로 친분이 있는-_-; 외국의 웹디자이너분께서는
「em은 사용하기가 불편하고, 브라우저들이 점점 px의 상대적인 확/축소를 지원하므로 px추천. 상대적 단위 em을 쓸거라면 small, x-small같이 상대고정크기(??)를 사용하는걸 권장한다」 라던데(번역이 좀..) 저 둘은 브라우저마다 크기가 다르지요..;

그리고 CSS에서 공통설정으로 p { font-size:0.75em; } 으로 잡고 들어가면 해더(Hn)같은것까지 변할 수 있으니, 필요한 부분마다 ID나 CLASS를 넣어서 설정하다보니 쓸데없이 코드만 길어지고… 제 블로그는 그냥 일기를 끄적이는정도의 블로그인지라 저런걸 신경써야할 이유가 있나 싶습니다만, 관심있는 부분이고 이런것부터 조금씩 해나가면 좋은거니^^;;

횡설수설하는군요;;
요약하자면 px와 em의 선택입니다. 점점 px도 em처럼 확/축소가 가능한 브라우저가 많아지기 때문에 em을 사용할 필요가 있냐는것이지요. em도 완벽한건 아니니, 상대고정크기인 small, x-small같은걸 사용해야하는게 더 좋은건지 의견을 듣고싶습니다.
정찬명 3월 24th, 2009 at 16:59
얼마전까지만 해도 em 사용이 접근성에 도움이 되기 때문에 사용을 권장해 왔고 지금도 em의 혜택을 볼 수 있는 IE6(px은 줌인이 안되는) 사용자가 국내에 59%나 되기 때문에 이론적으로 권장하는 것은 사실입니다.

그러나 현실적으로 em을 사용함으로 인해서 제작자 입장에서는 오히려 글자의 크기를 제어하기가 어렵고 사용자 입장에서는 환경설정에 따라 크기가 다르게 보이는 등의 문제가 늘 지적되어 왔습니다. 또한 시력이 약한 사람 가운데 줌 브라우징 기능을 제대로 적절하게 사용할 줄 아는 사람도 극 소수인 것으로 추정하고 있으며 자체적으로 화면 확대 프로그램 등을 이용하는 것으로 알고 있습니다.

따라서 표준이 권하고 접근성이 좋기 때문에 em 서체를 사용해야 한다는 주장은 이미 말씀하신 대로 최근 브라우저들의 성능이 향상(px도 줌인이 되는)되고 현실적으로 발생하는 문제들로 하여금 설득력을 잃고 있다고 판단 됩니다.

국내의 웹 접근성 품질마크 인증제도(2008년 기준)에서도 em 서체를 사용하지 않았다고 해서 접근성이 떨어진다고 판단하지 않았고 단지 12px 보다 더 작은 서체의 크기를 문제 삼았습니다.

px을 사용하더라도 최신 브라우저들이 줌인 기능을 제대로 지원하므로 앞으로 굳이 em을 사용할 필요성은 점점 줄어들고 있다고 판단 됩니다.

감사합니다.
HYLA 4월 2nd, 2009 at 13:22
급하게 질문있는데요 드림위버 cs3 에서 ftp 설정시때 기본 포트가 되는데 포트 설정바꾸는건 어디서 바꾸죠?
정찬명 4월 2nd, 2009 at 14:00
Site > Site Management > Edit > Remote Info > Firewall Settings… > Firewall Port 에 있을껍니다. 제가 지금은 선물받은 한글판을 쓰고 있어서 영문으로 번역해서 알려드리는데요. 번역된 것이 정확히 맞는지 모르겠습니다. ^^
김란영 4월 8th, 2009 at 14:53
안녕하세요 늘 궁금한 사항이 있을때마다 찾게 되네요.. 항상 좋은 답변에 너무 감사해 하고 있습니다. ㅋㅋ

셀렉트박스를 키보드로만 움직이려면 어떻게 해야하나요??

시각 장애인을 경우 마우스대신 키보드를 사용하는데요…

텝키를 클릭하면 셀렉트박스까지는 가는데 안에있는 메뉴를 펼쳐서 클릭하려면..

어떻게 해야하는지 전혀 모르겠습니다. ㅜ.ㅜ
정찬명 4월 8th, 2009 at 15:16
란영님 안녕하세요?

select 콘트롤의 option들은 키보드로 선택할 수는 있지만 드롭다운 메뉴를 펼칠 수는 없습니다. 키보드로 option을 선택하는 방법은 포커스가 select에 머물러 있을 때 방향키를 사용하는 것입니다. ^^; 지금 한번 해보세요.
초식동물 4월 10th, 2009 at 22:33
방명록에 글 남겨봅니다^^
처음 웹표준이란 게 뭔가 알아보고 검색하면서 몇 번 들렀었는데,
글도 글이지만 리플로 이어지던 토론의 향연;;이 인상깊고 도움이 됐었어요~
이런저런 시각으로 바라볼 수 있어서..

근데 CSS Naked Day는 우리시각으로 언제 끝나는 걸까요?-0-
그제였나 다른 블로그 보던 중 갑자기 css가 사라져서 깜짝 놀랐었는데..
그래도 이틀 정도 css 뺀 블로그들 좀 봤다고 하얀바탕 까만글씨에 나름 익숙해져가네요=ㅂ=;;
정찬명 4월 11th, 2009 at 0:05
제 블로그도 도움이 되셨다니 기쁘네요. ^^; CSS Naked Day는 원래 4월 9일 인데 지구상에서 4월 9일은 48시간동안 존재 하잖아요? 그래서 혹시나 아직 4월 9일인 국가에서도 볼 수 있도록 아직까지 벗겨둔 상태 입니다. 지구상에서 4월 9일이 정확히 언제 끝나는지는 저도 잘 모르겠지만 최소한 우리나라 시각으로 4월 11일 00시 이전에는 끝나겠지요. 제가 계산에는 약해서 대강 이렇게 살아요. ㅎㅎㅎ.
가므 4월 11th, 2009 at 23:47
가장 윗글이 2006년이라 잠시 놀랐습니다(…)

안녕하세요^^ 한RSS 메인 통해서 처음 왔던 것 같은데- 아, IE8 포스트 때문이었나, 멀티IE 포스트 때문이었나- 유익한 내용이 많아서 구독해두고 엊그제 왔더니 CSS Naked Day더군요! 그런 행사가 있었는지는 몰랐는데…

그렇게 걷어내고 보니 ‘웹표준’이라는 게 확실히 감이 잡히는 것 같더군요ㅎㅎ 저도 웹 관련 개발(UI보다는 뒷단 BI로직)에 종사하고 있어서 HTML이나 CSS 등은 예전부터 써왔지만, 개발언어가 닷넷에 MS 솔루션만 취급하는데다 인트라넷 위주로 프로젝트를 하다보니 IE에 최적화된 사이트만 개발했었는데요. 작년에 투입된 프로젝트에 같이 계신 디자이너분이 이 ‘웹표준’ 혹은 ‘웹2.0′ 방식의 HTML/CSS 코딩을 주시는 겁니다(…) 그분의 코딩이 웹표준에 가까운지는 모르겠지만, 일단 CSS로 레이아웃을 구성하시더군요. 그런데 사실 이게 MS 솔루션으로 개발할 때는 맞추기가 힘들어서-_-;;; 디자이너 롤이 확실히 구분되어 있지 않으면, BI 개발자가 사소하게 UI 코드를 수정하는 일도 비일비재한데, 다들 생소한 코드로 주니ㅋㅋ 아마 자바 계열 프로젝트를 계속 하시던 디자이너분이라서 그런 것 같은데, 정말이지 트리 디자인을 요청했다가 리스트 태그로 된 코드가 왔을 때는 좀 힉겁했습니다. …닷넷 웹컨트롤에서는 테이블로 렌더링되거든요(…) 결국 그냥 이미지와 CSS class만 어떻게 갖다가 썼다는;;;

그러곤 최근에 개인홈 소스를 손보다가 그 생각이 나서 DIV로 레이아웃을 구성해봤는데, 이게 나름 재미있더군요ㅎㅎ 하는 김에 PC에 브라우저를 종류별로 다 깔아서 개인홈을 돌려보았더니~ 결과는 상상하실 수 있으실 듯(…) 그래서 왠지 느닷없이 웹표준에 크로스브라우징에 돌입을 해보았달까요- 그치만 대충 긴가민가 하는 상태로- W3C DTD 통과까지만 하고 브라우저별로 다 잘 나오는 것만 확인하고 말았었는데요.

그런데 CSS Naked Day를 맞아 정찬명님 블로그의 ‘몸’(!)을 보았더니~ 이게 확-하고 이해가 되네요. 사소하거나 당연한 것 같은데, 왠지 신세계를 본 듯한 기분입니다! 데이터와 UI(디자인)을 분리하는 마크업은 예전부터 외쳐대고 있었고, 별별 방법론이나 새로운 개발언어나 기술이 나오고 있긴 한데- 아니, 이런 기본 중의 기본을 따르면 쉽게 갈 길을(…)

그래서 어제 밤부터는 제 홈에도 CSS를 벗겨놓고 새로 레이아웃을 잡는 중이랍니다ㅎㅎ CSS가 꽤 막강(?)하다는 건 알고 있었지만, 이렇게 접근해서 활용하니 정말 멋지다는 말이 절로 나오네요. 지금 찬명님 블로그를 Naked 버전으로 하나를 계속 띄워두고 CSS 돌아온 버전과 비교하면서 보고 있습니다ㅎㅎ CSS 카테고리의 여러 글들도 꽤 도움이 되는 멋진 글들이 많네요. 실제로 프로젝트에도 적용하면 좋을 것 같지만, 아직은 무리가 따르네요ㅎㅎ 포탈이나 일반 웹사이트 성격의 프로젝트가 아니니… MS 솔루션이나 개발 언어에도 차기 버전에는 이런 웹표준과 시멘틱 마크업이 좀 적용되었으면 하는 바램이 문득 드네요.

글이 좀 길어졌습니다만; 어쨌거나, 좋은 가르침 감사드립니다! 디자인쪽으로 먹고사는 건 아니지만, 개인홈 가지고라도 열심히 공부해봐야겠네요^^ 사실 개인홈을 폰이나 PDA에서도 보려고 모바일 전용 페이지를 만들까 생각하고 있었는데, 이렇게 되면 그냥 폰이나 PDA 접속인 것만 확인해서 CSS만 걷어버려도(혹은 대체하거나) 충분히 쓸만할 것 같다는 생각이…ㅎㅎ 앞으로도 좋은 글 부탁드립니다~ 종종 들리겠습니다^^
정찬명 4월 12th, 2009 at 2:55
가므님 안녕하세요? 제 몸을 보셨다니 살짝 부끄럽기도 하고.. ㅡㅡ; 이렇게 뒷단 개발하시는 분께서 앞단을 이해해 주시고 감을 잡는데 도움이 되었다니 무척 기쁩니다. 웹 표준이나 상호 운용성이나 이런 개념들이 저희같은 앞단 개발자들의 의지만으로는 참 어려워서 항상 서버 사이드 개발자 뿐만 아니라 모든 영역에서 관심 가져야 할 주제라고 말은 하고 다니는데 정작 앞단을 제대로 이해하고 그 중요성을 알아주시는 분들은 흔하지 않았던것 같습니다.

가므님같은 분들이 많아졌으면 좋겠습니다. 저도 감사합니다. ^^
한성훈 4월 14th, 2009 at 17:17
안녕하세요.

082net에서 워드프레스2.7에 맞춰서
Per Post Comment Settings 플러그인을 만들었네요.

http://082net.com/2009/922/per-post-comment-settings-plugin/
정찬명 4월 14th, 2009 at 19:19
한성훈님 완전 감사합니다! 제가 찾던 그런거겠죠? ㅎㅎㅎ. 시간 날 때 다시 들러서 찬찬히 봐야겠습니다.
HYLA 4월 16th, 2009 at 13:01
전에는 급하게 질문만 던지고 가서 죄송
정찬명님 블로그 프로필부터 방명록 글까지 하나하나 다 읽어볼정도로 매일매일 들려요
시작은 찬명님이랑 비슷하지만 5년간을 웹쪽에 일을 안하다가 09년 부터 다시 시작했어요
웹디자인 기획일을했었고 웹초창이때인만큼 여러 업무를 해왔었는데(3년이상)
다시 복귀하니 웹표준이란놈이 생겼네요
코딩에 관심이 많았었고 지금은 웹디로 복직했지만(이제 3개월) 퍼블리셔 전향을 목표로 하고 있답니다.
항상 많은 공부 하고 갑니다.
찬명님 블로그와 하코사 각종 블로그등으로 독학중인데
요즘은 제 코딩이 정확한 웹표준인가하는 의문이 들기도 하네요
언제한번 코딩한 사이트 공개할테니 시간내서 코딩 검사 한번 받아봐야겠네요.
- 안속아주셔도 될만큼 진짜 매일 방문하는 1人 ㅋ
HYLA 4월 16th, 2009 at 13:02
방명록 스크롤 압박은 언제쯤 없애실껀지? ㅋㅋ
정찬명 4월 17th, 2009 at 9:57
@HYLA
다시 웹으로 복귀하신것을 환영합니다. 제 블로그가 도움이 많이 되었으면 좋겠구요. 매일 방문하신다는게 거짓말이라고 하셔도 기분이 나쁘지는 않네요. ㅋㅋ. 방명록 스크롤은 모바일로 접근하는 저도 많이 불편한데 아직 짬이 안나서 손을 못 보고 있습니다. 언제라고 약속은 못드리고 되도록 빨리 손을 보겠습니다. 좋은 하루 되세요. ^^
깽아 4월 17th, 2009 at 11:25
안녕하세요..웹표준 관련해서 찾다가 링크타고 한참을 왔네요..^^;;
웹디자인 한지는 좀 됬는데 지방쪽에서 하다 보니.웹표준관련해서 적용해서
작업한적이 한번도 없었어요…
그런데 이번에 리뉴얼 사이트가 웹표준을 지켜서 제작하게 되어서..
이래저래 책도 사고 정보도 얻고 하고 있는 중인데..
실제로 필요한 기능이나 궁금사항은 책에는 잘 없네요.
사이트에서 찾아보는것도 한참을 찾아야 하고…-ㅅ-;;;

올리신글들중 필요한 부분은 대충 다 훓어보고 있는 중이구요..
나머지 부분은 천천히 더 자세히 봐야할꺼 같아요..

아, 그리고 궁금한게 있는데요..
메인에 플래시 작업을 했는데요..파이어 폭스에서 플래시가 제대로 나오지 않는데..
이 부분을 어떻게 해결해야할지 잘모르겠네요.
이래저래 찾아보지만 명확한 답이 안보여서요..
embed태그를 쓰면 정상적으로 잘 보이지만 ..웹표준 체크하면 에러로 걸리구요..
빼면 파이어폭스에선 안보이니…
익스플로어 6,7,8 호환은 설정했는데 이부분은 어떻게 해야할지 모르겠어요..
그리고 보통 투명배경 설정이 wmode인데..이 부분은 배경으로 왠만해선 플래시에다가 넣으라고 되어있던데 혹시 배경안넣고도 설정할수 있는 방법이 있나요??

처음와서 이런질문하면 실례인거는 알지만..
마땅히 물어볼곳이 없어서요.. 시간나시면 답변좀 부탁드릴께요..수고하세요..^^
정찬명 4월 17th, 2009 at 19:04
@깽아

object 요소를 웹 표준에 맞게 마크업 하는 방법은 신현석님의 블로그에 잘 소개되어 있습니다.
http://hyeonseok.com/pmwiki/index.php/Markup/Object
Hixie method 라고 소개한 부분을 꼼꼼하게 살펴봐주세요.

그리고 플래시 배경을 투명하게 만들기 위하여 wmode를 window가 아닌 transparent으로 설정하시면 접근성이 0점이 됩니다. 접근성 있는 플래시 제작을 원하신다면 투명 배경은 포기 하셔야 합니다. 그 외 플래시와 접근성에 대하여 제가 쓴 포스팅이 참고가 되시면 좋겠습니다.

Flash Navigation & Accessibility.
http://naradesign.net/wp/2008/12/27/426/
koney 4월 22nd, 2009 at 12:18
http://naradesign.net/open_content/reference/navigation.html

안녕하세요~ 1년차 퍼블리셔입니다 ㅎㅎ ^^;
이곳에서 새로운정보를 얻고있는 사람중 한명입니다 ㅎㅎ

웹접근성에 관심을 갖고 이번에 접근성좋은 스크립트 메뉴를 찾다가.. 우연히 이 네비게이션을 알게 됐는데요..(네비를 플래쉬로 안한다고해서 ㅠㅠ)
궁금한것이 있어서요 ㅎㅎ;

첫글이 질문글이라 너무 죄송 ㅠㅠ

[body onload="menuD1on('D1M1_'); menuD2block('D2MG1');]

이런식으로 네비가 활성화되게끔되어있는데..
body에 onload를 쓰지않고 활성화시키는 방법을 알고싶어서요
언어는 jsp구요..
제가 jsp나 asp를 알면 된다안된다 답을 내릴수 있겠는데.. 모릅니다 ㅠㅠ엉엉

각 페이지마다 뎁스정보를 넣어야하는데.. body에 onload를 피하고 싶습니다 ㅠㅠ
어떻게 하면 될까요??
정찬명 4월 22nd, 2009 at 15:43
@koney
제가 작성한 코드지만 아주 오래전에 작성한 코드를 보니 이건 뭐 워낙 지저분 해서 도저히 그냥 봐줄 수 없을 지경이로군요. 자바스크립트 같은 것은 제가 작성한 코드를 참조하지 않으시는게 일단 좋구요. 지금은 body에 onload를 제거하고 각각의 메뉴에 .active 라는 클래스를 붙이는 방식으로 변경했습니다. 여기에 자바스크립트를 버무리면 될것 같은데요. 더 좋은 방법이 있을지도 모릅니다. ^^
김일규 4월 22nd, 2009 at 20:17
@koney

http://www.hiweb.kr/sample/ex01/

누군가 요청해서 급조하게 제공한 적이 있네요. 익스플로러6에서 깨지는데.. 아직 수정을 못했습니다. 혹시나 필요하시면 응용하세요.
JMoon 4월 24th, 2009 at 0:04
우와.. 보물창고를 발견한 느낌 입니다.
자주 들러서 많이 배우고 가렵니다. (아니 먹고 살려면 아주 살아야 될듯…)
막장별별 4월 24th, 2009 at 2:11
여전히 활발한 활동 중이시구만.
이몸은 자꾸만 무념무상으로만 가는구나.

‘살아야 한다면~’ 이 어구에 무엇을 붙여 완성해야 할까?
정찬명 4월 24th, 2009 at 5:29
@JMoon
최근 들어본 칭찬 가운데 가장 듣기 좋군요. ㅋㅋㅋ. 감사합니다. JMoon님 때문에 블로그 더 열심히 써야겠어요. ㅎㅎ.
정찬명 4월 24th, 2009 at 5:37
@막장별별
무념무상이라~ 해탈의 경지에 점점 가까워지는건가? ㅎㅎㅎ.
‘살아야 한다면~’ 이라는 표현을 보니 산다는게 무슨 의무인 것처럼 말하는구나.
살아야 할 의무는 없지만 언젠가는 죽을몸, 살아 있는 동안 즐겁게 살 권리는 있지 않은가?
작은 성취감을 느낄 수 있는 그런 일들이 네 주위에 많아졌으면 좋겠다.
분당 한번 오지 그래?
막장별별 4월 24th, 2009 at 21:09
‘밤새 죽지 않아 출근하지 않았는가’란 의문을 가질 때가 있지.
배터리가 다 되었나보오~. ㅋ
정찬명 4월 25th, 2009 at 4:24
막장이라는 말을 함부로 쓰지 말라고 하던데… ㅎㅎㅎ. 적당히 쉬어가며 하길 바람.
고경희 4월 27th, 2009 at 0:49
가끔씩 와서 보고 갑니다.
서로 관심사가 비슷해서 제가 아직도 서울에 살고 있었다면
어딘가에서 몇 번쯤은 마주쳤을 듯 하네요.^^
잘 지내고 계시지요?
멋지게 살고 계신 듯 해서 보기 좋습니다.
항상 홧팅 하십시오.
또 들르지요~
정찬명 4월 27th, 2009 at 10:19
앗~ 누님. 잘 지내고 계시죠? 저는 누님이 제주에만 살고 계신 것으로 알고 있었는데 서울에 계셨었나요? 다음에 DW 테스터 일로 혹시 서울 오시면 살짝 귀뜸 주세요. ^^ 지금 이런 블로그를 운영하는것도 다 누님께서 동기부여를 해주신 덕이라 항상 누님께 감사한 마음 입니다. 누님도 항상 건강하시구요. 잠수는 이제 그만~ ㅎㅎㅎ.
신승엽 5월 6th, 2009 at 8:20
정찬명님. 반갑습니다! CSS 관련해서 질문이 있습니다.

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
[html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml"]
[head]
[meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /]
[title]test[/title]
[style type="text/css"]
#container{ background: red; width: 400px; height: 400px; }
#content { background: green; width: 200px; height: 200px; margin-top: 50px; }
[/style]
[/head]
[body]
[div id="container"]
[div id="content"][/div]
[/div]
[/body]
[/html]

페이지 제작하며 이 문제로 항상 머리가 아픕니다..
이렇게 하면 제가 원한 것은 둘러싸고 있는 container안에서 content가 위로 50px의 여백을 가지고 표현되길 원하는데..
이게.. container까지 위에 여백이 50px이 들어간 형태로 표현이 되더란 겁니다. -_-;
근데 재밌는건, container에 border를 주면 제가 원하는 형태로 표현됩니다.. 왜 그런가요?
체어맨 5월 6th, 2009 at 10:19
1.collapsing margin 마진통합

인접한 블록레벨 엘리먼트의 margin-bottom과 margin-top 간의 일어나는 현상.
큰 값 쪽으로 접혀들어간다.

값이 동일한 경우 : bottom쪽의 값에 접혀들어가서 통합된다.

p 엘리먼트 간의 간격을 유지하는 원리를 생각하면 좀 더 쉽게 이해할 수 있다.

부모 자식관계의 엘리먼트의 경우에도 collapsing margin이 발생한다.
마진통합현상에서 벗어나려면: border, padding 값을 적용하거나, 부모엘리먼트에 컨텐츠를 넣으면 된다.

자식이 인라인엘리먼트인 경우 : collapsing margin 은 일어나지 않는다. 이유: css boxmodel의 padding-top, padding-bottom, margin-top, margin-bottom 값이 구현되지 않기 때문에

margin-bottom과 margin-top 사이에서 일어나는 현상.

더 큰 마진값쪽으로 접혀들어가서 결국 큰쪽의 마진값이 적용된다.

같은 값을 가지고 collapsing되면 위의 마크업된 엘리먼트의 margin-bottom쪽으로 접혀들어간다.

컨텐츠가 들어있지 않은 엘리먼트의 margin-top과 margin-bottom 은 margin-top쪽으로 ollapsing된다.

블록레벨 엘리먼트의 부모자식 관계에서도 더 큰 마진값쪽으로 접혀 들어간다.
(부모자식의 margin-top 끼리의 collapsing)

마진통합현상에서 벗어나려면:부모엘리먼트에 border, padding 값을 적용하거나, 컨텐츠를 넣으면 된다.
[출처] XHTML+CSS 시작하기 6 (collapsing margin (마진통합) 현상)|작성자 롱다리꺽

해결방안

1. 부모에 1px border
2. ” 에 1px padding
정찬명 5월 6th, 2009 at 10:45
@신승엽
체어맨님께서 한번 잘 설명해 주셨네요. 감사합니다. (__) 일단 “수직마진은 통합된다”는 사실을 기억해 주시기 바랍니다. 단, 아무때나 통합되는 것이 아니라 형제끼리의 수직 마진은 무조건 통합되고 부모 자식간의 수직마진은 부모에게 보더나 패딩이 없을 때 통합 됩니다. 한방에 이해하기 쉽지는 않죠. ㅡㅡ;

일단 형제간 수직마진 통합은 형과 동생의 인접한 두 개의 수직 마진 가운데 절대값이 큰 값만 적용된다는 사실 입니다. 형의 아래쪽 마진이 100px 이고 동생의 위쪽 마진이 50px 이라면 이때 형과 동생이 인접해 있다고 표현하며 수직 마진은 양쪽의 합인 150px 이 발생할 것으로 예상되나 실제로는 형의 마진 100px만 작용한다는 점 입니다. 동생의 50px 마진은 형의 마진보다 작기 때문에 필요가 없어져서 버려진 값이 됩니다. 이런 현상을 수직 마진이 통합 되었다고 말합니다.

한편 부모자식간 수직마진 통합은 조금 더 이해하기 어렵습니다. 결론부터 말씀드리면 부모가 보더와 패딩이 없으면 자식의 수직 마진은 사라진 것처럼 보이고 그 마진은 마치 부모의 수직 마진처럼 보인다는 점 입니다. 이 때 자식의 수직 마진은 부모에게 빼앗긴 것처럼 보입니다. 왜냐하면 부모와 자식간에 수직 마진이 발생하여 간격이 발생할 것으로 예상했지만 자식의 수직 마진은 0px처럼 보이고 부모가 자식의 수직 마진을 가져다 쓰는것처럼 보이기 때문입니다. 이런 현상을 부모자식간 수직마진의 통합이라고 합니다. 부모가 자식을 품안에서 벗어나지 못하도록 울타리(보더)를 치고 안전장치(패딩)를 해놓게 되면 자식의 수직 마진은 더 이상 부모와 통합되지 않고 독립적으로 발생하게 됩니다. 이러면서 부모와 자식 사이에 거리(마진)가 발생하게 되죠. ㅎㅎ.

이 두 가지 사례를 통틀어 “수직마진은 통합된다” 라고 표현한 것이고 신승엽님께서는 현재 부모자식간의 수직마진 통합을 경험하고 계신 겁니다. 해결 방법은 체어맨님께서 제시해 주신 방법도 하나의 방법이 될 수 있고 만약 저라면 자식의 수직 마진을 사용하는 대신에 부모의 패딩만 사용할 것입니다.

보통 형제간의 수직마진 통합은 매우 유용하지만 부모자식 사이의 수직마진 통합은 보더 또는 패딩의 유무에 따라서 발생하기도 하고 사라지기도 하기 때문에 나중에 이 코드의 원리를 알지 못하는 후임이 유지보수 할 때 난감해하거나 실수하기 쉽습니다. 따라서 부모 자식 사이에서는 최대한 마진 통합 현상이 발생하지 않도록 피해가는 것이 좋은 코드 작성 방법이라고 생각 합니다.
정찬명 5월 6th, 2009 at 10:59
형제간 수직마진 통합에 대한 보충설명.

형제간 수직마진 통합이 될 때 양수끼리 또는 음수끼리 만나면 무조건 절대값이 큰 값이 마진으로 작용하나 양수와 음수가 만나게 되면 그 두 값의 합이 마진으로 작용합니다.

구체적으로 설명하면 아래와 같은 현상이 발생합니다.

형의 아래 마진(100px) & 동생의 위 마진(50px) = 발생하는 마진이 100px 이 됨.
형의 아래 마진(-100px) & 동생의 위 마진(-50px) = 발생하는 마진이 -100px 이 됨.
형의 아래 마진(100px) & 동생의 위 마진(-50px) = 발생하는 마진이 50px 이 됨.
신승엽 5월 6th, 2009 at 13:37
체어맨님, 정찬명님. 감사합니다. 명쾌한 설명으로 수직마진 통합을 배웠네요.

오늘 또 하나의 가르침을 얻어갑니다. 다시 감사드립니다.
김연주 5월 7th, 2009 at 14:14
첫발 내딛을려는 신입인데 ㅎㅎㅎ
좋은자료가 많네요 정말 감사해요,
정찬명 5월 7th, 2009 at 19:46
도움이 많이 되셨으면 좋겠네요. 그리고 연주님도 나중에 후배님들에게 아낌없이 나누어 주는 선배가 되시길 빕니다. ^^
얼리 5월 11th, 2009 at 8:34
찬명님~ 항상 잘 보고 갑니다~
이쪽 일 하면서 궁금했던것들 많이 배워갑니다~ㅎㅎ
EveR™ 5월 11th, 2009 at 16:09
내일 춘천 102보충대로 군입대 합니다. ^^
진정한 남자가 되여 돌아오도록 하겠습니다.
정찬명 5월 11th, 2009 at 17:12
@얼리
얼리님 블로그 강추인데요. ^^; 저도 얼리님 블로그 들러서 종종 배워가겠습니다. 감사합니다!
정찬명 5월 11th, 2009 at 17:15
@EveR™
와~ 저도 102 보충대를 거쳐 갔습니다. EveR님 소망대로 부디 멋진 경험 하시고 돌아오셨으면 좋겠습니다. ^^; 부디 몸도 마음도 건강히 잘 다녀오세요! 감사합니다!
얼리 5월 11th, 2009 at 17:33
과찬이십니다; 이전한지 얼마 되지않아 포스팅도 많이 안되어있는걸요 ㅎㅎ
이미 반열에 올라가계신 찬명님께서 저의 블로그에서 배우실게 있을까요? ㅎㅎ
정찬명 5월 11th, 2009 at 18:01
포스팅의 갯수나 경력과 관계없이 항상 다른 분들로 부터 배우고 있습니다. 그런 분들의 도움 없으면 저도 없는거죠. 얼리님이야 말로 제게 과찬을. ㅎㅎ.
gov 5월 30th, 2009 at 9:24
웹접근성이 장애인들을 위한 정책인지 묻고 싶습니다.;
황준상 5월 30th, 2009 at 13:11
꼭 장애인만을 위한 웹접근성은 아닌것 같습니다.
어떤 상황에서나 접근이 가능하게 하는게 목적일텐데…
그중에 하나가아닐까요?
장차법때문에 좀 강조되는게 아닌지…
한번 생각해봅니다..
정찬명 5월 31st, 2009 at 5:54
웹 접근성이 누구를 위한 것인지에 대하여 다양한 의견이 있을 수 있고 어느것이 맞다 틀리다를 논할 필요는 없다고 생각 합니다.

저같은 경우 상황에 따라서 장애인을 위한 웹 접근성을 말하기도 하고 때로는 모두를 위한 웹 접근성을 말하기도 합니다. 개인적인 의견은 웹 접근성은 ‘모두를 위한’ 것이다 라는 후자에 가깝고 늘 그런 생각을 하고 있습니다.

때문에 누군가 장애인만을 위한 어떤 방법을 제안했고 그것이 비장애인의 욕구와 상충할때 그런 의견에는 일단 반대의견을 제시하고 장애인과 비장애인이 모두 편하게 사용할 수 있는 방법을 찾아보자는 쪽으로 결론을 유도하고 있습니다.
ㅠㅠ 6월 2nd, 2009 at 13:16
Untitled Document

html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#head {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
}
#body {
min-height: 100%;
margin: -100px 0 -50px;
}
* html #body {
height: 100%;
}
#content-area {
padding: 100px 0 50px;
}
#foot {
height: 50px;
background: #ddd;
}

요건 100px 높이 헤드

컨텐츠 영역 1
컨텐츠 영역 2
컨텐츠 영역 3
(계속 추가해서 테스트 가능)

요건 50px 높이 풋

신현석님의 블로그에서 저 소스를 썼는데여..
헤드부분에 높이값이 지금은 100픽셀로 잡혀있지만 100이하로 해서 테스트 하면
푸터가 위로 올라와 버립니다.
항상 브라우저 아래 붙어있는건 안되는건가여…ㅠㅠ
정찬명 6월 3rd, 2009 at 23:22
@ㅠㅠ
#head의 높이값 만큼 #body의 위쪽 마진을 바꿔주시면 됩니다. 예를 들어 #head 의 높이를 70px 으로 변경했다면 #body의 마진은 { margin:-70px 0 -50px;} 이 되어야 합니다. #head 의 높이만큼 #body 의 위아래쪽 마진을 빼야 #body의 실제 높이가 100%가 되는 방식이니까요. ^^; 풋터도 마찬가지 방식으로 하시면 됩니다.
민정화 6월 4th, 2009 at 23:17
안녕하세요
오랜만에 글남겨요~ 저 기억하실지 모르겠네용^^ ㅋㅋ
잘지내시죵

또 놀러올께요~
수고하세요
정찬명 6월 4th, 2009 at 23:19
@민정화
늦은 시간에 행차 하셨군요 ^^; 기억하다 마다요. 잘 지내고 계시죠? 좋은밤 되시구요. 또 놀러오신다고 분명히 ‘다짐’ 하셨습니다. ㅎㅎ.
마약 6월 10th, 2009 at 14:17
안녕하세요…
IE에서 발생하는 인풋과 인풋사이의 문제 해결방안을 찾으러 돌아다니다가,
도저히 갈데가 없어서 여기로 왔습니다..죄송;;; ㅠㅠ;
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
[html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"]
아래는 body
[input type="text" style="width:1000px;"]
[input type="text" style="width:1000px;"]
[input type="text" style="width:1000px;"]

소스내에 엔터공백, 탭 공백 없을시에 좌우공백은 IE에서도 사라집니다.
하지만 인풋과 인풋 사이의 위아래 공백은 사라지지 않네요…

정녕 핵으로 조질(?)수 밖에 없는 것일까요…ㅠㅠ;
이 문제에 대해서 다룬 곳이 없더라구요………….고수님들의 조언을 구합니다…
황준상 6월 10th, 2009 at 14:45
[p]로 싸셔서 [p],[input]이랑 같은 height 주는 방법??
정찬명 6월 10th, 2009 at 19:41
@마약
이런건 { *margin:-1px 0 } 으로 간단하게 해결되지 않을까요? IE 6~7은 input 상하에 1px씩 여백이 더 있더라구요. 이걸 없애주는거죠.
마약 6월 11th, 2009 at 13:21
@찬명님
역시 아직은 방법이 핵밖에 없는거군요..;
개인적으로 노핵, 노치트, 노디스 하고 싶은데…ㅠㅠ;; 답변 감사드립니다…
핵을 쓰면 뭔가 찜찜한게, 똥싸고 덜닦은 느낌이 남는 것 같아서요;;;-ㅅ -;;;
정찬명 6월 11th, 2009 at 13:40
@마약
정 찜찜하시면 IE 조건부 주석으로 처리하시면 되는데 그 역시 찜찜함과 불편함은 마찬가지 겠지요. 저는 적당히 비겁하게 사는게 익숙하고 편해져서 지금은 괜찮더라구요. ㅎㅎㅎ.
홍창수 6월 17th, 2009 at 21:03
안녕하십니까?
css font-family 지정할때 보면 body { font-family: 굴림, 고딕; } 이렇게 지정하였을 경우 굴림이 없을 경우 고딕으로 폰트가 대체 되지 않습니까?
그런데 위에서 지정된 폰트가 굴림과 고딕과 같은 폰트가 아니라 영문만있고 한글만 있는 폰트일 경우때문에 궁금한게 있습니다.

첫번째 글꼴이 영문전용 폰트인 Verdana이고 두번째 글꼴이 맑은고딕으로 설정합니다.
파이어폭스에서는 우선 영문은 Verdana로 지정이 되지만 한글폰트가 없어 한글은 맑은고딕으로 지정됩니다.
그런데 익스플로러에서는 영문은 의도한대로 Verdana로 지정되지만 한글은 두번째인 맑은고딕이 아니라 시스템 기본 글꼴인 굴림으로 지정되버리네요.

익스플로러에서도 파이어폭스에서처럼 영문은 Verdana로 한글은 맑은고딕으로 지정하는 방법을 쓰고 싶은데 아무리 찾아도 모르겠습니다. 분명 예전에 이렇게 하는 방법이 있었던것 같은데… 혹시 알고계시나요?
정찬명 6월 17th, 2009 at 22:58
홍창수님 안녕하세요?

IE 6~7, Opera 9 브라우저에서 발생하는 현상 이군요. FF, CR, SF는 모두 기대한 대로 처리해 주네요. 특정 글꼴이 특정 언어에 대한 렌더링 지원을 하지 않는 경우 이것을 어떻게 처리할 것인지에 대한 브라우저들의 구현 방식이 다르거나 또는 브라우저의 잘못된 구현이라고 생각 합니다.

이런 버그(?)를 해결하는 방법은 없는 것으로 알고 있고 이런 식으로 구현해본 경험도 없어서 딱히 도움이 될만한 답변을 드리기 어렵네요.
홍창수 6월 18th, 2009 at 9:19
한글은 맑은고딕으로 쓰고 영문은 맑은고딕이 아닌 다른 글꼴을 쓰고 싶어서 이 문제에 대해 고민을 했었는데 결국 그런거군요.
브라우저마다 font-family를 처리하는 방식이 틀려서 혹시나 보안할 방법이 있나 했는데 아침부터 급 좌절입니다. 하하.. ^^;

감사합니다.
nuzl 6월 21st, 2009 at 22:06
안녕하세요
항상 눈팅만 하다가 미투데이를 2008년 10월 15일 까지 보면서
맥주를 마시다가

음.. 맥주를 너무많이 마셔서 그런지 이제 자야 할때가 온거같아서 글을 남깁니다
http://me2day.net/naradesign/from/2008-10-25/to/2008-10-27

이거 저장 해놨다가 다음에 시간날때 나머지는 볼께요
(북마크 풀파티라서 [...] 방명록에 링크 올려놓아요 ㅜㅜ)
정찬명 6월 22nd, 2009 at 10:13
nuzl님 안녕하세요? 항상 눈팅만 하셨다고 했는데 왜 저는 닉네임이 익숙하죠? ㅎㅎㅎ. 저를 감시하는 분이 한분 더 늘었군요. ㅜㅜ;
치프 6월 25th, 2009 at 10:25
안녕하세여..
메타블로그 때문에 http://bloglounge.itcanus.net/ 사이트를 좀 들락거렸는데
마크업이 괜찮아서 css 를 보니 찬명님이 07년도에 작업한듯한데요 맞나요?!
블로그라운지가 네이버랑 같은 계열인가여?! 외주작업은 아닐듯한뎅 ㅎㅎ

css 열어보니 상단에 아래처럼 박혀있더라고요~
/*
NHN UIT Lab. WebStandardization Team (http://html.nhndesign.com/)
Jeong, Chan Myeong 070601~070630
*/

흐흐~ 깜짝놀랐습니다.. 07년도 찬명님의 스타일(?)을 볼 수 있어서여~
gov 6월 26th, 2009 at 7:51
ie8에서 alt와title을 동시에 적용을 해줘야 하는 불편함이..;쉽게 해결할 수 있는 방법이 없는지요
정찬명 6월 26th, 2009 at 8:50
앗, 치프님. 옛날 코드 부끄러워서 숨고 싶어요. ㅜㅜ
정찬명 6월 26th, 2009 at 9:10
gov님, 동일한 내용의 alt와 titlte을 동시에 사용하는 것은 중복된 설명을 제공하는 것으로써 바람직하지 않은 방법입니다. 함께 사용해야 한다는 이야기는 어디서 들으셨는지요.
nuzl 6월 27th, 2009 at 21:39
미투데이에서 찬명님이 테이블 이상한거 찾는거 찾은거같아요

http://t.nuzl.com/entry/%EC%95%88%EB%B3%B4%EC%8B%A0%EA%B6%8C
출처는 무려 국정원………

이거 발견은 했지만 무서워서 건의는 못하겠네요 ㅜ0ㅜ
정찬명 6월 29th, 2009 at 15:16
nuzl님 감사합니다. 그런데 그 당시 제가 찾았던것은 th가 없는 데이터 테이블 이었는데요. 이것은 th가 없지만 데이터 테이블은 아니네요. 화면 배치를 위한 테이블을 썼다면 오히려 th를 쓰면 안되지요. ㅎㅎ.
민정화 6월 29th, 2009 at 23:02
아 오늘 날씨 완전 그지같았어요 ㅋㅋ
휴가 안가세요?
정찬명 6월 30th, 2009 at 0:20
휴가는 주말마다 다녀 옵니다. 오늘 날씨 다이나믹 하고 좋던데요! ㅎㅎ.
GOV 7월 2nd, 2009 at 16:17
XE로 제작하는 신규 홈페이지로 KADO-WAH 2.0 평가툴하면 웹페이지는 이상없이 점수가 나오는데요 게시판 내용 부분에서 오류가뜨네요..90%는 나와야 검수 합격점을 주는데..

게시판 부분은 고객글과 자유게시판글이 있는데 함부로 수정할 수 도 없고…꼼수 없나요?
황준상 7월 2nd, 2009 at 17:33
게시판 내용 부분은 건들기 어렵지 않나요? 내용에 html을 사용한거라면…
html을 사용자가 잘못 입력하였을 경우에도 에러가 뜨니깐요…
KADO-WAH 는 거의 img 에 alt 가 없을경우에 에러가 많이 뜨죠?
PHP는 제가 잘 모르겠으나…
컨텐츠를 가져올때 replace 를 이용해서
[img 를 [img alt=” 로 대체하는 꼼수정도…
쓸데없는 소리였습니다.ㅎ
GOV 7월 2nd, 2009 at 18:15
수정했습니다.^^ XE에서 이게시물을…에서 약간 문제가 있었네요.;^^ 해결했습니다.
정찬명 7월 2nd, 2009 at 21:25
GOV님, 다행입니다. 다음에 그 부분 작업을 할 때 어떤 문제가 있는지 주의깊게 확인해 보겠습니다. 감사합니다.

NARADESIGN:BLOG :WIKI

방명록

505개의 댓글이 있습니다.

댓글 남기기