메뉴 건너뛰기

사용 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 18171
322 버튼 태그에 대해서 궁금한게 있습니다!! 1 아이디가뭐였지 2021.03.22 128
321 2장 이론문제 3번 1 알고싶어요 2021.03.14 1328
320 14장 예제 사라진 건가요 1 ... 2021.03.09 4077
319 ch1 이론문제 1번 2 새내기 2021.03.06 217
318 연습문제 짝수답은어디있나요?? 2021.02.16 825
317 9장 실습문제 10번 2 왜죠 ㅠㅠ 2021.01.24 1203
316 명품 html5+ 수정판 css3+ javascript 웹 프로그래밍 실습문제 이미지 파일 어디서 다운 받아요? 1 미카엘 2021.01.14 728
315 p.296 isNaN 함수 1 yamto 2020.12.28 179
314 실습문제 6장 6-(1) 어떻게 하는 건가요? 1 초보자 2020.12.23 215
313 실습문제 7장 5번 1 유등등 2020.12.17 692
312 13-5 하고 13-6 error 1 WebWeb 2020.12.09 148
311 7장 1번 1 2020.11.30 311
310 9장 실습문제 10번 계산기 만들기 2 호탱 2020.11.29 350
309 6장 오픈챌린지 질문 1 giggle 2020.11.23 275
308 Page 396 script 위치 관련 질문 드립니다 2 질문드립니다 2020.11.05 154
307 실습 8장 8번 문제 질문이요! 1 2020.11.03 247
306 chapter5 오픈챌린지 5장 아예 모르겠어요.. 열심히해보자 2020.11.03 292
305 안녕하세요? 186쪽 예제 4-13 대해서 물어봅니다. 1 file 김현우 2020.11.02 125
304 5-3 220page 1 고수가되고싶어요 2020.10.24 141
303 7장 실습문제 10번 좀 도와주세요 ㅜㅠ 헷찡 2020.10.18 233
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로