방명록
891개의 댓글이 있습니다.
댓글 남기기
전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.
전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.
인풋박스와 셀렉트박스들이 익스와 파폭에서 영역이 다르게 잡히더라구요~
그래서 똒같이 padding값을 줘도 높이값이나 가로값이 틀리게 나옵니다~
똒같이 맞춰줄순없나요?
@심라
제가 착오를 좀 했네요. [pre][/pre] 태그 안에 작성해도 소용이 없지요. ㅜㅜ
1. td 안쪽에 있는 다른 모든 내용을 포함하는 div를 하나 더 씌운 다음 position:relative 요소를 주면 되는데 이때 td의 높이는 반드시 지정되어 있어야 합니다.
2. table-layout:fixed 속성은 width 값만을 고정으로 처리하고 height 값에는 영향을 미치지 않습니다. 따라서 모든 브라우저들은 fixed 값에 무관하게 th, td 셀의 높이를 자동으로 결정(콘텐츠 양에 따라) 합니다. 만약 높이값이 지정되어 있고 콘텐츠가 짤렸다면 그것은 fixed 아닌 다른 속성(예: overflow:hidden) 때문일 것입니다.
3. 그 문제는 다른 방법으로 해결할 수 없고 반드시 공백기호   ; 를 넣으셔야 합니다.
@김무건
문제가 무엇인지 정확히 알려주세요.
현재 하나의 div 요소에 class 속성이 두 번 사용되었는데요.
만약 이게 문제라면 다음과 같이 작성할 수 있습니다.
class=”sub_b iePngFix”
한편 iePngFix 라는 클래스는 XE의 성능 저하 문제를 야기하기 때문에 되도록 사용하지 않는 것이 좋습니다. XE 차기 버전에서는 지원하지 않을 것입니다.
@핑크
인풋과 셀렉트 박스는 브라우저에서 제공하는 인터페이스 이기 때문에 애시당초 똑같지가 않습니다. 만약 똑같은 너비와 높이로 제공하려면 width, height 값을 반드시 지정하셔야 합니다. 한편 IE를 비롯하여 대부분의 브라우저들은 select 요소에 height 속성을 지원하지 않습니다. 아마도 파폭에서만 지원하는 것으로 알고 있습니다.
의뢰받은 작업을 진행하던 중에 말도 안되는 마크업이 있길래 넉두리좀 부려봤어요 -_-
[div class="sub_b" class="iePngFix" /][img src="img/left-b.gif"]
layout.html 파일에 [/body][/html] 태그도 들어가고.. 가관이더군요 ㅋㅋㅋ
@김무건
저런… ㅡㅡ; 어찌보면 코드 가이드를 제대로 해주지 못한 제 책임일 수도 있겠습니다. 무건님께서 잘 바로잡아 주세요. ㅎㅎㅎ
XE2 는 CSS 유효성 통과하나요?
CSS 무결성이 형식적이라해도 남다른 퍼포먼스를 보여주는데 말이죵..
정찬명님이 압력좀 넣어주세요 +_+
@김무건
CSS 무결성은 제가 오히려 반대하는 입장입니다. 표준을 지켰다는 점 외에 추가로 발생하는 이득이 거의 없고 무결성을 유지하지 못했다고 해서 발생하는 위험이 거의 없다고 판단하기 때문입니다. 저는 표준을 훌륭한 수단으로 생각하지만 얽매이거나 그것 자체를 목적으로 생각하지는 않습니다.
CSS 무결성을 지킨다고 해서 발생하는 이득이 없다는 것에 저도 동감합니다.
암튼 허세(?)를 부릴수 있잖아요 -_-
결국 쓸떼없이 깔끔떠는 이놈의 성격이 문제입니다.. 에효
@김무건
그렇다고 해서 깔끔한 성격이 나쁜건 절대 아닐껍니다. ^^
안녕하세요 ㅜ ㅜ 결국 고민 끝에 글을 올립니다.
dica_board 제로보드 다운받아서 스킨을 사용하려고하는데
ㅜ ㅜ 스크롤바 색은 어디서 설정을 해서 바꿔야하는건가요;;;;
……..아이프레임에 해도 안되고 스크립트 해도 안되고
……. 막혀서 질질 짜다가 ㅜ ㅜ 올리네요
혹시 글 보시거든… dusdlql@nate.com ㅜㅜ 친추걸어주셔서;;; 설명좀.. 안될까요???
안녕하세요~, 어리버리 개발자 박진욱입니다.
혹, 울트라 캡송 멋진 찬명님 “질문과 답변” 코너 하나 만들어 주시면 어떨까요?
콜록… 방명록에 질문을 남기자니 많이 미안해서… ㅡ ㅁ ㅡ);; 히히힛;
질문!!!
div 넓이를 100%로 하기 싫은데 100%로 먹어버립니다.
좋은 방법이 없을까요?
float으로 해결했는데 좋은 방법은 아닌 것 같궁… 흑흑흑..
레이아웃 관련 궁금증이 생기면… 여기만 생각납니다… ;)
@시안
dica_board 보드는 본적이 없지만, 스크롤에 스타일 주는 방법은 같습니다.
1. 해당 페이지 Body 스크롤 주는 방법은
해당 페이지 해더 테그 사이
[head]
[style]
body {
scrollbar-face-color:orange;
scrollbar-highlight-color:blue;
scrollbar-3dlight-color:black;
scrollbar-shadow-color:red;
scrollbar-darkshadow-color:blue;
scrollbar-track-color:yellow;
scrollbar-arrow-color:red;
}
[/style]
[/head]
를 주면 되고요,
2. iframe 스크롤에 스타일을 주는 것은 해당 아이프레임에서 호출되는 페이지에
위처럼 해더 사이 스타일이 정의 되어 있으면 됩니다.
3. td나 div 테그에 스크롤 색상 정의는
[div class="divScroll" style="height:100px; width:200px; border:1px solid #111111; overFlow-y:scroll"]내용…[/div] 되어 있다면.. div에 class나 id를 부여하여
.divScroll {
scrollbar-face-color:orange;
scrollbar-highlight-color:blue;
…..
}
하면 됩니다.
안녕하세요~ 어제 갑자기 전화드려 놀라셨죠ㅎㅎ
정말 유용하게 잘 배우고 있습니다^^
원래는 감사인사 드리려 쓴건데..질문까지 있어요;;
font-family:Verdana, Gulim;
로 했을경우 영문보다 한글이 위로 올라가는 현상이 생기는데요.
방법이 없나요?
아….그리구요….ㅠ
셀렉트박스 소스로 수정중인데요..
부분부분 (예;필수입력사항) bg를 넣고싶은데요. 제가 수정하면 모든 셀렉트가 봐뀌어서….
어떻게해야하나요? ㅠㅠ
정말 초보라 막막합니다ㅠㅠ
@박진욱
저 대신 좋은 답변 감사합니다. ^^
원하시는 레이아웃이 정확하게 무엇인지 알 수는 없지만 div 너비가 100%가 되지 않도록 하는 방법은 세 가지가 있죠.
알고계신 방법인 float. 이건 float 해제만 잘 해주시면 되죠.
또는 display:inline 으로 변경.
또는 좌우에 마진값을 설정.
이것 말고 또 다른 방법은 생각이 나지 않는데요. ^^
@쪼꼬
질문을 두 개 주셨는데 모두 이해를 못하고 있습니다. URL을 적어서 링크를 해주시거나 또는 그림으로 표현해 봐주시겠어요?
하하;;
설명이 애매했죠?
http://blog.naver.com/qdrqdr/20107070975
이것처럼 강조부분에 bg컬러를 넣고싶어요.
또,,,none상태로 글씨를 보며 영문과 한글의 높이가 틀리네요..
@정찬명
멋쟁이~ !! “display:inline” 로 해결이 되었습니다.
즐거운 금요일! 즐거운 주말 보내시길 바랍니다~ !
@쪼꼬
이미지가 아니라 HTML를 볼 수 있어야 정확히 도움을 드릴 수 있을 것 같습니다. ㅋ
이미지를 보고 답을 드리는 것은 예측이지, 정확한 답이 될 수 없을 것 같습니다.
예측이라도 한다면,
1. Select Option 에 강조 하는 방법은
[select]
[option]사과[/option]
[option style="background-color:yellow"]포도(강조)[/option]
[/select]
2. 한글과 영문 폰트 높이가 틀린 것은(이 부분이 소스를 봐야 할 것 같은데)
다른 스타일과 충돌 나는 것 같습니다.
Firefox, Explorer 6, 7, 8에서 다음과 같이 코딩 했을 때 높이가 어긋남이 없었습니다.
즉.. 다른 영향으로 높이가 틀린 것 같습니다.
코딩 내용은 다음과 같습니다.
=====
[!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" /]
[/head]
[body]
[select style="font-family:Verdana, Gulim; font-size:12px"]
[option]VERDANA 굴림[/option]
[option style="background-color:yellow"]VERDANA 굴림(강조)[/option]
[/select]
[/body]
[/html]
=====
@쪼꼬
한글과 영문의 수직정렬이 맞지 않는 것은 IE6 브라우저의 문제 인데요. 이 문제는 저도 해결 방법을 모르겠습니다. 혹시 해결하시면 저도 좀 알려주세요. ^^
특정 셀렉트 상자의 배경색을 바꾸고 싶다면 다음과 같이 해보세요. 필수 선택이라 하셨으니 예를 들어 required 라는 클래스를 HTML div 요소의 class 값으로 추가 합니다.
HTML 수정 전
[div class="select open"]
HTML 수정 후
[div class="select required open"]
.required 라는 클래스는 다른 클래스와 구별되는 이름이기 때문에 이제부터 CSS는 .required 라는 클래스만을 선택해서 뭔가 다른 스타일을 부여할 수 있지요. 다음은 CSS를 이용하여 .required 라는 요소를 선택하고 배경색을 넣어주는 과정입니다. 다음 코드를 CSS 파일의 가장 마지막 줄에 추가해 보세요. 마지막 줄에 추가하는 이유는 보다 높은 우선순위를 가져서 기본적으로 .select 라는 클래스에 적용되어 있는 배경색 #fff(흰색) 값을 덮어 쓰기 위함 입니다.
.required{ background:#eee; }
@박진욱
쪼꼬님이 원하던 답과 조금 다른 설명 같지만 어쨌든 감사합니다. ^^
정찬명 선생님~ ^^
안녕하세요? 저는 대구에서 일하고 있는 수석디자이너 김근희입니다.
혹시 웹표준관련 기술전수좀 해주시면안되나요?
선생님 대구오실 기회는 없어신가요?
선생님께 좀 배우고싶습니다!! 꼭이요~~~
부탁드립니다!
참 네이트온 친구요청합니다 ㅋ
제 아이디는요 dododh앳nate.com 입니다.
친구 추가좀 부탁드립니다!!! ~~
@김근희
불러만 주시면 대한민국 어디라도 갑니다. ㅎㅎㅎ. 제가 지금은 네이트온을 사용하지 않고 있습니다. 연락이 필요하시면 dece24앳gmail.com 으로 부탁 드립니다. ^^
정찬명님~
블로그소스랑 질문에대한 친절한 답변으로 잘해나가고있어요~
너무 감사드립니다~
앞으로도 좋은 자료보러 자주올거 같아요~^^
즐거운 한주 보내십쇼~
@쪼꼬
넵, 활기찬 한 주 되세요. ^^
html, css 코딩 의뢰 받으면서 지내고 있답니다.
남의 일 맡아서 하는건 꺼리는 편인데 코딩하는 일이 적성에 맞는 것 같습니다.
아무튼 css 코딩은 브라우저 호환성 / 문법만 잘 지키면 되는 줄 알았는데..
용량을 줄이고 알아보기 쉽게 하는 것도 요령이 있더군요.
전에는 이해할 수 없었던 정찬명님 코딩 스타일에 이젠 조금 눈이 뜨입니다 -_-
그리고 정찬명님 코딩이 발전하는 모습을 보면 신기하더군요 히히
정찬명님 코딩을 자주 접할 수 있으면 좋겠어요.
일하다가 잠깐 쉴겸 횡설수설하고 갑니당!!
@김무건
저는 아직도 제 코딩 스타일에 솔직히 자신이 없습니다. 더 좋은 코딩 방법이 있다고 믿고 있어요. 그걸 좀 찾아주세요. ^^
안녕하세요~~
뜬금없이 궁금하게 생겼는데.. 마땅히 물어볼곳이 없더라구요;; 딱 생각난곳이 이곳인데.. ^^;;;
그뭐지.. 외국사이트들을 보다보면요.. 확장자가 (파일명.html)로 뜨는 페이지들이 많은것같은데요
이렇게 쓰는 이유가 있나요? 하나하나 .html로 통으로 페이지를 작성할리는 없을거같고..
db연동하고 하는것보면 jsp나 asp php일거같은데..
혹시 seo검색쪽에 유리한건가.. 음..
보통 어떤방법으로 (파일명.html)으로 표시하게 하나요?
제가 생각해본것들은..
1.확장자가 .html이라도 jsp언어(인클루드 등)가 먹히게끔.. 서버단에서 설정.. (방법은모름–;;)
2.jsp로 다 작성한다음에.. 연결되는 주소만 xml로 잡아줌..;; (방법은모름–;;)
이부분 너무 궁금한데.. 뭐라고 검색해서 정보를 얻을지도 막막하고해서;;
자문을 구해봅니다 ㅜㅜ
예를 들면 이런페이지에요 ^^;;http://www.armstrong.com/rescabam/na/cabinets/en/us/cabinets-photo-gallery.html
@elles
서버측 스크립트를 사용하는데 있어서 파일 확장자는 제한이 되지 않는다고 합니다. 서버측 설정에 따라서 특정 확장자를 지닌 파일에 어떤 종류의 서버측 언어라도 사용할 수 있다는 뜻이죠. 따라서 어떤 서버측 언어로 만들어진 페이지라 할지라도 *.html, *.do 또는 *.nhn과 같이 확장자 이름을 새롭게 만들어 사용하는 것까지도 가능하다고 합니다. 물론 서버측에서 어떻게 설정하는지 구체적인 기술은 제 전문 분야가 아니라서 저도 잘 모르겠습니다. ^^;
아아.. 이쪽으로 알아보면 되겠군요 ^^
답변 감사합니다~ 꾸벅! 수고하세용
http://siso.wikion.com/1100
혹시 위의 주소 해결방법 아시는 분 알고 계시면 소개나 해결방법 조언 구합니다.
부탁드립니다.
정찬명님 안녕하세요~ 저는 지금 웹표준을 공부하고 있는 학생입니다^^;
다름이 아니라 이상한 현상을 발견했는데 혹시 해결책을 아실까 해서 질문드려요~
컨테이너안에 블록엘리먼트를 만든후, 블록엘리먼트에 마진값을 주면 컨테이너 전체가 마진값을 먹습니다
..sdad…
#container{..}
#north{margin-top:20px;…}
파폭, IE, 크롬 다 그렇게 먹네요ㅜ.ㅜ
사투끝에 해당 블록엘리먼트를 float:left로 띄우면 그런 현상은 사라지더군요
그러나 float:none일 경우는 어김없이 컨테이너가 마진값을 먹어버리는 현상이…;
원인과 해결방안을 알고 싶습니다..감사합니다~!^^;
@ㅇㅅㄱ
브라우저 오류가 아닙니다. 이런 현상을 마진 통합 현상이라고 합니다. 수평 마진은 예상했던 대로 작동하나 수직 마진은 예상했던 대로 동작하지 않을 것입니다. 수직 마진에 대하여 조금 더 자세히 이해할 필요가 있습니다.
형제끼리 또는 부모와 자식간에 발생하는 수직 마진은 마진끼리 더하기가 되지 않고 인접한 마진끼리 서로 비교해서 큰 값 하나만 적용이 되는데 이런 현상을 마진 통합이라고 합니다.
.A { magin:100px 0; }
.B { magin:50px 0; }
일단 형제간의 마진 통합을 설명할께요. A와 B라는 가상의 블럭이 형제 관계로 존재한다고 가정합니다. A라는 상자의 수직 마진이 100px 이고 B라는 상자의 수직 마진이 50px 이라 칩시다. 상식적으로 계산하면 A라는 상자와 B라는 상자 사이에는 150px의 마진이 존재해야 하는데 그렇지 않다는 것이죠. 50px과 100px 가운데 100px이 더 크기 때문에 A의 아래쪽 마진인 100px만 적용이 됩니다. B는 위쪽 마진을 포기한 것이구요. 이게 형제간 마진 통합의 예 입니다.
.P { margin:50px 0; }
.C { margin:100px 0; }
다음은 부모 자식간의 마진 통합 입니다. P라는 부모와 C라는 자식이 존재한다고 가정합시다. 부모인 P는 수직 마진이 50px 입니다. 자식인 C는 수직 마진이 100px 입니다. 그렇다면 P와 형제 관계에 있는(C에게는 삼촌뻘) 녀석들은 P와 얼마나 멀리 떨어져 있어야 할까요? 일단 정답은 상황에 따라 다르다 인데 P 요소가 수직 방향으로 padding, border가 존재하지 않는다면 P는 형제들과 수직 방행으로 100px 떨어지게 됩니다. 왜냐하면 부모와 자식 사에에 padding, border가 존재하지 않기 때문에 수직 마진이 통합되어 버린 것입니다. 자식의 마진 100px이 더 크기 때문에 부모는 50px의 마진을 버린 것이죠. 이런 현상을 부모 자식간의 마진 통합이라고 합니다. 만약 부모 P 요소의 수직 방향(상하)에 마진 통합을 방해하는 padding, border가 존재한다면 마진 통합 현상은 발생하지 않을 것입니다.
마진 통합이 양수끼리 또는 음수끼리 통합될 때에는 계산하기가 쉽습니다. 양수든 음수든 더 큰 절대값(100px > 50px | -100px > -50px)을 지닌 마진이 적용이 되니까요. 그러나 양수와 음수값이 서로 만나게 되는 경우 절대값은 의미가 없고 그대로 샘을 해서 계산하면 됩니다. 예를 들어 100px 마진과 -200px 마진이 만나면 -100px의 마진이 남습니다. 양수 마진과 음수 마진이 만났을 땐 그냥 이렇게 100-200= -100 계산해 버리시면 돼요.
왜 이렇게 했는지 곰곰히 생각해 보면 통합하지 않는 것보다 훨씬 효과적이라는 것을 깨닫게 되실껍니다. hx 요소는 기본적으로 수직 마진이 좀 크고 p 요소는 좀 작지요. 이 두 요소가 형제 관계로 만났을 때 마진이 통합되어 버리지 않으면 엄청 큰 마진이 생기게 됩니다. 따라서 마진은 무조건 더하지 않고 큰 값 하나만 유효하다 라는 원칙으로 하여금 다양한 요소들이 부모 자식 또는 형제 관계로 만나게 되는 경우에 자연스러운 마진을 가질 수 있게 됩니다.
지금 설명드린 내용은 모두 CSS 표준 명세에 따른 것입니다. 이렇게 렌더링 하지 않는 브라우저들은 표준 스펙을 제대로 구현하지 못한 것입니다. float된 요소와 float되지 않는 요소는 서로 다른 층에 떠 있기 때문에 마진 통합 현상이 발생하지 않습니다.
한동안 바뻐서 방문못했다가 방명록에서 좋은 정보들을 보고 가네요
많은 질문 답변 달아주신다고 바쁘시겠어요 위키 Q&A라도 하나 만드셔야겠어요 ㅋㅋ
그럼 저도 아는건 답변거들어서 ㅎㅎ
성민장군의 알림…
나의 방명록과 정찬명 님의 방명록의 가장 큰 차이!!! 난 정말 진정한 방명록이다. 안부인사들만~~ 찬명님은 질문답 게시판… 따로 게시판을 만드셔야겠어요. 거의 레퍼런스 수준이군요~ 프린트해야겠어요~…
@HYLA
그런 게시판은 이미 CDK에 있기 때문에 저는 그곳을 소개하는 것만으로 족하다고 생각합니다. ^^
ㅎㅎ;; 감사인사 드리러 왔습니다~
마진통합에 대한 것 배우긴 했는데 실제 코딩에서 부딪치니 다 까먹고 초당황하게 되네요^^;
여하튼 장문의 답변에 정말 감동먹었습니다. 늘 좋은 것을 얻어가는 곳 정도로만 인식했는데 이렇게 막막할 때 직접 새벽에 답변해주셔서 얼마나 감동했는지..T_T
감사합니다~ 늘 행복하세요 :)
초면에 실례합니다.
filter:alpha(opacity=75) 이런 CSS를 했더니 익스플로러 8을 적용되는데 크롬에서는 적용이 안되어 그러는데 filter:alpha(opacity=수치) 을 CSS 표준이 아닌가요? 아니면 제가 잘못쓴 것인가요?
질문을 드려 죄송합니다.
웹표준 코딩은 디자인 영역일까요 개발자 영역일까요?
개발자
@백전백승
filter는 표준이 아니라 IE 전용 문법 입니다. 따라서 다른 브라우저에는 적용되지 않습니다. 투명도를 모든 브라우저에서 적용하시려면 다음과 같이 작성해 보세요.
.example { opacity:0.75; filter:alpha(opacity=75); }
CSS3 문법과 IE 전용 확장 문법을 함께 사용함으로써 모든 브라우저에서 동일한 표현이 가능하게 됩니다.
참고 – http://naradesign.net/ouif/css3/presentation.html#s19
@치릿
많은 분들이 다양한 의도로 이런 질문을 많이 해주시는데요. 일단 어느 한 쪽의 영역이라고 단정적으로 말하는 경우는 옳지 않다고 생각합니다. 직무를 분류하는 것은 처한 조직의 상황이나 개인의 능력 여하에 따라 달라지는 것이기 때문입니다. 둘 다 일 수도 있고 둘 다 아닐 수도 있는 것이죠.
안녕하세요~ 여기에 이런 질문 드려도 되는지 모르겠지만 ㅠㅠ
자바스크립트로 스크롤 제어하는 문제인데요 오른쪽과 하단에 스크롤이 발생했을 경우에
마우스 휠을 돌렸을때 오른쪽 하단 스크롤이 동시에 움직이는데요,
혹시 따로 제어할 수 있는 방법은 없을까요? 답변 좀 부탁드리겟습니다.
휠사용시 하단이 움직이고 우측스크롤은 온클릭으로 직접 내려서 사용하려고 하는데요.
가능할까요? ^^;; 방명록인데 급한 나머지 질문 올렸네요… 죄송합니다 ㅠㅠ
@익명
잘 모르겠습니다. ^^
ㅋㅋ 네.. 감사합니다~
저는 어제 HTML5 오픈 컨퍼런스에서 어제 정찬명님께서 해주신 말씀때문에 적잖이 충격받았습니다ㅎㅎ;
이 문제에 대해 질문드리려 했지만 세번 손 올리는 동안 질문자에 선택되지 못했네요ㅠ
IE6의 문제는 표준에 대해 지켜지지 않은, 보안에도 굉장히 취약한 브라우저인데 이 브라우저의 사용성을 왜 지원해줘야 하는지 궁금합니다.
W3C의 이념이 Web for All 이지요. 표준이 있음으로써 이것이 가능하게 되는 것인데 Web for All에 반하는 비표준 브라우저를 지원해줘야 하는 이유가 있나요?
만약 FireFox, Safari, Chrome 등이 표준을 지향하지 않고 개별적인 방향으로 개발해 나갔다해도 모든 웹브라우저의 크로스브라우징을 지원해야 한다고 말씀하실 수 있으신지 궁금합니다.
정말 네이버처럼 큰 사이트가 아닌 이상 개별 개발자들이 정말 표준을 정확히 지킨 사이트에 대해 자부심을 가지고 IE6에 대해 지원하지 않는다고 하는 행위가 올바르지 않는 것 인가요?
사실 가장 큰 충격은 우리나라를 저희나라로 표현하신 것 이었습니다–; 뒤에선 꽤 수군거렸는데…
아, 그리고 IE6때문에 웹의 기본 정신이 유린되고 오히려 우리나라에서 웹표준, 웹접근성 발전에 저해되고 있다는 사실은 부정하시지 않으리라 생각이 듭니다.
IE가 웹표준을 지원하는 개발 도중의 과도기적 브라우저라면 저도 이렇게까지 생각하진 않았을텐데 IE6 브라우저를 끝으로 개발팀을 해산시켰다는 부분때문에 IE6을 좋게봐줄수가 없군요..ㅠㅠ
감정적인 댓글 정말 죄송합니다. 감정적인 부분을 지우고 완만하게 수정하려 했는데 수정이 불가능하네요..ㅠ
저는 정찬명님을 절대 싫어하거나 하지 않습니다. 오히려 나라디자인에서 많이 배우고있는 초짜에 불과합니다. 그저 생각하느 어느 한 면이 다른 사람이 감정조절을 잘 못했구나 하고 생각해주신다면 감사할 따름입니다..
@익명
‘우리나라’라고 했어야 할 표현을 ‘저희나라’라고 표현한 것은 제 실수 입니다. 코멘트 감사합니다. 앞으로 용어 선택에 더욱 주의해야겠습니다.
IE6를 지원해야 한다는 발언에 대하여 저는 다음과 같은 생각을 하고 있습니다.
Q:
표준도 안 지키고 보안에 취약한 브라우저라도 지원해 줘야 하나?
A:
표준도 안 지키고 보안에 취약한 브라우저라도 사용자가 있다면 지원해 줘야 한다고 생각합니다. 모든 브라우저들이 표준을 지키고 보안이 완벽하면 좋겠지만 세상에 그렇게 완벽한 브라우저는 존재하지 않습니다. 현존하는 모든 브라우저들이 저마다 다른 스펙을 지니고 저마다 단점도 있습니다. 표준의 구현 정도도 다르고 보안성도 다르지만 사용자들이 많이 사용하면 업계에서는 사실상 표준이 되는 것입니다. 불행히도 우리나라 현실에서 IE6가 그런 샘입니다.
만약 여러 종류의 브라우저들이 표준을 지키지 않고 표준 스펙을 저마다 제각기 다르게 해석해서 구현해 놨다면 저는 시장에서 점유율이 높은 브라우저부터 타겟으로 선정하여 우선 지원할 것입니다. 표준을 잘 지킨 브라우저라고 해서 타겟으로 선정할 수가 없습니다. 표준을 아무리 잘 지켜도 사용자들이 써주지 않으면 무의미 하니까요. 그렇다고 해서 제가 IE6 이외의 브라우저를 지원하지 않는것은 아닙니다. 모두 지원하도록 구현하고 있습니다.
IE6에 대한 부정적인 견해들에 제가 반대하는 것이 아닙니다. 저도 IE6가 웹의 발전을 저해하고 있다고 생각합니다. 하지만 그것을 이유로 사용자에게 피해가 돌아가도록 하는것은 옳지 않다고 생각합니다.
그리고 W3C의 ‘Web for all’ 이라는 문장 속에는 ‘하위 호환성’도 포함되어 있는 것으로 해석해야 합니다. 웹 표준의 목표가 상호 운용성인데 상호 운용성은 하위 호환성을 포함하고 있다는 의미 입니다. IE6가 ‘Web for all’에 반하는 비 표준 브라우저라고 말하는 것이 맞는 말인지는 의구심이 듭니다. 표준 준수율이 낮은 브라우저라는 사실은 맞지만 IE6는 ‘Web for all’ 이라는 이념에 반기를 들었거나 반대하는 브라우저는 아니기 때문입니다.
우와 좋은 정보들이 정말 정리가 잘되어있네요. 잘 보고 갑니다. ㅋㅋ
방명록에 질문글 남겨도 되나 싶은데요;;;;ㅠ_ㅠ 너무 궁금해서요…;;
이미지위자드라는 사이트에서 jQuery+CSS Tree Navigation. <- 이트리메뉴를 다운받았어요. 출처가 이곳으로 나와있네요;ㅁ;
페이지에 접속하면 항상펼쳐있도록 바꾸고 싶은데 어떻게 하면되는지 궁금합니다. ㅠ_ㅠ
메뉴가 다 접혀있어서 모두 펼쳐있도록 하고 싶은데 좀 가르쳐주시면 감사드리겠습니다;ㅁ;
@아인
tree.js 파일의 7 라인을 다음과 같이 수정해 보세요.
// tree.find(‘li>ul’).css(‘display’,'none’); // 이 라인은 주석으로 처리합니다.
tree.find(‘li’).addClass(‘open’); // 이 라인을 추가 합니다.
7라인은 tree 목록의 모든 ul을 찾아서 display:none 시키고 있기 때문에 이걸 지워야 해요.
8라인은 tree 목록의 모든 li를 찾아서 open 이라는 클래스를 추가합니다.
답글 감사드립니다 ;ㅁ;
그런데 가르쳐주신대로 수정을 했는데 메뉴 점선들이 수정하기전 접힌상태와는 다르게 밑에 늘어져있네요. ;; 이것을 접힌상태일때처럼 점선을 똑같이 나타나도록 할수는 없는지 궁금합니다.
@아인
정확하게 이해를 못하고 있습니다. 예제 URL을 보여주실 수 있을까요?
수정하기전 html파일을 열어보면 모두 접힌상태로 뜨는데요.
수정하고나서 모두 펼친상태로 뜨지만 점선이 수정하기전과는 다르게
ㄴ메뉴
ㅣ 이런식으로 점선이 밖으로나와있습니다.
방금 해결했습니다;ㅁ;
tree.find(‘li>ul’).css(‘display’,'none’); 부분을
tree.find(‘li>ul’).css(‘display’,'block’); 으로 바꾸니깐 되네요!!
http://yeoul.coreworks.co.kr/treemenu.gif 예제이미지 url입니다.
HTML 문서 전체를 HTML5로 바꾸는 것이 아닌, 단순히 xhtml1-transitional DOCTYPE을 로 바꾸는 작업으로 ie8 이하버전에서 발생하는 문제가 있나요?
테스트해보니 ie6에서도 표준랜더링으로 작동하는것은 확인했습니다. 그런데 xhtml1-transitional 사용 시에는 별 문제 없었던 문제가 발생할것 같은 왠지모를 불안감이 있습니다; 혹시 알려진 문제가 있는가 궁금해서 여쭤봅니다!
아이고! 꺽쇠를 넣었더니 을 로 이렇게 나와버렸네요–;
xhtml1-transitional DOCTYPE을 [!DOCTYPE html]로 바꾸는 작업을 말하는 거였습니다 :) ;;;
@아인
어떤 브라우저에서 테스트 해보셨는지 모르겠지만 저는 발생하지 않더라구요. 일단 문제가 해결 되었다니 다행입니다. ^^
@익명
현재 문서의 마크업을 고스란히 두고 DTD만 XHTML1에서 HTML5로 왜 바꾸시는지 그 의도를 잘 모르겠지만 이렇게 DTD만 변경하는 경우 HTML/CSS와 관련된 렌더링 호환성 문제는 없는 것으로 알고 있습니다. ^^
@정찬명님
마크업을 냅둔 상태에서 DTD만 바꿀려고 했던건 DOM Scripting의 저자인 Jeremy Keith가 작성하고 Brad Colbow가 그린 “마크업의 오해”라는 만화를 보고나서 궁금했기 때문입니다. 누군가가 저에게 같은 질문을 해서 더 궁금해졌기도 했구요 ㅎㅎ;;
만화 내용에 나오죠. “아직 HTML5가 잘 지원되지 않잖아요.” “HTML5는 하위 호환성이 가능합니다. 기존 XHTML 문서를 간단히 HTML5로 바꿀 수 있습니다.”
대충 이러면서 DTD 문서 선언만 띡 바꿔주죠. 그러면서 “쉽죠~잉?”
이러고 끝나길래 궁금했습니다 –; ㅎㅎㅎㅎ
@익명
말씀하신대로 만화에서는 HTML5가 하위 호환성이 있다는 것을 쉽게 풀어보려고 했던것 같네요. 그런데 그런 것을 HTML5라고 부르기에는 뭔가 아쉬운 구석이 있죠. ㅎㅎ
책으로 캐스케이드에 대해서 보고있는데
개발자 -> 사용자 -> 브라우져 중에
개발자가 정의한 스타일시트가 최우선으로 적용되는거 아닌가요??
규칙을 정렬한다는 말이 무슨말인지 잘이해가 안되네요
이게 중요한가요??
개발자가 정의 하지않은 부분만
사용자 정의 스타일시트로 적용되고 그렇지도 않으면 브라우져 디폴트값으로 내려간다는말
같은데.. 다른의미인가요?
@학생
어떤 책을 보셨는지 모르겠지만 설명이 참 어렵게 된 모양이군요. 브라우저, 개발자, 사용자 순으로 가장 나중에 언급한 사용자 정의 스타일이 우선순위가 가장 높습니다. 규칙을 정렬한다는 말은 저도 무슨말인지 모르겠네요.
정찬명님 개발 환경이 궁금합니다!
iMac을 쓰시나요!? 아니면 맥북으로 개발 하시나요!? 어떤 에디터를 사용하시는지도 궁금해요..
@binbyz
트위터에 답변 드렸습니다만 윈도우즈 환경에서 드림위버를 주로 사용합니다. 맥북은 있지만 주로 테스트 용도로 사용하고 있습니다. ^^
에구 본의아니게 두 번 질문 올렸네요… 여기다 올리고나서 발견한 사실!
“어.. 여기는 삭제가 안되는군…” ㅋㅋ;
실례하면서 감사합니다 ^^;
@binbyz
수정이나 삭제 기능을 포함시키려면 비밀번호를 반드시 받아야 해서 아예 그런 기능이 없습니다. 이해해 주세요. ^^
헤드퍼스트 html with css xhtml 을 보고 갓 입문한 학생입니다.
재미있긴한데 책의 심도가 아쉽네요 ㅎㅎ
좀더 깊게 파고들고싶은데 좋은 책이나 사이트 하나 추천좀 해주시면 매우 감사하겠습니다 ㅎㅎ
수고하십니다.
hover에 대해서 말입니다.
img 태그에 hover가 CSS2인가요 ? 예로 img:hover라 사용하는 것이요. 저는 a에 hover를 써서 a:hover만 되는 줄 알았는데 a에만 적용되는 것은 CSS1인가요?
수고하세요.
@익명
추천도서와 관련해서 아래 포스팅 했던 내용을 참고해 주세요.
웹 표준, 추천도서 Best 5!
http://naradesign.net/wp/2007/07/17/124/
물론 이 밖에도 좋은 책은 많습니다. ^^
@백전백승
:hover 라는 가상선택자는 이미 CSS1 버전에서부터 지원하던 것입니다. 다만 IE6 브라우저가 a:hover 만을 지원하는 버그가 있습니다. IE6를 제외한 다른 브라우저들은 다른 모든 요소에 :hover 가상선택자를 지원하고 있습니다.
이제 슬슬 새 포스팅이 나올 타이밍이군요 (뜨끔)
방명록 발도장 찍은지도 꾀 됬군요 (뜨금 to)
@김무건
요즈음은 강의 준비하느라고 바빠서 영 포스팅 할 여유가 없네요. 강의 한번 나가려면 교재 만드는게 아주 큰 일입니다. ㅡㅡ;
저도 교재보고 싶어요 굽신굽신
안녕하세요…8월에 시작하는 웹접근성심사관련 대비하는 1人으로 작업을 하다 궁금증이 있어 이렇게 글을 올립니다.
로그인 시 실명인증을 받는 step부분이 있습니다.
실명인증제공하는 회사와 연계되는 부분이라 정보제공방식 요청폼에 따라 작업할 수 밖에 없는 상황인데….이 방식이 스크립트 방식입니다.
post방식으로 전달되는 값형식인데.. 스크립트 미제공시에는 실행할 수 없는 상황입니다.
자바스크립트 의존형 심사항목에 위배되는건지….위배가 된다면 대체방법으로는 어떤것이 있는지..(혹여….스크립트와 상관없이 실명인증이 제공되는 회사를 선택하세요..라는….답변은..정말 슬픕니다…ㅠ.ㅠ)
정말정말 궁금증에 목이 탑니다………어떻게 처리해야할지 즐겁고 행복한 답변 부탁드릴께요..
날이 덥습니다. 더위 조심하시고…건강도 조심하시고…궁금증에 대한 좋은 소식도…부탁드려요!!
@김무건
교재라고 해봐야 제 블로그 포스트 정리한게 전부 입니다. 새로운게 없답니다. ㅎㅎ
@최미란
이하 특정 기관과 관계없는 개인적인 견해이므로 특정 기관의 견해로 오해하지 않으시길 바랍니다.
본래 자바스크립트 의존성 문제는 이론적으로 웹 접근성 분야에서 다룰 수 있는 것이 아니라 상호 운용성 측면에서 다뤄야할 문제인데 정보화진흥원의 품질마크인증을 받으려면 자바스크립트 의존성 문제 가운데 일부를 해결해야 합니다.
첫째, form을 전송하는 form 요소와 action 속성의 기능을 JS에 완전히 의존하지 않아야 합니다.
둘째, form을 전송하는 submit, image 타입의 input 버튼의 기능을 JS에 완전히 의존하지 않아야 합니다.
셋째, a 요소로 작성된 링크의 기능을 JS에 완전히 의존하지 않아야 합니다.
넷째, title 요소로 작성된 문서의 제목 출력을 JS에 완전히 의존하지 않아야 합니다.
품질마크는 자바스크립트가 완전히 차단된 환경을 전제하지는 않습니다. 다만 위와 같이 4가지 항목만은 자바스크립트에 완전히 의존하는 코드를 작성하지 않도록 지표로 삼고 있습니다.
실명인증이 첫째 항목에 대하여 완전히 JS에 의존적이라면 원칙적으로 이 항목에서 감점입니다. 그러나 이런 불가피한 상황이 단 한 곳에만 존재하고 다른 모든 페이지에서 JS 의존성 문제를 완벽하게 처리했다면 품질마크인증을 받을 수 있습니다.
품질마크 인증은 각 지표별로 100점이 아닌 95점을 최소한의 만족기준으로 삼고 있는데 오류 1건 발견시 5점씩 감점하기 때문입니다. 접근성 관련 오류가 1건만 존재해서 95점을 받을 수 있다면 이 지표를 통과할 수 있다는 거죠. 5점은 사실상 버퍼나 마찬가지 입니다.
한편 원칙과 현실 사이에 존재하는 차이에 관한 문제를 정보화진흥원도 인지하고 있습니다. 사이트 운영주체의 의지와 관계없이 접근성 저해요소가 포함된 페이지를 어떻게 평가해야 할지 진흥원 측에서도 골머리를 앓고 있는 중입니다.
이런 현실적인 문제를 인정 하자고 하면 실제로 접근성이 낮은 사이트임에도 불구하고 품질마크를 부여하는 것이 문제가 되고 인정하지 않으면 현실을 무시한 융통성 없는 품질마크 운영이 되니까요.
그리고 만약 진흥원이 어떤 결정을 내린다고 해도 사실상 외부에 공개하지 않을 수 있습니다. 어떤 결정을 하더라도 문제가 될 수 있으니까요.
아쉽지만…..그렇네요….
원칙과 현실사이 존재하는 차이라는 부분도 차츰차츰 좋아질것이고..앞으로의 웹환경은 모든이에게 평등할수있을꺼란 믿음으로 오늘도 열심히 화이팅하겠습니다.
친절한 답변 감사합니다…..오늘도 즐겁고 청명한 하루 보내세요..^^
많은 자료와 정보 팁을 공유해주신 덕분에
늘 이곳에서 많은 도움을 얻고 있습니다.
감사합니다.
나라디자인에 와서 늘 사람되어 돌아가지만 한가지 바램이 있어서 남겨여
여기의 이 폰트는(나눔폰트인가여?) 컴퓨터,모니터 마다 조금씩 번지게 나와서요.
왜 찬명님께서 굳이 가독성이 가변적인 이 폰트를 쓰시는지 궁금하면서
돋움이였으면 하는 지극히 개인적인 바램을 적어봅니다.
남의 블로그에다 이래저래 말많져 ㅎㅎㅎㅎ
추가로 dece24앳gmail.com로 번져보이는 화면 캡쳐해서 보냅니다~
@이혜란
옳은 말씀 같아요. 저도 그게 항상 마음에 걸렸거든요.
예전에는 돋움을 좋아했는데 지금은 동글 동글한 굴림이 더 좋아져서 그냥 시스템 기본서체를 적용했습니다.
항상 응원해주셔서 고맙습니다. ^___^
좋은 정보 유용하게 잘 보고 있어요
일하면서 도움이 많이 되요
평소에 궁금했던것들이 잘 정리되어있어서
열심히 공부하고 있습니다.
고맙습니다~
@김진영
큰 격려가 되었습니다. 저도 고맙습니다. ^^
안녕하세요 언제나 정찬명씨 글이 많이 도움이 되는 한사람입니다..
다름이 아니라 한가지 여쭈어 볼게 있어서여 문의 드립니다.
저희가 이러닝 콘텐츠를 제작을 하고 있는데. 자바스크립트를 거의 쓰지 않고 작업을 할려고 합니다.. 여기서 한가지 문제가 걸리는게.
자바스크립트를 쓰지 않고 팝업창이 사이즈 조절이 되어서 예)400*400 이런 사이즈로 띄우수가 있는건가 싶어서여.. 제가 알기로는 _blank 말고는 없는 걸로 알고 있는데. 혹시 다른 기술ㅇ ㅣ있는건지??
그럼 답변 해주시면 감사하겠습니다.
@이영진
자바스크립트를 사용하지 않고 원하는 크기의 팝업을 열 수 있는 방법은 제가 알기로는 없습니다. 자바스크립트를 사용 하시되 자바스크립트 미지원 상황까지 고려해서 구현하시면 가장 좋죠. ^^
잘 지내셨나요?
항상 눈팅만 하다가 ^^ 방명록에 이렇게 글 남깁니다.
요즘 스마트폰이 대세이다 보니 모바일 웹에 대한 이슈도 생겨 났었음 했었는대.
글이 뜸하시네요 ^^
항상 하시는일 잘 되시길 바랍니다.
구글링을 통해 알게 되었는데, 너무나도 유용한 곳이라 감사인사 드립니다.^^
덕분에 많이 배우고 있습니다. (__)
안녕하세요 정찬명님
4달전 호콘 비움 리 방한 세미나때 모두 그 분과 사진촬영을 기다릴때
실례를 무릅쓰고 찬명님께 사진촬영을 부탁드렸던 불청객,
퓨즈의 박순길입니다. ( http://bit.ly/bKjp4H )
웹접근성 관련해서 Iframe 요소 사용에 대해 궁금한 점이 있어서
이렇게 다시 실례를 범하게 되었네요.
http://www.wah.or.kr/Consulting/consultList_view.asp?seq=3327&page=1&cType=TC&FindTxt=
고민이 많네요. 정중히 도움을 부탁드립니다.
물론 바쁘시면 괜찮고요 :)
날씨가 좋지 않습니다. 항상 주의를~!
@박순길
그동안 잘 지내셨는지요? ^^ 사진이 어떻게 나왔는지 궁금했는데 어려보이게 잘 나왔네요. ㅎㅎ. 노주환 자문위원님께서 답변을 달아 주셨지만 iframe이라고 해서 특별히 문제가 되는것은 아닙니다. iframe 요소에 title 속성을 이용해서 프레임 콘텐츠가 무엇인지 잘 설명해 주시면 됩니다. 더불어 비어있는 프레임이라 할지라도 “빈프레임” 또는 “내용없음”과 같이 설명해서 시각장애인이 건너 뛸 수 있도록 해주시면 됩니다.
찬명님의 시원한 답변글 덕에 한시름 덜었네요.
감사합니다, 나중에 또 찾아뵙겠습니다. :)