위에 댓글 잘못 올렸네요 (600번째 인데..)
꺽쇠를 괄호로 변환해서 다시 올려요###
///
img 태그를 사용할 때와 background 로 이미지를 불러올 때, 어느것이 빠른가요?
—
1.
[style type="text/css"]
h1 { margin:0; padding:0;}
[/style]
[h1][img src="logo.jpg" width="200" height="50" alt="My Home" /][/h1]
2.
[style type="text/css"]
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;}
[/style]
[h1][span]My Home[/span][/h1]
—
제 생각은 스타일로 적용하는 것이 조금 더 빨리 뿌려줄 것 같은데… (결과 속도는 같을 듯)
이미지를 무척 많이 사용하는 사이트가 아니라면 인라인 이미지를 사용하는 것과 CSS 배경으로 사용하는 것 사이에서 의미있는 속도차이를 발견하기 어렵다고 생각합니다.
왜냐하면 속도를 결정하는 요인으로써 http request와 렌더링 원리를 생각할 수 있는데 일단 동일한 이미지 개수라면 http 요청 횟수가 같기 때문에 이 부분에서는 차이가 없겠구요.
그 다음은 렌더링에 대한 차이인데 인라인 이미지나 CSS 배경 이미지나 모두 동일하게 HTML 마크업을 해석하는 순서에 따라서 순차적으로 화면에 표시된다는 점은 같기 때문에 체감 속도 또한 동일할 것으로 예상됩니다.
다만 이미지가 매우 많이 사용된 경우라면 인라인 이미지를 사용한 페이지가 더 느리게 느껴질 수 있는데 그 이유는 인라인 이미지 때문에 HTML 마크업의 용량이 조금 더 늘어나기 때문입니다.
사실 인라인 이미지를 사용해야 할지 배경이미지를 사용해야 할지를 결정할 때 중요한 고려사항은 속도가 아니라 의미 입니다. 의미가 있는 이미지는 되도록 전경(인라인) 이미지로 사용하고 의미가 없는 이미지만 배경으로 처리하는 것이 좋습니다. 왜냐하면 의미가 있는 배경 이미지를 사용한다면 반드시 전경에 대체 텍스트를 제공해야 하는데 HTML에는 이런 상황에 대처하는 문법이 없기 때문입니다. 흔히 IR(Image Replacement) 기법을 사용하기도 하는데 이런 방법은 정상적인 방법이라기 보다는 꼼수에 가깝습니다.
오늘도 질문을 갖고 왔습니다.
png파일을 IE6에서 적용시킬때 마우스 오버 이미지는 어떻게 해야 하나요?
그리고 정찬명님이 올려놓으신 글을 보면 핵을 사용하던데 그럴경우 서버에 무리가 가지는 않나요? 속도가 느려진다던지..핵을 사용하지 않고 자바스크립트로 하는 경우도 있던데 어떤 차이점이 있나요?
암튼..젤루 궁금한건 마우스오버 이미지에는 어떻게 적용하는지 입니다.
매번 막히는게 있으면 쪼르르 달려오는것 같아서 조금 민망하긴 하지만..나름대로 이것저것 찾아보고 실행해보고 최선을 다하다 마지막 방법으로 찾아오는 것이니 너무 나쁘게 생각지 말아주세요.. ^^;;
안녕하세요 정찬명님.
XE 게시판 모듈 스킨 제작하는데 도움말 좀 구하고자 찾아왔습니다. http://eond.com/test
이 게시판에 하단 쪽에 태그 리스트 버튼이 css에 배경그림으로 처리되어 있어서
따라해봤는데 저는 이렇게 되네요. http://eond.com/test2
도대체 어떻게 하신 건가요? ^^;;
괜찮으시면 스킨 모듈 제작하는 방법에 대해서도 좀 매뉴얼 작성에 도움 좀 주세요~;;
안녕하세요. 최근 너무늦게 웹접근성, 웹표준 공부하기 시작한 웹디입니다.
NULI가 정말 많은 도움이 됩니다. 이 블로그도 물론이고요.
가능하면 게시하신 글 모두 읽어보고 싶습니다.
하루에도 몇번씩 들르면서도 자취를 남길 생각을 못하다가 오늘 정찬명님의 너무도 자세한 프로필을 보고 감이 동하여 몇글자 남겨요.
생전 그렇게 자세한 프로필은 처음 봅니다 ^^
대전에 연고가 있고 현재 서울에서 이분야의 일을 하고 있고, 네이버 유저이고 등등..
그래서 더욱 반갑네요.
앞으로도 많은 도움 받겠습니다. 꾸벅~!
찬명님 안녕하세요~
궁금한게 있어서 글 올립니다..
방금 올렸는데, js소스를 그대로 올려서 그런지 다 날라간듯하여 새로 올릴께요 ㅋ; http://www.weddingpledge.co.kr/htc/main.html
여기 보시면 어떤 문제인지 쉽게 파악이 가능하실고에여~
팝업창이 부모창의 head내에 있는 스타일을 가져와서 반영하는 거거든요…
제가 드린 질문을 우선 XE 묻고 답하기에서 찾아봤는데 질문만 있고 답이 없어서 여기까지 와서 질문 드려요. ^^;
메뉴 출력 위젯은 위 “네비게이터(메뉴 출력기)” 외에도 블루게이트님이 만든 것, 제네시스님이 만든 것이 더 있었습니다만, 제네시스님의 메뉴출력기는 XE를 기초하여 만든 것이고 현재 XE 네비게이터의 가로 출력 위젯이 생성되지 않는 것처럼 제네시스님의 메뉴 출력기도 동일한 현상이었습니다.
블루게이트님의 메뉴 출력 위젯이 있는데 사용이 좀 불편해서요. http://eond.xpressengine.net/files/attach/images/18668603/111/682/018/scr_20100207_016.png
직접 이렇게 메뉴 고유번호를 입력해야한다거나 하는 불편함이 있어서
XE 네비게이터를 사용하려고 하는데 어떻게 메뉴를 이미지로 출력하는지 모르겠네요^^;
위 코드는 Navigator 위젯의 스킨 중 일부 입니다. class명의 사용을 잘 몰라서 여쭤봅니다.
첫번째, 두번째, 세번째 까지의 class명이 궁금한에ㅛ.
widgetContainer
widgetNavCdefault
widget_navigator_메뉴srl
이렇게 3가지인데요. 이러한 class명이 스킨의 css파일에는 없던데 왜 이렇게 설정한 건지 알 수 있을까요. ^^;
사용하지 않는 HTML 요소나 CSS 선택자는 직접 지우셔도 되는데요.
CSS Class 이름 가운데 변수로 처리된 것들은 자바스크립트가 참조하는 클래스 이므로 확인 후에 지우셔야 합니다.
개발한지 너무 오래 되어서 어떤 용도로 만들었는지 저도 기억을 못하고 있습니다. ㅠㅠ
안녕하세요~^^
정찬명 님 ~~
전 아직 드림위버 완전 초보 사용자로 조언을 좀 구하고자 문의드려용~*
직업이 웹디자이너라 포샵(상), 일러(상), 플래쉬(중)으로 다룰줄 아는데
드림위버는 초간단 링크거는법 밖엔 모른답니다.. ㅠ 흐흑
앞으로 쇼핑몰을 직접 제작해 운영하려고 하는데요
1년이란 기간동안 무엇을 어떻게 공부하면 좋을지 모르겠어요
하하 저 너무 초보라 ;; 홈페이지 만드는 과정에서 제가 습득해야할 지식들에 대해
조언 부탁드려용~*
serim님 저는 간단하게 브라우저의 소스보기를 이용해 처음에 코딩하는 방법을 배웠습니다. ^^; 제가 배우기 시작할 때에는 나모를 사용했는데 나모가 소스를 제 멋대로 망쳐버리는 바람에 그냥 하드코딩을 시작했는데 그 뒤로 점점 웹저작툴도 업그레이드되어 이제는 정말 편하게 만들더라고요. 툴이 편하긴 하지만 아직 제 스타일대로 코딩하는게 좋아 여전히 에디터플러스로 하드코딩 중이에요.~;;
메뉴 구성이 복잡해지니깐 저 사이트처럼 구성해놓으면 될 것 같은데
제가 플래시는 전혀 하지 못해서 어떻게든 자바스크립트와 친해져야 할 것 같은데
그래서 이 메인메뉴 아래에 서브메뉴를 가로로 띄우고 싶은데
위치 잡는게 곤란해서요. 1차 메뉴 바로 아래에 2차 메뉴를 띄우려니
1차 메뉴가 많아질 수록 우측으로 밀려나는데
2차 메뉴는 또 다시 1차 메뉴의 바로 아래에서 더 오른 쪽으로 가버리니 어려울 것 같고
아니면 2차 메뉴가 띄워지는 위치를 항상 왼쪽으로 고정되게 하려니,
1차 메뉴의 가장 우측 메뉴에서 2차 메뉴의 가장 왼쪽 메뉴로 이동하는 것도 쉽지 않을 것 같고
똑똑하게 1차 메뉴의 위치를 고려해서 2차 메뉴가 뜨는 위치를 정해준다거나
그런 소스는 없을까요? ㅠ_ㅠ;;
위 홈페이지의 회원 게시판의 글 중에서 184번 글에 문제가 생겨서 문의 드립니다.
회원분(아이디 : 광운 학생) 한분이 html로 글을 남긴뒤 편집기에서 화면에 보이는 방식으로 바꿔서
글을 남기셨었는데 문제의 184번 글을 작성하실때는 글을 남기는 부분에 편집기 같은 화면이 안떴었다고 하네요..
보시면 아시겠지만, 현재는 목록, 수정, 삭제 버튼이 안보여 삭제 조차 안되고 있습니다.
무었이 문제인지를 전혀 모르겠습니다.
삭제, 편집 등이 안되니 계속해서 흉물(?)스럽게 html코드 형식으로 게시판에 남아있네요..
똑같은 컴퓨터에서 글을 남겼었던 166 번 글을 보시면 목록, 수정, 삭제 버튼이 정상적으로 잘 보이고 있습니다.
http://eond.com/test3
가로 메뉴 여튼 띄우긴 했습니다. ^^;
제가 생각해봤는데요, submenu01~06 이런 식으로 번호를 매기는데
현재는 다 왼쪽 기준으로 서브메뉴가 뜨는데
숫자가 4이상이 되면 오른쪽 기준이 되도록 자바스크립트를 짜면 괜찮을 것 같기도 하네요.
^^;;;;
그렇네요. 저도 이미 출력된 2차 메뉴가 1차 메뉴에 마우스오버했을 때 또 2차 메뉴가 떠서 헷갈릴 수 있겠다 싶었는데, 안뜨게 하면 되겠네요. php를 몰라서 이런 걸 다루기가 어렵네요;;
선택되어있으면 submenu display:none; 하면 되겠네요.. 에디트플러스로 코드를 다시 보니 이건 제 능력 밖인듯 하네요..하하..^^;;; 저녁 식사 맛있게 하세요~;;;
혹시 http://tworld.co.kr 이나 http://lgtelecom.com 홈페이지에 사용된 메뉴 보셨어요?
티월드 같은 경우가 정찬명님께서 말씀하신 것과 같이 첫 페이지 접속했을 경우 뜨는 메뉴의 디자인과 첫번째 메뉴를 클릭했을 때 들어간 화면에 보이는 메뉴의 디자인이 좀 혼동스럽죠.
첫페이지에서 2차인 메뉴가 1차를 통해 들어갔을 땐 1차가 사이트 최상단에 위치해버리고
첫페이지에서 1차 메뉴와 똑같은 디자인이 2차 메뉴에 적용되어버려서
내가 클릭한 게 무엇이었는지 순간 혼동을 줄 수 있는 것 같더라고요.
이를 방지하기 위해서 내가 클릭한 메뉴가 무엇인지 로고 영역에 분명히 표시해주고 있고
최상단의 메뉴 이름과 동일하기 때문에 그에 대한 방지를 해주고 있긴 하지만
통신사 홈페이지에 자주 접속해서 사용하지 않는 사용자의 경우에는 접속할 때마다 길 잃고 헤메기 쉽죠.
엘지텔레콤 같은 경우가 Drop Down 포스팅에서 제가 댓글을 남긴 경우인데요,
의도치 않게 마치 폭탄같은 메뉴가 떨어져버리죠.
아무리 많은 메뉴를 한 번에 보여주고 싶다고 해도 사용자의 의도에 반해 커다란 네비게이션 영역을 만들어 버려서 다른 링크로의 진입을 방해한다면 이 역시 문제인 것 같아요.
메뉴의 수가 작은 곳에서는 저렇게 해도 서브로 뜨는 메뉴의 영역 자체가 화면에 비해 크지 않기 때문에 별다른 문제가 안될 수도 있지만, 메뉴가 많은 곳에서는 사용에 불편을 초래하는 것 같아요.
제가 고민하고 있는 것도 많은 메뉴를 어떻게 하면 효율적으로 보여줄 수 있을까 라서
레이아웃 경우에는 커다란 포털 사이트를 중심으로 체크하고 있고 메뉴에 있어서는 통신사나 금융권의 홈페이지를 참조해서 홈페이지를 만들고 있거든요.
그래서 이를 상담하기 위해 엘카님 홈페이지에 가서도 문의를 드린 적이 있는데(–);; http://eond.com/xe_data
이 곳을 보면 2단의 메뉴에 그 아래 위치 출력까지 더해지고, 설상가상으로 위치 출력 갯수는 인덱스 화면을 포함해 4차까지 가버리거든요.
제 홈페이지 같은 경우는 3단계의 메뉴가 많습니다. 아직 레이아웃이나 메뉴 인터페이스를 어떻게 짜야 좋을지 고민하느라 컨텐츠 등의 디자인은 하지 못했는데..
현재까직 고민한 바로는 이온디 사이트에서 회색 1단의 메뉴를 인덱스가 아닌 다른 메인 메뉴로 접속하면 티월드 사이트와 같이 1단계를 사이트 최상단으로 밀어버리고, 마우스를 올리면 로고 영역까지 메뉴의 영역으로 활용할까 생각 중입니다.
메뉴의 배경색상은 인덱스와 똑같이 하고, 어떻게 여러 사이트의 좋은 점을 취합해서 정리하다보면 좋은 네비게이션이 될 것 같네요~ ㅎㅎ;;
http://eond.com/xe
메뉴에 마우스 올렸을 때 그림이 바껴지도록 해놓았습니다.
그런데 div 위로 올라가는게 아니라 딱 그림 위에 마우스를 올려야지만 이미지가 변하네요.
혹시 다른 방법으로 표시해줄 방법 없을까요..
얼마 전에 포스팅하셨던 네비게이션 처럼 배경에 V 이런 표시를 넣는다거나..하려고 생각해보니 div 영역이 작다보니 ▼ 이런 작은 삼각형을 메뉴 아래에 넣어볼까요. (__)a;;
메뉴를 제작하다보면 선택된 메뉴인지 체크해주는 부분이 있습니다.
이걸 strong 이나 em태그로 마크업하면 어떨까요?
[ul]
[li][a href="/m1"]메뉴1[/a][/li]
[li][a href="/m2"][strong]메뉴2 (선택됨)[/strong][/a][/li]
[li][a href="/m3"]메뉴3[/a][/li]
[/ul]
CSS Pagination 하고 비슷한 예인데..
이렇게 마크업 된 예제를 본적이 없어서 머뭇머뭇 거리게 되네요 =_=
@정낙훈
메뉴설정에서 롤오버 이미지를 올리면 XE에 내장된 jQuery 에서 처리해줍니다.
텍스트인 anchor 태그는 영역을 넓게 잡아 css hover 처리해주는게 효율적이죠.
이미지메뉴를 사용했을때 onmouseover, hover 등의 효과를 주는건 XE메뉴와 연동이 불가능합니다.
결론적으로 말해서, 이미지메뉴의 롤오버 영역을 넓히려면 anchor 크기를 늘려주거나 큰 이미지를 올려야 합니다.
XE 공식 레이아웃에 적용된 마크업이 모범답안입니다.
위에 질문 남긴 예람입니다~
어찌어찌 해결을 하였는데 이게 기존 default 스킨과 충돌이나 연동되는 현상이 있는지요? naradesin 적용을 하고 DB 상에서 페이지 소스를 봤더니 skin 명이 naradesign 이 아니고, default 로 되어있습니다. XE 를 새로 받아서 봐도 dafault 스킨은 변경된 부분이 없고, naradesign 적용 후 default 스킨을 지우면 또 나오질 않고요.
확인 부탁드립니다.
OnAir님,
모든 요소의 position 기본값은 static 입니다. 따라서 div 요소도 position:static 이 기본값 입니다. position 속성을 relative 로 변경해야 할 필요가 있는 경우는 다음과 같습니다.
첫째, z-index 를 인위적으로 부여할 필요가 있을 때.
둘째, 주변에 흐르는 형제 요소에 영향을 주지 않고(밀어내지 않고) 자기 혼자만 위치값 left, right, top, bottom을 변경해야 할 때.
셋째, 자기 블럭을 기준으로 자식 요소가 offset값 left, right, top, bottom을 가져야 할 때.
제가 버튼을 디자인 하면서 position:relative를 사용한 이유는 둘째와 셋째 이유 때문 입니다.
버튼의 바깥쪽 span 요소는 셋째 이유 때문에 적용이 되었고 안쪽 a, button, input 요소는 둘째 이유 때문에 적용 되었습니다.
position 속성의 값이 relative 또는 absolute 가 되면 이 요소는 z-index를 가질 수 있고 자식 요소들은 위치값을 변경하게 될 때 부모 블럭을 기준점으로 삼아서 위치 변경을 하게 됩니다.
즉, 부모의 position 값이 모두 기본값인 static 이라면 position:absolute 속성을 지닌 자식 녀석들의 left:0; top:0; 위치는 body의 좌측 상단 x=0, y=0 이 됩니다.
정찬명님 안녕하세요
늘 배움의 즐거움을 느끼고 있어서 감사할 따름입니다.
인사도 드릴겸 도움도 좀 요청할 겸 해서 글을 올리게 되었구요
제가 정말 궁금한 점은 css 정의시 사이트 규모가 커질수록 css가 충돌을
일으킬 수 있는 요인이 많이 발생하는데요
이를 해결하기 위해서는 정확하게 상속과 캐스캐이딩에 관한 이해가 필요하고
방법론을 알고 싶은데 정찬명님의 알기쉽고 이해가 빠른 포스팅을 부탁드리고자
이렇게 질문하게 되었습니다.
작업을 하다보면 이해가 가지 않게 충돌도 일어나기도 하고 css가 반영되지 못하는
경우도 빈번하게 발생하더군요
바쁘신데 부탁드려서 죄송합니다 꾸벅 ^^
큐라100작님 안녕하세요?
CSS 관리 방법에 관한 포스팅을 조만간 정리해서 한 번 공유하도록 하겠습니다.
일단 지금 당장 간단하게 제 생각을 말씀드리자면 이렇습니다. 빠르게 타이핑 하다 보니 존칭을 생략하는 점 양해 부탁 드립니다.
첫째, 레이아웃을 위한 몇몇 id, class 이름은 코딩 규칙으로 정해놓고 사용한다. 이런 이름들은 페이지 내에서 유일하게 사용하고 다른 목적으로 사용하지 못하도록 해서 충돌을 피한다. 예) #container, #header, #body, #footer, #gnb, #content
둘째, 레이아웃을 제외한. 레이아웃 하부 구조에 포함되는 콤포넌트. 즉, UI 객체들은 상황에 맞는 의미있는 id, class 이름을 부여해서 그때 상황에 맞게 새로 네이밍 한다. 그리고 되도록 class 이름까지도 중복되지 않도록 고유한 이름을 부여한다. 만약 ‘공지목록, 뉴스목록’ 같이 유사하지만 조금은 다른 모양(뉴스에만 썸네일이 있다고 가정)의 콘텐츠라면 class 이름을 두 번 지정한다. 예) class=”list notice” | class=”list news” 그러면 공통된 스타일과 유별난 스타일을 따로 분리해서 관리 할 수 있다.
셋째, 상속을 최소화 한다. 본래 상속이란 CSS의 장점이기도 하지만 단점이기도 하다. 왜냐하면 어떤 속성들은 한 번 지정해서 상속 시키면 다시 초기화 하기 어려운 것도 있다. 따라서 공통 선택자 ‘*’ 는 아예 쓰지 않는 것이 좋고 공통 선택자 ‘*’는 렌더링 성능에도 좋지 않다. 다음은 default.css 파일에서 항상 기본 값으로 지정하고 사용하는 권장 값이다. 여기서 거의 모든 요소에 상속되는 속성은 글꼴 크기와 글꼴 종류로써 딱 2가지 뿐이다.
보통은 h1~h6, ul, ol, dl, p 이와 같이 문장 속에서 빈번하게 등장하는 마크업에 대하여 { margin:0; padding:0; } 으로 완전히 초기화 시켜버리는 경우도 있는데 본문 이외의 영역에서 공통으로 인클루드 하는 콤포넌트들을 코딩하기에는 좋지만 본문 영역의 콘텐츠를 표현하기에는 좋지 않다. 본문 영역에서 표현되는 제목이나 목록이나 문장들은 상하 기본 마진을 가지는 것이 더 일반적인 경우이기 때문이다. 따라서 공통으로 인클루드 하는 UI 콤포넌트들에만 { margin:0; padding:0; } 속성을 부여하는 것이 좋다.
본문 이외 영역에 대한 초기화는 보통 이렇게 한다. 필요한 요소만 따로 추려서 초기화 한다.
넷째, 인라인 CSS 사용은 피하는 것이 좋지만 금지할 것도 못된다. 디자이너는 어떻게 하면 CSS를 효과적으로 사용할 수 있는지 연구하지는 않기 때문에 인라인 CSS를 사용해야만 하는 상황은 불가피하게 발생하게 되어 있다. 따라서 재 활용 가능성이 매우 낮은 유별난 스타일들은 재 활용을 포기하고 차라리 인라인 CSS를 적용하는 것이 더 효과적일 수도 있다. 예를 들면 A 페이지와 B 페이지에서 제목과 본문의 간격이 달라지는 경우 A 페이지 기준으로 외부 CSS 파일에 코딩해 놓고 B 페이지에서는 A 스타일을 적용함과 동시에 인라인 CSS를 추가해서 A 스타일을 덮어쓰기 하는 것이다.
다섯째, 코딩 규칙을 만든다. 첫째와 둘째의 연장선 상에서 필요하다. 규칙을 만들어 두면 예측 가능성을 높여주기 때문에 최소한의 충돌을 피하고 협업하기에 좋다.
생각나는 대로 이 정도만 정리해 보았습니다.
다음에 시간이 되면 좀 더 잘 정리해서 한 번 포스팅 해보겠습니다. ^^
xe에서 플래쉬메뉴를 넣으려고 하는데요, layout.html 파일을 수정하여, 상단메인메뉴 자리에 플래쉬를 넣는 것까지는 성공했구요..
플래쉬가 xml 연동인데, xml이 연동되어 메뉴명 등이 표시되는 것도 되었습니다.
그런데, xml에 입력해둔 페이지의 링크가 안걸립니다.
절대경로, 상대경로 모두 해보아도 안되고, 메인메뉴자리에 플래쉬를 넣는 팁을 알려주신 팔공산님께 여쭤봐도 그 부분은 모르신다는군요~
hr태그를 css 1px로 지정해줬는데 마진 버그가 있습니다.
이래저래 답은 안보이는 거 같고…
[div class="hr"][hr /][/div] 코딩밖에 답이 안보이네요.
배보다 배꼽이 커진격이라 “굳이 그렇게 까지 코딩해야할까?” 라는 생각이 듭니다.
그냥 hr 태그를 legend 숨기듯이 처리하고 하위 태그에 border-top:1px solid #ddd 주는 것도 방법이라면 방법이겠군요.
정찬명님도 이와 관련해서 아~~주 많은 시행착오를 겪으셨을 것 같습니다 -ㅅ-
위에 댓글 잘못 올렸네요 (600번째 인데..)
꺽쇠를 괄호로 변환해서 다시 올려요###
///
img 태그를 사용할 때와 background 로 이미지를 불러올 때, 어느것이 빠른가요?
—
1.
[style type="text/css"]
h1 { margin:0; padding:0;}
[/style]
[h1][img src="logo.jpg" width="200" height="50" alt="My Home" /][/h1]
2.
[style type="text/css"]
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;}
[/style]
[h1][span]My Home[/span][/h1]
—
제 생각은 스타일로 적용하는 것이 조금 더 빨리 뿌려줄 것 같은데… (결과 속도는 같을 듯)
정찬명님 감사합니다.
알려주신 사이트에서 제케이스와 유사한 케이스를 참고해서 적용했더니 잡혔습니다.
막혔던 속이 뻥뚫린것 같고..날아갈것 같습니다.
옆에 계셨다면 뽀뽀라도 해드리고 싶은 심정이지만..제가 남자인관계로 마음만 받아주세요.
참고로 font-size 를 0로 줬더니 잡혔습니다.
정말 힘들고 괴로운 요 며칠이었네요.
항상 친절하게 답해주셔서 너무 감사드립니다.
복받으세요..^ ^
엘카님 안녕하세요?
이미지를 무척 많이 사용하는 사이트가 아니라면 인라인 이미지를 사용하는 것과 CSS 배경으로 사용하는 것 사이에서 의미있는 속도차이를 발견하기 어렵다고 생각합니다.
왜냐하면 속도를 결정하는 요인으로써 http request와 렌더링 원리를 생각할 수 있는데 일단 동일한 이미지 개수라면 http 요청 횟수가 같기 때문에 이 부분에서는 차이가 없겠구요.
그 다음은 렌더링에 대한 차이인데 인라인 이미지나 CSS 배경 이미지나 모두 동일하게 HTML 마크업을 해석하는 순서에 따라서 순차적으로 화면에 표시된다는 점은 같기 때문에 체감 속도 또한 동일할 것으로 예상됩니다.
다만 이미지가 매우 많이 사용된 경우라면 인라인 이미지를 사용한 페이지가 더 느리게 느껴질 수 있는데 그 이유는 인라인 이미지 때문에 HTML 마크업의 용량이 조금 더 늘어나기 때문입니다.
사실 인라인 이미지를 사용해야 할지 배경이미지를 사용해야 할지를 결정할 때 중요한 고려사항은 속도가 아니라 의미 입니다. 의미가 있는 이미지는 되도록 전경(인라인) 이미지로 사용하고 의미가 없는 이미지만 배경으로 처리하는 것이 좋습니다. 왜냐하면 의미가 있는 배경 이미지를 사용한다면 반드시 전경에 대체 텍스트를 제공해야 하는데 HTML에는 이런 상황에 대처하는 문법이 없기 때문입니다. 흔히 IR(Image Replacement) 기법을 사용하기도 하는데 이런 방법은 정상적인 방법이라기 보다는 꼼수에 가깝습니다.
김석한님이 주시는 뽀뽀는 사양하고 복만 받겠습니다. ㅎㅎ
아하…!
로고는 img 태그를 사용해야 겠군요.
으휴.. 무식하게 온통 css로 때려박다니 -_-
오늘도 질문을 갖고 왔습니다.
png파일을 IE6에서 적용시킬때 마우스 오버 이미지는 어떻게 해야 하나요?
그리고 정찬명님이 올려놓으신 글을 보면 핵을 사용하던데 그럴경우 서버에 무리가 가지는 않나요? 속도가 느려진다던지..핵을 사용하지 않고 자바스크립트로 하는 경우도 있던데 어떤 차이점이 있나요?
암튼..젤루 궁금한건 마우스오버 이미지에는 어떻게 적용하는지 입니다.
매번 막히는게 있으면 쪼르르 달려오는것 같아서 조금 민망하긴 하지만..나름대로 이것저것 찾아보고 실행해보고 최선을 다하다 마지막 방법으로 찾아오는 것이니 너무 나쁘게 생각지 말아주세요.. ^^;;
그럼 오늘 하루도 좋은 하루 되세요..
안녕하세요 정찬명님.
XE 게시판 모듈 스킨 제작하는데 도움말 좀 구하고자 찾아왔습니다.
http://eond.com/test
이 게시판에 하단 쪽에 태그 리스트 버튼이 css에 배경그림으로 처리되어 있어서
따라해봤는데 저는 이렇게 되네요.
http://eond.com/test2
도대체 어떻게 하신 건가요? ^^;;
괜찮으시면 스킨 모듈 제작하는 방법에 대해서도 좀 매뉴얼 작성에 도움 좀 주세요~;;
정낙훈님 안녕하세요?
지금 상태로는 원인 찾기가 어렵습니다.
‘XE 관리자 > settings > Optimizer 사용’
항목에 체크를 해제한 다음 다시 코멘트 남겨주시면 한 번 봐드리겠습니다.
스킨 제작 메뉴얼은 XE 코어 프로젝트 위키에 있습니다. ^^
http://xe.xpressengine.net/wiki/18250394
김석한님,
IE6는 :hover 라는 가상 선택자를 a 요소에만 사용할 수 있기 때문에 사용이 제한적입니다.
만약 교체하려는 이미지가 a 요소 또는 a요소의 자식으로 존재한다면 다음과 같은 방법으로 배경이미지를 교체할 수 있습니다.
a { backgorund:url(a.png) no-repeat;} /* 평소 이미지 */
a:hover,
a:active,
a:focus { backgorund:url(b.png) no-repeat;} /* 롤오버 이미지 */
png 이미지가 적용된 곳이 a 요소가 아니라면 IE가 :hover를 지원하지 않기 때문에 당연히 자바스크립트를 사용해야만 합니다.
핵을 사용한다고 해서 호환성에 문제가 될 망정 성능에 문제가 생긴다는 이야기는 아직 들어보지 못했습니다.
네. 말씀하신 옵티마이저 사용 해제하였습니다.
제가 다른 스킨 파일들을 사용하지 않고 list.html이나 css 파일 몇 개만 파일을 업로드하고
아직 다른 파일은 업로드하지 않아서 그런 걸까요?;;
저도 정찬명님처럼 자기가 하고 싶은 일을 하면서 살 수 있으면 참 좋을텐데
정찬명님이 저는 부러워요. :p
제작 매뉴얼 링크 감사합니다.
매뉴얼이 많은 분들께서 작성하긴 했는데 너무 꼭꼭 숨어있는 것 같아요..@@
답변 감사합니다.
많은 도움이 되었습니다.
빨리 IE6 사용자들이 줄어들었으면 좋겠습니다..ㅠ.ㅠ
정낙훈님,
다음 스타일 시트 파일에서 .boardSearchForm .infoEtc 부분에 대한 스타일이 선언되어 있지 않기 때문입니다.
http://eond.com/modules/board/skins/eond_board/css/common.css
한편 첫 번째 게시판에서는 다음 파일에 아래와 같이 선언이 되어 있었습니다.
http://eond.com/modules/board/skins/xe_official/css/board.css
.boardSearchForm .infoEtc{ position:absolute; top:7px; right:0;}
.boardSearchForm .infoEtc li{ display:inline;}
.boardSearchForm .infoEtc li a{ display:inline-block; height:11px; background-repeat:no-repeat; overflow:hidden;}
.boardSearchForm .infoEtc li a span{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden;}
.boardSearchForm .infoEtc li.contributors a{ width:12px; background-position:0 0;}
.boardSearchForm .infoEtc li.tag a{ width:42px; background-position:-11px 0;}
콕 집어 알려주셔서 정말 감사합니다. 꼭 다른 분들께도 좋은 정보 널리 알리도록 할게요^^
안녕하세요. 최근 너무늦게 웹접근성, 웹표준 공부하기 시작한 웹디입니다.
NULI가 정말 많은 도움이 됩니다. 이 블로그도 물론이고요.
가능하면 게시하신 글 모두 읽어보고 싶습니다.
하루에도 몇번씩 들르면서도 자취를 남길 생각을 못하다가 오늘 정찬명님의 너무도 자세한 프로필을 보고 감이 동하여 몇글자 남겨요.
생전 그렇게 자세한 프로필은 처음 봅니다 ^^
대전에 연고가 있고 현재 서울에서 이분야의 일을 하고 있고, 네이버 유저이고 등등..
그래서 더욱 반갑네요.
앞으로도 많은 도움 받겠습니다. 꾸벅~!
듀님 반갑습니다. 예전에 쓴 글들에는 오류도 많을것 같은데 보시고 이상한 내용 있으면 살짝 귀뜸도 해주세요. 감사합니다. ^^
찬명님 안녕하세요~
궁금한게 있어서 글 올립니다..
방금 올렸는데, js소스를 그대로 올려서 그런지 다 날라간듯하여 새로 올릴께요 ㅋ;
http://www.weddingpledge.co.kr/htc/main.html
여기 보시면 어떤 문제인지 쉽게 파악이 가능하실고에여~
팝업창이 부모창의 head내에 있는 스타일을 가져와서 반영하는 거거든요…
소스보시면 팝업창에서 뜨는 알럿은 부모창에서 읽어온 스타일이고,
주석을 활성화시키고, 알럿만 지우면 원본 소스입니다.
익스에서 개발을 했는데, 파폭과 오페라는 잘 동작하고 익스가 안되네요…
이런;;;;; -_ㅠ;;
새로운 버튼 디자인 말입니다.
XE에 적용시킬 계획이 있으신가요?
적용되면 좋겠는데… 크…. 아리따운 버튼이여 ㅠ
네비게이터 (메뉴 출력기) 위젯에 대해서 질문 드립니다.
http://www.xpressengine.com/?mid=download&package_srl=18324338
메뉴에 이미지로 되어있는데도 일반 텍스트로 출력이 됩니다.
{$val->test}를 {$val->link}로 바꿔봐도 안됩니다.
네이게이터에 3개 스킨이 있는데 모두 메뉴 이미지 출력이 안되서
다른 예제를 찾을 수 없네요. 이 위젯은 원래 메뉴 출력이 안되는 건가요? ^^;
제가 드린 질문을 우선 XE 묻고 답하기에서 찾아봤는데 질문만 있고 답이 없어서 여기까지 와서 질문 드려요. ^^;
메뉴 출력 위젯은 위 “네비게이터(메뉴 출력기)” 외에도 블루게이트님이 만든 것, 제네시스님이 만든 것이 더 있었습니다만, 제네시스님의 메뉴출력기는 XE를 기초하여 만든 것이고 현재 XE 네비게이터의 가로 출력 위젯이 생성되지 않는 것처럼 제네시스님의 메뉴 출력기도 동일한 현상이었습니다.
블루게이트님의 메뉴 출력 위젯이 있는데 사용이 좀 불편해서요.
http://eond.xpressengine.net/files/attach/images/18668603/111/682/018/scr_20100207_016.png
직접 이렇게 메뉴 고유번호를 입력해야한다거나 하는 불편함이 있어서
XE 네비게이터를 사용하려고 하는데 어떻게 메뉴를 이미지로 출력하는지 모르겠네요^^;
〈div class=”widgetContainer〈!–@if($colorset==”default”)–〉 default〈!–@end–〉”〉
〈div class=”widgetNavC widgetNavC{$colorset}”〉
〈ul class=”widget_navigator_{$widget_info-〉menu_srl} navigator” menu_srl=’{$widget_info-〉menu_srl}’〉
〈!–@foreach($widget_info-〉menu_list as $key =〉 $val)–〉
{@ $temp=true;}
〈!–@if($val['text'] && $val['depth'] == 0)–〉
〈li class=”node_{$val['node_srl']} 〈!–@if($val['first'])–〉first〈!–@end–〉 {$_first} 〈!–@if($val['selected'])–〉active〈!–@end–〉” node_srl=’{$val['node_srl']}’ 〉
〈a href=”{$val['href']}” onfocus=”this.blur()” 〈!–@if($val['open_window']==’Y')–〉 target=”_blank”〈!–@end–〉〉{$val['link']}〈/li〉
{@ $temp=false;}
〈!–@end–〉
〈!–@end–〉
〈/ul〉
〈/div〉
〈/div〉
위 코드는 Navigator 위젯의 스킨 중 일부 입니다. class명의 사용을 잘 몰라서 여쭤봅니다.
첫번째, 두번째, 세번째 까지의 class명이 궁금한에ㅛ.
widgetContainer
widgetNavCdefault
widget_navigator_메뉴srl
이렇게 3가지인데요. 이러한 class명이 스킨의 css파일에는 없던데 왜 이렇게 설정한 건지 알 수 있을까요. ^^;
안녕하세요.
저는 전주에 있는 전주정보영상진흥원에서 근무하고 있는 교육분야 담당자입니다.
처음뵙는분께 불쑥이렇게 연락을 드리게 되었습니다.
다름이 아니오라 전주지역에 있는 개발자 및 마케팅 담당자를 대상으로
무료로 주말에 웹접근성 관련 교육을 진행할 계획으로 준비중에 있습니다.
이와관련하여 몇가지 문의사항이 있어 연락드리게 되었습니다.
iklee@cit.or.kr
괜찮으시다면 위의 메일로 연락처 남겨주셨으면 합니다.
그럼…수고하세요.
정낙훈님 안녕하세요?
메뉴 설정 페이지에서 이미지 업로드 설정이 있음에도 불구하고 이미지가 출력이 되지 않는 것은 아마도 스타일이 깨질 우려 때문에 처리하지 않은 모양입니다.
코어와 같이 중요도가 높은 패키지가 아니라서 우선순위가 언제 올지 모르겠지만 일단 이슈트래커에 등록을 한번 부탁드립니다.
http://oldxe.xpressengine.net/?mid=issuetracker&act=dispIssuetrackerNewIssue
사용하지 않는 HTML 요소나 CSS 선택자는 직접 지우셔도 되는데요.
CSS Class 이름 가운데 변수로 처리된 것들은 자바스크립트가 참조하는 클래스 이므로 확인 후에 지우셔야 합니다.
개발한지 너무 오래 되어서 어떤 용도로 만들었는지 저도 기억을 못하고 있습니다. ㅠㅠ
엘카님 안녕하세요?
XE 회원가입쪽에 적용하려고 준비해놨는데 지연되고 있습니다.
언제라고 약속은 못드리지만 올해 안에는 적용 될껍니다. ^^
새해 복 많이 받으시고 건강하세요. ^^
XE CSS Framework for Layout 죽이는군요 -_-b
왜 여태까지 이런걸 몰랐지
안녕하세요~^^
정찬명 님 ~~
전 아직 드림위버 완전 초보 사용자로 조언을 좀 구하고자 문의드려용~*
직업이 웹디자이너라 포샵(상), 일러(상), 플래쉬(중)으로 다룰줄 아는데
드림위버는 초간단 링크거는법 밖엔 모른답니다.. ㅠ 흐흑
앞으로 쇼핑몰을 직접 제작해 운영하려고 하는데요
1년이란 기간동안 무엇을 어떻게 공부하면 좋을지 모르겠어요
하하 저 너무 초보라 ;; 홈페이지 만드는 과정에서 제가 습득해야할 지식들에 대해
조언 부탁드려용~*
serim♥님 안녕하세요?
드림위버를 잘 다루시려면 HTML/CSS 를 잘 다룰줄도 아셔야겠네요. ^^
아래 링크로 부터 시작해 보시면 좋을 것 같습니다.
웹 표준, 추천도서 Best 5!
http://naradesign.net/wp/2007/07/17/124/
드림위버를 이용한 웹 표준 코딩 가이드
http://naradesign.net/open_content/lecture/DW&CSS/
유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드
http://naradesign.net/open_content/lecture/wp/
처음부터 쉽지는 않겠지만 1년동안 공부하겠다는 결심도 세우셨으니 그리 어려운 일도 아닐 것 같습니다.
화이팅 하세요!
serim님 저는 간단하게 브라우저의 소스보기를 이용해 처음에 코딩하는 방법을 배웠습니다. ^^; 제가 배우기 시작할 때에는 나모를 사용했는데 나모가 소스를 제 멋대로 망쳐버리는 바람에 그냥 하드코딩을 시작했는데 그 뒤로 점점 웹저작툴도 업그레이드되어 이제는 정말 편하게 만들더라고요. 툴이 편하긴 하지만 아직 제 스타일대로 코딩하는게 좋아 여전히 에디터플러스로 하드코딩 중이에요.~;;
정찬명님 여기도 인원 좀 배정해주시면 안되나요. ㅡ_ㅜ
http://oldxe.xpressengine.net/
낙훈님, 오픈소스는 누가 시켜서 하는게 아니라는 사실을 잘 아시잖아요. ^^ (그리고 저는 그럴 권한도 없어요 ㅎㅎ)
라르게덴님이 한다고 포럼에 적어놓았길래 라르게덴님을 개발자 권한으로 해놓으면 되지 않을까 해서 말씀드린건데 권한은 프로젝트 관리자인 제로님에게 있군요. -_-;;
그리고 저는 질문 드리러 왔어요. ^^; 이런 메뉴를 꾸미고 싶은데요
http://www.haansoft.com/hnc/product/office_outline.jsp
[div id="gnb"]
메인메뉴
서브메뉴 (메인메뉴 아래 가로로)
[/div]
[div id=content]
사이드메뉴(세로), 본문
[/div]
메뉴 구성이 복잡해지니깐 저 사이트처럼 구성해놓으면 될 것 같은데
제가 플래시는 전혀 하지 못해서 어떻게든 자바스크립트와 친해져야 할 것 같은데
그래서 이 메인메뉴 아래에 서브메뉴를 가로로 띄우고 싶은데
위치 잡는게 곤란해서요. 1차 메뉴 바로 아래에 2차 메뉴를 띄우려니
1차 메뉴가 많아질 수록 우측으로 밀려나는데
2차 메뉴는 또 다시 1차 메뉴의 바로 아래에서 더 오른 쪽으로 가버리니 어려울 것 같고
아니면 2차 메뉴가 띄워지는 위치를 항상 왼쪽으로 고정되게 하려니,
1차 메뉴의 가장 우측 메뉴에서 2차 메뉴의 가장 왼쪽 메뉴로 이동하는 것도 쉽지 않을 것 같고
똑똑하게 1차 메뉴의 위치를 고려해서 2차 메뉴가 뜨는 위치를 정해준다거나
그런 소스는 없을까요? ㅠ_ㅠ;;
낙훈님, 그렇게 똑똑한 스크립트는 아직 저도 못봤습니다. 그래서 2차 메뉴는 세로로 펼쳐지는게 짱이라니까요. ㅎㅎㅎ
헤헤헤헤헤…ㅠㅠ 그렇군요..세로 메뉴 짱;;
안녕하세요? 담당자님!
우전 전 개발자는 아니고요..
단순히 아래 홈페이지 회원일뿐입니다.
http://www.sonchangsoo.kr/xe/guest
위 홈페이지의 회원 게시판의 글 중에서 184번 글에 문제가 생겨서 문의 드립니다.
회원분(아이디 : 광운 학생) 한분이 html로 글을 남긴뒤 편집기에서 화면에 보이는 방식으로 바꿔서
글을 남기셨었는데 문제의 184번 글을 작성하실때는 글을 남기는 부분에 편집기 같은 화면이 안떴었다고 하네요..
보시면 아시겠지만, 현재는 목록, 수정, 삭제 버튼이 안보여 삭제 조차 안되고 있습니다.
무었이 문제인지를 전혀 모르겠습니다.
삭제, 편집 등이 안되니 계속해서 흉물(?)스럽게 html코드 형식으로 게시판에 남아있네요..
똑같은 컴퓨터에서 글을 남겼었던 166 번 글을 보시면 목록, 수정, 삭제 버튼이 정상적으로 잘 보이고 있습니다.
처리부탁드리겠습니다.
게시판지기님 안녕하세요?
잘못된 HTML을 게시판이 잘 처리해 주지 못해서 수정/삭제 버튼이 보이지 않게 되었네요.
다음과 같이 URL을 이용해서 수정 기능에 직접 접근해 보세요.
관리자로 로그인 하신 다음 아래 경로로 접근을 시도해 보세요.
http://sonchangsoo.kr/xe/?document_srl=9733&mid=guest&act=dispBoardWrite
http://eond.com/test3
가로 메뉴 여튼 띄우긴 했습니다. ^^;
제가 생각해봤는데요, submenu01~06 이런 식으로 번호를 매기는데
현재는 다 왼쪽 기준으로 서브메뉴가 뜨는데
숫자가 4이상이 되면 오른쪽 기준이 되도록 자바스크립트를 짜면 괜찮을 것 같기도 하네요.
^^;;;;
음.. 정찬명님 답변 감사합니다..
그런데 전 게시판에 글을 남겼을뿐
개발자가 아니라서 관리자 관리자로 로그인 할 수가 없네요..
그냥 삭제해버려도 괜찮은데.. 그거마저 안되니 답답해요..
익명님 직접 글을 쓰신 분이라면 저리 들어가면 비밀번호 입력하고 작성시 입력한 비밀번호 입력하면 수정,삭제 등이 가능한 거 아닌가요?
움..
일단 목록, 삭제, 수정 버튼 자체가 안보입니다.
그러니 아무것도 할 수가 없는 상태죠..
아! 그리고 링크해주신 사이트로 들어가면 비번 입력하는 화면나오는 것은 맞는데요.. 비번을 입력해도 계속 틀리다고 나옵니다.
정낙훈님! 감사드립니다. 해결됐습니다.^^
http://eond.com
정찬명님 이렇게는 괜찮지 않나요? 메뉴는 일단 3차까지 있습니다. (안 보이지만;; )
1차 메뉴에 마우스를 올리면 2차 메뉴가 세로로 뜹니다.
그리고 2차 메뉴에 접속하면 1차 메뉴 아래에 2차 메뉴가 가로로 뜨고요.
3차 메뉴는 구상은 했는데 필요로 하는 코드가 보이질 않아서..;;;
일단 2단까지는 저렇게 하면 괜찮겠죠? ^^a;;
낙훈님, 잘 봤습니다.
뚝딱뚝딱 금방 잘 바꾸시네요. ㅎㅎ
제가 느낀점은 이렇습니다.
2차메뉴가 반드시 2벌이나 존재해야 하는지 의문입니다.
만약 저라면 활성화된 2차 메뉴만 가로로 단 한 번 출력하고 활성화된 메뉴에서는 2차 메뉴를 세로로 출력하는 일은 하지 않을 것 같습니다.
같은 메뉴가 2번 반복 되는데 모양이 달라서 다른 메뉴처럼 인지가 되구요.
메뉴가 많아서 복잡해 보이는것 같습니다.
조금 더 고민하시면 괜찮은 네비게이션이 될 것 같네요. ^^
그렇네요. 저도 이미 출력된 2차 메뉴가 1차 메뉴에 마우스오버했을 때 또 2차 메뉴가 떠서 헷갈릴 수 있겠다 싶었는데, 안뜨게 하면 되겠네요. php를 몰라서 이런 걸 다루기가 어렵네요;;
선택되어있으면 submenu display:none; 하면 되겠네요.. 에디트플러스로 코드를 다시 보니 이건 제 능력 밖인듯 하네요..하하..^^;;; 저녁 식사 맛있게 하세요~;;;
질문이 없으면 웬지 방명록 글 남기는 걸 피하게 되요 (퍽퍽)
주말 잘 보내세요~
저는 방명록에 글 남기지 않는 분들을 잡아먹거나 그러지는 않으니까 안심하세요. ㅋㅋ 엘카님도 좋은 주말 되시구요. ^^
혹시 http://tworld.co.kr 이나 http://lgtelecom.com 홈페이지에 사용된 메뉴 보셨어요?
티월드 같은 경우가 정찬명님께서 말씀하신 것과 같이 첫 페이지 접속했을 경우 뜨는 메뉴의 디자인과 첫번째 메뉴를 클릭했을 때 들어간 화면에 보이는 메뉴의 디자인이 좀 혼동스럽죠.
첫페이지에서 2차인 메뉴가 1차를 통해 들어갔을 땐 1차가 사이트 최상단에 위치해버리고
첫페이지에서 1차 메뉴와 똑같은 디자인이 2차 메뉴에 적용되어버려서
내가 클릭한 게 무엇이었는지 순간 혼동을 줄 수 있는 것 같더라고요.
이를 방지하기 위해서 내가 클릭한 메뉴가 무엇인지 로고 영역에 분명히 표시해주고 있고
최상단의 메뉴 이름과 동일하기 때문에 그에 대한 방지를 해주고 있긴 하지만
통신사 홈페이지에 자주 접속해서 사용하지 않는 사용자의 경우에는 접속할 때마다 길 잃고 헤메기 쉽죠.
엘지텔레콤 같은 경우가 Drop Down 포스팅에서 제가 댓글을 남긴 경우인데요,
의도치 않게 마치 폭탄같은 메뉴가 떨어져버리죠.
아무리 많은 메뉴를 한 번에 보여주고 싶다고 해도 사용자의 의도에 반해 커다란 네비게이션 영역을 만들어 버려서 다른 링크로의 진입을 방해한다면 이 역시 문제인 것 같아요.
메뉴의 수가 작은 곳에서는 저렇게 해도 서브로 뜨는 메뉴의 영역 자체가 화면에 비해 크지 않기 때문에 별다른 문제가 안될 수도 있지만, 메뉴가 많은 곳에서는 사용에 불편을 초래하는 것 같아요.
제가 고민하고 있는 것도 많은 메뉴를 어떻게 하면 효율적으로 보여줄 수 있을까 라서
레이아웃 경우에는 커다란 포털 사이트를 중심으로 체크하고 있고 메뉴에 있어서는 통신사나 금융권의 홈페이지를 참조해서 홈페이지를 만들고 있거든요.
그래서 이를 상담하기 위해 엘카님 홈페이지에 가서도 문의를 드린 적이 있는데(–);;
http://eond.com/xe_data
이 곳을 보면 2단의 메뉴에 그 아래 위치 출력까지 더해지고, 설상가상으로 위치 출력 갯수는 인덱스 화면을 포함해 4차까지 가버리거든요.
제 홈페이지 같은 경우는 3단계의 메뉴가 많습니다. 아직 레이아웃이나 메뉴 인터페이스를 어떻게 짜야 좋을지 고민하느라 컨텐츠 등의 디자인은 하지 못했는데..
현재까직 고민한 바로는 이온디 사이트에서 회색 1단의 메뉴를 인덱스가 아닌 다른 메인 메뉴로 접속하면 티월드 사이트와 같이 1단계를 사이트 최상단으로 밀어버리고, 마우스를 올리면 로고 영역까지 메뉴의 영역으로 활용할까 생각 중입니다.
메뉴의 배경색상은 인덱스와 똑같이 하고, 어떻게 여러 사이트의 좋은 점을 취합해서 정리하다보면 좋은 네비게이션이 될 것 같네요~ ㅎㅎ;;
안녕하세요~
오늘 하루종일 확장변수가 출력되는 최근게시물관련 글들을 읽어보며, 테스태해보다가, 이제 포기했거든요.^^
혹, 최근게시물 만드실 계획은 없으신가요? 심플디자인으로 족한데요..
이것저것 적용해보다가 안되어, 결국 이 방법을 찾았습니다..^^;(부탁드리는 걸루요~)
XE 공식 레이아웃이 상당히 좋은 예제가 되됩니다.
‘어떻게 해야 의미있는 마크업이 될까?’ 라는 고민을 할 때 매번 공식 레이아웃을 참고했어요.
로그인 기법, 회원정보 등도 매우 획기적이구요.
그럼 이제 다음 레이아웃을 기대하겠습니다. (응?)
화이팅! (퍽퍽)
http://eond.com/xe
메뉴에 마우스 올렸을 때 그림이 바껴지도록 해놓았습니다.
그런데 div 위로 올라가는게 아니라 딱 그림 위에 마우스를 올려야지만 이미지가 변하네요.
혹시 다른 방법으로 표시해줄 방법 없을까요..
얼마 전에 포스팅하셨던 네비게이션 처럼 배경에 V 이런 표시를 넣는다거나..하려고 생각해보니 div 영역이 작다보니 ▼ 이런 작은 삼각형을 메뉴 아래에 넣어볼까요. (__)a;;
메뉴를 제작하다보면 선택된 메뉴인지 체크해주는 부분이 있습니다.
이걸 strong 이나 em태그로 마크업하면 어떨까요?
[ul]
[li][a href="/m1"]메뉴1[/a][/li]
[li][a href="/m2"][strong]메뉴2 (선택됨)[/strong][/a][/li]
[li][a href="/m3"]메뉴3[/a][/li]
[/ul]
CSS Pagination 하고 비슷한 예인데..
이렇게 마크업 된 예제를 본적이 없어서 머뭇머뭇 거리게 되네요 =_=
엘카님, 선택된 메뉴인지 체크하는 것은 있어서 선택된 메뉴에 대해서는 어떻게 하는 건지 알겠는데, 마우스를 올리는 동작에 대해서는 어떻게 하는지 아마 XE 자체에서 하는 게 아닐까요..;;
@정낙훈
메뉴설정에서 롤오버 이미지를 올리면 XE에 내장된 jQuery 에서 처리해줍니다.
텍스트인 anchor 태그는 영역을 넓게 잡아 css hover 처리해주는게 효율적이죠.
이미지메뉴를 사용했을때 onmouseover, hover 등의 효과를 주는건 XE메뉴와 연동이 불가능합니다.
결론적으로 말해서, 이미지메뉴의 롤오버 영역을 넓히려면 anchor 크기를 늘려주거나 큰 이미지를 올려야 합니다.
XE 공식 레이아웃에 적용된 마크업이 모범답안입니다.
엘카님, 친절하고도 자세한 설명 감사합니다.
마우스를 올렸을 때 나타내주는 방법을 바꾸는 게 3단계 서브메뉴를 생각해봤을 때 더 효과적일 것 같네요. 이미지 롤오버 대신에 배경을 다른 방법으로 바꿔주어야겠습니다.
말씀 감사합니다. ^^;
제공해 주신 컨텐츠 위젯을 사용중입니다.
메인 페이지 하단에 8개 게시판을 탭형식을 사용중인데요.
마우스 클릭시 겹치는 현상이 나타나는데 무엇이 원인일까요?
도움 부탁드립니다.
위에 질문 남긴 예람입니다~
어찌어찌 해결을 하였는데 이게 기존 default 스킨과 충돌이나 연동되는 현상이 있는지요? naradesin 적용을 하고 DB 상에서 페이지 소스를 봤더니 skin 명이 naradesign 이 아니고, default 로 되어있습니다. XE 를 새로 받아서 봐도 dafault 스킨은 변경된 부분이 없고, naradesign 적용 후 default 스킨을 지우면 또 나오질 않고요.
확인 부탁드립니다.
@예람
위젯에서 문제가 발생하는건 레이아웃과 충돌이 있는 경우가 많습니다.
다른 레이아웃에서도 같은 문제가 일어나는지 확인해보세요~
@chohee
최근 게시물 스킨과 관련된 계획은 아직 없습니다. ^^
jQuery hover slideDown 으로 gnb 메뉴를 만들었습니다.
그런데 지금보니 키보드접근이 안되네요 :(
이거 알아볼려면 삽질좀 해야할 듯.. ㅎㅎㅎ
여쭤볼께 있는데요~
vertical-align이라는 속성이 언제 작동이 되는지 궁금합니다.
일반 블록 엘리먼트(div) 안에서 vertical-align: middle;을 적용했을때
아무 효과를 볼 수 없었던걸로 기억하는데요..
vertical-align은 어느 상황에서 써야하는지 궁금합니다 T.T
아 그리고 죄송한데 한 가지만 더 여쭤볼께요 ^^;
http://naradesign.net/open_content/reference/textButtonWithIcon/button.css
이거 연구하면서 궁금한건데요..
position: relative라는 속성을
언제 어느 상황때 삽입시켜 줘야하는지도 궁금하네요;
div 같은 경우는 position: relative가 기본이라 고정할때 absolute 주는거 빼고는 고려할 상황이 없는데
어느 경우에 position: relative;를 넣어줘야 하는건가요 TT…
엘카님, 완성하시면 공유 부탁드려도 될까요? ㅎㅎ
OnAir님,
vertical-align 속성은 인라인 요소(인라인 블럭 포함)에만 적용이 되구요. 예외적으로 th, td 요소의 내부 인라인 콘텐츠를 수직 정렬하는데 적용할 수 있습니다. 즉, div 요소는 블럭 요소라서 적용해도 아무 효과가 없는 것이 맞습니다.
vertical-align 속성은 ‘th, td’ 그리고 img, span 같은 ‘인라인 요소’에만 사용 가능 합니다.
OnAir님,
모든 요소의 position 기본값은 static 입니다. 따라서 div 요소도 position:static 이 기본값 입니다. position 속성을 relative 로 변경해야 할 필요가 있는 경우는 다음과 같습니다.
첫째, z-index 를 인위적으로 부여할 필요가 있을 때.
둘째, 주변에 흐르는 형제 요소에 영향을 주지 않고(밀어내지 않고) 자기 혼자만 위치값 left, right, top, bottom을 변경해야 할 때.
셋째, 자기 블럭을 기준으로 자식 요소가 offset값 left, right, top, bottom을 가져야 할 때.
제가 버튼을 디자인 하면서 position:relative를 사용한 이유는 둘째와 셋째 이유 때문 입니다.
버튼의 바깥쪽 span 요소는 셋째 이유 때문에 적용이 되었고 안쪽 a, button, input 요소는 둘째 이유 때문에 적용 되었습니다.
position 속성의 값이 relative 또는 absolute 가 되면 이 요소는 z-index를 가질 수 있고 자식 요소들은 위치값을 변경하게 될 때 부모 블럭을 기준점으로 삼아서 위치 변경을 하게 됩니다.
즉, 부모의 position 값이 모두 기본값인 static 이라면 position:absolute 속성을 지닌 자식 녀석들의 left:0; top:0; 위치는 body의 좌측 상단 x=0, y=0 이 됩니다.
정찬명님의 작품에 비하면 너무나 초라하지만 공유정신을 발휘해보겠습니다 :)
귀차니즘 + 퍼블리싱의 압박으로 다소 세월(?)이 걸릴지도… -_-
엘카님 제 것도 작품이라 하기에는 부족합니다. 공유하니까 다른 분들이 보완해 주시던걸요. ^^
정찬명님!
정말 감사드립니다!
CSS핵이나 Image Replacement 보다 더 귀중한 것을 알려주셨어요!
앞으로 퍼블리싱 작업을 할때 진짜 진짜 도움이 많이 될꺼에요!
정말 너무 너무 너무 감사드립니다 ^^
@OnAir
너무 어렵게 설명드렸나 했는데 뭔가 도움이 되셨다니 저도 기뻐요. ^^
정찬명님 안녕하세요
늘 배움의 즐거움을 느끼고 있어서 감사할 따름입니다.
인사도 드릴겸 도움도 좀 요청할 겸 해서 글을 올리게 되었구요
제가 정말 궁금한 점은 css 정의시 사이트 규모가 커질수록 css가 충돌을
일으킬 수 있는 요인이 많이 발생하는데요
이를 해결하기 위해서는 정확하게 상속과 캐스캐이딩에 관한 이해가 필요하고
방법론을 알고 싶은데 정찬명님의 알기쉽고 이해가 빠른 포스팅을 부탁드리고자
이렇게 질문하게 되었습니다.
작업을 하다보면 이해가 가지 않게 충돌도 일어나기도 하고 css가 반영되지 못하는
경우도 빈번하게 발생하더군요
바쁘신데 부탁드려서 죄송합니다 꾸벅 ^^
큐라100작님 안녕하세요?
CSS 관리 방법에 관한 포스팅을 조만간 정리해서 한 번 공유하도록 하겠습니다.
일단 지금 당장 간단하게 제 생각을 말씀드리자면 이렇습니다. 빠르게 타이핑 하다 보니 존칭을 생략하는 점 양해 부탁 드립니다.
첫째, 레이아웃을 위한 몇몇 id, class 이름은 코딩 규칙으로 정해놓고 사용한다. 이런 이름들은 페이지 내에서 유일하게 사용하고 다른 목적으로 사용하지 못하도록 해서 충돌을 피한다. 예) #container, #header, #body, #footer, #gnb, #content
둘째, 레이아웃을 제외한. 레이아웃 하부 구조에 포함되는 콤포넌트. 즉, UI 객체들은 상황에 맞는 의미있는 id, class 이름을 부여해서 그때 상황에 맞게 새로 네이밍 한다. 그리고 되도록 class 이름까지도 중복되지 않도록 고유한 이름을 부여한다. 만약 ‘공지목록, 뉴스목록’ 같이 유사하지만 조금은 다른 모양(뉴스에만 썸네일이 있다고 가정)의 콘텐츠라면 class 이름을 두 번 지정한다. 예) class=”list notice” | class=”list news” 그러면 공통된 스타일과 유별난 스타일을 따로 분리해서 관리 할 수 있다.
셋째, 상속을 최소화 한다. 본래 상속이란 CSS의 장점이기도 하지만 단점이기도 하다. 왜냐하면 어떤 속성들은 한 번 지정해서 상속 시키면 다시 초기화 하기 어려운 것도 있다. 따라서 공통 선택자 ‘*’ 는 아예 쓰지 않는 것이 좋고 공통 선택자 ‘*’는 렌더링 성능에도 좋지 않다. 다음은 default.css 파일에서 항상 기본 값으로 지정하고 사용하는 권장 값이다. 여기서 거의 모든 요소에 상속되는 속성은 글꼴 크기와 글꼴 종류로써 딱 2가지 뿐이다.
/* Element Reset */
body, input, textarea, select, table, button {font-family:Tahoma, sans-serif; font-size:12px;}
img, fieldset {border:0;}
em, address {font-style:normal;}
button{ overflow:visible;}
a {text-decoration:none;}
a:hover, a:active, a:focus {text-decoration:underline;}
보통은 h1~h6, ul, ol, dl, p 이와 같이 문장 속에서 빈번하게 등장하는 마크업에 대하여 { margin:0; padding:0; } 으로 완전히 초기화 시켜버리는 경우도 있는데 본문 이외의 영역에서 공통으로 인클루드 하는 콤포넌트들을 코딩하기에는 좋지만 본문 영역의 콘텐츠를 표현하기에는 좋지 않다. 본문 영역에서 표현되는 제목이나 목록이나 문장들은 상하 기본 마진을 가지는 것이 더 일반적인 경우이기 때문이다. 따라서 공통으로 인클루드 하는 UI 콤포넌트들에만 { margin:0; padding:0; } 속성을 부여하는 것이 좋다.
본문 이외 영역에 대한 초기화는 보통 이렇게 한다. 필요한 요소만 따로 추려서 초기화 한다.
.aside h2,
.aside h3,
.aside ul,
.aside ol,
.aside dl,
.aside p { margin:0; padding:0; }
넷째, 인라인 CSS 사용은 피하는 것이 좋지만 금지할 것도 못된다. 디자이너는 어떻게 하면 CSS를 효과적으로 사용할 수 있는지 연구하지는 않기 때문에 인라인 CSS를 사용해야만 하는 상황은 불가피하게 발생하게 되어 있다. 따라서 재 활용 가능성이 매우 낮은 유별난 스타일들은 재 활용을 포기하고 차라리 인라인 CSS를 적용하는 것이 더 효과적일 수도 있다. 예를 들면 A 페이지와 B 페이지에서 제목과 본문의 간격이 달라지는 경우 A 페이지 기준으로 외부 CSS 파일에 코딩해 놓고 B 페이지에서는 A 스타일을 적용함과 동시에 인라인 CSS를 추가해서 A 스타일을 덮어쓰기 하는 것이다.
다섯째, 코딩 규칙을 만든다. 첫째와 둘째의 연장선 상에서 필요하다. 규칙을 만들어 두면 예측 가능성을 높여주기 때문에 최소한의 충돌을 피하고 협업하기에 좋다.
생각나는 대로 이 정도만 정리해 보았습니다.
다음에 시간이 되면 좀 더 잘 정리해서 한 번 포스팅 해보겠습니다. ^^
안녕하세요~
하루 종일 찾다, 결국 못찾고 이 곳을 방문하게 되었습니다~^^
xe에서 플래쉬메뉴를 넣으려고 하는데요, layout.html 파일을 수정하여, 상단메인메뉴 자리에 플래쉬를 넣는 것까지는 성공했구요..
플래쉬가 xml 연동인데, xml이 연동되어 메뉴명 등이 표시되는 것도 되었습니다.
그런데, xml에 입력해둔 페이지의 링크가 안걸립니다.
절대경로, 상대경로 모두 해보아도 안되고, 메인메뉴자리에 플래쉬를 넣는 팁을 알려주신 팔공산님께 여쭤봐도 그 부분은 모르신다는군요~
저, xml 연동 플래쉬메뉴는 링크부분이 달라야 하는걸까요?
참고로 xml 의 링크부분은
이런 형식으로 되어있거든요.
xml연동 플래쉬메뉴는 불가능한가요?
가능할 것 같은데요..
도움 부탁드립니다..^^
감사합니다.
xml 부분이 표시가 안되었네요..윗글에서요~^^
꼭 좀 부탁드립니다…
[주메뉴 link="경로" kText="주메뉴1" eText="..." subX="30" color="77C802"]
[서브메뉴 link="경로" subtext="서브메뉴1" /]
[서브메뉴 link="경로" subtext="서브메뉴2" /]
[서브메뉴 link="경로" subtext="서브메뉴3" /]
[/주메뉴]
@조한나
xml을 연동하는 플래시와 관련하여 제가 아는바가 없어서 답변을 드릴 수 없는 점 양해 부탁 드립니다.
hr태그를 css 1px로 지정해줬는데 마진 버그가 있습니다.
이래저래 답은 안보이는 거 같고…
[div class="hr"][hr /][/div] 코딩밖에 답이 안보이네요.
배보다 배꼽이 커진격이라 “굳이 그렇게 까지 코딩해야할까?” 라는 생각이 듭니다.
그냥 hr 태그를 legend 숨기듯이 처리하고 하위 태그에 border-top:1px solid #ddd 주는 것도 방법이라면 방법이겠군요.
정찬명님도 이와 관련해서 아~~주 많은 시행착오를 겪으셨을 것 같습니다 -ㅅ-
아…방명록이 있었군요 ^^:
그냥 질문 만 드리기 뻘줌해서 어디있나 찾았는데…ㅎㅎ
이것저것 많이 부족한 퍼블리셔 입니다~
링크타다 발견했는데 가끔 조언 부탁드려요^^
@엘카
그래서 저도 [hr]을 사용하더라도 숨김 처리하고 보더는 [div] 으로만 표현 합니다. ^^