저는 사실 입력 서식에 대해서는 자세하게 고민을 안해봤습니다. 브라우저에 따라서 손댈 수 없는 부분(IE6의 상하 1px 여백, 라디오 버튼 크기 등)이 있기도 합니다. 그래서 그냥 세로 정렬(vertical-align)만 잘 맞추고 높이(height)없이 줄 높이(line-height)에 의존해서 자연스럽게 출력되는게 하는게 좋을 것 같습니다. 이런 경우는 조금 어긋나도 내용 파악이나 이용에 별 문제가 없을 것입니다.
김동수 2009-09-18 19:46:58
항상 친절하게 설명해주셔서 감사합니다.. ^^; http://www.newborndent.com/sample.html 지난번 말씀드린 input text 의 안쪽 여백관련하여 샘플과 http://www.newborndent.com/sample.png 현상을 스냅으로 찍어놨습니다. 제가 원하는건 전 브라우져에서 상/하 1px도 어긋나지 않는 완벽한 디자인을 하고 싶은데.. hack 외에 방법이 없는건지..;; 궁금합니다.
2009-09-18 04:00:17
이경섭님, 상세 내용도 접근성 높에 제작이 되어야 하는게 당연합니다. 품질마크 관련해서 질문하신 것이라면 제가 답변드릴 수 있는 입장이 아니니 이해해 주세요. :)
2009-09-18 03:58:50
김동수님, 어느정도 차이가 나는지 잘 모르겠지만 서식은 보더나 컬러정도만 바꾸고 마진이나 패딩은 건드리지 않는게 좋습니다. background-position은 제가 알기로는 브라우저마다 차이가 없습니다. URL을 알려주시면 확인이 가능할 것 같네요.
2009-09-18 03:56:29
김정옥님, 오페라에서는 메뉴 네비게이션이 나오지를 않아서 서브페이지로 갈 수가 없네요. HTML validation 체크를 해보니 오류가 너무 많습니다. HTML validation은 브라우저 호환성에 있어서 매우 중요하니 오류 수정을 해보시는게 좋을 것 같습니다.
이경섭 2009-09-18 03:25:51
http://www.gntour.com/program/tour/tourView.jsp?currPage=1&AT_SID=tur0008 위 주소가 관광지소개 페이지인데 등록된 갯수가 엄청납니다. 모두 변경 할려니 엄두나 안나서 그런데 꼭 웹접근성으로 상세내용을 작성해야 되는지 고민이 됩니다...
김동수 2009-09-17 21:59:06
INPUT TEXT안에 여백문제가 브라우져마다 특성이 가지각각이라 크로스브라우징이 너무 힘드네요.. 동일한 스타일에 텍스트폼을 파폭과 익스, 사파리와 오페라에서 확인해보니 전부 제각각입니다. 어떻게 해결을 하면 좋을지 조언여쭙고 싶네요.. 그리고 background-position 에 주어지는 % 값도 브라우져 특성을 타는것 같습니다. 아웅... ㅠ.ㅠ
김정옥 2009-09-17 20:30:01
http://121.152.162.52/~dormi/main/main.php 현재 페이지에서는 헤더부분에 이미지가 제대로 맞는데 서브화면에 가면 메인플래시 아래쪽 부분이 떨어져서 이미지연결이 부자연스럽습니다. ie6이나 ie8에서는 문제가 없는데 ie7에서만 적용이 이상하게 되서 문의드립니다^^
2009-09-13 22:00:29
사용된 코드를 볼 수 있을 까요? 테스트 해 보니 IE6 포함 거의 모든 브라우저에서 같은 결과를 얻었습니다.
귤아빠 2009-09-12 00:28:35
body에 인라인으로 margin을 주었을경우 ie6에서는 잘 보이는데 firefox에서는 적용이 안되네요. 웹표준 때문인거 같은데 margin에 문제가 있는건지, 인라인에 문제가 있는건지..모르겠어서요..부탁드리겠습니다
2009-09-09 09:58:19
자료 올라왔습니다. http://futureweb.tistory.com/14
김승덕 2009-09-08 23:40:43
앗 이렇게 친절하게 말씀해 주실 줄이야.. 넘넘 감사합니다.~~
2009-09-08 03:02:38
발표자료는 FWF 홈페이지(http://webappscon.com/fwf/2009/)나 차니님 블로그(http://channy.creation.net/blog/)에 올라갈 예정입니다. 조만영님은 트위터(http://twitter.com/manyoung_cho)에서 팔로잉 하실 수 있습니다.
김승덕 2009-09-08 00:36:23
안녕하세요 이번에 미래웹포럼 참여를 통해 이곳을 알게되었습니다. 그런데 첫 질문부터 죄송한 질문을 드려야 겠네요.. 혹시 이번에 발표하신 발표자료는 블로그에 게시하여 주시나요? 또하나는 조만영님 홈페이지나 블로그를 알수 있을까 해서 연락드립니다.~
김정옥 2009-09-07 19:50:53
네^^;; 확인해서 해결하겠습니다~ 감사합니다~
2009-09-07 18:28:15
파일 첨부 안했어요. validation만 하면 해결 될겁니다.
김정옥 2009-09-07 18:22:10
답변주셔서 너무 감사드립니다. 죄송하지만 답변메일에 첨부파일이 없어서 송구스럽지만 첨부파일을 다시 보내주실 수 있는지^^;; 부탁드립니다~
김동수 2009-09-05 06:47:36
고민고민 끝에 Daum 홈페이지를 참조하여 컨텐츠로 감싸서 해결을 봤습니다. 말씀 감사합니다. (__)
김정옥 2009-09-05 01:47:55
글을 쓰다 말았네여^^;; 물어볼 것이 정리가 안되어 이메일로 보냅니다. 확인하시고 답변 꼭 부탁드립니다
김정옥 2009-09-05 01:46:38
ie6에서 footer부분에 리스트(ul)을 만들어서 float:left를 시켰는데
김정옥 2009-09-05 01:45:25
ie6에서
2009-09-04 07:27:23
빈 SPAN을 넣지 말고 SPAN으로 콘텐츠를 감싸면 어떨까요? 실제 디자인과 사용된 태그를 보면 더 좋은 생각이 날 수도 있을 것 같아요.
김동수 2009-09-04 05:13:18
최소한의 디자인을 위해 <span></span>을 지정하고 css를 이용하여 어떠한 모양을 만들기도 합니다. 문제없이 잘 됩니다만.. HTML Validator 에서는 오류까지는 아니지만 Trimming Empty 를 내보냅니다. 를 쓰자니 css 제거시 불필요한 태그로 인해 넓게는 통일성, 작게는 용량이 늘어나서 효율성 면에서는 떨어집니다. 현석님이시라면 어떻게 하시겠어요? 조언듣고 싶습니다. ^^
귤아빠 2009-09-21 21:13:08
<body bgcolor="#ffffff" topmargin="50" leftmargin="50"><div style="width:1058px; height:671px; background-color:#FFCC66;"><div style="margin:170px 0 0 327px; background-color:#CCFF99; width:300px; height:100px">a</div></div></body>
귤아빠 2009-09-21 21:11:42
다음 코드를 봐주세요 ie6와 firefox에서 전혀 다르게 나타납니다.
저는 사실 입력 서식에 대해서는 자세하게 고민을 안해봤습니다. 브라우저에 따라서 손댈 수 없는 부분(IE6의 상하 1px 여백, 라디오 버튼 크기 등)이 있기도 합니다. 그래서 그냥 세로 정렬(vertical-align)만 잘 맞추고 높이(height)없이 줄 높이(line-height)에 의존해서 자연스럽게 출력되는게 하는게 좋을 것 같습니다. 이런 경우는 조금 어긋나도 내용 파악이나 이용에 별 문제가 없을 것입니다.
김동수 2009-09-18 19:46:58
항상 친절하게 설명해주셔서 감사합니다.. ^^; http://www.newborndent.com/sample.html 지난번 말씀드린 input text 의 안쪽 여백관련하여 샘플과 http://www.newborndent.com/sample.png 현상을 스냅으로 찍어놨습니다. 제가 원하는건 전 브라우져에서 상/하 1px도 어긋나지 않는 완벽한 디자인을 하고 싶은데.. hack 외에 방법이 없는건지..;; 궁금합니다.
이경섭님, 상세 내용도 접근성 높에 제작이 되어야 하는게 당연합니다. 품질마크 관련해서 질문하신 것이라면 제가 답변드릴 수 있는 입장이 아니니 이해해 주세요. :)
김동수님, 어느정도 차이가 나는지 잘 모르겠지만 서식은 보더나 컬러정도만 바꾸고 마진이나 패딩은 건드리지 않는게 좋습니다. background-position은 제가 알기로는 브라우저마다 차이가 없습니다. URL을 알려주시면 확인이 가능할 것 같네요.
김정옥님, 오페라에서는 메뉴 네비게이션이 나오지를 않아서 서브페이지로 갈 수가 없네요. HTML validation 체크를 해보니 오류가 너무 많습니다. HTML validation은 브라우저 호환성에 있어서 매우 중요하니 오류 수정을 해보시는게 좋을 것 같습니다.
이경섭 2009-09-18 03:25:51
http://www.gntour.com/program/tour/tourView.jsp?currPage=1&AT_SID=tur0008 위 주소가 관광지소개 페이지인데 등록된 갯수가 엄청납니다. 모두 변경 할려니 엄두나 안나서 그런데 꼭 웹접근성으로 상세내용을 작성해야 되는지 고민이 됩니다...
김동수 2009-09-17 21:59:06
INPUT TEXT안에 여백문제가 브라우져마다 특성이 가지각각이라 크로스브라우징이 너무 힘드네요.. 동일한 스타일에 텍스트폼을 파폭과 익스, 사파리와 오페라에서 확인해보니 전부 제각각입니다. 어떻게 해결을 하면 좋을지 조언여쭙고 싶네요.. 그리고 background-position 에 주어지는 % 값도 브라우져 특성을 타는것 같습니다. 아웅... ㅠ.ㅠ
김정옥 2009-09-17 20:30:01
http://121.152.162.52/~dormi/main/main.php 현재 페이지에서는 헤더부분에 이미지가 제대로 맞는데 서브화면에 가면 메인플래시 아래쪽 부분이 떨어져서 이미지연결이 부자연스럽습니다. ie6이나 ie8에서는 문제가 없는데 ie7에서만 적용이 이상하게 되서 문의드립니다^^
사용된 코드를 볼 수 있을 까요? 테스트 해 보니 IE6 포함 거의 모든 브라우저에서 같은 결과를 얻었습니다.
귤아빠 2009-09-12 00:28:35
body에 인라인으로 margin을 주었을경우 ie6에서는 잘 보이는데 firefox에서는 적용이 안되네요. 웹표준 때문인거 같은데 margin에 문제가 있는건지, 인라인에 문제가 있는건지..모르겠어서요..부탁드리겠습니다
자료 올라왔습니다. http://futureweb.tistory.com/14
김승덕 2009-09-08 23:40:43
앗 이렇게 친절하게 말씀해 주실 줄이야.. 넘넘 감사합니다.~~
발표자료는 FWF 홈페이지(http://webappscon.com/fwf/2009/)나 차니님 블로그(http://channy.creation.net/blog/)에 올라갈 예정입니다. 조만영님은 트위터(http://twitter.com/manyoung_cho)에서 팔로잉 하실 수 있습니다.
김승덕 2009-09-08 00:36:23
안녕하세요 이번에 미래웹포럼 참여를 통해 이곳을 알게되었습니다. 그런데 첫 질문부터 죄송한 질문을 드려야 겠네요.. 혹시 이번에 발표하신 발표자료는 블로그에 게시하여 주시나요? 또하나는 조만영님 홈페이지나 블로그를 알수 있을까 해서 연락드립니다.~
김정옥 2009-09-07 19:50:53
네^^;; 확인해서 해결하겠습니다~ 감사합니다~
파일 첨부 안했어요. validation만 하면 해결 될겁니다.
김정옥 2009-09-07 18:22:10
답변주셔서 너무 감사드립니다. 죄송하지만 답변메일에 첨부파일이 없어서 송구스럽지만 첨부파일을 다시 보내주실 수 있는지^^;; 부탁드립니다~
김동수 2009-09-05 06:47:36
고민고민 끝에 Daum 홈페이지를 참조하여 컨텐츠로 감싸서 해결을 봤습니다. 말씀 감사합니다. (__)
김정옥 2009-09-05 01:47:55
글을 쓰다 말았네여^^;; 물어볼 것이 정리가 안되어 이메일로 보냅니다. 확인하시고 답변 꼭 부탁드립니다
김정옥 2009-09-05 01:46:38
ie6에서 footer부분에 리스트(ul)을 만들어서 float:left를 시켰는데
김정옥 2009-09-05 01:45:25
ie6에서
빈 SPAN을 넣지 말고 SPAN으로 콘텐츠를 감싸면 어떨까요? 실제 디자인과 사용된 태그를 보면 더 좋은 생각이 날 수도 있을 것 같아요.
김동수 2009-09-04 05:13:18
최소한의 디자인을 위해 <span></span>을 지정하고 css를 이용하여 어떠한 모양을 만들기도 합니다. 문제없이 잘 됩니다만.. HTML Validator 에서는 오류까지는 아니지만 Trimming Empty 를 내보냅니다. 를 쓰자니 css 제거시 불필요한 태그로 인해 넓게는 통일성, 작게는 용량이 늘어나서 효율성 면에서는 떨어집니다. 현석님이시라면 어떻게 하시겠어요? 조언듣고 싶습니다. ^^