1,052개의 댓글이 있습니다.
댓글 쓰기
전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.
웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD
전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.
헉… 제가 그리 올만에 들어온건가요?
웹표준 안하신다고요? 문닫은거 확실한가요? 혹시 만우절이서? ㅜㅜ??
만우절 농담이였으면 좋겠네여
식겁하고 있습니다
운영하지않으시면 글을 새로 안작성하면 되지않을까요? 이전 글들은 계속 보게 해주셨으면 좋겠어요..
개인사이트지만 많은 사람들에게 정보제공을 해온만큼 이렇게 갑자기 문을 닫는것은 무책임하다고 생각합니다.
@ssal @이혜란 @놀래라
걱정하지 마세요. 나라디자인 문 안 닫습니다. 만우절 농담이니 너그럽게 용서해 주세요. ^^
;;;;;;대단하세요..정말 깜놀랬습니다.;;;;
^ ^ 어찌되었든 오늘 하루 마무리 잘하시길…..
ㅋㅋ 만우절 이벤트이셨군요..^^
저는 해킹당하신줄 알고..ㅎㅎ
@김대민 @백상어
오늘 하루 즐거우셨나요? 하루가 다 지나가서 몹시 아쉽네요. ㅋㅋㅋ
훗훗.
전 질문을 다시 들고 왔습니다~
float:left div 2개 있을 때
ㅁㅁ
전체 width 가 좁아서 div가 줄바꿈 되서
ㅁ
ㅁ
보입니다.
해당 홈페이지 주소는 http://biomaillist.com/ 입니다.
IE8에서 브라우저 넓이를 마우스로 줄이면 브라우저 안 홈페이지 넓이가 좁아지면서
div들이 줄바꿈됩니다.
여기에 적용한 코딩은 대충 아래와 같습니다.
[!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"]
….
[style]
.main { position:relative; *zoom:1; display:inline }
.main:after { content:”"; display:block; clear:both; }
[/style]
[div class="main"]
[div style="float:left; width:200px"]#left side menu[/div]
[div style="float:left; width:700px"]#main[/div]
[/div]
여기서
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
를 생략하면 줄바꿈이 되지 않습니다.
하지만
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
를 생략할 수 있는 것도 아니고…
어떻게 해야 할지 답이 잘 보이지 않습니다.
혹시 이런 경험을 해보신 경험이 있으시다면 어떻게 해결 하셨는지 도움을
주실 수 있는지요?
ㅋㅋㅋㅋ 쵝오세여
만우절 이었군요 -_-;;;;
안좋은 일이 있었는지 한참을 진지하게 생각했었는데… ㅋㅋㅋ
정찬명..님! (호칭을 뭐라고 해야할지..)
안녕하세요~!!
금요일날 강의 들었던 신입 웹디자이너입니다.
찬명님 블로그에는 자주와서 도움 많이 받았었는데
글은 처음이예용~~ㅋㅋㅋ
첫날에 강의 커리큘럼받고 마지막날에 강의하시는거 알고
연예인 만나는 것처럼 두근두근.. 거렸어요 ㅋㅋㅋㅋㅋ
제가 올해 3년제 졸업하고 1월 1일부터 한 회사의 웹디자이너로
열심히 일하고 있는데요!!
학교다닐때부터 프로젝트는 많이 해봐서 디자인툴은 어느정도 다룰줄 알았지만
웹표준부분은 거의 아는게 없어서 ㅠㅠ
이번 강의가 큰 도움이 됬어요~!
정찬명님 강의듣고! 정~~~~~~~말 많은걸 알게 되었구요!!
앞으로 자주 놀러와서 많은거 배워갈게요~!!
찬명님 저 드뎌 홈페이지 만들었어요 ㅋㅋ
http://www.womble.cox.kr <- 놀러오세요 ㅋㅋ;;;
미천한 실력으로 만들어봤어요 ㅋ
xe 기본레이아웃 뜯어고쳤어요 ㅋㅋ;;;
어떻게 잘 만들었는지 모르겠네요 ㅋ;;;;;
아직 자료는 다 안올라간 상태에요 ㅋ;;;
에궁;; 위에 이름 안썻더니 익명이라고 뜨네요;;;
저 이관규입니다 ^^;;;
@박진욱
줄 바꿈이 되는 것이 표준에 따른 정상적인 렌더링이고 줄 바꿈이 되지 않는 것이 비 표준 입니다. #container 라는 블럭에 width:854px 너비를 부여해 보세요. float 처리된 콘텐츠는 폭이 좁아지면 흘러 떨어지는 것이 정상입니다. 이것을 금지하려면 부모 요소에 너비 값을 지정해서 브라우저 폭이 좁아지더라도 부모 상자의 폭이 좁아지지 않도록 해야 합니다.
@SH-Kwon
아, 다른 수강생 질문 끝날 때까지 기다렸던 그 분!
다시 만나서 반갑구요. 웹 표준 세상에 입문하신 걸 축하드려요.
제 강의가 도움이 되었다니 너무 기쁘구요.
앞으로 블로그에서 자주 뵈어요. ^^
@이관규
잘 봤습니다. XE 위젯을 잘 활용하셨네요. IE6까지 지원 하시면 더 좋을 것 같아요. 국내 사용자 중 절반 정도는 아직도 IE6을 사용 하니까요. 알차게 꾸려서 많은 분들께 도움되는 사이트로 거듭나시길 빌겠습니다. ^^
만우절 농담에 엄청 놀래서…ㅠ.ㅠ 저는 여기 없으면 코딩 못해용~하하..;;;
앞으로는 그런 무서운 농담은 하지마세욧!!!
^__^
@맹랑천사
여기 없으면 저도 코딩 못해요. ㅎㅎ
세미나 정말 잘들었습니다. ^^ 끝나고, 찬명님 팬이라고 인사드렸던 사람이예요…
많은 것을 생각하게끔 해줬던 세미나였어요~
귀하신분을 가까이서 뵙게 되서 영광이었습니다~ ㅋㅋ
@마약
아~ 마약님이셨군요. 댓글로만 보던 마약님을 직접 만나서 저도 너무 반가웠습니다. 많은 이야기를 나누지는 못했지만 다음에 또 뵐 기회가 있겠죠. 저도 영광입니다. ^^
다들 세미나 다녀오셨군요 ㅋㅋ
저도 어제 잘 들었답니다 ~
반짝이는 피카츄만화…ㅋㅋ
안녕하세요~ 저도 어제 세미나 잘 들었습니다. ^^
실무에 적용할 만한 알찬 강의 감사 드리구요,,
이제 자주 찾아 오겠습니다~
좋은하루 보내세요~! ^-^
@윤군
재미 있으셨는지 모르겠네요. 발표하면서 동영상 틀어 드린건 처음이었어요. ^^
@나모장★
졸리셨을텐테 잘 참고 들어주셔서 감사합니다. ^^
깜짝이야~
CSS Naked Day! 올해도 돌아왔네요^^;
작년에 처음 알고 신선했던 기억이…
1년 참 금방이네요….훌쩍ㅠㅠ
잠시 놀랬네요~ 히히 와 깔끔하고 명료해서 좋네요 :)
어제 마약님과 HYLA님과 같이 보았던 나르는돌입니다~
정말 세미나 잘들엇습니다~ 오늘 하루 즈거운 하루 되세요
헉.. 진짜로 놀랬네염…
@초식동물
참여 하셔야죠! ㅎㅎ
@Espressivo
제가 노출증이 좀 있어서 벗는걸 좋아해요. ㅎㅎ
@나르는돌
만나서 반가웠습니다. UI개발자로 전향하시면 기존의 경험들이 무척 많이 도움이 되실꺼라 믿습니다. 제게는 없는 장점이죠. ^^
@익명
몇일 전 만우절날도 벗었었답니다. 더 이상 웹 표준 안한다고 하면서 그랬었죠. ㅋㅋ
정찬명님..
몇년간 많은 도움 받은 블로그에 처음 글 남깁니다.
고객님의 허락하에 세미나 참석하였는데
강연하시는모습을 보니.. 연예인 보는것처럼 왠쥐~싸인을 받아야 할 것 같은 ~~^^
하여간 항상 많은 도움 주시는거 마음깊이 감사 드립니다..
온제한번 술이나~ ^^
즐거운주말 되시구요 흑~ 내일은 전쟁같은 월요일 시작입뉘다..
화이팅 하세요~
@마포레이서
아는 척이라도 해주고 가시지 그러셨어요. 아무쪼록 세미나도 제 블로그도 앞으로도 계속 도움이 됐으면 좋겠습니다. 술 한 잔 언제든 좋지요. 쏘시는거죠? ㅋㅋ
^^ 오늘 유난히 춥습니다.
궁금한 질문이 있어서 또 찾아뵙네요~
다름이 아니라 jquery 사용할때 소스코드를 다운 받지않고 링크해서 사용할까 하는데요..
정찬명님 이 올리시는 jquery 작업물 소스보기 하면 링크하신게 http://code.jquery.com/jquery-latest.js 이렇게 되있더라고요~
근데 제가사용 하는곳은 http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js 이렇게 구글이나 마소
에서 링크가 되던데… 찬명님께서 사용하시는 링크페이지는 어디서 제공이 되는건가요?
이상 별 시덥잖은 질문이었습니다 ^^:
@윤군
제가 링크한 곳은 jquery.com 에서 제공한 경로인데요.
jQuery 소스는 직접 다운로드 받으셔서 제공하시는 것이 좋습니다. 사실 저는 jQuery 최신 버전을 항상 유지하기 위해서 외부 파일을 링크하고 있지만 만약 이게 서비스에 포함된다면 jQuery 파일 제공 서버가 차단 되더라도 서비스 운영에 대한 책임은 jQuery를 링크한 우리 쪽에서 져야 하기 때문입니다.
만약 단순히 저처럼 예제를 보여줄 목적이라면 관계가 없지만 실제 서비스에 사용하려면 당연히 외부 파일 링크는 피하는 것이 좋겠지요. ^^
안녕하세요~!!
오늘은 여쭤볼게 있어서 글 남기러 왔어요~!
웹접근성에 맞게 asp파일을 작성했는데요!
파이어 폭스에서 열리지 않아서 ㅠㅠ
지식인을 아무리 뒤져도 안나와서 혹시나 하고 여기에 여쭤보러..왔..어요..!
요즘 열심히 책 보면서 웹표준, 접근성공부하고있어요!
찬명님의 세미나 자료를 친구들에게도 읽어보라고 권하고 있답니다..ㅋ
@SH-KWON
파이어폭스에서 asp 페이지가 열리지 않는데는 아마 수 백가지 원인이 있을껍니다.
URL 같은 힌트라도 주셔야 제가 아는 범위에서 답변을 드릴 수 있습니다. ^^
안녕하세요, 조용히 들리며 좋은 정보 많이 배우고 있습니다.
웹표준에 대해 궁금한 점이 있어 메일을 보내드렸는데, 스팸메일로 인식된 건 아닐까 생각이 드네요. 괜찮으시다면 다시 한 번 메일로 질문을 드려도 될런지요.(물론 다른 계정으로 말입니다.)
@omarangels
이메일을 통해 들어오는 질문에는 답변을 하지 않습니다. 이메일을 통해서 매우 많은 질문이 들어오고 있고 질문 유형이 비슷한 경우가 많습니다. 한동안은 일일이 정성껏 답변해 드렸지만 똑같은 일을 효과없이 반복하고 있다는 생각이 들어서 더 이상 이메일로 들어오는 질문에는 답변하지 않습니다. 검색을 이용해 보시거나 CDK 같은 전문 커뮤니티를 이용하시거나 지금처럼 제 블로그 방명록을 이용해 주세요. 이메일을 통한 답변은 한 사람만을 위한 것이지만 이곳은 그렇지 않다는 점이 다릅니다.
안녕하세요, 정찬명님.
오랜만에 댓글을 작성하니 두근두근 거리는데요? +_+
사실 한동안 전염병으로 좀 앓아 누웠어요.. 킁
암튼 본론으로 들어갈게요 -_-
—
ie6에서 제대로 렌더링 되지 않는 div 태그에 zoom:1을 줬습니다.
혹시나 해서 height:100% 줬더니 zoom:1 하고 같은 효과가 있더라구요.
그래서 아래 소스를 적용해봤습니다.
#contentWrapper { height:100%; }
#contentWrapper:after { content:”"; display:block; clear:both; }
그랬더니 ie6,7에서 float 요소의 높이를 정상적으로 잡아주었습니다.
덕분에 CSS 유효성 검사가 더 쉬워지고, float을 clear하기 위한 불필요한 태그를 넣을 필요가 없어졌습니다.
그럼에도 *zoom:1을 줘야할 특수한 상황이 있을 수 있지만, 대부분의 경우는 height:100% 으로 해결볼 수 있을 것 같습니다.
신기하고 유용한 발견이라 기분 무지 좋네용!!
그런데 뒷북이면 죄송 ㅠㅠ
그런 이유가 있으셨군요. 잘 모르는 상황에서 무턱대로 메일부터 보내드렸네요. 죄송합니다.
검색이나 CDK를 통해서도 시원하게 해결이 되지않아, 이렇게 방명록을 통해 질문을 드립니다.
Q. 리스트 태그를 통해 네비게이션을 만들어보고 있는데, 제가 보고 있는 책(실용예제로 배우는 웹표준)을 보니 a에 float:left를 걸어주더군요. ‘링크를 왼쪽부터 흐르게 하기 위해서’라는 설명이 있기는 합니다만, 뭔가 설명이 부족하더라구요. 굳이 float를 걸어주지 않아도 작동하는 것 같은데, float를 걸어주는 이유를 알 수 있을까요?
@omarangels
ul(ol) 태그로 메뉴를 마크업하면 li 요소는 아래로 늘어뜨리게 됩니다.
li 요소에 float:left 하면 li 요소가 옆으로 붙습니다.
그리고 ul(ol) > li > a 구조에서 a 태그에 float:left 지정하는 것은 아무 의미가 없으며 경우 따라 li 태그의 높이가 잡히지 않을 수 있습니다.
float 이야기를 꺼내자면 어지간한 레포트 분량은 되는데, ‘ie6 float’ 정도만 구글링해도 유용한 내용들 많이 보실 수 있습니다.
@김무건
다시 건강을 회복하셨기를 빕니다. ^^
float을 해제하기 위하여 #contentWrapper 요소에 가상 요소 선택자 :after 를 사용할 수 있는데 이것은 IE 6~7 에서 지원하지 않기 때문에 별도의 코드를 필요로 하지요. 그 별도의 코드에는 여러가지 종류가 있고 그걸 알아두면 상황에 따라서 유용할 수 있습니다. 무건님이 오늘 발견하신 코드도 그 중의 하나 입니다.
일단 불필요한 HTML 코드를 넣지 않는 방법만 설명을 드려보겠습니다.
#contentWrapper 요소에 다음과 같은 코드중 하나를 넣으시면 IE 6~7 브라우저에서 float을 해제하는 효과를 거두실 수 있습니다.
- zoom:1
- width
- height
- overflow:hidden | auto | scroll
- display:inline-block
이런 코드들의 공통점은 모두 IE 브라우저에서 IE 브라우저만의 독특한 렌더링 모드인 hasLayout 을 유발한다는 특징이 있습니다. 즉, IE 브라우저는 hasLayout 이라는 속성을 갖게 되면 float을 해제하는 효과(사실은 버그 입니다)가 있습니다.
더 자세한 정보는 아래 관련 글을 참고해 보세요.
http://naradesign.net/wp/2008/05/27/144/
http://blog.wystan.net/2007/08/14/understanding-haslayout-property-and-holly-hack
@omarangels
수평 메뉴바를 만드는 CSS 처리 방법에는 여러가지가 있습니다.
li 요소를 인라인으로만 처리하고 a 요소에 float을 주는 방법은 그 많은 방법 가운데 단지 하나일 뿐이지요.
a 요소에 굳이 float을 주지 않아도 된다면 주지 않으셔도 됩니다.
제가 예제 코드를 보지는 못했기 때문에 경험에 미루어 추측 하건데 그 예제에서는 a 요소에 float 을 주어 두 가지 문제를 해결하려고 했던 것으로 보입니다.
첫째, 인라인 처리된 li 요소는 인접 li 요소 사이에 공백(약 4px)이 존재하는데 이것을 매우기 위해서.
둘째, a 요소는 인라인 요소이기 때문에 상하 padding, margin을 부여할 수 없는데 이 문제를 해결하기 위해서.
첫째 문제는 쉽게 이해가 되실껍니다. HTML 코드는 줄 바꿈이나 공백을 무조건 4px 정도의 공백으로 렌더링 하기 때문에 간격이 벌어져 보이죠. 이걸 해결하기 위한 것인데 모든 브라우저가 이 공백을 4px로 동일하게 렌더링 하지 않을 수도 있습니다. 스펙에 명시가 되어 있거나 그런 부분이 아니기 때문에 아예 모든 브라우저에서 동일하게 보이도록 a 요소에 float을 처리해서 float된 a가 4px 정도의 공백을 덮어 버리도록 한 것입니다. float된 요소는 다른 요소 위에 뜨기 때문에 덮을 수 있는 것이죠.
둘째 문제는 padding, margin 을 부여하기 위해서 a 요소에 float을 줬다는 점인데 float 된 요소는 어떤 요소를 막론하고 display 속성이 block 으로 바뀝니다. 그리고 아무리 CSS로 inline 처리를 해도 inline으로 바뀌지 않습니다.
즉, a 요소에 float 처리를 함으로써 4px 정도의 공백을 매우고 inline 요소였던 a 요소를 block 요소로 바꿔서 상하 padding, margin을 줄 수 있도록 한 것입니다. 상하 padding, margin 값은 display 속성이 block 인 경우에만 작동 하는데 float이 a 요소를 block으로 바꿔준 것이죠.
수평 네비게이션 기법에 관한 다양한 예제가 아래 있으니까 함께 참고해서 보시면 도움이 될 것 같습니다.
http://naradesign.net/ouif/uio/navigation/horizontal/linedTab/xhtml.html
http://naradesign.net/ouif/uio/navigation/horizontal/facedTab/xhtml.html
http://naradesign.net/ouif/uio/navigation/horizontal/listTab/xhtml.html
http://naradesign.net/ouif/uio/navigation/horizontal/bar/xhtml.html
아래 경로에 접근하시면 이외 더 다양한 유형의 예제들을 보실 수 있습니다.
http://naradesign.net/ouif/
width, overflow, inline-block 으로도 clear 효과가 있군요..
자세한 설명 고맙습니다 :)
오잉? 방명록이 좀 썰렁한거 같은데용
출석도장 쾅쾅
김무건님을 위해서 개근상 하나 만들어 드려야겠어요. ^^
사실, 날마다 눈팅은 하는데 댓글을 남기는건 용기가 필요한 일입니다 ㅡ_ㅡ
질문 글이 아니면 괜히 뻘쭘해지거든요.. ㅋㅋㅋㅋ
안녕하세요. 이번주 교육 잘 받았습니다. 알기쉽게 자세히 가르쳐주셔서 쏙쏙 들어오네요.
북마크 하고 갑니다.. 꾸벅..
좋은 글들 감사합니다
@성길환
열정을 가지고 들어주시니 제게도 너무 즐겁고 보람된 시간입니다. 다음주에 또 뵈어요. ^^
찬명님 저도 교육 잘 받았습니다^^
역시! 사이트에서 글만보는거완 실제로 듣고 테스트하고 직접 여줘보는거와는 천치차이더군요,머리에쏚쏚! 손에챡챡! @0@ 이번교육 신청하길 넘 잘한것같습니다.
빔으로 강의하시는지도 모르고(대학강연처럼 왜 분필과 칠판이 떠올랏는지;;) 자리가 좀 먼지라;; 잘안보여서 무척 안타까웟지만, 담주엔 안경을 기필코 장착하고 맨앞줄로 담주에 대기하고 있겠습니다. 설마 자리 찜 다들 하신건 아니시죠?ㅠㅜ
감기때문에 아까운 하루는 빠졌지만,
이번주도 좋은 한주 시작하시구요, 전주까지 내려갔다 오시느라 힘드셨을텐데
푹쉬시구 이번주말에도 건강한 모습으로 뵙겠습니당~
@윤애경
아~ 맨 뒤에 앉으셨던. 자리는 계속 같은 자리 않으시라고 말씀 드렸는데요. 다음주에는 제 옆자리에 않으세요. 물론 프로그램을 전부 다시 설치하고 지난주에 만들었던 예제를 옮겨야 하는 고통이 살짝 예상 됩니다. 감기 어여 나으시고 다음주에 뵙겠습니다. ^^
질문점드려두될까해서 글남깁니다.
UL(Unordered List) – 부분을보고 Table 대신 적용하기위에서 적용을 했습니다.
하지만 레이아웃 구성셋팅에 영향을 받는것인지 Content 부분에 넣은 다른라인들은
정상 위치를 잡으나 더보기 앵커부분만 레이아웃 바깥으로 빠저나갑니다.
그래서 Ulist .more{} 의 position:relative;로 변경하여 top, right 값을 변경하였습니다.
앵커태그자체가 포지션을 못잡는것같아 z-index 값을 추가하여 보이게했습니다.
이제 대충 위치는 정확하게 잡았는데…..IE7에서는 더보기 태그와 태그가
정상출력 되었으나 FF에서 태그의 ›와 의 더보기가 줄바꿈되어
나타나는 현상이 발생하내요…..
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#wrapper :after{ content:”"; clear:both; display:block;}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 0px 0px;
background: #E7DBD5;
}
#navigation {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#content.content{
width: 900px;
}
#content.login{
width : 900px;
height: 562px;
border: 1px solid #ccc;
margin : 10px 0px 10px 0px;
padding : 10px;
background-color: #c4c4c4;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}
header
Home
1
2
3
최신공지사항
›더보기
요즘 퀴즈를 안내세요 ㅠㅠ 퀴즈를 기다리는 1人
@눈물꽃
소스코드를 pre 태그 안에 작성 하시거나 또는 URL을 남겨주실 수 있으신지요?
@조경수
제가 요즈음 눈코뜰 새 없이 바빠져서요. ㅜㅜ 한가해 지면 다시 시작 하겠습니다. ㅎㅎ
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#wrapper :after{ content:”"; clear:both; display:block;}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 0px 0px;
background: #E7DBD5;
}
#navigation {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#content.content{
width: 900px;
}
#content.login{
width : 900px;
height: 562px;
border: 1px solid #ccc;
margin : 10px 0px 10px 0px;
padding : 10px;
background-color: #c4c4c4;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 350px;
width: 200px;
float: left;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}
header
Home
1
2
3
최신공지사항
›더보기
소스 다시올려볼게요^^
[body]
[div id='wrapper']
[div id='header']
header
[/div]
[div id='navigation']
[ul id='menu']
[li class="button"][a class='current' href='index.php' ]Home[/a][/li]
[li class="button"][a href='http://' ]1[/a][/li]
[li class="button"][a href='http://' ]2[/a][/li]
[li class="button"][a href='http://' ]3[/a][/li]>
[/ul]
[/div][!-- End of Nav Div --]
[div id='leftcolumn']
[/div]
[div id='content']
[div class='Ulist']
[ul]
[li]
[li]
[/ul]
[a href="#" class='more'][span]›[/span]더보기[/a]
[/div]
[div id='rightcolumn']
[/div]
[div id='footer']
[/div]
[/div]
[/body]
[/html]
소스다시 올려볼게요^^ CSS참 오묘하내요!
Ajax를 알아보던중 궁금한 점이 생겼습니다.
자바스크립트 기반인 Ajax는 아무래도 스크립트가 지원되지 않는 환경에서는 접근성이 떨어지는 단점이 있는 것으로 압니다.
그런데 원문 태그는 유효하게 (href=”link”) 처리하고, 스크립트로 본문을 수정(href=”#layer”)하여 Ajax를 띄우는 식을 하려고 합니다.
올바른 태그를 사용하고, 스크립트로 태그를 조작하는 방법이 접근성에 어긋날까요?
태그상으로는 문제가 없기 때문에 나쁜 방법은 아닌 듯 한데…
접근성에 대해 생각한다면 누구나 한번쯤 해볼만한 생각같아서 적어봤습니다 -_-
@눈물꽃
더보기 텍스트 앞에 포함된 특수문자 › 가 줄 바꿈 되는것이 문제인가요? 이것은 브라우저 버그인것 같습니다. 다음과 같이 해결 할 수 있겠네요.
.more span { float:left }
@김무건
어떤 방식인지 제가 정확하게 이해하지는 못했지만 href 속성 안쪽에 목적지가 존재하는 유효한 URL이 있으면 어떤 상황에서도 문제가 되지 않습니다. ^^
답변 감사합니다.
암튼 html 마크업만 제대로 하면 될 것 같네요.
—
궁금한게 하나 더 있는데요,
XE 공식 레이아웃에서 로그인(anchor)태그의 href 속성은 #loginWindow 을 가리키고 있습니다.
#loginWindow 의 위치는 어차피 레이어 이니까 아래와 같이 마크업해도 될까요?
[a href="#loginWindow" onclick="$('#loginWindow').classToggle('none'); return false;" ][img src="login.gif" alt="login" /][/a]
간단하게 말해서 레이어를 보이는 anchor 태그에 return false를 넣어줘야 할 필요성이 있을까요?
으휴… 정말 쓸데없는거 가지고 한참 고민하고 있습니다 ㅡ_ㅡ
@김무건
이런 경우 return false 를 포함하는 이유는 #loginWindow 라는 목적지로 이동하면서 화면이 갑자기 스크를 되기 때문에 이를 방지하려는 목적인데요. 만약 이런 문제가 발생하지 않는다면 빼는것이 더 좋은것이 맞습니다.
이런 고민들을 자주 하시면 기본이 튼튼한 웹을 만드는데 반드시 도움이 된다고 생각합니다. ^^
불필요한 스크롤이 발생할 때 return false 를 넣는게 적합하군요..
좋은거 배웠네요 :)
안녕하세요~ jQuery Datepicker 예제에 궁금한점이 생겨 문의드리러 왔습니다.
해당 Jquery DatePicker경우 FF의 경우 원활히 작동하나
IE7에서 새로고침시에 Input박스가 표시되지않네요…다른IE 버전에서의 테스트는 해보지
못했습니다.
$(doucment).ready{function(){
});
을 추가했는데도 여전히 같은문제네요….
혹시 이증상의 원인을 알수있을까요?
@눈물꽃
눈물꽃님 덕분에 자바스크립트 오류가 있던것을 발견 했습니다. 수정해서 다시 업로드 했습니다. 다시 한 번 확인해 봐 주시겠어요? 감사합니다. ^^
아 잘되내요^^
제소스에 문제인가……..조금더 공부를 해봐야겠네요 ㅎ
항상 좋은정보 잘배우고 갑니다^^
@눈물꽃
아뇨. 제 소스에 문제가 있었습니다. ^^
아~찬명님 예제는 정상작동 하는데 저는아직도 같은 문제가
있어서요 ^^ 수정된 부분이 jQuery(function($) 부분같은데…….
똑같이 수정하였으나 새로고침하여도 스톱을하네요….
URL로 최초접근시에만 정상작동을하고,,,새로고침 후에는
정상작동을안하네요………
@눈물꽃
그 부분만 바뀐게 아닙니다. 잘 확인해 보세요. ^^
안녕하세요
다름이 아니라 레이아웃 작성을 해야하는데 잘되서 조언좀 구하고자 왔어요
아래 이미지 같은 레이아웃을 만들려고 하거든요..
테이블로는 가능한데 div를 사용할려니까 애를 먹고잇어요-_-;
안바쁘시면 도움좀 주세요
http://odini84.cafe24.com/test/scroll_layout/layout.gif
아래는 제한사항이에요..
1. 가변 세로 100% 레이아웃
2. header height 고정
3. 컨텐츠 영역은 header의 height값을 제외한 브라우저 세로 100% (overflow-y: scroll; or auto)
4. 컨텐츠 영역의 내용이 길어진다면 위 3번의 overflow-y 처럼 컨텐츠 영역만 스크롤링
5. 스크립트 사용을 하지않는 css만을 이용한 레이아웃
오타가 났네요 잘안되서 인데 잘되서 라고 써놧네요 ㅎ-_-;
@조경수
CSS만으로 이런 레이아웃을 구현하는 방법은 제가 아는 한 불가능 입니다. 왜냐하면 CSS는 기본적으로 자식 요소들의 크기에 따른 height를 갖는데 이런 방법은 화면 크기에 따른 height를 갖는 방법이고 화면의 크기만큼 큰 상자를 만드려면 일단 html, body 요소의 높이가 100%가 되어야 하지요. 이 값은 절대값이 아니라 상대값이기 때문에 높이를 상대값(%)으로만 나누지 않고 고정값(px)이 포함되면 이론상 불가능한 방법입니다.
웹표준화관련 예제를 찾다가 유입된 1인입니다.
정말 필요하고 시급했던 자료들을 이곳에서 찾아 궁금증을 해결하였습니다.
좋은자료와 글 감사합니다.
앞으로 자주 찾아뵈게 될것 같네요.
http://www.xpressengine.com/18894124
찬명님 잊혀졌어요.
불쌍해서 어떡해요 ㅋㅋㅋㅋ
아니 잘못봤어요 명단에 끼어있군요!
킁.. 아쉬워라~
안녕하세요, 얼마전에 전주에서 강의 들었었는데 기억을 하실런지…ㅎ
예전부터 작업할 때 이 사이트 즐겨찾기 해놓구 많은 도움 받았었는데요.
그 주인공이 제 앞에서 강의를 하시니까 너무 신기했어요~ㅋ
맨날 몰래 들어와서 도움만 받다가 처음으로 글 남깁니다.
참, 저 드디어 홈페이지 XE로 바꿨어요~
익숙한 방법이 아니라 첨에 좀 헤깔리고… 설명서 찾기가 힘들더라구요. ㅋㅋ
그래도 계속 미뤄왔던 제로보드4 업그레이드를 해치워서 뿌듯해요~
암튼 선생님 강의 덕분에 정말 많은 걸 배울수 있어서 넘 좋았구요.
앞으로도 유익한 정보로 가득한 나라디자인 홈페이지(^^)에 자주 들러서 많이 배우고 갈께요. 감사합니당
참, 그리고 행복한 고니 선생님께도 안부전해주세요.
너무 재밌는 자료 준비와 열정적인 강의를 해주셔서 감사했고 재밌는 자바스크립트를 알게되어서 넘 좋았다구요.
직접 글 남겨드리고 싶지만 그 분 홈피에서 방명록을 찾지 못하여서요.(저만 못찾는건가…ㅡ.ㅡ;)
뜬금없이 다른 글에 코멘트 달기도 쑥스럽고 해서요. ㅎㅎ
암튼 두 분다 멀리까지 오셔서 좋은 강의 해 주신 점 다시한번 감사드립니다. ( _ _ )
@루피노
저도 아직 꼼꼼하지 못하고 부족한 측면도 많으니까 보시고 보완좀 해주세요. ^^
@김무건
명단에 포함되서 정말 다행입니다. 감사합니다. ㅎㅎㅎ
@윤정실
기억이 나다 마다요. 너무 강렬하게 기억에 남지요.
어쩌면 그렇게 리액션이 좋으신지 저 강의 할 때마다 데리고 다니고 싶을 정도였다니까요. ㅎㅎㅎ
그 어렵다는 XE로 갈아타기에 성공하신걸 보니 보통 내공이 아니시군요.
메뉴얼 찾기 어렵게 된건 저도 반성을 좀 하고 있구요.
앞으로는 찾기 쉽게 배치하도록 노력할께요.
그리고 행복한고니 선생님께도 안부 전할께요.
종종 뵈요!
P.S. XE로 만든 정실님 사이트 정말 이쁘네요. ^^
CSS를 다운받을 수 있을까?
CSS버튼처럼요? CSS를 보고 적용된거를 보면 더 쉬울꺼같아서요
저처럼 초보는요…^^
@이혜림
CSS는 HTML 소스보기 하신 다음에 [link type="text/stylesheet" url="example.css"] 이와 같은 형식의 코드를 찾은 뒤 example.css 파일을 직접 내려받으 실 수 있습니다.
안녕하세요~Single Select Form : Radio Input(Emulate Select/Option) 예제에서요
Li항목이 많아지고 그아래위치에 SelectBox를 추가할시에
z-index문제때문에 myValue값이 먼저올라오내요….
Li항목에 z-index를 높였을시에 FF에서는 정상작동하는데
IE에서 z-index Bug때문에 같은 문제가 계속일어나네요….
di .Select 에 z-index를 -1을 주니 모두안보이고…어떻게 해결하면될까요..
@눈물꽃
다른 요소에는 z-index를 부여하실 필요가 없구요 .select 요소에 z-index를 부여하시면 이 문제를 해결할 수 있습니다. z-index는 부모요소에 종속적이기 때문에 .select 요소의 자식 요소에 부여하는 z-index는 문제를 해결하는데 아무 도움이 되지 않습니다.
즉, 아래쪽에 위치한 .select 요소에 z-index를 높게 부여하시면 되는데 이 때 반드시 .select 요소는 position:relative 여야 합니다.
만약 이 문제가 아니라면 문제 페이지의 URL을 직접 보여주세요. 무엇이 문제인지 한 번 확인해 보도록 하겠습니다.
http://postfiles9.naver.net/20100524_232/engel4500_1274682060237fc1Sb_jpg/select_engel4500.jpg?type=w3
이미지 처럼 선택옵션들이 내려왔을때 아래쪽에 같은 Select Box가 있으면
옵션리스트가 아래쪽 셀렉트박스의 MyValue의 Index값에 영향을 받는것같습니다.
@눈물꽃
링크해 주신 파일에 저는 접근이 안됩니다. 다음과 같은 메시지가 표시되네요.
The page cannot be found.
HTTP 404 – File not found.
아~우선은 해결했습니다~
찬명님의 조언을 듣고 CSS에서 .Select 에서 Z-index값을 바꿨었는데…
아래 쪽.Select에 인라인스타일로 z-index를 넣어주니 정상작동을 하내요
이렇게 해도 되는건지 잘모르겠고 아직 배워야할게 많네요 ㅜㅜ
@눈물꽃
브라우저가 표준에 따른다면 사실 z-index는 부여할 필요가 없습니다. 왜냐하면 position:relative 요소는 늦게 마크업된 요소가 자동으로 높은 z-index를 가지기 때문입니다.
안녕하세요
맨날 눈팅만하다가 질문좀 올려볼게요 ㅎㅎ
line-height와 인코딩 타입에 대해서질문좀 하려구하는데요
일반텍스트 크로스 브라우징이 문제인데요.
일반적으로 line-height를 지정하지않았을경우엔
첫줄 라인은 동일하지만. 2번째 라인부터 달라지잖아요. 물론 텍스트를 감싸는
부모엘리먼트의 높이도 line-height를 지정하지않으면 제각각이구요
line-height을 지정할경우, 부모엘리먼트의 높이는 고정이될수있으나
ie6에서 텍스트가 약 1px정도 아래로 내려오더군요.
그거 마출려고==;이것저것 다해보다가 인코딩 타입을 utf-8에서 euc-kr로 바꿔주기만했는데 웬걸. 모든브라우저가 일반텍스트의 줄간격이 픽스 되더군요-_-;
이거 utf-8과 euc-kr의 인코딩 차이때문에 생기는게 맞는건가요?
아 그리고. 일반 영문의경우엔 utf-8이든 euc-kr이든 폰트 줄간은 모두 동일하게 픽스 되더군요.. 근데 한글+영문조합이나, 한글뿐인 텍스트의 경우 인코딩 타입에서
줄간떨림이 현상이보여서요..
utf-8로는 해결방법이없는건가요..?
바쁘신데 고생이 많으세용 ㅎ;;
안녕하세요..
블로그를 잘 보고 있는 디자이너 입니다.
궁금한 점이 있어서..
제가 못모르고 웹접근성에 뛰어들었을때 br태그를 쓰면 웹접근성에 위배된다는 그런 소리를 들은적이 있는데….
사실인지 아님 거짓인지 알고 싶습니다.
위배된다면 어떤식으로 써야 되는건지…
저한테 정확한 정보를 좀 알려주세요…
@익명
추측하고 계셨던 캐릭터셋 문제가 맞습니다. 하지만 이건 캐릭터셋이 문제가 아니라 사실 브라우저가 문제입니다.
utf-8인 경우 한글과 영문을 혼용해서 사용하면 특히 링크를 걸었을 때 IE7브라우저에서 언더라인이 들쑥 날쑥하게 표시되는 그런 버그가 있었던 것으로 기억합니다. 제 기억으로는 아마도 주변에 흐르는 인라인 요소 또는 이미지 요소의 vertical-align 속성을 모두 제거하면서 이 문제를 해결했던 것으로 기억합니다. vertical-align 대신 다른 방법으로 수직 정렬을 조정해야 했구요.
일단 문제상황 주변에 흐르는 이미지 또는 인라인 요소의 vertical-align을 모두 제거해 보시고 증상이 해결되는지 확인해 보세요.
@꼬맹이
br 태그가 접근성에 좋지 않다는 말은 할 수 있어도 위배된다고까지 말할 수는 없습니다. 그만큼 치명적이지는 않다는 것이죠. 그리고 웹 접근성 지침에도 그와 관련된 항목을 본적이 없습니다.
한편 화면낭독기를 사용하는 시각장애인들은 방향키를 이용해서 한줄 한줄 텍스트를 음성으로 전달받을 수 있는데요. 이 때 의미상 구분이 필요하지 않은 곳에 br을 사용하게 되면 이 부분을 자연스럽게 붙여서 읽지 못하고 키보드를 한 번 더 눌러야 하고 따로 분리해서 음성으로 전달받기 때문에 불편하게 된다는 이야기를 들은적은 있습니다.
따라서 접근성을 심각하게 훼손하는 것은 아니지만 불필요한 곳에 사용을 자제하게 되면 장애인들의 사용성을 높일 수 있는 방법인 것은 확실하죠.
답변은 잘 보았습니다. 감사합니다.
근데 그거에 대한 질문 하나 더요
그럼 br태그 대신 태그를 사용하는것은 어떡게 생각하세요.
그동안 그렇게 사용해왔거든요…
줄바꿈은 해야되는데 br태그는 쓰면 안된다고 들어서…
p태그를 써도 장애인분들한테 불편을 드릴까요?
@꼬맹이
br 대신 p를 사용한다는 말씀인가요? 여기서 중요한것은 어떤 태그를 사용하는가보다 적당한 때에 알맞게 사용하는것 입니다. br도 존재 이유가 있는 것이고 p도 마찬가지죠. 문단을 나누기 위해 p를 쓴다면 맞지만 하나의 문단 안에서 내용과 상관없이 레이아웃을 맞추기 위해 하나의 문단을 2개의 p로 나눈다면 맞지 않는 것이죠. 그런 경우라면 p를 사용했더라도 br을 쓰는 것과 마찬가지 문제가 발생하니까요. br 태그도 엄연히 표준 태그이고 하나의 문단 안에서 단순하게 줄바꿈을 처리하기 위한 목적의 태그가 맞습니다. 단지 되도록 사용을 권장하지 않는 것일 뿐이죠.
XE 스킨들만 건드리다가 사이트를 수정하는 작업을 맡게 됬습니다.
좀 열어보니 부실공사가 어마어마 하더군요.
지금까지 알아온 웹 코딩과는 전혀 다른세계였습니다…. ㅋㅋㅋㅋ
결론: 시작부터 이 블로그가 옆에 있었다는게 큰 행운입니다 +_+b
이런 pre 태그 넣어도 태그는 안먹히는군요.. 다시 등록합니다. 이전글은 지워주세요.
안녕하세요. :visited 색상 변경해주신거 감사드립니다. ^_^
여기에 질문을 드려도 되는지 모르겠네요. 질문받는곳이 아니면 그냥 무시하셔도 괜찮습니다.
1. 아래 예처럼 테이블셀이 우측하단 정렬로 되어 있을때 그안의 내용중 일부(div)는 셀의 좌측상단에 딱 붙어서 보여주고 싶습니다.
그런데 아무리 생각해도 방법이 떠오르질 않네요. (셀안에 다시 div 태그이후 테이블을 크기 100%로 만들어 우측하단으로 정렬을 주고 상위 셀은 좌측상단으로 주면되지만 css만으로 가능한 방법이 있는지 궁금합니다.)
div 에 position을 absolute로 주면 해당 셀 좌측상단이 기준이 아닌, 화면의 좌측상단을 기준으로 하니..안되구요.
(상황상 td 태그는 꼭 있어야 하는 경우 입니다.)
어떤 방법이 있을까요?
[pre][td width="가변적" height="가변적" align="right" valign="bottom"]
[div style="position:absolute;"]해당 셀 좌측상단에 딱 붙이고 싶은내용[/div]
기타…우측하단으로 정렬되어 보여줄 내용….
[/td]
[/pre]
2. table-layout:fixed 를 설정하면 IE를 제외한 브라우저에서는 셀의 높이가 지정된 경우라도 셀 내용이 길어지면 셀높이가 늘어납니다. 그런데 IE만 지정된 높이대로만 나오고 나머지는 잘리더군요. 이런 경우 IE 에서도 높이는 자동으로 늘어나게 할수 있는 속성이나 방법이 있나요?
(추가 : 질문도중 혹시 min-height:1px 같은 속성을 넣어보면 어떨까 해서 테스트해보니 FF나 크롬처럼 자동으로 늘어나네요. 해결은 되었는데 이런방법으로 해결하는 게 맞는건가요?)
3. 계속해서 테이블 질문만 드리네요. -_-; 빈셀의 경우 테두리 설정값이 IE에서 나오질 않네요. empty-cells:show 속성도 IE8이상에서만 지원한다고 나와있구요.. 이런경우 그냥 더미이미지나 공백등을 넣는 방법말고 효과적인 방법이나 속성값이 있을까요?
저좀 살려주세요.
[div class="sub_b" class="iePngFix" /][img src="img/left-b.gif"]
대체 이걸 어떻게 처리해야 할까요 ㅡ_ㅡ