서브 메뉴의 넓이(width=100%)가 제대로 적용이 되지 않습니다.

0 투표
693 조회

 

1. http://alswjd57.dothome.co.kr/

이 링크를 타고 가시면, GAMES > Online games 으로 되어 있는 상태입니다. 서브 메뉴의 width값을 100%로 지정했습니다. 그런데 100%를 하면 전체 화면에 맞게 되어야 하는데 width값이 제대로 적용이 되지 않습니다. 

위에 있는 이미지는 제가 하고 싶은 코딩의 결과입니다.  그리고 참고 사이트로 밑에 사이트를 보았습니다.

http://www.istarbucks.co.kr/index.do

봐도 복잡하고 자바스크립트를 연동시킨 것 같은데, 이 사이트처럼 코딩을 해야 위 3개의 이미지처럼 나올텐데 자바스크립트는 어떻게 짜야 할지 모르겠습니다;;  어떻게 해야 할까요;;;

서브 메뉴의 width 값을 제대로 적용하고, hover 시에는 보이고, hover를 안 하면 사라지게 하는 자바스크립트를 하고 싶습니다.

2. 예제로 주신 select의 jsfiddle를 보았습니다. 에디트 플러스에 옮겨서 해보려고 html, css, javascript를 복사했습니다. 그런데..;; html,css는 진행되는데 자바스크립트는 실행이 안됩니다;;

자바스크립트는 css나 html처럼 기본적으로 입력하는 서식이 있나요? html은 <!doctype html>이로 시작하고, css는 @charset "utf-8"를 쓰고 시작한다든지 식으로요. 

에디터 플러스에서 새파일을 만들 시 다음과 같이 나옵니다.

class  
{
    public static void main(String[] args) 
    {
        System.out.println("Hello World!");
    }
}

이런 식으로 나오는데 선생님이 예제로 쓰셨던 java구문을 넣으려면 어디에 넣어야 적용이 되는지 알고 싶습니다.

 

3. 위의 이미지는 IE로 봤을 때 나타나는 현상입니다.

크롬, 오페라, 사파리, 파이어폭스, MS Edge에서는 나타나지 않습니다. 그러나, IE에서만 저 파워레인저 이미지가 내려가 있는 상태입니다. IE에서도 슬라이드가 넘어가는 효과가 적용되려면 어떻게 해야 하나요? 

 

 

요청 : 2016년 2월 14일 마크업 언어 분류 내 작성자 alsduf57 (220 포인트)
수정일시 : 2016년 2월 14일 작성자 alsduf57

1 개의 답변

0 투표

첫 번째 질문은,

기본적으로 HTML 마크업이 잘못되었습니다. <li>안에 <ul>이 들어갈 순 있어도 </li>다음에 <ul>이 나오는 것은 잘못된 작성입니다. 이 이유 때문에 가로가 100%로 나오지 않는 것인지는 확인하지 못했습니다.

그리고 메뉴바 구현은 jQuery와 CSS를 사용해야 합니다. 다음 아래의 링크를 보시면 샘플 코드를 작성해 두었으니 참고하시길 바랍니다.

https://jsfiddle.net/Cydemy/wkz72od8/

 

두 번째 질문은,

Javascript 코드를 외부에 두느냐, 페이지 내부에서 작성하는냐를 결정해야 합니다. 외부에 두는 경우는 아래와 같이 HTML 페이지에 가져오는 코드를 넣어줘야 합니다.

<script type="text/javascript" src="외부 *.js 파일 경로"></script>

그리고 HTML 내부에 작성하는 경우에는 아래와 같이 <script>마크업을 하고 그 안에 작성하시면 됩니다.

<script type="text/javascript">

    // 코드

</script>

 

에디터플러스에서는 새로운 문서를 생성시 문서 타입을 Java가 아닌 Javascript를 선택해야 합니다. 외부에 두는 *.js 파일을 생성하는 경우겠지요.

 

세 번째 질문은,

글쎄요. 작업 컴퓨터가 Mac이라 아직 확인을 못했습니다. 나중에 확인되는 대로 답변 드리겠습니다.

답변: 2016년 2월 15일 작성자 queryeditor (5,040 포인트)