나라디자인

정찬효 2008년 7월 21일, 21:25

형아, 나 왔다가요.
인터뷰한게 실렸네. 자랑스런 우리형. ^^

댓글쓰기 : 정찬효

정찬명 2008년 7월 21일, 23:35

우왓! 찬효 네가 왠일이냐? 형아 블로그에 댓글을 다 달고. 요녀석 은규 사진보러 왔지? ㅋㅋㅋ.

댓글쓰기

phoebe 2008년 6월 25일, 18:24

dece24 gmail로 메일 하나 드렸습니다. ^^
확인 부탁 드려요. ^^

댓글쓰기 : phoebe

정찬명 2008년 6월 25일, 22:08

네, 방금 답변을 드렸는데요. 아는게 없어서 저희 고객센터 페이지 링크와 전화번호만 회신해 드렸습니다. ^^

댓글쓰기

김세민 2008년 6월 24일, 20:13

반갑습니다
정찬명씨가 주인인 블로그였군요
특이한 UI의 페이지다 싶었는데…역시나 그런쪽일을 하시는 분이었군요
일하다가 모르는거 있으면 자주 들르겠습니다.
블로그 번창해서 많은 도움 받을 수 있는 페이지가 되길 기대하겠습니다

댓글쓰기 : 김세민

정찬명 2008년 6월 24일, 20:59

웹 표준 경진대회 동상을 수상하신 분과 성함이 같은것은 우연의 일치인가요? 아니면 본인이신가요? 특이한 UI는 이제 좀 바꿀 때가 되었는데 영 엄두를 못해고 있네요. 자주 들러주세요. 감사합니다.^^

댓글쓰기

황운식 2008년 6월 23일, 19:58

행님 혹시나해서 왔다갑니다.
여전히 그모습으로 지내고계시는군요…
대전에서 짐싸들고 서울로 이사왔습니다.
언제함 뭉쳐요… 건강하시고 꼭 봐요..^_^

댓글쓰기 : 황운식

정찬명 2008년 6월 23일, 23:34

운식, 반갑다! 서울입성을 축하한다.^^ 직장때문에 올라온건지 유학온건지 궁금하구나. 혹시 분당오면 연락해라. 형이 술 한잔 사마. 너도 항상 행복하고 건승을 빈다!

댓글쓰기

호호님 2008년 6월 9일, 11:27

안녕하세요? 이 사이트를 통해 많은 도움을 받고 있습니다.

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

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

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

http://www.hugsys.com/media_test/

댓글쓰기 : 호호님

호호님 2008년 6월 9일, 11:48

내용을 읽어보니 cursor:hand는 쓰지 않고도 제어가 가능하겠어요. 호호

정찬명 2008년 6월 9일, 20:39

호호님, cursor:hand 속성은 MS IE 5.5 이하 버전의 브라우저에서만 인식하는 비 표준 속성입니다. cursor:pointer 가 정확한 표현입니다. ^^

댓글쓰기

정찬명 2008년 6월 9일, 20:37

호호님, 안녕하세요? document.all 은 표준 메소드가 아니기 때문입니다. 크로스브라우징을 고려하신다면 표준 메소드인 document.getElementById 를 사용하시면 됩니다. 아래와 같이 해보세요.

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

이렇게 하시면 W3C DOM을 지원하는 모든 브라우저에서 작동하기 때문에 문제가 없습니다.
좋은하루 되세요.

호호님 2008년 6월 10일, 17:33

감사합니다. getElementById로 수정하였고, 이 문제는 테스트 해보니 잘 되네요.
다만, ff에서 동영상 제어는 어떻게 하는지 모르겠네요.

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

도와주세요~ ㅠ.ㅜ

정찬명 2008년 6월 10일, 23:33

호호님, 안녕하세요. ^^; 호호님께서 올리시는 질문이 다른분들에게 도움이 된다고 생각하면서 나름 열심히 답변 드리고 있으니 너무 미안해 하지 않으셔도 됩니다. 다만 동영상을 제어하는 부분은 제 전문분야가 아니라서 답변드리기가 버겁습니다. Window Media Player 대신 다른 스킨을 씌우려고 하시는 것 같은데 맞는지요? 저는 그런걸 잘 모릅니다. ㅜㅜ; 동영상 서비스를 제공하는 웹사이트에서 벤치마킹 해보시는게 제일 빠르지 않을까요?

댓글쓰기

호호님 2008년 6월 5일, 14:34

안녕하세요?

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

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

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

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

혹시.. 이와 관련된 도움을 받을 수 있을까요?

댓글쓰기 : 호호님

정찬명 2008년 6월 5일, 15:07

호호님, 안녕하세요? object가 표준 엘리먼트 이며 현재 Firefox는 object를 지원하지 않고 비표준 엘리먼트인 embed만 지원하고 있어서 object 엘리먼트 안쪽에 embed 엘리먼트를 같이 적어주셔야 합니다. 이렇게 하는 이유는 Firefox가 object를 실행하지 못할 때 object의 자식 엘리먼트를 대체정보로 인식하여 출력해 주기 때문입니다. 이와 관련하여 신현석님의 글이 도움이 되실것 같습니다. http://hyeonseok.com/pmwiki/index.php/Markup/Object 좋은 하루 되세요 ^^

댓글쓰기

호호님 2008년 6월 5일, 15:32

감사합니다. 덕분에 해결했어요.
쉬었던 공백만큼 새로운 것들에 대해 두려움이 많았는데,
이 사이트를 통해 빠르게 적응하고 있습니다. 감사….

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

궁금한게 너무 많아요. 자주 질문 드릴게요.

정찬명 2008년 6월 6일, 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/ 좋은 하루 되세요. 감사합니다 ^^

댓글쓰기

김일규 2008년 5월 23일, 13:01

찬명님 잘 지내시죠?
잠시 웹표준 정보를 보려 들렀습니다.
지난번의 조언으로 많은 도움이 되었어요.

또 물어볼것이 있어서요.

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

display -moz-inline-box
_width

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

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

css validator 를 포기해야 할까봐요…

댓글쓰기 : 김일규

정찬명 2008년 5월 27일, 0:36

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

김일규 2008년 5월 27일, 2:15

댓글 너무 감사합니다. Validator 통과도 중요하지만, Validator 통과 보다도 더 중요한 정보를 얻게된 기분입니다.

너무 감사해요. 또 방문하겠습니다.

댓글쓰기

김성광 2008년 5월 22일, 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태그가 가장 활용도가 높은데 말이조..

댓글쓰기 : 김성광

정찬명 2008년 5월 22일, 15:21

김성광님, 안녕하세요. 약간의 오해가 있으신것 같습니다. 폐기되는 것은 태그가 아니라 저 태그들에 사용되는 name 이라는 속성 입니다. 참고로 HTML 4 버전에서 공식적으로 폐기된 태그는 applet, basefont, center, dir, font, isindex, menu, s, strike, u, xmp 입니다. 폐기된 태그들은 DTD가 Strict모드에서 사용된 경우에만 문법 오류로 간주하며 Transitional 모드에서는 허용됩니다. 좋은 하루 되세요 ^^

김성광 2008년 5월 23일, 9:59

아^^ 그런거였군요~^^ 빠르고 친절한 답변 정말 감사합니다~!

좋은 하루되세염!!ㅎㅎ

댓글쓰기

서주영 2008년 5월 20일, 14:43

학교 졸업 후 일만하다보니 어느세 제 기술은 낙후되어있고 새로운 기술과 버젼 업된 정보들이 쏟아져서 한계를 느끼던 중 우연히 나라디자인을 접하게 되었습니다.

완전 썡유베리 감솨!

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

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

건강하세요 ^^

댓글쓰기 : 서주영

정찬명 2008년 5월 20일, 23:45

서주영님 극찬 감사합니다 (__) 자꾸 저를 부끄럽게 만드시네요 ㅡㅡ;

댓글쓰기

신승엽 2008년 5월 17일, 17:32

안녕하세요?

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

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

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

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

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

http://sukju.sdisk.net/process/order.php
한번 봐주세요. ^^; 나름대로 정말 노력해 만든 거랍니다. 아직 미완성이지만… 주소도 자바스크립트 없이 우편번호 찾을 수 있도록 처리하였고요.

댓글쓰기 : 신승엽

정찬명 2008년 5월 19일, 10:58

신승엽님 안녕하세요?

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

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

좋은 하루 되세요.

신승엽 2008년 5월 20일, 11:44

답변 감사합니다^^;;

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

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

겨우 한글자 나오는 거죠;;

정찬명 2008년 5월 20일, 23:41

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

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

별도의 모바일 페이지가 필요없다는 것을 설명하려는 발상은 정말 훌륭한 생각이신것 같습니다 ^^

댓글쓰기

방명록

새 글 쓰기

217개의 글이 있습니다.

방명록 쓰기