안녕하세요.
제가 처음으로 html과 css로 홈페이지 구축을 하고있는 디자이넌데요
책에 나와있는 예제 사이트가 마침 제가 만들고 싶었던 디자인이랑 형태가 같아서 책 도움을 많이 받고있는데
서브페이지는 제가 생각했던거랑은 조금 달라서 의도하는대로 잘 안만들어지네요
일단 책에 나와있는 서브페이지는 이 홈페이지처럼 헤드와 푸터 중간에 서브메뉴가 들어가 있잖아요.
근데 전
헤드/
서브이미지/
서브메뉴/
내용/
푸터
이렇게 위에서 아래로 쭉 내려가게 만들고 싶거든요.
그러니까 서브이미지 아래에 서브메뉴를 헤드에 메뉴처럼 가로정렬/ 센터정렬로해서 놓고싶어서요
근데 이게 가로정렬도 안돼고 센터로 오지도 않네요;
서브메뉴를 이 홈페이지 질문과답변|F&Q|자료실 이런식으로 가로정렬 시키고 홈페이지 센터로 정렬하는 방법이 궁금하고,
이게 헤더에 들어가는지 몸통에 들어가는지도 궁금해요.
제가 처음으로 html과 css로 홈페이지 구축을 하고있는 디자이넌데요
책에 나와있는 예제 사이트가 마침 제가 만들고 싶었던 디자인이랑 형태가 같아서 책 도움을 많이 받고있는데
서브페이지는 제가 생각했던거랑은 조금 달라서 의도하는대로 잘 안만들어지네요
일단 책에 나와있는 서브페이지는 이 홈페이지처럼 헤드와 푸터 중간에 서브메뉴가 들어가 있잖아요.
근데 전
헤드/
서브이미지/
서브메뉴/
내용/
푸터
이렇게 위에서 아래로 쭉 내려가게 만들고 싶거든요.
그러니까 서브이미지 아래에 서브메뉴를 헤드에 메뉴처럼 가로정렬/ 센터정렬로해서 놓고싶어서요
근데 이게 가로정렬도 안돼고 센터로 오지도 않네요;
서브메뉴를 이 홈페이지 질문과답변|F&Q|자료실 이런식으로 가로정렬 시키고 홈페이지 센터로 정렬하는 방법이 궁금하고,
이게 헤더에 들어가는지 몸통에 들어가는지도 궁금해요.
원하시는 방법으로 만드시는 것은 간단합니다.
HTML 파일에서 서브 메뉴에 해당하는 태그 윗 부분과 아래 부분에 ‹div class="clear"› ‹ /div› 을 입력해 주세요. 아래와 같이 하시면 됩니다.
‹div class="clear"› ‹ /div›
서브 메뉴 부분
‹div class="clear"› ‹ /div›
HTML 파일에서 처리는 이것으로 끝납니다.
이제 서브 메뉴의 레이아웃을 처리하는 것은 CSS 에서 처리하면 됩니다.
페이지 336페이지에서 보시면, CSS에서 #sub_menu 부분에 있는 float:left; 이 부분을 제거해 주세요.
그리고 서브 메뉴의 크기를 조정해 주시고 적당한 마진값을 정의해 줍니다.
만약 서브 이미지와 서브메뉴의 간격을 없애거나 조금 떼어서 작업할 경우 margin:0; 또는 margin: 2px 0 0 0; 이런 방식으로 처리해 주시면 됩니다.
그리고 마지막으로 #sub_menu li { float:left; }
이렇게 해주시면 서브 메뉴에 있는 리스트 메뉴가 가로로 펼쳐집니다.
정확한 답변이 되셨는지요?
만약 더 정확한 도움을 받길 원하시면 소스 파일을 올려주시면 제가 검토해 보겠습니다.
그리고 서브 메뉴가 헤더에 들어갈지 몸통에 들어가는 지에 대한 판단은 서브 메뉴가 메인 메뉴에 따라 틀린 메뉴를 보여준다면, 몸통쪽에 있어야 하는 것입니다.
오늘 하루도 행복한 하루되세요. ^^