NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


1,190개의 댓글이 있습니다.

  1. 쌩유~정찬명님 댓글:

    소중한 자료들 포스팅 해주셔서 정말 감사합니다.^^*
    피가되고 살이되는 자료들이네요..
    엉엉 .ㅜ.ㅜ 감격의 눈물~

  2. 알고싶어요 댓글:

    html5의 canvas는 실질적으로 웹(앱)에서 어디에 쓰이게 되나요??

    html과 script만으로 도형을 그리고 애니메이션까지 가능하다고 하는데
    실질적으로 쓰일만한 곳이 있는지 궁금해서요~~

  3. 정찬명 댓글:

    @알고싶어요
    canvas 예제가 많은곳 여기 있네요. ^^
    http://www.canvasdemos.com/top-100/

  4. xe 첨부파일 경로 지정 소스 궁금해요~ 댓글:

    안녕하세요~ xe를 사용하고 있는 1인입니다.
    다름아니라 d드라이브에 xe를 설치하고 사용하고 있는데
    용량문제로 첨부파일을 e드라이브로 연결하고 싶은데
    xe 소스 중 어디를 수정해야할지 궁금하네요~
    알려주시면 감사하겠습니다.

  5. 정찬명 댓글:

    @xe 첨부파일 경로 지정 소스 궁금해요~
    아 제도 잘 모르겠어요. 미안합니다.

  6. 익명 댓글:

    강친닷컴 회원인데요
    the result is not vaild xml
    —————————–
    e

    오류가 계속뜨는데 해결방법좀 알수있을까요?
    컴퓨터로 안되서 몇일째 폰으로만 접속하는데 너무 불편하네요 ㅠㅠ
    이메일로 답변좀 부탁드려요 lastlove2002@naver.com

  7. 정찬명 댓글:

    @익명
    강친닷컴이 뭔가요? 저와 어떤 관련이 있는지. ^^a

  8. 익명 댓글:

    이번에 웹접근성 교육 받은 사람입니다.
    자주 들리겠습니다..

  9. 박미순 댓글:

    안녕하세요.^^ 오랜만에 인사도 드리고 겸사겸사 질문도 드리러 왔어요 잘 지내시지요..
    저는 전주에서 교육받은 학생입니다. 언제또 안오시나요 ㅎㅎ

    다름 아니라 제가 페이지 제작을 하고 있는데 한자를 입력해야하는 부분이 있는데 굴림과 돋움으로 해서 지정을 했는데요.. 한자가 볼드체를 주면 두꺼워 지면서 알아보기가 어렵네요. 네이버 한자사전에서는 잘 나오는 듯 싶어서 혹시 폰트 설정을 할 때 좋은 방법이 있을까 싶어 이렇게 조언을 구합니다.

    그리고 더불어 한가지
    호환성 보기에 대한 대처방법을 알고싶어서요..
    페이지 작업을 하고 보니 호환성보기에 따라서 잘 나오고 안나오고하는 부분이 생기더라구요. 이런 부분에 대해서는 어떻게 처리하시는지요..

    ^^그때 교육받은 것으로.. 처리를 하려고 하는데.. 쉽지 않음을 느낍니다.

    다시 전주를 찾아와 주신다면 좋겠습니다.. ^^ 감사합니다.

  10. 정찬명 댓글:

    @박미순
    한자 글꼴은 네이버 한자 사전 페이지를 열어놓고 CSS 코드를 분석해 보시면 알 수 있을것 같아요. 제가 확인해 보니 적어도 14px 이상 글꼴에만 볼드체를 적용하고 있네요.

    IE 호환성 보기와 관련된 문제는 아래 문서를 참고할 수 있는데요.
    http://msdn.microsoft.com/ko-KR/library/ie/ff986083.aspx
    http://msdn.microsoft.com/ko-KR/library/ie/hh801219.aspx

    호환성 보기라는 것은 기본적으로 버그가 있거나 낡은 스펙을 따르는 브라우저 렌더링을 흉내내는 모드이기 때문에 필연적으로 깨지는 부분이 생길 수 밖에 없습니다. 호환성 드와 표준 모드에서 동일하게 보이도록 뷰를 맞출 수는 없습니다.

    다시 뵐 날이 또 있겠지요. 그 때까지 몸 건강히 잘 지내시구요. ^^;

  11. 희작 댓글:

    안녕하세요 정찬명 선생님.
    예전에 반응형웹 교육 들었던 학생입니다 :-)
    다름이 아니라 float: left를 적용했을 시 가운데 정렬이 가능한지 궁금합니다.
    (여기에서 float: left는 필수조건)

    가령

    하나

    이렇게 하게 되면 부모div가 width가 100%로 잡혀 안에 있는 div가 가운데 정렬되지 않습니다. 이 부분을 해결할 방법이 있을까요 ^_ ^/

  12. 정찬명 댓글:

    @희작
    이 설명만으로는 이해하기가 좀 어렵네요. 예제 URL을 남겨주시고 좀 더 자세히 설명해 주시겠어요?

  13. 길길 댓글:

    최고최고 너무너무 좋은자료 포스팅 ㅠ..ㅠ 최고에요

  14. 익명 댓글:

    감사 인사 드리러 왔습니다. 인사도 드리지 못하고.. ㅎㅎ
    벌써 한해가 일주일 정도밖에 남지 않았네요..

    인연으로 이렇게 도움도 받고.. 감사합니다.

    내년에도 건강하고.. 하시는 일들 모두 원만히 잘이루어지시기를 바랍니다.
    감사합니다.^_________^

  15. 김대윤 댓글:

    새해 복 많이 받으세요~
    올 한해 심심치않게 많은 도움을 받은 곳이라 남기고 갑니다~

    아 +@로.. 제가 웹 표준 가이드북을 하나 사서 읽어보려고 하는데…
    추천 해주실 수 있나요?

    짧은 시간 검색으로는..

    ” 웹 표준 핵심 가이드북 XHTML + CSS ” 가 보이는데… 0ㅅ0;

  16. 정찬명 댓글:

    @익명
    따뜻한 연말연시 보내시고 새해 복 많이 받으세요. ^^

  17. 정찬명 댓글:

    @김대윤
    제가 최근에 관련 서적을 직접 본 것이 아니라서 마땅히 무엇이라고 추천드리기는 어려운데요. 책의 종류나 다독이 중요한 것이 아니라 독자가 책을 어떻게 보느냐가 더 중요한것 같아요. 한 권을 보더라도 천천히 진지하게 보시면 좋겠습니다. ^^

  18. 익명 댓글:

    안녕하세요 처음뵙습니다.
    위키 대문 보니 마이클 코어스 가방 어쩌구 되있던데 스팸 맞죠? (…;)

  19. 정찬명 댓글:

    @익명
    알려주셔서 고맙습니다. 복구해 놨습니다. 새해 복 많이 받으세요. ^^

  20. 익명 댓글:

    새해복많이~~~

  21. 정찬명 댓글:

    @익명
    고맙습니다~! 새해 좋은일만 가득하세요. ^___^

  22. 눈팅하는오승환 댓글:

    나라디자인 블로그 페이지는 기술력도 대단하고 좋은데, 디자인이 매우 러프하다고 생각합니다. 디자인 개편하실 예정이 혹시 있으신가요?

  23. 정찬명 댓글:

    @눈팅하는오승환
    기술이라고 해봐야 사실 별개 없는게 좋게 봐주셔서 감사해요. 디자인은 귀찮아서 손을 대지 않고 있습니다. ㅎㅎ

  24. 아카리 댓글:

    반응형웹이 도대체 뭔가.. 했던 웹디자이너 입니다.
    기획자님의 추천으로 알게된 반응형웹 강좌 감사히 봤습니다ㅠ
    이런귀중한 지식을 무료로 퍼주신다는것은 재능기부네요.
    고급자료로 힘입어 더 열심히 하겠습니다ㅋ
    감사합니다~

  25. 정찬명 댓글:

    @아카리
    댓글로 격려해 주셔서 감사합니다. ^^

  26. JoMacFun 댓글:

    friends, if I include problems with the software for the mac
    I’m looking soft on Russian sites – my favorite position is
    http://www.wtfmacos.ru – is something like the Russian PirateBay.
    here are all I participate in – and it’s very much easy to download!!!

  27. ysJun 댓글:

    안녕하세요 게시글들을 자주 읽으면서 많은 도움을 받았던 사람입니다.
    다름이 아니고 제가 웹접근성 개선 프로젝트를 하던 중 부득이하게 focus이동을 javascript로 이동을 하게 되었습니다. 물론 접근성 상으로 tag를 바꿔야 하지만 기존에 개발이 다 되있는 상태에서 최소한의 개선책으로 내다 보니 tag를 바꾸지 못하는 상황이 되었습니다,
    제가 궁금한 것은 tab key의 keycode를 구해서 처리하는 부분은 문제가 없었으나
    shift tab부분을 따로 분기하여야 하는데 keyCode가 shift 또는 tab부분의 keyCode만 가져오고 있습니다. 혹시 shift+tab의 keyCode를 구하는 방식을 알려주실수 있을까 해서 글을 작성합니다… 바쁘시겠지만 혹시나 보신다면 한번 도움의 말을 구합니다….

  28. 정찬명 댓글:

    @ysJun
    jQuery를 사용한다면 다음과 같이 shift+tab 이벤트를 분기할 수 있습니다.

    [script src=”http://code.jquery.com/jquery-latest.min.js”][/script]
    [script]
    jQuery(function($){
    $(document).keydown(function(){
    if(event.shiftKey && event.keyCode == 9) {
    alert(1);
    }
    });
    });
    [/script]

  29. 양영복 댓글:

    오랜만에 인사드립니다.
    지금 다룸 간담회 보면서 댓글을~
    저도 감동깊게 들었습니다.^^

    더 멋진 곳에서 좋은 발자취 남겨주실거라 믿습니다.
    늘 행복하세요~

  30. 정찬명 댓글:

    @양영복
    격려 고맙습니다. (__)

  31. dreamwebdesigner 댓글:

    안녕하세요. 트윗을 통해 글을 보고 있는 초보웹디입니다 ^-^;

    이제 코딩을 시작하는 초보자로.. 드림위버에 관련한 질문을 드릴 수 있을까 싶어 문의 드립니다.

    얼마전 트윗에서 “드림위버, 서블라임 텍스트” 등에 대한 사용기로..
    드림위버를 쓰면 아이언맨의 갑옷을 입은 것 같다는 말씀이 인상 깊었습니다.

    그런데 드림위버에 관련된 부정적 이야기들로…;;;
    1)드림위버는 웹표준을 무시하고 모든 영역을 테이블로 처리한다.
    2)드림위버를 사용하면.. 불필요한 쓰레기 코딩이 코딩이 생성된다..
    3)웹디가 드림위버로 작업해오면.. 대다수의 개발자분들이 빠꾸시킨다..
    4)요즘은 mvc 프레임워크, 부트스트랩을 사용하는 추세라서, 드림위버같은 위지웍은 사용하지 않는다.
    5)단순 html은 모르겠지만, 동적인 페이지 만드는데에는 드림위버 별로다.

    이런 이야기들을 들을 수 있었는데요..
    드림위버에 관련된 책을 집필하시고.. 개발자로서 여러 경험을 쌓아오신 입장에서..
    혹시 위의 드림위버에 관련된 부정적 이야기들이 모두 사실일지;;;
    이제 코딩을 시작하는 희망찬 웹디에게 조언해주실 말씀이 있으실지 문의 드려봅니다 ^-^;;;

    감사합니다..!!!

  32. 정찬명 댓글:

    @dreamwebdesigner
    1~5번 모두 사실이 아닙니다. 드림위버는 도구에 불과하기 때문에 사용자가 어떻게 쓰는지에 따라 코드가 달라질 뿐인데요. 그것을 드림위버 탓으로 돌리는 것은 맞지 않는 이야기네요. 드림위버를 쓸 줄 모르는 사람이 저렇게 이야기 하는 경우가 있지만 드림위버를 잘 다루는 사람 입에서 나온 이야기라고는 볼 수가 없네요.

  33. 정찬효 댓글:

    형아, 회사 옮겼어???
    언제??
    왜 난 몰랐지?
    그런 일 있음 동생에게도 알려주~
    아람이 보고싶다. ^^
    이번에 은규도 아람이 없으니깐 무척 심심해 했어.

  34. 정찬명 댓글:

    @정찬효
    내가 이야기 안 했나? ㅎㅎ 미안. 4월 부터 출근했어. 조만간 또 내려가지 뭐. ㅋ

  35. code monkey 댓글:

    tabular data 에 대한 정의를 어떻게 내리시나요?

    data 에 대한 정의는:

    Factual information, especially information organized for analysis or used to reason or make decisions.

    이렇게 사전에 나옵니다. 게시판 리스트에 올라오는 글리스트가 분석이 요구되는 정보라고 보시나요?

    그래서 가 아닌 테이블 내에서 표시되어야 한다고 보시나요?

  36. 정찬명 댓글:

    @code monkey
    질문 내용을 이해를 못하겠네요. 다시 한 번 질문해 주시겠어요?

  37. code monkey 댓글:

    이 페이지에 가보면

    www쩜xpressengine쩜com/userForum

    게시판 글 리스트가 테이블안에 들어가 있습니다./테이블로 코딩되어 있습니다.

    이 것이 적절한 테이블 사용일 수도 아닐수도 있는데, 그 부분에 대한 의견을 듣고 싶었습니다.

    개인적으로는 이런 글 리스트는 프로세싱이 필요한 정보 (data) 가 아니기때문에 (그러니까 tabular data 가 아니기때문에) 테이블 보다는 [li] 로 나열되어야 한다고 생각하지만, 제가 알지 못하는/생각하지 못한 부분이 있나 해서요.

    (2008년에 제작되었던 버디프레스 (워드프레스 게시판) 도 보면 그 당시에는 테이블 코딩이었다가 지금은 div 로 되어 있거든요.)

    테이블 사용이 적절한 경우를 모두 알고 있다고 생각했는데, (Chris Coyier 나 Jack Moore 님에게 예전에도 물어보기도 했었고) 또 여러가지 resource 들을 통해

    www쩜webdesignfromscratch쩜com/html-css/html-tables
    webdesign.about쩜com/od/tables/a/aa122605.htm
    designshack쩜net/articles/css/15-tips-for-designing-terrific-tables

    언제 테이블 사용이 적절한지를 파악하고 있다고 생각했는데, 게시판에 테이블 사용이 된 경우를 최근에 본적이 없어서 궁금해졌습니다.

  38. 정찬명 댓글:

    @code monkey
    게시판 목록에 li 요소를 쓸 수도 있지만 th 데이터가 존재한다면 table 요소로도 적절합니다. 게시판 목록의 ‘제목, 날짜, 글쓴이, 조회수’ 등의 데이터는 th 요소로 적절하기 때문에 오히려 li 보다 table을 사용하는 것이 더 적절할 수 있습니다. 다시 말해서 표의 상단 또는 좌측에 th로 설정하기에 적절한 데이터가 있으면 table이 적절한 마크업이 됩니다.

  39. code monkey 댓글:

    답변 감사합니다.

    아… html5 마크업을 고려하신 것은 아니셨군요.

    html5 에서는

    제목: &lt?h1?&gt

    날짜: &lt?time?&gt

    글쓴이: author link type 또는 &lt?cite?&gt

    이런식으로 마크업을 하는 것이 보편적이여서요…

    그래서 궁금해서 여쭈어 본 것 입니다. ^^

  40. 정찬명 댓글:

    @code monkey
    제가 한 말은 DTD와 무관한 설명입니다. HTML5라고 해서 게시물 목록을 어떻게 하는것이 일반적이라는 설명은 맞지 않는것 같네요. DTD와 무관하게 다양한 방법으로 마크업 할 수 있고 그 중에 한 가지일 뿐입니다.

  41. EveR™ 댓글:

    안녕하세요, 찬명님.
    HTML5 마크업시에…

    이런식으로 스크립트를 걸게 된다면
    IE에서 브라우저 호환성보기로 브라우저 모드 IE9에 문서모드 IE7로 설정하게 된다면 레이아웃이 깨져버리는데…
    DTD가 제대로 설정하면서 사용자가 일부러 호환성보기로 설정하지 않는다면 문제가 없는건지요?
    얼마전 프로잭트때도 이 호환성보기 때문에 meta테그에 IE-Edge속성을 넣어서 해결하긴 했으나 이게 최선인지 잘 모르겠어요.

  42. EveR™ 댓글:

    [!–[if lt IE 9]]
    [script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”][/script]
    [![endif]–]
    이 방법으로 스크립트를 걸었다는 것을 말씀드리려 했는데 꺽쇠를 그대로 사용하는 바람에 글에서 없어졌네요. ^^;;

  43. 정찬명 댓글:

    @EveR™
    글쎄요. 일단 깨지는 원인을 알아야 할 것 같은데요. 왜 깨질까요.

  44. 초보자 댓글:

    안녕하세요 컴퓨터를 리셋해도 나라디자인 북마크를 꼭 만들어놓고 자주 오지만.. 늘 수준이 딸려서 댓글에 한마디 끼지도 못하고 보기만 하는 사람이에요^^
    이번에 홈페이지를 만들어 주게 되었는데요.. 교육만 받고 실제로 표준으로 만드는 건 처음이라 궁금한 게 있어요.. 정말 초보적인 질문이지만 해답을 찾을 수가 없어서요. 사이트에 보면 보통(여긴 아니지요^^) 위쪽에 네비게이션영역이 있고 아래쪽에 주소나 라이센스 등이 있잖아요. 가운데 영역은 계속 바뀌지만 위 아래는 모든 페이지에서 동일한데 마크업을 페이지마다 카피해서 넣을 것 같진 않고..(그러면 수정하면 다 열어서 수정해야 하잖아요..? 그렇게 하진 않겠죠?) 옛날엔 프레임셋같은걸로 했던 그 작업을 어떻게 해야 할지 모르겠어요.. 가르쳐 주셔요~^^”

  45. 정찬명 댓글:

    @초보자
    서버 사이드 인클루드 구문을 사용하시면 돼요.

  46. 초보자 댓글:

    @정찬명
    감사합니다~~ 해볼게요^^;

  47. 김지환 댓글:

    반응형 웹을 하려고하는데 미디어쿼리를 사용하고있으며 모바일에서는 폰트 사이즈를 87.5%로 폰트로 작업중입니다. 근데 인터넷으로 창을 줄였다 늘렸다 해서 해보았을땐 문제가 없었는데 핸드폰으로 작업물을 확인하는중에 가로와 새로가 모바일폰트 치고는 폰트가 깨알처럼 나오네요..ㅠㅠ 어떻게 해야 폰트가 잘보일수있는건가요? 요것두 가변폭 그런거와 관계가 있나요?

  48. 안녕하세요 정찬명님.

    프로그래밍 관련 질문/답변사이트인 코드플로우를 소개드립니다 ( http://codeflow.co.kr/ )
    영문사이트인 stackoverflow를 보면서 한글버젼이 있었으면 좋겠다고 생각하며 만들었습니다. 또한 번역게시판을 만들어 언어장벽으로 인한 불편함을 줄이고자 적극 노력하고 있습니다.
    사이트를 오픈하기는 했는데 실력있는 질문/답변자분을 모시기가 참으로 어렵습니다.
    쇼핑몰 광고하듯 금전적인 보상은 기분 나빠 하실수도 있어서 약소하나마 이벤트(좋은 질문/답변)를 통해 음료를 기프티콘으로 보내드리고 있습니다.
    방문하여 주셔서 질문이나 답변을 남겨 주시면 감사하겠고 블로그에 소개하여 주시면 더더욱 감사드리겠습니다.

  49. 박미순 댓글:

    선생님 안녕하세요!!^^저번에 교육을 받았던 학생입니다. 나이는 학생을 넘어섰지만 언제나 배우는 동안에는 학생이겠죠 ㅎㅎ 다름아니라 이번에 장차법이 적용되면서 저희가 운영하는 사이트에 위반이 되었다는 연락을 받았다고 합니다. 그래서 확인을 해보니 홈빌더 형식으로 제작을 하는 툴에서 최신글 등을 테이블형식으로 불러와서 보여주는 형식이 문제가 되는 것을 발견했네요..웹접근성 관련 검사기를 돌려서 보니 발견이 되었는데..이 부분에 대한 개선을 어떻게 해야할지.. 대안방법에 대한 조언을 들을 수 있을까 싶어 이곳을 찾게 되었네요.. 웹접근성을 배워서 많은 부분은 바로 개선할 수 있으나 이 부분이 가장 큰 어려움이 되고 있어.. 이에 대한 조언을 구합니다..

    감사합니다.

  50. 익명 댓글:

    요즘 웹디자인을 배우고 있는 고등학생 입니다.
    html이나 css나 저한테는 한 없이 어려운데 가르쳐주는 선생님꼐서
    이 사이트 보면 잘 할 수 있을 거라는 소리 듣고 열심히 열심히 보려고 노력중이에요!! 아직 그리고 후에도 잘할꺼라는 자신감은 없지만 그래도 보고서 많이 배워가요!!!많이 배워서 유용하게 쓸께요~~~~

  51. 랄랄라 댓글:

    안녕하세요?
    ie rowspan 버그에 대해서 아시나요?
    검색해도 해결법을 못찾았어요.. ㅠㅠ
    혹시 해결방법을 아신다면 조언부탁드립니다..

  52. 정찬명 댓글:

    @박미순
    어떤 현상이 문제가 되는지 구체적인 예제를 봐야만 답변이 가능할 것 같아요.

  53. 정찬명 댓글:

    @랄랄라
    글쎄요. 잘 모르겠습니다. 어떤 증상인지 예제라도 링크해 주셨으면 좋았을텐데요.

  54. 리햄 댓글:

    코딩작업할때 찬명님 블로그는 많은 도움이되요 ~
    매일 조용히 잘 읽고 갑니다.
    앞으로도 많은 정보 부탁드려요 !!

  55. 정찬명 댓글:

    @리햄
    감사합니다. 이제 약발이 다 했는지 글 쓰는게 귀찮네요. ㅎㅎ

  56. 궁금이 댓글:

    안녕하세요. 질문이 있는데 남길곳을 찾지못해 방명록에 남깁니ㅏㄷ.

    우선 xe에서 만들어주신 콘텐츠 위젯 스킨 ”naradesign” 를 사용하고 있습니다.
    홈페이지에 적용해서 쓰려고 하는데요,

    탭 형태를 추가하고 싶으나 상단이나, 왼쪽 모두 적용하면 에러가 납니다. ㅠㅠ
    에러사항: 탭이 넘어가면 문서가 옮겨지지 않고 겹칩니다.
    수정할 수 있는 방법 없을까요? 답변 부탁드려요. ㅠㅠㅠ

  57. 윤재민 댓글:

    형님 다녀갑니다.
    제 위에 spam 달렸네요 ㅎㅎ;
    저도 블로그를 하나 맹글어서요 site에 형님 사이트 하나 달아놨는데
    괜찮죠??
    조만간에 한번 뵈었으면 좋겠습니다.
    환절기 감기 조심하세요

  58. 정찬명 댓글:

    @윤재민
    블로그 멋지구나. 오픈 축하한다. 내 사이트 링크까지 걸다니 나야 뭐 영광이지. 너도 감기 조심하고 조만간 한잔 꺽자구. ㅎㅎ

  59. 강진규 댓글:

    예전에 구글링중 북마크 하였다가
    오늘 시간이 많아서 찬찬히 보고 있는데
    읽을것이 너무 많아서 막막할 지경이네요 :O
    블로그도 깔끔하고 좋은데 파랑색 링크는 좀 눈아파요 ㅜㅜ
    ux를 위해서 그리하신건지 조금 채도 낮은 파랑색은 어떨까요?

  60. 정찬명 댓글:

    @강진규
    귀찮기도 하고요. 브라우저 기본값이 제 눈에는 괜찮아 보여서요. ㅎㅎ

  61. 김경록 댓글:

    안녕하세요 제 이름은 김경록 이구요, ERP개발자 입니다. 블로그 폰트가 많이 보던것 하고 달리 깔끔하네요. 혹시 어떤 폰트를 사용하셨는지, 어떻게 적용하시는지 시간이 되신다면 알려주시면 저에게 많은 도움이 될 것 같습니다. 감사합니다. oceanfog1앳gmail.com

  62. 정찬명 댓글:

    @김경록
    나눔고딕 웹 폰트입니다.
    아래 사이트에서 ‘Nanum Gothic’ 으로 검색하여 적용해 보세요.
    http://www.google.com/fonts/earlyaccess

  63. 밍밍 댓글:

    안녕하세요
    구글에서 검색할때 자주 보여서 많은 도움을 받고 있습니다
    DEVIEW2012 발표회영상도 최근에 있다는걸 알게되서 일하는시간임에도 불구하고 단숨에 다 봐버렸네요ㅎㅎ

    다름이 아니라 제가 처음 입사할때부터 반응형을 맨바닥부터 공부해서 지금껏 1년이 조금 넘는 기간동안 만들어왔는데요
    기초책만 보고 나머지는 구글링과 그동안 쌓은 개인적인 노하우들로 해왔는데
    발표회영상을 보고 아직도 많이 부족함을 느꼈습니다ㅠ_ㅠ
    지금보니 발표회하실즈음에 웹공부를 시작한거같네요
    현재 반응형웹을 여러곳 코딩하고 리펙토링하고 했는데요
    혹시나 조금이라도 시간이 되신다면 간단히 봐주시고 조언을 구했으면 해서 글을 남기게 됬습니다
    트윗이나 페북은 하지않아서 이곳에 글을 남기게됬네요
    폐가 될까봐 지금 당장 링크올리고 봐달라고는 못하겠어서… 가능하다고 하시면 메일로 보내드리겠습니다

    좋은 정보들 많이 얻었는데 요즘은 거의 안쓰시는거같아서 애독자로서 조금 슬프네요ㅎㅎ
    항상 감사드립니다~!

  64. 정찬명 댓글:

    @밍밍
    다른 분들도 질문이나 답변을 보면서 도움을 받을 수 있기 때문에 질문은 블로그를 통해서 받고 있습니다. 링크 남겨주시면 시간이 될 때 한 번 봐 드릴께요.

  65. 밍밍 댓글:

    http://goodmhospital.co.kr/
    http://cnyouth.or.kr/
    http://kunwon.com/
    그동안 한 10개 넘게 만든거같은데 큰 사이트는 이정도이고
    최근에 리펙토링한곳은
    http://krsta.org/ 이곳이에요

    현재 개발중인 사이트와 예정잡힌건 노출할수없어서 보여드리면서 질문하기는 어렵구ㅠ_ㅠ
    솔직히 아직 1년차고 아는분회사에서 처음 사회생활하는거라 제가 잘 하고있는건지 모르겠어서 평가? 라고 해야하나.. 하여튼 제가 자신이 없어서…

    발표회자료를 보면서 가장 시급하게 느낀게
    1. 웹접근성 (장차법 관련.. 단순히 코딩뿐아니라 기능적인 부면에서도 장차법에 맞게 움직이도록 하는게 굉장히 어렵네요ㅠㅠ)
    2. 크로스브라우징 (모바일퍼스트라는 개념은 처음접해서 혼란스럽네요. 시간내서 해봐야겠어요. IE7~9에서 서로 충돌하는 기능도 많아서 하루종일 해결방법찾느라 시간보내네요. IE, Chrome, FF, Safari, 안드폰, 아이폰 다맞춘다는게 ㅎㅎ;;)
    3. 속도개선(웹폰트는 시도해봤는데 너무 느려져서 포기했네요ㅠ 현재 css-sprite랑 해상도에 따라 이미지를 고화질,저화질을 나눠 출력하는 방법 시도중이구요..)

    글이 너무 길어졌네요 죄송합니다ㅎ
    혹여 훑어보시고 이건 꼭 반영하거나 수정했으면 좋겠다 하는점이 있으시면 말씀해주시면 감사하겠습니다
    그리고 혹시 참고할만한 사이트가 있다면 알려주실수있을까요?
    뜯어보고 분석하는걸 좋아해서 큰 도움이 될것같습니다

    저에게도 정찬명님과 같은 선생님이 계신다면 좋았을텐데요…
    기초도 배운것도 없이 실무에 바로 투입되서 요즘따라 기본이 부족하다는걸 뼈저리게 느끼네요ㅠㅠ

    다음에 현재 개발중인 사이트가 완성되고 오픈되면 또 와서 보여드려도 될까요?ㅎ
    주절주절 말이 많아서 죄송합니다! 감사합니다!

  66. 밍밍 댓글:

    아 참고로 실제로 모바일에서 확인해야 제대로 확인되는 부분도 있어요
    PC에서 보면 조금 모양이 이상한거같지만 모바일에서는 괜찮다거나,
    모바일사이즈에서 페이지가 새로 로딩이 되야 제대로 나온다거나 하는ㅎ;;
    배우면서 만드는거라 완벽한 반응형이라고 보기엔 어렵지만ㅠ_ㅠ
    반쪽짜리라고 생각하고 봐주세요~!

  67. 정찬명 댓글:

    @밍밍
    이렇게 포괄적인 질문에는 답변을 드리기 어렵습니다. 구체적으로 해결하고 싶은 문제가 무엇인지 알려주셔야 해요. 제가 밍밍님을 위해 할애할 수 있는 시간이 길지는 않습니다. 제 코가 석자라서요. ㅎㅎ

  68. 별그대 댓글:

    안녕하세요
    @font-face 관련 글을 읽고 궁금한 게 생겨서요..
    본문에 폴 아이리쉬 방탄코드 관련 설명을 하시면서
    local(※) 은 ie6~8이 다른 파일 다운로드의 요청을 막기 위한 것이고
    맥은 local(※) 코드를 처리하지 못한다고 하셨는데요..

    그런데 맥의 회사는 애플이고 ie는 마이크로소프트라 전혀 다른 회사가 아닌지요?–; 맥에서 처리하지 못한 코드일뿐 ie에서는 처리될 수가 있는 코드가 아닌지 궁금합니다…

    그리고 폴 아이리쉬 방탄코드 원문을 보면
    local(☺) smily face가 나오는데…
    이 내용은 ie6~8이 다른 파일 다인로드 막기 위한 목적이 아니라,
    url에 있는 파일을 다운로드 하기 전에 시스템 글꼴을 표시하는데
    그 시스템 글꼴이 표기되기 원치 않을때 사용하기 위함이라고 나와서…

    저도 뭐가 뭔지 아리송하네요

  69. 정찬명 댓글:

    @별그대
    local() 값은 CSS3 명세이기 때문에 IE 6~8 브라우저는 값 자체를 지원하지 않아서 해당 src 속성을 무시하는 것 이구요.

    맥에서 처리하지 못 하는 것은 local() 값 안에 포함된 2바이트 짜리 문자열(예를 들면 ※, ☺ 등) 입니다.

    local() 속성을 빼고 IE 6~8 에서 웹 폰트 로드 테스트를 해 보시면 local() 값이 왜 필요한지 알 수 있을 거예요. eot 글꼴과 woff 글꼴을 모두 다운로드 합니다. 아이리쉬가 그 부분을 자세하게 설명하지 않은 것 뿐입니다.

    최근에는 Fontspring 이라는 방법을 사용하는데요. 구글에서 제공하는 웹 폰트도 이 방식을 사용합니다. 현존하는 가장 깔끔하고 완벽(?)한 방법인것 같네요.
    http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

  70. 신인선 댓글:

    안녕하세요. 전주에서 웹접근성 교육받은 학생입니다.
    잘 지내시는지요? ^^
    다름이 아니라 여쭤볼 게 있어서 이렇게 찾아왔습니다.
    저희가 웹폰트를 배포하고 싶은데 방법이 있을까요?
    인터넷을 검색해봐도 명확한 방법을 알 수가 없어서 여기에 혹시나 하여 질문 올립니다.

  71. 정찬명 댓글:

    @신인선
    직접 웹 폰트를 만들어서 배포한다는 말씀인가요? 그렇다면 회사 또는 개인이 운영하는 웹 사이트에서 파일 다운로드를 제공하는 방법이 있겠고요. 더 파급력이 있는 곳으로는 http://www.google.com/fonts/earlyaccess 구글 웹 폰트 사이트에 등록하는 것인데요. https://groups.google.com/forum/?fromgroups=#!forum/early-access-fonts 해당 포럼에 등록 방법을 문의해 보세요.

    만약 직접 제작한 폰트가 아니라 저작권자가 따로 있다면 웹 폰트를 배포해도 되는지 라이선스를 통해서 또는 직접 문의해서 확인해 보셔야 합니다.

  72. 채형준 댓글:

    안녕하세요.

    질문 하나 있습니다.

    저는 jquery 를 주로 사용 하는데

    개발자가 porototype.js 와 같이 사용 하고싶다고 합니다.

    jquery 우회 하면 같이 사용 할수는 있지만

    같이사용함으로써의 최적화나 다른 문제점들이 있는 지 알고싶습니다.

    오늘 하루종일 구글링을 했는데 미천한 영어실력이라

    $의 충돌 현상 외에는 같이사용하는데에서의 문제점은 안보이는데

    최적화나 $외의 코드중복 문제 같은게 알고 싶습니다.

  73. 정찬명 댓글:

    @채형준
    저도 jQuery와 다른 라이브러리를 혼용해서 사용해 본 적이 없어서 잘 모르겠습니다. 흔치 않은 케이스 같네요. ^^

  74. ayland 댓글:

    와 안녕하세요.
    포스팅 잘 보고 있습니다.
    그러다 우연히 찾아볼 것이 있어서 책을 피려고 하는 순간
    책 겉표지에 정찬명님의 이름으로 후기(?) 같은 글을 발견했네요. ㅎㅎ 순간 신기했습니다.
    별로 영양가있는 이야기는 아니었지만… 부디 반가운 마음으로 작성하였으니 너그럽게 양해 부탁드립니다 ^^
    좋은 하루 보내세요!

  75. 정찬명 댓글:

    @ayland
    여러 책에 제 이름을 팔아서 어떤 책인지는 모르겠지만 반갑게 인사해 주셔서 감사해요. 즐거운 연말 보내세요. ^^

  76. 마젤 댓글:

    안녕하세요 ~
    좋은정보 너무 잘보고있는데요
    혹시 웹표준검사시
    css 레벨2 레벨3 이라는것이나와요 ㅠㅠ
    둘의차이거 멀까요>?
    그리고 웹표준에 맞는 수정방법은 머죠?

  77. 정찬명 댓글:

    @마젤
    CSS 레벨이라는 것은 CSS 버전을 말하는 것 같네요. HTML 문서 형식에도 HTML4, XHTML, HTML5와 같이 버전이 있는 것처럼 CSS에도 버전이 있는 겁니다. 버전 숫자가 높을 수록 더 향상된 기능을 제공하지만 여러 버전의 CSS를 함께 섞어 사용해야 하므로 상호 보완적인 관계라고도 이야기할 수 있겠네요. CSS를 표준에 맞게 수정하려면 CSS 문법 검사기를 사용해 보시고 오류로 검출되는 것들은 표준 명세에 맞게 고쳐야겠죠. 질문이 포괄적이라 더 이상 구체적인 답변이 어렵네요.

    http://jigsaw.w3.org/css-validator/
    http://www.w3.org/TR/CSS2/
    http://www.w3.org/standards/techs/css

  78. 익명 댓글:

    잘 보구 갑니다.

  79. 익명 댓글:

    안녕하세요!!
    좋은정보를 잘 보고 갑니다!!
    그리고 궁금한데..
    XE 보시면 XE Naradesign Board Skin 이런 게시판잇는데 갤러리형으로
    선택했는데 미리보기 이미지 안나오네요
    어떻게하면 수정할수있는지요?

  80. 정찬명 댓글:

    @익명
    죄송해요. 제가 XE에서 손을 놓은지가 좀 돼서 잘 모르겠어요. ㅎㅎ

  81. 최이현이무니다 댓글:

    강사님 왜 팝콘공격해놓으시고 제 이름을 기억을 못하시나요
    정말 서운해서 잠이 안옵니다 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

  82. 정찬명 댓글:

    @최이현
    미안해요. 이제 확실히 외웠어요. 다시는 안 까먹을게요. 푹 자요. ㅎㅎ

  83. 주미옥 댓글:

    안녕하세요 전주 전주 아줌마입니다
    선생님 수업을 세 번인가 들은거 같은데 그 때는 일을 하지 않아서 수업만 듣고 말았습니다 지금 공부중인데 왜 안되는지 모르겠습니다
    혹 도와주실 수 있으면 왜 안되는지 좀 찾아 주세요
    어제 오늘 아무리 봐도 안 보여요

    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

    Untitled Document

    메뉴 1

    메뉴 1-1
    메뉴 1-2
    메뉴 1-3

    메뉴 2

    메뉴 2-1
    메뉴 2-2
    메뉴 2-3

    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

    @charset “utf-8″;
    /* CSS Document */
    .gnbContainer{ height:60px; margin:0 0 20px 0;}
    .gnb{ position:relative; list-style:none; margin:0; padding:0; font-size:12px; border-bottom:1px solid #888888; *zoom:1;}
    .gnb:after{ content:””; display:block; clear:both;}
    .gnb a{ position:relative; text-decoration:none; white-space:nowrap; }
    .gnb li{ float:left; margin:0 -1px -1px 0;}
    .gnb li a{ display:inline-block; border:1px solid #ccc; border-bottom:0; height:15px; padding:7px 15px; color:#333;}
    .gnb li li{ padding:0 15px; border-left:1px solid #ccc; }
    .gnb li li a{ border:0; padding:0; color:#767676; font-weight::normal !important; letter-spacing:normal !important; }
    .gnb li ul{ display:none; position:absolute; left:0 top:40px; list-style:none; margin:0; padding:0;}
    .Gnb1-1 .gnb1 ul,
    .Gnb1-2 .gnb1 ul,
    .Gnb1-3 .gnb1 ul,
    .Gnb2-1 .gnb2 ul,
    .Gnb2-3 .gnb2 ul,
    .Gnb2-3 .gnb2 ul{ display:block;}
    .Gnb1-1 .gnb1 a,
    .Gnb1-2 .gnb1 a,
    .Gnb1-3 .gnb1 a,
    .Gnb2-1 .gnb2 a,
    .Gnb2-2 .gnb2 a,
    .Gnb2-3 .gnb2 a{ font-weight::bold; letter-spacing:-1px; border-bottom:1px solid #fff; }
    .Gnb1-1 .gnb1-1 a,
    .Gnb1-2 .gnb1-2 a,
    .Gnb1-3 .gnb1-3 a,
    .Gnb2-1 .gnb2-1 a,
    .Gnb2-2 .gnb2-2 a,
    .Gnb2-3 .gnb2-3 a{ font-weight:bold !important; letter-spacing:-1px !important}

    선생님께서 주신 ㅣ교제를 보며 따라 한건데요 메뉴1 메뉴2를 클릭하면 메뉴가 이동해야 하는데 메뉴 1만 보입니다 이유가 뭐가 잘못된건가요???

    살려주세요

    lsm-jmo@hanmail.net
    이메일입니다 부탁드립니다

  84. 주미옥 댓글:

    (!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>
    (meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /)
    (title)Untitled Document(/title)
    (link rel=”stylesheet” href=”style.css”)

    (/head)
    (body)
    (div class=”gnbContainer”)
    (ul class=”gnb Gnb1-1″)
    (li class=”gnb1″)(a href=”#”)메뉴 1(/a)
    (ul)
    (li class=”gnb1-1″)(a href=”#”)메뉴 1-1(/a)(/li)
    (li class=”gnb1-2″)(a href=”#”)메뉴 1-2(/a)(/li)
    (li class=”gnb1-3″)(a href=”#”)메뉴 1-3(/a)(/li)
    (/ul>
    (/li>
    (li class=”gnb2″)( href=”#”)메뉴 2(/a)
    (ul)
    (li class=”gnb2-1″)(a href=”#”)메뉴 2-1(/a)(/li)
    (li class=”gnb2-2″)(a href=”#”)메뉴 2-2(/a)(/li)
    (li class=”gnb2-3″)(a href=”#”)메뉴 2-3(/a)(/li)
    (/ul)
    (/li)
    (/ul)
    (/div)
    (/body)
    (/html)

    ===========================================

  85. 전주아줌마 댓글:

    탭메뉴 형태의 네비게이션입니다
    메뉴가 고정으로보입니다

    메뉴2로 클릭이 안되는 이유가 무엇인지요???

  86. 전주에서 이쁜 이헨 댓글:

    잠시 생각을 해보았는데 탭으로 운용시
    스킵네비게이션에서 본문바로가기 하면 그다음 탭 포커스가 본문에서 시작되는게 더 합리적이지 않을까 하는 생각인데요.. 방법이 없을까요?

  87. 정찬명 댓글:

    @주미옥
    답변이 너무 늦어서 미안해요. 블로그를 잘 안 보다보니. ㅠㅠ; 코드에 문제가 있을 때에는 웹 서버에 파일을 올러놓고 링크를 걸거나 또는 http://codepen.io/ 같은 사이트에 예제를 만들어서 보여 주셔야 제가 뭔가 확인해 볼 수 있어요.

  88. 정찬명 댓글:

    @전주에서 이쁜 이헨
    답변이 늦어서 미안해요. 질문을 정확하게 이해 못 했는데요. 스킵 네비게이션의 원래 역할이 메뉴 건너 뛰고 본문에서 포커스를 시작하는 것이죠. 일부 브라우저들은 스킵 네비게이션 링크에서 엔터키를 쳐도 본문으로 포커스 이동을 하지 않는 문제가 있어요. 만약 이런 문제를 이야기한 것이라면 자바스크립트를 이용해서 인위적으로 키보드 초점을 본문으로 이동시켜 줄 수 있습니다. 키보드 초점이 본문으로 건너 뛰려면 앵커를 설정하는 것도 중요하지만 본문 영역에 tabindex=”0″ 이라는 속성을 추가해서 초점을 받을 수 있도록 해 주어야 해요. 이 동작이 실행되지 않는 브라우저를 위해 jQuery 코드를 추가한다면…

    $(document).on(“click”, “.skip”, function(){
    $( $(this).attr(“href”) ).attr(“tabindex”, “0”).focus();
    });

    이런 식으로 처리할 수 있겠죠.

  89. 중국산배터리 댓글:

    수고합니다.
    대문페이지에 콘텐츠 위젯 스킨 ”naradesign”을 이용하고 있습니다.
    내용형태를 갤러리로 사용하고 있습니다.
    사진 아래 내용도 100~200자 정도 나타나게 하고 싶습니다.

    바쁘신 중에 가능하시다면 방법을 부탁드려봅니다.
    멋진 위젯에 감사드립니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님