1,052개의 댓글이 있습니다.
댓글 쓰기
전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.
웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD
전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.
휴가는 주말마다 다녀 옵니다. 오늘 날씨 다이나믹 하고 좋던데요! ㅎㅎ.
XE로 제작하는 신규 홈페이지로 KADO-WAH 2.0 평가툴하면 웹페이지는 이상없이 점수가 나오는데요 게시판 내용 부분에서 오류가뜨네요..90%는 나와야 검수 합격점을 주는데..
게시판 부분은 고객글과 자유게시판글이 있는데 함부로 수정할 수 도 없고…꼼수 없나요?
게시판 내용 부분은 건들기 어렵지 않나요? 내용에 html을 사용한거라면…
html을 사용자가 잘못 입력하였을 경우에도 에러가 뜨니깐요…
KADO-WAH 는 거의 img 에 alt 가 없을경우에 에러가 많이 뜨죠?
PHP는 제가 잘 모르겠으나…
컨텐츠를 가져올때 replace 를 이용해서
[img 를 [img alt=” 로 대체하는 꼼수정도…
쓸데없는 소리였습니다.ㅎ
수정했습니다.^^ XE에서 이게시물을…에서 약간 문제가 있었네요.;^^ 해결했습니다.
GOV님, 다행입니다. 다음에 그 부분 작업을 할 때 어떤 문제가 있는지 주의깊게 확인해 보겠습니다. 감사합니다.
http://happycast.tistory.com/attachment/cfile24.uf@201584164A52DB7C22FD74.hwp
전자정부_웹호환성_준수지침 인데요. 뭔가가 부족함이 있는것 같기도 한것이…
의견제출하라고 해서..; 정찬명님께서 잘 아실것 같아서..;
안녕하세요.. me2day 글보고 왔는데요..
찬명님이 쓰신 내용,,,
“absolute 요소 뒤에 따라오는 float 요소가 absolute 요소를 사라지도록 작용하는 IE6 버그에 대한 포스팅 언젠가 해야겠다. 그런데 해결방법은 그리 간단하지 않은 듯. float 을 빼고 inline과 zoom 그리고 width 속성을 함께 부여”
이 포스팅 아직 안하신건가여?! 못찾아서여 제가…
지금 제가 이문제에 접어들어가지고 해결을 몬하고있네여 ㅎㅎ
멋진 방법이 소개되었으면 좋겠습니다^^
gov님 안녕하세요. 잠깐 봤는데요. 제 나름 의견 드리면 다음과 같습니다.
제4조(기본원칙) 에서 1항과 2항을 왜 구분 했는지 이해가 안됩니다.
라고 묶어도 되지 않을까 라는 생각이구요.
[붙임1] DTD 권고안 목록은 [붙임2] 진단방법의 ‘DTD 선언 여부 확인’ 항목을 지키려면 어쩔 수 없이 W3C의 권고안을 따를 수 밖에 없는데 따로 구구절절 나열할 필요가 있는지도 의문 입니다.
[붙임1] 항목은 굳이 존재하지 않아도 되고 [붙임2] ‘DTD 선언 여부 확인’ 부분에 별표로 w3.org 사이트의 권장 DTD 목록 페이지(http://www.w3.org/QA/2002/04/valid-dtd-list.html)를 기술해 주면 간단하게 해결 될 부분이므로 없어도 된다고 생각 합니다.
[붙임1]에서 HTML 문서에서는 1, 4행 생략 이라는 부분은 잘못된 설명이네요. 4행은 html 요소인데 html 요소를 통째로 빼면 안되겠죠. xmlns 속성과 xml:lang 속성만 빼라고 분명히 명시를 해야 맞습니다.
[붙임1]에서 ‘HTML 4.01에서는 2행 생략 가능’ 이라는 문장이 있는데 표에서 2행이 무엇을 말하는지도 알 수 없고 만약 빼면 DTD 형식이 달라지기 때문에 잘못된 설명 입니다.
‘최소 3종의 브라우저에서 동등한 레이아웃 및 기능 구현 여부 확인’ 부분은 ‘종’에 대한 설명이 불충분 합니다. IE6, IE7, IE8 브라우저는 서로 같은 종으로 취급해야 하는지 다른 종으로 취급해야 하는지 묻는 사람들이 빈번하게 발생할 것입니다.
또한 IE를 제외하고 가장 표준 준수율이 높은 Safari, Chrome, Opera 브라우저만 지원하는 경우 IE6~7 브라우저에서는 상당히 많이 깨지게 될텐데 이를 보완할 어떤 기준도 현재 명시되어 있지 않습니다. 물론 행정기관장이 3종의 브라우저를 정할 때 IE를 제외할 일은 없겠지만 그런 일이 발생하지 않도록 사전에 예방하려면 국내 인터넷 사용자들의 브라우저 점유율과 같은 자료를 충분히 활용해서 이 지침에 반영해야 한다고 생각 합니다.
기왕 이렇게 적었으니 저 대신 의견을 전달해 주시면 좋겠습니다. 감사합니다.
치프님 안녕하세요? 제가 당장 포스팅 하기는 어렵지만 미투에 적은 것처럼 ‘언젠가는..’ 꼭 하려고 합니다. ㅡㅡ; 아무래도 기다려 주시는 분이 한 분이라도 계시니 다른 글보다 우선순위를 더 높여야겠네요. ^^ 감사합니다.
회사에 표준화를 위해 UI CSS 코딩 가이드사이트를 만들려고하는데
이건 업무외적인 일인가요 ㅠㅠ
명함만 웹퍼블리셔… 지방이라 표준화 설득시키키 힘들어요 ㅠㅠ
오늘 알았어요. 대전대덕고등학교를 나오셨다는…^^
선배님. ㅎㅎ
와우~ 반가워요~ 후배님~ ^___^
음, 치프님 ㅎ
엘리먼트 낭비일 수도 있겠지만, 블럭요소를 가지고 있는
div, p등으로 float되는 영역을 묶어보세요.
물론, 묶는 엘리먼트에 clear를 시켜주셔야겠죠?
웹접근성 코딩에 관해 궁금한점이 있는데 여기다 남겨도 되는건지요…^^;;
코딩을 하다 개발자분한테 왜 화면UI를 div에 좌표값을 넣어서 화면에 배치하지않고 플로트속성을 이용하느냐는.. 난감한 질문을 받았어요. 그렇게하면 나중에 좌표변경만으로 UI를 쉽게 변경할 수 있지않느냐고 하시는데 전 플로트로 정렬하는것을 너무나 당연하게 받아들이고 있었기에 어떠한 차이점이 있는지 설명을 못하고 말았어요. 예상되는바가 있긴하지만 정확한 정답을 알고싶기에 문의드립니다~ 메일로도 답변 부탁드려여~
A라는 콘텐츠가 개행이 되거나 표시할 항목이 추가로 늘어나게 되면 아래쪽에 있는 B 콘텐츠는 A의 영향을 받아서 밀려야 합니다. 이럴 때를 대비해서 코딩하기 때문에 배치할 때 float을 이용하고 position을 사용을 피하고 높이를 지정하지 않는 것입니다.
만약 콘텐츠의 개수나 높이가 고정되는 것이 확실하다면 position을 이용해도 무방하겠지요. 그러나 신이 아닌 이상 과연 그것을 확신할 수 있을까요? 필요한 답변이 되었는지 모르겠네요.
좋은 하루 되세요.
감사합니다.
안녕하세요. 스마트에디터를 사용하려고 하는데 해당 페이지가 뜨지 않네요.
http://dev.naver.com/wiki/smarteditor/index.php/SmartEditorBasicUserInterfacePreview
이쪽 홈페이지로 이미지 경로가 있어서 방명록에 글을 남깁니다.
iHWAN님, 안녕하세요? 제가 실수로 해당 폴더를 삭제 했습니다. 어딘가에 남아있는지 확인해서 복구를 해 놓거나 다시 캡쳐해서 올려야 할 것 같습니다. 만약 복구가 가능하다면 내일 중으로 될 것이고 캡쳐를 다시 해야 한다면 금주 안으로 가능할 것 같습니다. 본의 아니게 불편을 드려 죄송합니다.
iHWAN님, 이미지가 복구 되었습니다. 화면을 다시 떴답니다. ㅡㅡ;
ie8 전용 CSS Hack을 찾았습니다!
http://www.stsoftware.biz/support/viewtopic.php?f=18&t=471
div.test { color: red; }
div.test, #ie8#fix { color: blue; }
이렇게 하면 IE8은 red만 보이고 나머지브라우저는 blue로 보인데요~!!!!
하늘바라기님, 재미있고 유용한 정보네요. 아직 제가 IE8 핵이 필요했던 적이 아직 없었지만 언젠가는 유용할것 같습니다. ^^
여러자료를 모아모아 사내 표준 개발 프레임웍을 만드는중인데요.
정찬명님께 평한번 받아보고싶어요~ http://design.myinplus.com/
HYLA님, 멋지신데요! 한번 스윽 봤습니다만 저는 이런 가이드의 디테일 보다 문서화 했다는 측면에서 일단 의의가 크다고 생각 합니다. 누가 봐도 훔쳐가고 싶은 그런 가이드를 만드셔서 많은 분들께 공유도 하시면 좋겠네요. ^^; 공유 감사합니다.
앗! 감사.. 정찬명님 블로그에서 넘 많은걸 배워서 사수를 정찬명님이였음 좋겠는데요
NHN입성을 목표로 해야겠네.. 울산에는 퍼블도없고 혼자라 힘들어요 ㅠㅠ
머리속 여기저기서 정리가 안되어져 여기서 한번 저기서 한번 끄집어 내 개발한내용들이 이곳에 오니 정리가 화악~정리가 되어지네요..
흔적도 안남기고 매번와서 참고하여 적용시키기만 하다가 이렇게 글 적습니다.ㅡㅡ;;
내용 감솨드리고요 ~ 자주 방문해 글도적고 궁금한것도 물어보겠습니다.~
anosunny님, 감사합니다. 저는 이런 격려로 먹고 삽니다. ㅎㅎ.
매일매일 출근하자마자 열어보는 페이지중에 한 곳이 정찬명님의 워프입니당(__)(^^)
늘 좋은 글 감사드리며, 유용한 내용 공유해 주셔서 감사해요. 가끔씩 정리해서 공유해 주시는
내용을 보면 감탄을 금치 못 한답니다 @o@.. 저도 어서 분발하여 공유도 하고 같은 업종에 있는 분들 혹은 관심을 두고 계시는 분들께 도움이 되고 싶네요 ㅎ.ㅎ 물론 저 스스로의 성장도 중요하고요 ~.~
지난해까지는 어느 환경 누구에게나 평등하면서 어여쁜 페이지를 만드는 것이 목표였는데,
새로 취직하면서, CSS3, -moz-, -webkit 등 쓸 수 있는 것은 다 써보는 것에 의의를 두고
스스로가 재미난 코딩을 하는데 목표를 두고 키보드를 두들기고 있어욤~~
그로 인해서.. IE는 애시당초 제껴놓고 연구라기엔 거창하지만,, 아무튼 코딩놀이같이 하고 있답니다. ㅎ.ㅎ
크롬이나 사파리 불여우 3.5이상에서나 잘 돌아가지만, http://lab.thepaper.co.kr/ 요기에욤..^.^; 좀 요란해 보일 수 있는데 이것저것 실험해 보느라 그런 것이라 생각해주세욤 ☞☜
즐겁고 알찬 한 주 되세요 :D
아름이님, 좀 요란하지만 실험정신 투철한 사이트 잘 봤습니다. CSS를 정말 재미있게 가지고 노시는군요. ㅎㅎㅎ. 저도 종종 뭐 재미난거 없나 구경하러 가겠습니다. 오늘도 좋은 하루 되시구요!
http://www.gntour.com/program/tour/tourView.jsp?currPage=1&AT_SID=tur0008 위 주소가 관광지소개 페이지인데 등록된 갯수가 엄청납니다. 모두 변경 할려니 엄두나 안나서 그런데 꼭 웹접근성으로 상세내용을 작성해야 되는지 고민이 됩니다…
네, 하셔야 합니다. 힘내세요! ^^
안녕하세요. 메타블로그 투데이텐운영자입니다.(개인홈페이지입니다.^^)
네이버에서 투데이텐 이라고 치면 나옵니다.
블로그의 새로운 글은 널리 유통시키는 메타블로그입니다.
한 번만 등록 하시면 글 발행 시 자동으로 수집되며, 검색엔진에 노출됩니다.
(방문자수 증가에 도움이 됩니다.)
가입 부탁드립니다. http://today10.com 감사합니다.
투데이텐에 가입하려고 했으나 인증용 포스팅을 발행하도록 하기 때문에 가입할 수 없었습니다. 내용없는 빈 포스팅을 발송하는 것은 제 블로그를 구독해주시는 분들께 누가 되는 행동이라고 생각이 되네요. 다른 방법으로 인증하는 방법은 없나요?
좋은자료가 너무 많네요.^^
웹표준 및 접근성과 관련된 자료를 많이 참고하겠습니다..
감사합니다.
박지영님 안녕하세요? 저와 관심분야가 많이 비슷하시고 박지영님 블로그에도 유용한 정보가 많네요. 저도 종종 들러서 잘 참고하도록 하려구요. 감사합니다. ^^
안녕하세요
정말 숨가쁘게 달려오시고 지금도 쉴새없이 아주 빠르게 뛰고 계신 것 같아 멋지십니다.
웹사이트 기획업무를 보면서 요즘 UI,UX에 관해 관심이 많아졌는데
좋은 글 잘 보고 갑니다.
감사합니다 ^^
이범희님 반갑습니다. 저도 기획 관점에서 제가 다루는 주제가 어떻게 받아들여지는지 많이 궁금합니다. 재미있는 화두가 있으시면 언제든 코멘트 남겨주세요. ^^ 감사합니다.
안녕하세요. 글은 처음 남겨봅니다.
대전시청에서 교육 잘들었습니다. 전 정찬명님 2번째 보는날이였어요~^^*
오늘은 한참을 블로그 들여다 보고갑니다.
곧 웹접근성 프로젝트를 시작하는시점인데 늘할때마다 새로운걸
배우는거 같아요~
아직도 많이 부족하지만요,,가끔은 디자이너로서 하는일이 벅착때도 있어요~ㅜ.ㅜ
NHN을 목표로 열심히 일하려구요,,그럼 오늘도 기분좋은 하루 되세요~^0^
안녕하세요.
혹시 워드프레스 2.7버전으로 업그레이드한 후에 느려지는 현상은 안 겪으셨나요? 저도 워드프레스를 쓰는데 2.7로 업그레이드 한 후 엄청 느려졌네요. 2.8 업데이트 후에도 별 나아진 바가 없고요. 그래서 지금은 제 블로그도 잘 안 들어갑니다(…)
기본 스킨에서도 많이 느린 것을 보니 스킨 문제는 아닌 것 같고요, 제 주위 다른 워드프레스 사용자께 여쭤보니 그분도 엄청 느려졌다고 하시던데 여기는 잘 버벅이는 현상이 없네요.
혹시 2.7 업그레이드 이후 수정하신 것이 있으시면 알려주시면 고맙겠습니다.^^;
이슬비님 잘 지내시죠? ^^ 웹 디자이너는 시작하기는 쉽지만 인정받는 경지에 이르기까지는 보통의 노력만으로는 되기가 쉽지 않은것 같아요. 나중에 저희 회사 오시면 제가 맛있는 밥 열번 쏠께요! 언능 오세요~ ^^
cain님 안녕하세요? 저는 느려지는 현상이 없었습니다. 혹시 플러그인들을 하나씩 꺼보면서 테스트 해보셨나요? 만약 플러그인에 의한 영향이 아니라면 HTML 파일이 참조하고 있는 자바스크립트를 의심해 보세요. 자바스크립트를 하나씩 지워보면서 테스트 해보시구요. 자바스크립트 문제가 아니라면 그 다음 호스팅 환경을 의심해 봐야 할 것 같습니다. ^^
아. 뭐 또 하나 물어보려고 했었는데.. 이건 방명록에 남겨야 할거 같아서요 ^^;
nhndesign에서 박스 스타일 보다가..
author가 정찬명씨로 되어있길래 ^^.. 궁금해서요..이렇게 여쭤봐요~
——————————————————————–
.corner_round_box_type01 {position:relative;}
.corner_round_box_type01.outer {border:1px solid #ccc;}
.corner_round_box_type01 .inner {border:4px solid #f5f5f5;}
* html .corner_round_box_type01 {height:1%;}
.corner_round_box_type01 p {padding:10px;font-size:12px;}
내용은 이미지와 다를 수 있습니다.
내용은 이미지와 다를 수 있습니다.
내용은 이미지와 다를 수 있습니다.
——————————————————————–
여기에서~ 위에 .outer는 클래스를 붙여서 쓰니까 보더가 보이던데.. 이게 왜 이건 붙여서 쓴건지랑.
height:1%; 이부분이… 왜 있는건지..
제가 너무 기본적인걸 물어본건지 ^^;;
일단 작업은 하는데.. 모르니.. 쩝…너무 궁금해요./. ㅠㅠ
알려주시면 감사하겠습니다. (__)!!
헉;;; 저거;; 코드..
[div class="corner_round_box_type01 outer" style="margin-left:30px]
[div class="inner]
[p]내용은 이미지와 다를 수 있습니다.[/p]
[p]내용은 이미지와 다를 수 있습니다.[/p]
[p]내용은 이미지와 다를 수 있습니다.[/p]
[/div]
[/div]
죄송해요. 위에 글씨 너무 작아서 못읽고 -0-;
꺽쇠 그대로 썼었어요 . 다시 올릴게요 ^^;; ㅎㅎ
http://pds15.egloos.com/pds/200910/14/17/c0016617_4ad49d3b84d6b.png
http://pds15.egloos.com/pds/200910/14/17/c0016617_4ad49db891819.png
http://pds17.egloos.com/pds/200910/14/17/c0016617_4ad49dba9539e.png
ebs 교재입니다 -_-;;
코정도님 ^^ 이게 주석 안에 제 이름이 있기는 한데 제가 작성한 코드는 아닙니다.
클래스를 붙여서 사용하는 것을 처음 보신 모양입니다.
.a.b {…} 이와 같은 상황에서 클래스를 띄어쓰지 않고 왜 붙여쓰는지를 궁금해 하시는게 맞나요?
이것은 .a 라는 선택자와 .b 라는 선택자가 모두 부여된 HTML 요소에만 스타일을 부여하겠다는 의미 입니다. 즉, a도 참이어야 하고 b도 참인 요소에게만 적용하겠다는 거죠.
따라서 .a.b 와 같은 선택자 조합법은 [div class="a b"] 이와 같이 하나의 요소에 띄어쓰기를 통해서 두 개 이상의 클래스를 부여한 요소에만 스타일을 적용하고자 할 때 사용 됩니다.
굳이 이렇게 하는 이유는 a 라는 클래스만 필요한 녀석도 있고 b 라는 클래스만 필요한 녀석도 있고 a와 b 스타일을 모두 필요로 하는 녀석도 있는 경우에 단 두 개의 클래스만 가지고도 세 가지 표현을 할 수 있기 때문입니다.
.a { font-size:12px }
.b { font-weight:bold }
.a.b { border:1px solid #ccc }
이렇게 선언하면 [div class="a b"] 이와 같이 두 개의 선택자가 부여된 요소는 ’12px + bold + border’ 를 갖게 되는 것이죠.
height:1% 를 주는 이유는 IE 버그를 해결하기 위함입니다. IE6는 보더를 잘 처리하지 못하는 버그가 자주 발생하는데 이때 버그를 해결하는 트리거 역할을 합니다. hasLayout 이라는 IE 브라우저만의 독특한 레이아웃 개념이 있는데 height와 같은 높이 값을 지정하게 되면 해당 요소는 hasLayout 속성을 갖게 되어 제대로 렌더링이 되죠. 하지만 이 높이는 상대적인 값이기 때문에 만약 부모 요소가 높이값을 지니고 있다면 사용하지 않아야 합니다. IE6 에서 1%의 높이값은 콘텐츠의 높이에 따라서 자동으로 늘어나게 되는데 이 때 부모에게 높이값이 부여되어 있으면 부모 상자 높이의 1%가 되어 버리니까요. 따라서 동일한 역할을 하면서 높이값 문제가 발생하지 않는 zoom:1 을 사용하는 것이 보다 안전합니다.
sorin님 안녕하세요? 소개해 주신 자료는 매우 오래되었거나 잘못된 지식들 입니다. 오히려 공유하지 않는편이 좋겠는데요.
네 -_-; ebs도 공교육인데 이렇게 가르쳐도 되나 싶어서 보여드렸습니다. 참으로 우울한 인재를 만드는 군요-_-;;;;
우와.. 진짜 고맙습니다. !! ^^
너무 자세히 설명해주셔서..ㅠㅠㅠ 이렇게 그냥 배우고만 가도되는지..ㅠ
어찌해야할지…ㅎ
가르쳐 주신거 잘 활용해서 쓸게요!!
오늘 좋은하루 보내시구요~ ^^…
감기조심하세요!!
매번좋은자료 잘얻어가고있습니다.
여쭈어볼분이 찬명님 밖에없네요.
http://www.xpressengine.com/18402595 요것어떻게 해결방법없을까요?
DIV의 세계는 정말 어렵네요 ㅠㅠ
질문드려요. ~~ 웹접근성연구소에 올려놨는데 아직 답변을 받으려면 멀었나봅니다.
질문내용 :
플래시를 배제하고 html만으로 구현하려고 합니다.
서울시 지도가 있고 마우스를 올리면
해당 구 모양의 색이 다른 이미지와 지역명을 보이도록 하려고 합니다.
만약 서울시가 30개의 구(예, 강서구,종로구등)가 있다면 30개의 각 다른 모양의 이미지를 만든 후 서울시전체지도에 맵을 걸고 구역에 마우스오버했을때
그 구모양의 이미지가 보이도록 하고 마우스아웃했을대 이미지가 사라지도록 하려고 합니다. 동시에 지역명도 보였다가 사라졌다 해야 하구요.
이것이 접근성에 위배된것인지…
편법이긴 하지만 접근성엔 문제가 없는지 잘 모르겠습니다.
아니면 더 적합한 표현방식이 있을까요? 조언 부탁드립니다.
플래시로 대체텍스트 및 탭인덱스를 넣어주면 오히려 위 방법보다는 접근성에 더 맞는것일까요?
서울시도 해야하고 경기도도 해야 하고 완전 노가다에 좋은 방법이 아니란 생각이 드는데…–
답변 부탁드립니다.
질문내용이 이해가 안가시면 아래 URL에서 첨부파일을 받아서 꼭좀 확인부탁드려요
http://www.wah.or.kr/Consulting/consultList_view.asp?seq=1752&page=1&cType=TC&FindTxt=
정연희 님께, 바쁘다보니 블로그도 그렇고 자문 게시판도 그렇고 제 때 답변을 달기가 무척 힘드네요. 자문 게시판에도 동일한 답변을 아래와 같이 달아 두었습니다.
다음과 같이 하시면 문제가 없습니다.
마우스에 따라 무엇이 보이고 안보이는 문제는 시각이 있는 사람에게 유용합니다.
하지만 마우스를 사용하지 못하는 사람도 이용할 수 있으면 됩니다.
예를 들면 area 요소에 alt 속성을 이용해서 ‘**구’ 라고 표기를 해주고 area 요소에 키보드가 맺힐 때 해당 구를 시각적으로 표시해 주면 마우스 사용자와 키보드 사용자(또는 시각 장애인)도 이 지도의 링크에 접근해서 링크를 이용할 수 있겠지요.
CEO송선생 님께, 게시판에 다음과 같이 답변 드렸습니다.
테이블을 쓰거나, 자바스크립트를 사용하지 않고는 형제 요소의 높이를 동일하게 할 수 있는 방법이 없습니다.
그러나 콘텐츠 영역만큼 함께 늘어뜨리려고 하는 것이 단순하게 이미지라면 ‘왼쪽, 메인, 오른쪽’을 감싸고 있는 부모 요소에 배경이미지를 넣어 늘어뜨림으로써 마치 양쪽 컬럼이 함께 늘어난 것처럼 보이도록 할 수는 있습니다.
동일한 높이를 가진것 처럼 보이는 대부분의 CSS 컬럼 레이아웃은 이와 같은 방법을 사용하고 있고 실제로 div 높이를 똑같이 맞추는 방법은 쉽게 가능하지도 않고 그런 상황이 꼭 필요한 것인지를 생각해 볼 때 단순히 시각적인 효과만을 위한 상황이 대부분 입니다.
왜냐하면 상자의 높이를 똑같이 만든다고 해서 그 상자 안에 동일한 양의 콘텐츠를 넣는 경우는 거의 없기 때문입니다.
안녕하세요..웹표준과 웹접근성에 관심이 많은..그리고 공부중인 웹디자이너입니다..
검색을 통해서 이 사이트를 알게되었는데요..유용한 정보 잘 보고있습니다..
웹표준에 대해서 처음 접하다보니..알아야할것들이 많더군요..
궁금한점 있으면 언제든지 여쭙겠습니다..~~ㅎㅎ
기초적인 질문도 가능하죠?;;
안녕하세요..평소 좋은 정보 늘 감사드리고 있습니다.
다름이 아니고 질문이 있어서 글 남깁니다.
vertical-align 에 관한 질문인데요..
div>ul>li>텍스트를 남긴 경우에 텍스트를 우측중앙 정렬로 적용하고 싶은데요..
text-align:right; 는 적용이 되는데 vertical-align은 적용이 안되네요.
다른 강좌 사이트 질의응답게시판을 찾아보니 많은 사람들이 이부분에 대해서 질문을 하였고 답변들은 하나같이 vertical-align속성은 적용이 안되니 패딩이나 마진으로 맞추라는 식의 팁들 뿐이었습니다.
정말 vertical-align:middle; 속성은 적용이 안되나요?
적용이 되는지 안되는지 여부와 된다면 어디에 어떻게 적용시켜야하는지 알고 싶습니다.
하루에 한번은 꼭 들리는 사이트..좋은 글. 감사합니다..
한가지 여쭤볼게 있어 방명록남깁니다
FF, OPERA (크롬도 그럴것 같지만 확인을 아직안했습니다)
에서의 div의 텍스트 가로길이가 width로 지정된것을 넘어갈 경우
텍스트가 div를 뚫고 가버립니다.. IE에선
word-wrap:break-word;
word-break:break-all;
로 제어가 가능했는데 위 브라우저는 안먹히더군요..
보통 쓰일때가 게시판 작성내용을 뿌려줄때인데
이게또 띄어쓰기가 있으면 제대로 줄바꿈이 됩니다.
이럴때의 방법이 있는지 여쭤보고싶습니다..
@임미연
화이팅 입니다! ^^
@김석한
vertical-align 속성은 본래 inline 요소와 th, td 요소에만 적용 가능한 속성입니다. block 요소에는 적용되지 않습니다. 만약 block 요소 안에서 텍스트를 수직으로 중앙정렬 하고자 한다면 line-height를 이용할 수도 있습니다. 예를 들어 li 요소의 높이가 100px 이고 포함된 텍스트가 수직으로 중앙 정렬할 필요가 있다면 li 요소에 line-height를 100px 부여하면 됩니다. 따라서 만약 높이가 고정되지 않으면 불가능 하겠죠.
@최상운
1byte 문자열이 공백 없이 연속으로 작성되면(특히 URL 같은 경우) 모든 브라우저에서 줄 바꿈이 되지 않지요. IE에서는 IE 전용 속성인 word-break:break-all 을 쓰면 되지만 다른 브라우저에서는 이와 유사한 속성 자체를 지원하지 않습니다. 원래 CSS 명세에 없는 스펙이니까요. 따라서 표준계열 브라우저에서는 overflow:hidden 처리를 통해서 강제로 넘치는 부분을 보이지 않도록 처리하기도 합니다.
찬명님~ 답변 정말 잘 받았어요^^ 고개숙여 감사드립니다.
미투데이의 글들 잘 보았구요.
밥 한끼 쏠 수 있는 기회를 주신다면 저야말로 무한한 영광으로 생각할겁니다~ ㅎㅎ
언제든지 날짜와 시간과 장소만 잡아주세요^^(업무시간 제외ㅋ)
사실 처음에 찬명님을 몰랐을땐, “그 분” 의 포스팅들을 보면서, “와….대단하다~ 나도 꼭 저렇게 되어야지~”
라는 목표를 가졌었는데요. 이제는 나름대로의 마인드가 자리잡고 있어서, 몇 년 후에는 아마, 제 모습이 찬명님의 복제품이 될 것 같습니다^^;
안녕하세요
저번에 xe캠프에서 스킨만드는 수강을 들었던 학생입니다!
xe스킨을 만들기위해서 css를 공부하다가
공부하는 책에서 정찬명님을 닮은 사진을 봐서 혹시나해서
글을 남깁니다.!
그그 CSS Design Korea에 모임에서 찍은 사진이라고 나와있던데
신기해서 … 제 착각일지도 모르겠지만… 움..
사진보면서 낯이 익어서…^^;
@홍하윤님 안녕하세요? 그거 아마 저 맞을꺼에요. 박수만님이 번역하신 초록색 책 맞나요? ^^
네 맞아요!! ㅋㅋㅋ 아.. css공부하려고 하는데 쉽지가 않네요 ㅠ
cdk에서 언급하긴 웹 접근성 전문가 자문을 받을려고합니다.
메일로 어떻게 진행되고 가능한지 회신 부탁드랍니다.
강위백님, 필요하신게 있으시면 dece24앳gmail.com 으로 메일을 보내주세요. 아직 메일을 받지 못했습니다.
안녕하세요…질문이 있습니다…
혹시 alt 속성에 대해서 궁금해서 질문을 드립니다…
이미지 텍스트를
예) KOREA.net 라는 이미지가 있습니다…
그럼 이런걸 alt값을 사용할때 지금 보이는 그대로 KOREA.net라고 해야 하는지
아님 korea.net 이라고 해야하는지…그냥 자기 마음대로 하면되는지요…
외국 사이트 제작하다가보니 첫자를 대문자로 하고 그다음 문자들은 소문자로 했더라고요..Korea.net라고 해야한다는 분이 있던데…정확한 답이 있는지요…
html의 이미지 alt의 올바른 표기법은……..
이미지를 설명할 수 있는 내용을 alt에 넣는다 이고
대 소문자 문제는
올바른 영어 표기법 문제인듯 합니다만….
정찬명님 전에는 몰랐는데 이 페이지 크롬에서 아래 스크롤바가 생깁니다.
이유는 모르겠지만 #content의 넓이만큼 확장 되는거 같습니다.
너무 궁금해서 잠시 css를 열어 봤는데 정확한 원인이 파악이 안되는군요.
정찬명님 글 보면서 많이 배워가는 제가 알면 더 이상하죠 ㅋㅋㅋ
하여튼 임시적으로 #container 안에 overflow:hidden;를 넣어보니 크롬에서 아래 스크롤바가 사라지는군요.
근데 진짜 이유가 궁금합니다.
이게 왜 생기는거죠???
한동안 안오다가 와서 이런글이나 남기고 가서 죄송합니다.
담에 왔을때 해답을 좀 주셨으면 합니다. ^^&
파악이 전혀 안되기에 답이 너무 궁금하네요.
이거 뭐라고 해야하나…
어떤 페이지 다녀오면 100px 조금 더 늘어나는거 같고
어떤 페이지 다녀오면 600px 정도 늘어나는거 같고
그러면서도 naradesign.net의 다른 페이지는 문제없고
이 페이지도 다른 웹브라우져는 문제없고…
…..
그냥 신경꺼야 할거 같습니다. ㅋㅋㅋ
@Dark Devil
저라면 KOREA.net 이라고 작성하겠습니다. 대체 텍스트 작성 방법에 정답이 있는것은 아니고 어느 정도의 주관적 판단이나 논쟁은 존재 하지만 제가 제안드리고 주로 사용하는 방법은 있는 그대로 옮겨쓰는 방법 입니다. 이와 관련해서 적어둔 글이 있습니다. 한 번 참고해 봐주세요.
이미지 대체 텍스트 속성 alt=”*” 어떻게 작성하는 것이 가장 좋은가요? title=”*” 속성과는 어떻게 다르죠?
http://naradesign.net/open_content/lecture/wp/#section16
오현님, 그 문제는 방명록 글 가운데 굉장히 긴 URL이 포함되어 있어서 그랬습니다. 1byte 문자열이 공백 없이 길게 작성되면 줄 바꿈이 안된다는 사실은 잘 알고 계시죠? ^^ 그래서 그 방명록에 포함된 URL에 span 하나 감싸놓고 display:inline-block; width:100%; overflow:hidden 으로 처리 했습니다. 이제는 더 이상 가로 스크롤바가 안보여야 정상입니다.
그동안 알면서도 너무 귀찮아서 못하고 있었는데 코멘트 해주신 덕에 고치게 되었습니다. 감사합니다.
에구, 그런게 두 개나 있었네요. 모두 고쳤습니다.
그런데 그보다 더 큰 문제는 방명록에 글이 570여개나 되는데 페이지네이션 기능이 없다는 점입니다.
고쳐야하는데 손 쓸 틈이 없네요. ㅜㅜ;
예 이제 안보입니다 ^^&
이게 궁금해 정찬명님 css 몰래 훔쳐봤다가
#container 의 좌우 padding 다르게 주신거 보고
관성적으로 해서는 안된다는 생각을 하게 되었습니다.
또 한번 배우고 갑니다.
위아래 패딩을 잘못 보신것 같아요. 별 의미 없는것 같은데. ㅎㅎ. 이 블로그 소스코드에서는 배우실게 별로 없사옵니다. ㅜㅜ; (게을러서 창피해요)
헉 그렇습니까?? 전 스크롤바를 계산해서 화면 중앙으로 모으기 위해 패딩을 좌우 다르게 두신걸로 순간적으로 판단했었습니다. ㅋㅋㅋ
이제보니 상하군요. ㅋㅋㅋ
웹표준 넘 힘드네요~~
이런 사이트가 있어서 너무 좋네요
작업하다가 브라우저6에서 깨지는데 답답하네요
다른 브라우저에선 잘 되는데….
서영맘님, IE6는 모두에게 공평하게 힘든 존재인것 같아요. ㅎㅎ 힘내세요! ^^
아… 종종..
모두가 행복해지는 유니버설 디자인.
이런 글들을 들어가면 컴퓨터가 20~30초 멈춰버립니다.
블로그 포스팅에 바로 뿌리는것보다 클릭하면 그때 로딩되어 볼 수 있게 할 수는 없을까요?
종종 읽은글 또 읽고 다음 누르다 보면 순간 멈춰버립니다. ㅠ.ㅠ
게시판 스킨 ‘xe_naradesign’ 엄청 감사하게 쓰고있습니다
한가지 여쭙고 싶은게 있습니다
목록형태를 갤러리 형태로 볼때
게시글간의 간격을 조절하려면 어디에서 수정해야 하나요
가로 400px에 가로로 3글씩 집어넣으려고 하거든요
그리고 게시판 관리자까지 아예 댓글을 없애버릴수는 없을까요
조언 부탁드립니다
http://www.xpressengine.com/?mid=download&category_srl=18322954&page=2&package_srl=18324299
위 주소는 사용중인 XE 스킨이고, 제가 원하는 메뉴는 http://i47.tinypic.com/2qmnara.png 이것인데요.
layout_xe_official_v2 스킨은 1차메뉴만 나타나고, 하위메뉴(?)or2차메뉴는 오른쪽에 나타나는데..
저는 이것을 1차메뉴 아래에 나오게 하고 싶은데.. 소스코드 보시고 수정해주실 수 있을까요?
제가 웹에서 아는거라고는 html 태그밖에 없어서.. 자세히 설명도 부탁드렸으면 합니다.
안녕하세요~ 제로보드 이하 웹표준계에서 유명하신 정찬명님 블로그 방명록에 글을 쓰니 영광이군요 ㅎㅎ;;;
저도 제2의 정찬명님이 되기위해 노력하구 있습니다 .ㅋㅋ
하지만 아직은 머리에 든게 없구 백지상태라서;;
예전에 테이블로 레이아웃을 만들어 사이트를 운영해봤었는데요;;
요즘 웹표준 얘기가 많이 나와서;;; 한번 배워보려고 하는데 힘드네요 ;;; ㅎㅎ
만약 지금부터라도 할수 있다면 무엇부터 보고 공부해야하는지, 길좀 제시해주세요 ^^ 책추천이나 사이트 추천좀 해주세요 ^^
그리고 드림위버로 웹표준을 지킨 홈페이지도 만들수 잇는지 궁금합니다 ^^;;
김일규님 잘 지내시죠? 모두가 행복해지는 유니버설 디자인 페이지에 삽입된 프리젠테이션의 페이지 수가 많아서 아무래도 무리가 되는것 같네요. 클릭하신 다음 볼 수 있도록 링크로 처리 했습니다. http://naradesign.net/wp/2009/07/06/984/ 소중한 의견 주셔서 감사합니다. ^^
조길림님 안녕하세요? 제가 스킨을 만든지가 한참 지나서 예제를 보지 않고 설명드리기가 어렵네요. 예제 페이지를 하나 만든다음 링크해서 보여주시면 안될까요? 그리고 제가 문제를 확인하기 전까지는 XE 관리자 모드의 ‘settings’ 페이지에 가셔서 ‘Optimizer 사용’ 항목에 체크를 해제해 주세요.
Genius님 안녕하세요? 선택하신 스킨은 XE 공식 웹사이트에 사용된 레이아웃 스킨인데요. 제가 소스코드를 수정할 수는 있겠지만 간단하게 해결되는 문제가 아니라서 직접 도움을 드리기 어렵습니다. 죄송합니다.
이관규님 안녕하세요? 저 같은 사람 말고 저를 뛰어넘는 사람이 되어주세요. ㅡㅡ;
책 추천은 제 포스트 ‘웹 표준 추천도서 Best5!’를 참고해 주시구요.
http://naradesign.net/wp/2007/07/17/124/
사이트 추천은 제 위키 ‘UI 개발자를 위한 북마크’를 참고해 주세요.
http://naradesign.net/wiki/UI_%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A5%BC_%EC%9C%84%ED%95%9C_%EB%B6%81%EB%A7%88%ED%81%AC
드림위버로 웹 표준 사이트를 만들 수 있구 말구요. 제 포스트 ‘드림위버를 이용한 웹 표준 코딩 가이드’를 참고해 주세요.
http://naradesign.net/wp/2007/04/25/121/
무엇부터 공부하면 좋은지에 대해 특별한 의견은 없구요. ^^
관규님께서 관심이 가고 관규님에게 당장 필요한것 먼저 공부하시는게 즐겁지 않을까 생각합니다.
참고로 ‘제로보드’는 더 이상 세상에 존재하지 않는답니다.
이제는 ‘XE’라고 불러주세요. ^^
감사합니다. (__)
새해 인사가 늦었네요;;
새해 복 많이 받으시고 계획하시는 일들 대성하시길 바랍니다.
2010년에도 좋은 글들 많이 남겨주세요^^
양영복님도 새해 복 많이 받으시고 2010년에는 꿈꾸던 일들 모두 이루는 뜻깊은 한 해가 되시길 빕니다. ^^
안녕하세요 ,처음인사올립니다.
콘텐츠 위젯 스킨 ‘naradesign’ 을 사용하고있는 유저입니다.
다름이 아니라 갤러리 목록으로 사용을 하고있는데요
제목이 자동으로 조절 되어서
“댓글 남기…” 이런식으로 조절되네요
설정에서 조절을 해도 설정에서는 제목수는 설정이 안되는것 같습니다.
코드값을 수정해야 할것 같은데요 어디를 수정해야할지 잘모르겠습니다.
지도편달부탁드리겠습니다.
김동희님 안녕하세요? URL을 남겨주시면 한 번 확인해 보겠습니다.
찬명님 안녕하세요.. 평소 찬명님을 흠모해온 이름없는 UI 개발자입니다…
지금은 N모 게임회사에서 근무를 하고 있습죠 ^^;;
여기서 근무를 하다 알게 된것은 각 자바스크립트를 객첵화 시켜서 사용을 하고 있는데
여기저기 보니 NHN에서도 스크립트를 객체화 시켜서 사용하고 있더군요…
이렇게 객체화를 시키다보면 xhtml 페이지 내에서 꼭 호출을 해야한다는 점이
이슈가 되는데 스크립트와 마크업이 철저하게 분리작업을 지향하는 저로써는
이해가 좀 되지 않는 부분입니다…
객체화를 시키면 계속 쓸수 있다는 장점이 있지만 페이지내에서 호출하지 않고도
스크립트와 마크업을 분리해서 사용할수 있을까요
윤재민님//
객체화를 했건 안했건(‘객체화를 했다’=클래스 기반으로 이해했습니다) HTML 문서에서 스크립트를 ‘반드시’ 호출해야 하는 경우는 없습니다. 간단한 예로 Editor라는 클래스가 있고 이를 인스턴스로 만들어주려면 다음과 같은 형태로 사용할 수 있습니다.
// DOM이 완성된 후에 실행
jQuery(function(){
var oEditor = new Editor(‘textarea_id’);
});
행복한고니님//
잘 이해가 되지 않는데요.. ㅡㅡㅋ
상세히 좀 설명 부탁드립니다;;;
안녕하세요…질문이 하나 있어서 글 남깁니다.
http://www.xpressengine.com/?mid=download&category_srl=18322943&page=2&package_srl=18335090
제로보드에서 게시판모듈스킨 다운받았는데요.
웹진형과 갤러리형 으로 설정을 하면 왜 사진을 못 불러올까요??
지금 제가 쓰고있는 버전은 3.1버전입니다.
안녕하세요 ?
조금은 늦었다는 생각이 들지만 그래도 열심히 한다고는 하지만
연신 머리를 가로저어가며 …
책보고 또 머리 굴리고 그렇게 XE 접근해 보고 있습니다.
매일은 아니지만 가끔 들러 남기신 글을 보게 되는데
많은 도움으로 활짝웃는날이 더러 생깁니다.
건강하시고 그리고 행복하시길 바랍니다 .
박성범님 안녕하세요?
다음 절차를 통해서 썸네일이 목록에 표시 되도록 설정해 보세요.
XE 관리자 모드 > 서비스 관리 > 게시판 > 설정 > 목록 설정 > 표시 항목에 썸네일 넣기
익명님이 활짝 웃는날은 저도 웃는 날입니다. ^^
안녕하세요. 항상 좋은 정보 많이 얻어가고 있어 늘 감사드리고 있습니다.
다름이 아니고 질문이 있어서 글 남깁니다.
ul, li 태그 사용시 IE6버전에서 주어진 height 값보다 항상 정확히 4px이 밑으로 더 생기는데 왜그런건지 그리고 해결방법은 무엇인지 정말정말 궁금합니다.
나름대로 이것저것 확인해보고 적용해봤는데 별반 소용이 없네요.
IE6 버전은 정말정말 어렵네요.
시간되시면 답변달이주시길 바랍니다.
그럼 수고하세요..^ ^
김석한님 안녕하세요?
IE7 이하 버전의 브라우저에서 발생하는 의도하지 않은 여백에 관한 버그인데요.
li 요소에 vertical-align 속성을 부여하고 top 또는 bottom 값을 부여해 보세요.
원인도 잘 모르겠고 왜 해결이 되는지도 원리는 잘 모르겠습니다.
사실 별로 알고 싶지도 않아요. ㅎㅎ
답변 감사드립니다.
li 요소에 알려주신대로 vertical-align:bottom; 을 적용하였더니 텍스트로 구성된 요소는 문제해결이 되었고 이미지를 사용한 요소는 해결이 아직 안되었습니다.
그럼 IE7버전 이하에서 li 요소가 항상 의도하지 않은 여백이 발생하는건 아니라는 건가요?
랜덤인가요? 정상적으로 나올 수도 있는건가요? 전 항상 그런것 같은데..
그리고 저같은 경우엔 어떻게 해서든 버그를 잡아야하는건가요?(당연한 거겠죠? ^ ^;;)
미치겠네요..li 태그를 안쓰고 div 태그를 쓴다든지 다른 태그를 쓰면 되겠지만..그럼 웹표준을 지켜서 구현하는 의미가 없겠죠?
답답하네요..
아..그리고 혹시 charset 과도 관계가 있나요? 지금 euc-kr로 설정되어 있는데..
혹시나해서..
원인을 모르니 별게 다 의심되네요..
김석한님,
버그를 유발하는 규칙이 분명히 있을텐데요. 지금까지 제 경험으로는 한 가지 요인에 의해서 발생하지 않았던 것으로 기억합니다. 문자셋과는 관계가 없었던것 같구요.
해결하는 방법도 여러가지가 있습니다. 제가 알려드린 vertical-align 이외에도 li 요소에 float, width, display:inline 속성을 부여하는 방법도 있습니다.
보통 IE 버그는 한 가지 방법만 가지고 모든 상황에 써먹을 수 없었기 때문에 다양한 해결 방법을 경험적으로 익혀서 체득해 두고 문제가 발생하면 요리조리 적용해 보면서 문제를 풀었던 것이죠. 왜냐하면 IE 버그들은 너무 많고 특정 버그를 유발하는 상황도 다양하기 때문에 외우고 다니기에는 제 머리가 감당이 안되었기 때문입니다.
저같은 사람을 위해서 이미 IE 버그를 정리하려는 많은 노력이 있었는데요. 최근에 보았던 괜찮은 링크 하나를 소개 드립니다. 빈번하게 발생하는 IE 버그와 그 해결방법을 소개하는 글입니다. ^^
9 Most Common IE Bugs and How to Fix Them
http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/
img 태그를 사용할 때와 background 로 이미지를 불러올 때, 어느것이 빠른가요?
—
1.
h1 { margin:0; padding:0;}
2.
h1 {background:url(logo.jpg) no-repeat; width:200px; height:50px; margin:0; padding:0;}
h1 span { width:0; height:0; display:block; overflow:hidden;}
My Home
—
제 생각은 스타일로 적용하는 것이 조금 더 빨리 뿌려줄 것 같은데… (결과 속도는 같을 듯)