메뉴 건너뛰기

사용 OS : Windows7 Ultimate
사용 브라우저 : IE 11 , Chrome 버전 65.0.3325.181(공식 빌드) (32비트)

제목에서처럼 CSS3로 태그 배치하기를 header, nav, section, footer  이용해서 해보고 있는데 잘 안됩니다.

 

에러1. 아래에 나와 있는 내용으로 인터넷창을 띠워보면 header 부분의 위쪽에 공백이 생깁니다.

에러2. section 부분안에 이미지를 삽입했는데 footer부분을 침범합니다.

        이미지 부분은 table 태그를 이용해서 삽입했습니다.

에러3. footer 부분의 사이즈가 적용한대로 나오지 않습니다. 즉 사이즈가 width 100% 에 height 15%을 적용하면
         width 는 정상적으로 나오는데 height가 작게 나옵니다.

에러4. 윈도우 창을 전체크기 즉 전체화면으로 했을 때는 글자겹침이나 구역침범이 없는데

        윈도우창을 축소했을 때는 글자겹침이나 구역침범이 심합니다.

※ 위의 에러를 어떻게 해야 하나요?

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>컴퓨터 기술 소개</title>
<style>
html, body{ margin:0; padding:0; height:100%; }
.header { width:100%; height:15%; background:lime; }
.nav { width:15%; height:70%; float:left; background:orange; }
.section{ width:85%; height:70%; float:left; background:thistle; }
.footer { width:100%; height:15% clear:both; background:orchid; }
</style>

</head>

 

<body>
 <header class="header">
 <h1 style="text-align:center">스마트폰</h1>
 <p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든
 모바일 운영체를 탑재하여 인터넷 검색, 전자우편,, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등
 PC의 기능을 거의 모두 갖추고 있다.</p>
 </header>

 
 
 <nav class="nav"><h3>목차</h3>
 <ul>
  <li><a href="#shistory">역사</a></li>
  <li><a href="#sandroid">안드로이드폰</a></li>
  <li><a href="#siphone">아이폰</a></li>
  <li><a href="#ssample">샘플</a></li>
 </ul>
 </nav>

 
 
 
 <section class="section">
 <p id="shistory">
 <h3><ins>역사</ins></h3>
 <p>최초의 스마트폰은 IBM 사이먼으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베이거스에서 열린 컴댁스에서 컨셉 제품으로 전시되었다.</p>
 
 <p id="sandroid"><h3><ins>안드로이드</ins></h3>
 <p>안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.</p>
 
 <p id="siphone"><h3><ins>아이폰</ins></h3>
 <p>아이폰(영어: iPhone)은 미국의 애플사의 스마트폰 브랜드및 시리즈이다. 2007년 1월 9일에 스티브 잡스가 처음으로 발표를 하였다.</p>
 
 
 
 <p id="ssample"><h3>샘플</h3></p>
 <table>
 <caption>스마트폰샘플</caption>
 <tbody>
 <tr><td><img src="sample.png"></td></tr>
 </tbody>
 </table>
 </section>

 
 
 <footer class="footer">
 <p><a href="survey4.html">설문조사</a><br>
 Copyright 2017 by Kitae</p>
 </footer>

 
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

?
  • ?
    관리자 2018.03.28 19:38
    질문을 잘 정리하여 올렸네요. 각 질문에 대해 답을 드립니다.
    에러1. 아래에 나와 있는 내용으로 인터넷창을 띠워보면 header 부분의 위쪽에 공백이 생깁니다.
    답) overflow:hidden;을 header에 넣으면 됩니다.

    에러2. section 부분안에 이미지를 삽입했는데 footer부분을 침범합니다.
    이미지 부분은 table 태그를 이용해서 삽입했습니다.
    답) 이미지가 없어서 모르겠는데 해보세요

    에러3. footer 부분의 사이즈가 적용한대로 나오지 않습니다. 즉 사이즈가 width 100% 에 height 15%을 적용하면
    width 는 정상적으로 나오는데 height가 작게 나옵니다.
    답) 스타일 시트에 height:15% 뒤에 세미콜론(;)이 빠졌네요.

    에러4. 윈도우 창을 전체크기 즉 전체화면으로 했을 때는 글자겹침이나 구역침범이 없는데
    윈도우창을 축소했을 때는 글자겹침이나 구역침범이 심합니다
    답) overflow:hidden;을 적절히 삽입하여 해결해보세요

    제가 답을 고쳐 해보았는데 잘 됩니다.
    답을 참고하여 스스로 해결해 보세요.

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 10011
305 Open Challenge 와 실습문제 자료 2 김원상 2017.04.29 6738
304 ㅠㅠ..질문좀 드리겠습니다.. 1 은성 2017.04.18 2850
303 웹 프로그래밍 책 답안지 1 mumu 2017.03.06 2775
302 연습문제 답안지 2 vdncnck 2017.03.28 2221
301 HTML을 열심히 공부중인 학생입니다 3 열심히 하자 2018.05.30 1881
300 8장 연습문제 실습문제 4장 2 student 2017.05.08 1848
299 살다 살다 답을 반쪽만 주는 책은 처음입니다 1 음음 2019.01.24 1759
298 짝수번 정답 3 idididid 2017.12.25 1733
297 localhost 관련 문의 3 소년정 2018.02.20 1707
296 7장에 실습문제 4번 질문 1 asd123 2017.11.05 1550
295 open challenge 05 2 hardworking 2017.03.29 1294
294 7장 10번문제 1 학섕 2017.07.12 1067
293 실습문제 7장 2번 질문있습니다 1 jobjob 2017.04.04 1032
292 5장 연습문제 홀수 번 질문 1 채XX 2019.06.17 1014
» 페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1 file 워니고 2018.03.28 1010
290 7장에 연습문제에 있는 실습문제 질문 1 student 2017.05.07 987
289 9장 오픈챌린지 답이 너무 궁금합니다. 1 범이 2017.05.10 981
288 6장 실습문제 짝수 답좀 알려주실분? 제발요  도움 2017.09.18 911
287 3장 open challenge 질문해봅니다 6 진혁 2018.01.30 907
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 16 Next
/ 16
위로