html 메뉴 소스 분석 좀 같이 해 주세요
글쓴이: ant01 / 작성시간: 월, 2012/07/09 - 7:24오전
인터넷에서 다운 받은 매뉴 소스입니다.
http://cssmenumaker.com/
혼자서 분석하려니 어려워서 여러분에게 도움을 청합니다.
웹 프로그램 쪽은 거의 처음인데 특히 css부분이 어려우니 집중적으로 알려 주시면 감사하겠습니다.
<!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" /> <title>CSS Menu Maker Installation Instructions</title> <style type="text/css"> body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;} h2 {font-weight:bold; color:#000099; margin:10px 0px; } p span {color:#006600; font-weight:bold; } a, a:link, a:visited {color:#0000FF;} textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;} textarea.html {height: 300px;} p {margin: 0 0 10px 0;} code, pre {font-family: Consolas,monospace; color: green;} ol li {margin: 0 0 15px 0;} </style> </head> <body> <h2>Your Menu</h2> <style type="text/css">.cssmenu { border:1px solid #006600; background:#006600; } .cssmenu > ul { padding:1px 0; margin:0px; list-style:none; width:100%; height:21px; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; font:normal 8pt verdana, arial, helvetica; } .cssmenu > ul li { margin:0; padding:0; display:block; float:left; position:relative; width:148px; } .cssmenu > ul li a:link, .cssmenu > ul li a:visited { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#006600; color:#ffffff; width:148px; height:13px; } .cssmenu > ul li:hover a, .cssmenu > ul li a:hover, .cssmenu > ul li a:active { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#339933; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; } .cssmenu > ul li ul { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #006600; border-top:none; } .cssmenu > ul li:hover ul { display:block; } .cssmenu > ul li ul li { width:146px; clear:left; width:146px; } .cssmenu > ul li ul li a:link, .cssmenu > ul li ul li a:visited { clear:left; background:#006600; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } .cssmenu > ul li ul li:hover a, .cssmenu > ul li ul li a:active, .cssmenu > ul li ul li a:hover { clear:left; background:#339933; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } .cssmenu > ul li ul li ul.navigation-3 { display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #006600; border-left:1px solid #006600; background:#ffffff; z-index:900; } .cssmenu > ul li ul li:hover ul.navigation-3 { display:block; } .cssmenu > ul li ul li ul.navigation-3 li a:link, .cssmenu > ul li ul li ul.navigation-3 li a:visited { background:#006600; } .cssmenu > ul li ul li ul.navigation-3 li:hover a, .cssmenu > ul li ul li ul.navigation-3 li a:hover, .cssmenu > ul li ul li ul.navigation-3 li a:active { background:#339933; } </style> <div class='cssmenu'> <ul> <li class='active '><a href='index.html'><span>Home</span></a></li> <li><a href='#'><span>Products</span></a> <ul> <li><a href='#'><span>Product 1</span></a></li> <li><a href='#'><span>Product 2</span></a></li> </ul> </li> <li><a href='#'><span>About</span></a></li> <li><a href='#'><span>Contact</span></a></li> </ul> </div> <div style="clear:both; margin: 0 0 30px 0;"> </div> <h2>Installation Instructions</h2> <ol> <li>Upload the <code>menu_assets
index.html
file is.<head></head>
tags.Notes
- If you run into a problem getting your menu to work or have suggestions for the site please Contact Us and let us know. We will try to help as much as possible.
Forums:
무엇을 알려드려야 하는 것이지요?
http://oops.org/?t=lecture&sb=beginner&n=1
여기를 먼저 참고해 보세요.
좋은 댓글 감사드립니다. 참고하겠습니다.
좋은 댓글 감사드립니다. 참고하겠습니다.
과거는 미래를 결정지을 수 없다.
미래가 현재와 과거를 결정짓는다.
이 질문
이 질문을 그대로 다른곳으로 가져가서
"이질문 대해 무엇을 답변해야 할지 알려주세요"
라고 질문을 올리고 싶은 심정입니다..
css부분을 잘 모른다고 분명히 밝혔습니다.
css부분 즉 style부분이 어렵다고 분명히 밝혔는 데
많이 모르는 사람은 조용히 있어야 하나요?
처음부터 많이 아는 사람 있습니까?
대답하기 곤란하면 안하면 그만입니다.
상대가 누구인지도 모르는 상태에서 html실력만 보고 계도를 하겠다니
어이가 없습니다.
네이버에서는 다른 사람이 아예소스 분석을 통째로 해달라고 해도 해 주는 사람 많이 보았습니다.
가입 년차 6년인 분도 이런 무례한 부탁을 하시는
가입 년차 6년인 분도 이런 무례한 부탁을 하시는 분이 있군요.
모르기 때문에 질문한 것이고
절대로 무례하다고 생각치 않습니다.
아마 위에 글 쓰신 분들은 핵심만을 꼬집어서 물어보고 짧게 대답하길 원하시는 모양인데
모르는 정도에 따라 질문 내용은 달라질 수 있고
그리고 핵심만 꼬집어 물어볼 정도로 공부가 되있다면 검색을 통해서 혼자 해결 할 수 있을 것 입니다.
그리고 이제 보니 윗 글 모두 익명이군요. 더 이상 상대하고 싶지 않습니다.
음... 네이버같은 분위기를 원하시면 네이버
음... 네이버같은 분위기를 원하시면 네이버 지식인에서 질문하시는게 더 빠릅니다.
아무튼, 본문에 물음표가 없어서 아무도 답을 못 해드리고 있는 것 같은데요.
그냥 "어렵다"라는 내용에는 대답할 수가 없죠. 핵심만을 꼬집어서 물어보기를 원하는게 아니고, 본문에 질문이 없기 때문에 대답을 못하는 겁니다. 이건 마치 그냥 책 한권을 들고와서 "이거 어려워요"라고 하는 건데, 그럼 그 책을 다 가르쳐 달라는 의도인가요? 이 경우 적절한 것은 첫 페이지를 펼치면서 "이 부분부터 이해가 안됩니다"라고 하는 것이 맞죠.
전부 다 모르겠으면 하나씩 물어보세요.
"style태그 안에 body가 왜 필요한지 모르겠습니다. 그리고 거기서 h2는 무엇을 뜻하나요?" 같은 식으로죠. 물론 이런 질문에는 대부분 lmgtfy나 RTFM같은 답이 달리겠지만요.
피할 수 있을때 즐겨라! http://melotopia.net/b
뭐, 댓글 틀린 말 없는 것 같은데...
뭐, 댓글 틀린 말 없는 것 같은데...
어떤식의 답변을 원하는지 적어주셔야죠.. 어느부분의
어떤식의 답변을 원하는지 적어주셔야죠..
어느부분의 어느게 모르겠다.
예를 들면
"width:146px; " 이게 무슨뜻인가요?
라든지..
저렇게 소스만 탁 올려놓으면 어떻게 하라는건가요.
주방장이 요리사의 도마위에 말도없이
생선한마리 탁 올려놓고 그냥 가 버리면
요리사는 어떤 기분일까요?
회를 뜨라는건지,
조림을 하라는건지,
아니면 냉장고에 보관하라는건지,
아니면 선물로 준것인지
...
어떻게 알까요?
질문 : html 메뉴 소스 분석 좀 같이 해
질문 : html 메뉴 소스 분석 좀 같이 해 주세요
예상되는 질문의 목적 : 한 줄, 한 코드 일일히 설명해주세요.
답변자에게 너무 큰 시간의 소비를 요구하지 마세요.
아니면 그에 합당한 댓가를 지불하시고 의뢰를 하세요.
ps. css selector rule 을 익히세요.
익히는데 도움이 되는 도구)
1. 구글크롬에서 html 열고 우클릭 요소검사
2. http://codylindley.com/jqueryselectors/
https://xenosi.de/
도서관 가서 CSS 책을 빌려다 보시는게 빠를 것
도서관 가서 CSS 책을 빌려다 보시는게 빠를 것 같군요
CSS가 그렇게 간단한 언어가 아닙니다.
밑도 끝도 없이 분석하라면 설명할게 너무 많아요.
시간들이기 아까우시면 해당 사이트에서 생성해주는 소스 그대로 쓰세요.
그만큼 만들기도 쉽지 않습니다.
어디서 읽었는지 기억은 안나는데...
답변은 '답변자가 시간이 남아서 답변을 하는게 아니다' 라는 글을 어디선가 읽은 기억이 있습니다.
상황을 바꿔서 저런 질문이 있을때 답변을 어떻게 해줄수 있을까? 이 질문을 자신이라면 답변을 해줄까?
이질문으로 내가 원하는 답을 들을수 있을까? 라는 생각을 한번 해봤으면 좋겠습니다.
그냥 지나 가는 길에 들려서.... 써봅니다.
그리고..이건 그냥 하는 말인데...
익명의 사용자가 거슬리는 말을 한다고 조금 흥분하신거 같아요
공격적인 말일 수록 도와주기 더 싫어지는 법입니다. 여긴 답변이 의무가 아니니깐요
어디서 읽었는지 기억은 안나는데...
답변은 '답변자가 시간이 남아서 답변을 하는게 아니다' 라는 글을 어디선가 읽은 기억이 있습니다.
상황을 바꿔서 저런 질문이 있을때 답변을 어떻게 해줄수 있을까? 이 질문을 자신이라면 답변을 해줄까?
이질문으로 내가 원하는 답을 들을수 있을까? 라는 생각을 한번 해봤으면 좋겠습니다.
그냥 지나 가는 길에 들려서.... 써봅니다.
그리고..이건 그냥 하는 말인데...
익명의 사용자가 거슬리는 말을 한다고 조금 흥분하신거 같아요
공격적인 말일 수록 도와주기 더 싫어지는 법입니다. 여긴 답변이 의무가 아니니깐요
CSS 익히시려면 selector부터
급한 마음에 올리신거 이해합니다. 누구나 초보시절은 있기 마련이니까요. 저역시 답변이 아니라 안타깝지만 설마 HTML 문법을 몰라서 물어보시는건 아닐 것 같고 CSS 분석이 어려우신 것 같은데 일단 selector 개념 정도는 공부를 하시는게 도움될 것 같습니다. 사실 저역시 처음에 CSS를 공부하면서 제일 이해하기 어려웠던 부분이 CSS로 layout을 만드는 거였습니다. 요령을 익히고 나면 별개 아닌데 첫걸음 떼기 정말 힘들더군요.^^;
selector 개념을 익히고 나면 DIV 태그를 이용해서 화면을 가로나 세로로 등분하는 연습을 해보시면 요령이 익혀지실 것 같네요.
이거 참고해보세요.
http://system.neulwon.com/xe/linux_mysql/818
소스 분석해보니까. 다 지우고 요거만 남아도 되드라구요.
button.css
jquery.js
jQuery.navi.js
script.js
----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.
매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.
각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com
우여 곡절 끋에 메뉴 완성했습니다.
소스를 나름대로 이해했다고 생각하고 수정해 보면 이상하게 마음대로 되지 않는 부분이 많이 있는 소스라
철저히 분석하고 시작하는 게 옳다라고 생각하고 질문 했지만 답은 없고 물론 크게 기대도 안했지만
그래서 굉장히 많은 시행착오를 했습니다.
지금도 100% 자유 자재로 소스를 콘트롤 할 수 없는 상태이고 그저 아쉬운 대로 디자이너의요구를 맞춘 정도라고 할까요.
다음을 위해서라도 이 소스는 분석해 볼 가치가 있다고 생각합니다.
누가 시간 많고 능력 되시는 분이 한번 봐 주셨으면 합니다.
하지만 바쁘거나 싫으면 하지 않아도 됩니다.
물론 의무가 아니니까요.
아예 저 소스는 잊고 새로 짜는게 나을까요?
그건 마음대로 하셔도 되요
이건 제가 만든건데 참고해보세요.
사용방법
html 브라우저에서 실행 - 좌측 상단 menu 버튼 클릭 - New 클릭
div가 화면 중앙에 랜덤하게 생성 됩니다.
기능은 div 생성/ 소멸/ 크기변경/ 화면이동/ 색상변경등 대부분이 가능합니다.
----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.
매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.
각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com
번번히 감사합니다
많은 도움이 될 것 같습니다.
자신이 제작한 소스 공개하는 것이 쉬운 일이 아닌데 정말 감사합니다.
'답은 없고 물론 크게 기대도 안했지만' 이렇게
'답은 없고 물론 크게 기대도 안했지만'
이렇게 쓰신것 보니
아직도 이글에 달린 댓글의 의미를 이해 못하신것 같네요.
즉, 질문 방법이 잘못되었다는 겁니다.
이곳 뿐만아니라 모든 다른 인터넷상의 게시판에서도 이와같은 방법으로 질문을 올리셨던것 같습니다.
때문에 기대도 안하게 되겠지요. (당연합니다 누가 답변을 달고 싶을까요..)
또한,
나름 분석도 해보셨다면
어디 부분이 막히는지, 어느부분이 이해가 안가는지 구체적으로 질문해주시기 바랍니다.
지금 이글의 질문이라면
질문하는게 걸린 시간 1분
답변하는데는 1시간이상 걸릴것같군요.
반대로 되야 하는것 아닐까요?
질문하는데 걸리는시간 1시간
답변에 걸리는 시간 1분
이렇게 하는게 질문자님도 공부가 될것이고
답변자들도 노하우 전수를 쉽게 할 수 있을것 같네요.
남을 배려하는 마음을 항상 가지고 계시길 바랍니다.
이분 지능적인 트룰러 같은데요.. 크랙을 해서 쓴다고
이분 지능적인 트룰러 같은데요..
크랙을 해서 쓴다고 당당히 이야기하고
이런 질문글을 올리고 이상한 사람인듯...
인생은 도박이다.
사람을 단어로 부르고 매도하는 분위기
악인이 사람 죄짓게 만드는 가장 쉬운 방법입니다.
kldp는 그러지 않았으면 합니다.
모르면 물어보고
알면 답해주고
그게 전붑니다
----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.
매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.
각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com
사람을 단어로 부른다는게 무슨뜻인지요???
사람을 단어로 부른다는게 무슨뜻인지요???
인생은 도박이다.
댓글 달기