내컴퓨터님 gnb 제안에 대해서 정보
내컴퓨터님 gnb 제안에 대해서
본문
우선 이 글을 자게에 적을까 그누보드팁에 적을까 강좌에 적을까 퍼블리셔톡에 적을까 고민을 많이 하다가, 자게에 적습니다.
읽어야할 분이 읽었다고 판단되면 적절한 게시판으로 이동하겠습니다.
어젯밤에 단 댓글은 피곤한 상태에서 쓴거라 예민해보일 수 있어서 지웠습니다.
어떤 부분들은 css를 다룰 줄 아는 분들에게는 너무 기초적인 부분이어서 설명을 드릴 필요가 있을까 싶기도 했구요.
아무튼 다시 칼을 뽑았으니 무라도 썰어보겠습니다.
바쁘시면 굵게 표시한 부분만 뽑아서 읽으셔도 되겠습니다.
이런 제안을 해주셨었는데요.
<style>
/* GNB CSS */
ul, li {list-style:none; margin:0px; padding:0px; font-size:9pt; color:white; cursor:pointer;}
#gnb {width:100%; height:40px;}
#gnb li {padding-left:10px; padding-right:10px; height:40px; line-height:40px; position:relative; float:left;}
#gnb li ul {position:absolute; left:0px; top:40px; clear:left;}
#gnb li ul li { width:7em; height:32px; line-height:32px; position:relative;}
#gnb li ul li ul {position:absolute; left:100%; top:0px; }
#gnb li ul li ul li {width:7em; height:32px; line-height:32px; position:relative;}
#gnb li {background:#333333;}
#gnb li ul {display:none;}
#gnb li ul li {background:#555555;}
#gnb li:hover ul li ul {display:none;}
#gnb li:hover ul li ul li {background:#777777;}
#gnb li:hover {background:#444444;}
#gnb li:hover ul {display:block;}
#gnb li:hover ul li {display:block;}
#gnb li:hover ul li:hover {background:#666666;}
#gnb li:hover ul li:hover ul {display:block;}
#gnb li:hover ul li:hover ul li{display:block;}
#gnb li:hover ul li:hover ul li:hover{background:#888888;}
</style>
덧붙여 유우니얌님은 이런 댓글도 달아주셨는데요.
#menu li:hover > .submenu{display:block}
결론부터 말씀드리면,
첫째 둘다 ie6 에서는 동작 안하는 코드들입니다.
그누보드5는 ie6부터 최선의 대응을 노력하고 있습니다.
ie6에서 가상선택자의 하위 선택자는 잡히지 않습니다.
> 선택자 역시 마찬가지구요.
둘째 키보드 운용이 불가능합니다.
동작의 가불가를 떠나서 li:hover ul 을 쓰고 싶다면, li:focus ul 도 써줘야 합니다.
키보드 운용은 웹 접근성의 핵심입니다.
셋째 스타일 상속이 심하게 일어납니다.
물론 모든 메뉴를 이미지로 구성한다면 문제 없습니다. 문제가 작아지긴 합니다.
하지만 배포판은 텍스트를 기반으로 디자인되었습니다.
예를 들어
#gnb li 에는 font-weight 가 있고, #gnb li ul li 에는 font-weight 가 없을 때, 초기화를 시켜줘야 합니다.
#gnb li 의 font-weight 가 #gnb li ul li 에도 적용되기 때문입니다.
속성이 한 두개면 편할텐데, 작업하다 보면 한두개로 끝나지가 않죠?
넷째 css 선택자가 불필요하게 중복되고, 소스만 봤을 때 몇단계 메뉴인지 한 눈에 파악하기 어렵습니다. 성능도 낮아집니다.
유지보수가 어렵다는 얘기입니다.
#gnb li 까지는 간단하고 좋습니다.
#gnb li ul li 까지도 좋습니다.
#gnb li ul li ul li 부터는 몇단계 메뉴인지 슬슬 짜증이 나기 시작합니다.
사실 #gnb li ul li ul li 보다는 #gnb li li li 가 더 좋습니다. (자식에 ol, ul 이 섞여 있지 않다는 가정 하에, ul 이 하나만 쓰였다는정 하에, NB 니까 무리가 있는 가정도 아닙니다.)
그런데 #gnb li li li 도 위의 셋째에서 언급한 것처럼 스타일 상속이 일어나기 때문에 유지보수가 짜증납니다.
성능이 낮아지는 건, 사실 요즘은 그렇게 큰 이슈가 되지는 않는 것 같아 별도로 부연설명하지 않겠습니다.
궁금하시면 검색해보세요. ;)
위 네가지 이유로 다음과 같은 결과물이 나온 것입니다.
현재 배포되고 있는 코드에서 추가 수정 (불필요한 부분 제외)된 부분이 있습니다. 다음 패치에 적용될 예정이구요.
그리고 이마저도 사실은 수정이 어렵다는 (CSS는 사실 누구에게나 어려운데 말이죠.) 의견에 따라 js off 대응 부분은 제거를 한 코드이구요.
#gnb {position:relative;margin:-1px 0 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb_1dul {margin:0 auto !important;padding:0;width:970px;zoom:1}
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""}
.gnb_1dli {z-index:10;position:relative;float:left}
.gnb_1da {display:inline-block;padding:0 40px 0 10px;height:35px;background:url('../img/gnb_bg00.gif') center right no-repeat;font-weight:bold;line-height:2.95em;text-decoration:none}
.gnb_1da:focus, .gnb_1da:hover {background:url('../img/gnb_bg00.gif') #333 center right no-repeat;text-decoration:none}
.gnb_1dli_air .gnb_1da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_1da {background-color:#333;color:#fff}
.gnb_2dul {display:none;position:absolute;top:35px;width:180px}
.gnb_2da {display:block;padding:13px 10px;text-align:left;text-decoration:none}
.gnb_2da:focus, .gnb_2da:hover {text-decoration:none}
.gnb_1dli_air .gnb_2da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_2da {background-color:#333;color:#fff}
.gnb_1dli_over .gnb_2dul {display:block;left:0;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:1px;background:#fff}
.gnb_empty {width:100%;height:35px;text-align:center;line-height:2.95em}
추천
0
0
댓글 30개
어제 저도 잠깐 보면서 좋은 말씀들을 많이 하셨는데도 조금 불편하긴 했습니다..
아무래도 많은 부분이 사용자 선택사항인 것 같습니다.
이 곳에는 무림고수들이 즐비한데 그런 분들이 마음껏 활보할 수 있는 공간이 마련되어 있다고 봅니다.
스킨메뉴도 있고,
빌더메뉴도 있고,
저같이 보잘 것 없는 사람도 감히 끼어 있는 강좌란도 있고,
.....
그래서 어제 잠깐 올라온 글을 보면서 접근이 그쪽으로 갔으면...
그래서 알고 계신 것들을 나누고 싶으시면 멋진 스킨을 만들어 올리셔서 공유하셨으면...
사실 무엇인가를 꼬집기는 쉬워도 직접 만들기는 어려운 경우도 있고(오해는 말아주세요... 윗글을 쓰신 분이 못하신다는 것이 아니라 일반적인 것들을 얘기하는 겁니다.)
자신이 가진 능력을 무엇인가 만들어 나누기는 더욱 어렵다는 것이죠.
이왕이면 직접 만들어 나누는 곳이 되면 좋겠습니다....
ㅎㅎ 이 글로 또 누군가가 상처받지 않기를!!
아무래도 많은 부분이 사용자 선택사항인 것 같습니다.
이 곳에는 무림고수들이 즐비한데 그런 분들이 마음껏 활보할 수 있는 공간이 마련되어 있다고 봅니다.
스킨메뉴도 있고,
빌더메뉴도 있고,
저같이 보잘 것 없는 사람도 감히 끼어 있는 강좌란도 있고,
.....
그래서 어제 잠깐 올라온 글을 보면서 접근이 그쪽으로 갔으면...
그래서 알고 계신 것들을 나누고 싶으시면 멋진 스킨을 만들어 올리셔서 공유하셨으면...
사실 무엇인가를 꼬집기는 쉬워도 직접 만들기는 어려운 경우도 있고(오해는 말아주세요... 윗글을 쓰신 분이 못하신다는 것이 아니라 일반적인 것들을 얘기하는 겁니다.)
자신이 가진 능력을 무엇인가 만들어 나누기는 더욱 어렵다는 것이죠.
이왕이면 직접 만들어 나누는 곳이 되면 좋겠습니다....
ㅎㅎ 이 글로 또 누군가가 상처받지 않기를!!
그누보드는 사용하시는 분들께서 최소한의 제안(proposal), 이 기능은 이런 식으로 구현할 수 있고, 이렇게 표현할 수 있습니다라는 관점에서 봐주셔야지, 이게 정답(answer)입니다 라고 보시면 개발하는 저희나 사용하시는 분들이나 서로 난감해질 수 있을 것 같습니다.
박달나무님 말씀대로 스킨이나 빌더를 통해 또 다른 제안(proposal)을 하실 수 있고, 여지껏 많은 회원님들께서 (자신의 시간과 경험을 활용하여) 그렇게 해오셨기 때문에 지금의 그누보드가 있었던 거겠죠.
어쩌면 그런 부분이 오픈소스의 근간이겠죠.
박달나무님 말씀대로 스킨이나 빌더를 통해 또 다른 제안(proposal)을 하실 수 있고, 여지껏 많은 회원님들께서 (자신의 시간과 경험을 활용하여) 그렇게 해오셨기 때문에 지금의 그누보드가 있었던 거겠죠.
어쩌면 그런 부분이 오픈소스의 근간이겠죠.
css는 알면 알수록 css하나만으로도 너무 어려운 것 같습니다.
그누보드소스가 다른 소스들보다 더 보기 편하게 되있다고 생각은 든적이 있는데, 이렇게 css하나에서도 이렇게 세밀하게
보기 편하게 만들려는 노력이 새삼 다시 느껴지네요. 자세한 설명에 또 한번 더 놀라게 되네요.
정말 멋진 분들이네요. 감사합니다~
그누보드소스가 다른 소스들보다 더 보기 편하게 되있다고 생각은 든적이 있는데, 이렇게 css하나에서도 이렇게 세밀하게
보기 편하게 만들려는 노력이 새삼 다시 느껴지네요. 자세한 설명에 또 한번 더 놀라게 되네요.
정말 멋진 분들이네요. 감사합니다~
좋게 봐주셔서 감사합니다. 자칫 이 글이 이렇게 이렇게 만든 거니까 그냥 써 같은 뉘앙스가 될까 조심스럽습니다.
제가 예전에 그누보드를 접하며 (DTD 버전) 감탄했던 부분이 css 였는데... 너무 간결하고 깔끔하게 정리되어 있어서요....
뭔 일이 있었나보죠?
지운아빠님 글을 보니 대충 이런 사건이었나보네요. ㅎㅎㅎ
뭔 일이 있었나보죠?
지운아빠님 글을 보니 대충 이런 사건이었나보네요. ㅎㅎㅎ
사건은 너무 비약된 표현 같습니다. 그리고 dtd 는 다른 분이 작업하신 거고, 지금 주제에도 맞지 않는 것 같네요. ^^;;
ie6을 지원하나보네요
ie6 지원을 위해 코드 간결성을 포기하느냐
진지하게 고민해볼필요는 있는 문제네요
ie6 지원을 위해 코드 간결성을 포기하느냐
진지하게 고민해볼필요는 있는 문제네요
정확하게 말씀드리자면 'ie6 지원을 위해'가 아니라, '웹 접근성'을 위해서이기도 합니다. 소득이 낮고 고령화되거나 장애를 가지고 있을 경우 ie6 을 사용할 확률이 증가합니다. 정부나 기관에서 지원하는 성능이 낮은 컴퓨터를 사용할 확률이 높아지기 때문입니다. (들은 얘기라 자료 출처를 밝혀드리지 못하는 점 죄송합니다.)
공공기간 홈페이지는 i6으로 동작도안하지만.. i6을 사용할수바께없는 컴퓨터를 지원..
네 그런 현실이라고 하더라구요. 지방으로 갈수록 심해지기도 하구요.
글 마지막에 적어놓으신 스타일 복붙하니 익스6에서 틀어지네요~ html부분도 바뀌는건가요?
아래는 어제 밤에 해보려다가 익스 때문에 출근해서 잠깐 수정해봤습니다~
#gnb {position:relative;margin:-1px 0 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb #gnb_1dul {margin:0 auto !important;padding:0;width:970px;}
.gnb_1dli {z-index:10;position:relative;float:left;}
.gnb_1da {display:block;float:left;padding:0 10px;width:80px;height:35px;background:url('../img/gnb_bg00.gif') center right no-repeat;font-weight:bold;line-height:2.95em;text-decoration:none}
.gnb_1da:focus, .gnb_1da:hover {background:url('../img/gnb_bg00.gif') #333 center right no-repeat;text-decoration:none}
.gnb_1dli_on a {background-color:#333;color:#fff}
.gnb_2dul {display:none;position:absolute;top:35px}
.gnb_2da {display:block; padding:0 10px;width:161px;height:35px;text-align:left;text-decoration:none;line-height:2.95em}
.gnb_2da:focus, .gnb_2da:hover {text-decoration:none}
.gnb_1dli_over .gnb_2dul {display:block;left:0;width:180px;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:1px;width:180px;background:#fff}
.gnb_empty {width:100%;height:35px;text-align:center;line-height:2.95em}
익스6에서 마우스오버시 그룹이름 색깔이 안바뀌네요ㅠ
담배를 끊어야 합니다. 술을 줄여야 합니다. 그러기 위해선 ie를 버려야 합니다~;;
즐거운 하루 되세요~
아래는 어제 밤에 해보려다가 익스 때문에 출근해서 잠깐 수정해봤습니다~
#gnb {position:relative;margin:-1px 0 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb #gnb_1dul {margin:0 auto !important;padding:0;width:970px;}
.gnb_1dli {z-index:10;position:relative;float:left;}
.gnb_1da {display:block;float:left;padding:0 10px;width:80px;height:35px;background:url('../img/gnb_bg00.gif') center right no-repeat;font-weight:bold;line-height:2.95em;text-decoration:none}
.gnb_1da:focus, .gnb_1da:hover {background:url('../img/gnb_bg00.gif') #333 center right no-repeat;text-decoration:none}
.gnb_1dli_on a {background-color:#333;color:#fff}
.gnb_2dul {display:none;position:absolute;top:35px}
.gnb_2da {display:block; padding:0 10px;width:161px;height:35px;text-align:left;text-decoration:none;line-height:2.95em}
.gnb_2da:focus, .gnb_2da:hover {text-decoration:none}
.gnb_1dli_over .gnb_2dul {display:block;left:0;width:180px;background:#fff}
.gnb_1dli_over2 .gnb_2dul {display:block;right:1px;width:180px;background:#fff}
.gnb_empty {width:100%;height:35px;text-align:center;line-height:2.95em}
익스6에서 마우스오버시 그룹이름 색깔이 안바뀌네요ㅠ
담배를 끊어야 합니다. 술을 줄여야 합니다. 그러기 위해선 ie를 버려야 합니다~;;
즐거운 하루 되세요~
언뜻 봤습니다만 제가 올린 코드와 조금 다른 것 같습니다.
저도 한번 더 확인을 해보겠습니다만 뽁스님도 한번 더 확인해주시겠어요? ^^
한가지 더 말씀드리면 default.css 에 포함된 코드에서는 hover 나 focus 스타일이 link 와 동일하게 유지됩니다.
저도 한번 더 확인을 해보겠습니다만 뽁스님도 한번 더 확인해주시겠어요? ^^
한가지 더 말씀드리면 default.css 에 포함된 코드에서는 hover 나 focus 스타일이 link 와 동일하게 유지됩니다.
댓글에 적은 건 배포판에 있는 스타일 수정해 본 거예요~ 이 글 읽기 전에 수정해본거라 적어봤어요
본문에 적으신 스타일에서
.gnb_1dli {z-index:10;position:relative;float:left}
여기에 width값을 주니 ie6에서 안틀어지네요..
근데 마우스 오버시 하위메뉴들간에 간격이 생겨버리는건 이유를 못찾겠네요ㅠㅠ
.gnb_1dli {z-index:10;position:relative;float:left}
여기에 width값을 주니 ie6에서 안틀어지네요..
근데 마우스 오버시 하위메뉴들간에 간격이 생겨버리는건 이유를 못찾겠네요ㅠㅠ
틀어진다는게 어떤 현상을 말씀하시는 거에요?
http://playi.kr/g5b/
본문에 적으신 스타일에서 width값 빼놓은 상태인데요
ie tester 로 테스트해봤는데 그룹메뉴 가로 길이가 100%로 적용되어서 보여지네요
그룹메뉴1 그룹메뉴2 <= 이렇게 나오는게 아니고
아래처럼 나와요
그룹메뉴1
그룹메뉴2
본문에 적으신 스타일에서 width값 빼놓은 상태인데요
ie tester 로 테스트해봤는데 그룹메뉴 가로 길이가 100%로 적용되어서 보여지네요
그룹메뉴1 그룹메뉴2 <= 이렇게 나오는게 아니고
아래처럼 나와요
그룹메뉴1
그룹메뉴2
.gnb_1da 의 display:block 을 display:inline-block 으로 바꿔주시면 됩니다.
코드 정리하다 실수가 있었네요. 알려주셔서 감사합니다.
코드 정리하다 실수가 있었네요. 알려주셔서 감사합니다.
다시 한번 확인해봤습니다만 본문 코드를 사용하셨을때 ie6 에서 틀어진다는 표현에 적합할만한 증상은 확인되지 않았습니다.
소스를 수정하셔서 사용 중이신 것에 대한 질문은 QA를 이용하시면 좋겠네요. ^^
소스를 수정하셔서 사용 중이신 것에 대한 질문은 QA를 이용하시면 좋겠네요. ^^
display:inline-block 으로 하니깐 잘나오네요~^_^ 감사합니다~
넵 실수가 있었습니다. 덕분에 고쳤고 감사합니다.
참고로 ie teseter 너무 의존하지 마세요. ^^
모바일 작업하실 때 troy 나 에뮬레이터 의존하시는 분들도 많으시던데 에뮬레이터는 정말 그냥 참고만 해야 될 것 같습니다.
참고로 ie teseter 너무 의존하지 마세요. ^^
모바일 작업하실 때 troy 나 에뮬레이터 의존하시는 분들도 많으시던데 에뮬레이터는 정말 그냥 참고만 해야 될 것 같습니다.
많은 고민을 하셨음을 느끼게 해주는 글이네요..멋집니다
css 잘 다루시는 분들은 기본으로 깔고 가시는 내용이더라구요. 저는 아직 멀었습니다.
그래서 회원님들께서 새로운 방법 제안해주시면 항상 성심껏 살펴보고 고민하고 있습니다.
감사합니다.
그래서 회원님들께서 새로운 방법 제안해주시면 항상 성심껏 살펴보고 고민하고 있습니다.
감사합니다.
강좌 수준이네요. 잘 봤습니다~^^
저 같은 초보들을 위해... 각 항목들이 뭘 의미하는지 '주석'이 달리거나 따로 설명이 있다거나 하면 좋겠습니다.
저 같은 초보들을 위해... 각 항목들이 뭘 의미하는지 '주석'이 달리거나 따로 설명이 있다거나 하면 좋겠습니다.
원본 소스에 주석을 상세하게 적어놓는 것이 모든 사용자에게 좋은 일이라고 보긴 어렵습니다.
설명이나 이해는 팁이나 강좌를 통하는 것이 바람직할 것 같습니다.
설명이나 이해는 팁이나 강좌를 통하는 것이 바람직할 것 같습니다.
그렇죠. 주석이 너무 많아도 지저분해보이더군요.
배경색이나 글색을 바꿔보면... 반영되는 부분도 있고 반영이 안되는 부분도 있고 해서 헤메는 중입니다~^^
배경색이나 글색을 바꿔보면... 반영되는 부분도 있고 반영이 안되는 부분도 있고 해서 헤메는 중입니다~^^
hover focus 스타일 참고하실 수 있도록 추가해두겠습니다. 사실 이게 왜 빠졌지? 싶긴 했습니다. ^^;;
지운아빠님 ie6 에서도 당연히 된다는 착각을 해서ㅡ.ㅡ 또 하나더 배웁니다.
네이밍을 하나하나 해주어 스타일 상속을 피하겠다는거군요...
Ie6 테스트 할라면 어찌해야지 하아..
네이밍을 하나하나 해주어 스타일 상속을 피하겠다는거군요...
Ie6 테스트 할라면 어찌해야지 하아..
덧붙여 유지보수까지 생각하면 한눈에 파악되는게 중요합니다.
그냥 곁눈으로 보는 거랑 직접 수정할 때 한눈은 좀 다르죠?
내컴퓨터님은 곁눈으로 보신 거고, 저는 한눈으로 보고 그 차이인 것 같습니다. ^^
그냥 곁눈으로 보는 거랑 직접 수정할 때 한눈은 좀 다르죠?
내컴퓨터님은 곁눈으로 보신 거고, 저는 한눈으로 보고 그 차이인 것 같습니다. ^^
음.. 크로스브라우징 측면에서 취약하다는것은 인정하지만..
유지보수측면에서 불리하지는 않는것 같습니다.
메모장으로 투닥투닥 만든거라 소스 정리하기애매해서 그냥 저냥 만들었는데..
그리고 네비게이션 문자용 weight같은경우는 spen이나 a 를 이용하여 커버기능하고 더 간결할 것 같습니다.
Ie6에서 hover 사용하려면 어떤방법을 써야하는지는 한번더 찾아보고 공부하도록 하겠습니다.
유지보수측면에서 불리하지는 않는것 같습니다.
메모장으로 투닥투닥 만든거라 소스 정리하기애매해서 그냥 저냥 만들었는데..
그리고 네비게이션 문자용 weight같은경우는 spen이나 a 를 이용하여 커버기능하고 더 간결할 것 같습니다.
Ie6에서 hover 사용하려면 어떤방법을 써야하는지는 한번더 찾아보고 공부하도록 하겠습니다.
일반적인 이야기를 드린 겁니다. 내컴퓨터님이 편하신 방법을 취하시면 되겠죠.
