메뉴 건너뛰기

사용 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 18172
282 p.469 6번 질문드립니다. 4 열심히 공부하는 독자 2020.09.08 64
281 open12 질문드립니다. 3 열심히 공부하는 독자 2020.09.08 111
280 value 속성 1 열심히 공부하는 독자 2020.09.04 48
279 오타제보합니다. 1 컴퓨터공학생 2020.08.30 96
278 p.133 질문이요 1 컴퓨터공학생 2020.08.30 74
277 p.133 질문이요 1 컴퓨터공학생 2020.08.30 67
276 p.469 실습 5번문제 4 열심히 공부하는 독자 2020.08.29 92
275 브라우저 크기 변경 1 열심히 공부하는 독자 2020.08.27 59
274 9장 실습9번 문제 2 열심히 공부하는 독자 2020.08.23 106
273 Image객체 질문 4 열심히 공부하는 독자 2020.08.21 77
272 DOM트리 질문 1 열심히 공부하는 독자 2020.08.17 76
271 몽구스 웹서버가 뭔가요? 1 안녕하세요 2020.08.17 101
270 이벤트리스너 질문 2 열심히 공부하는 독자 2020.08.16 63
269 <script>태그의 위치 1 열심히 공부하는 독자 2020.08.15 58
268 open 8 질문 2 열심히 공부하는 독자 2020.08.15 62
267 p.254 3번문제 질문드립니다. 2 열심히 공부하는 독자 2020.08.14 47
266 예제 9-8 질문입니다. 2 모르겠어요 2020.07.31 98
265 예제 6-13 질문이요! 2 궁그미 2020.07.30 144
264 border style 질문 2 궁그미 2020.07.28 41
263 a<<b가 뭔가요? 1 2020.07.01 102
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 11 ... 21 Next
/ 21
위로