사용 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>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
에러1. 아래에 나와 있는 내용으로 인터넷창을 띠워보면 header 부분의 위쪽에 공백이 생깁니다.
답) overflow:hidden;을 header에 넣으면 됩니다.
에러2. section 부분안에 이미지를 삽입했는데 footer부분을 침범합니다.
이미지 부분은 table 태그를 이용해서 삽입했습니다.
답) 이미지가 없어서 모르겠는데 해보세요
에러3. footer 부분의 사이즈가 적용한대로 나오지 않습니다. 즉 사이즈가 width 100% 에 height 15%을 적용하면
width 는 정상적으로 나오는데 height가 작게 나옵니다.
답) 스타일 시트에 height:15% 뒤에 세미콜론(;)이 빠졌네요.
에러4. 윈도우 창을 전체크기 즉 전체화면으로 했을 때는 글자겹침이나 구역침범이 없는데
윈도우창을 축소했을 때는 글자겹침이나 구역침범이 심합니다
답) overflow:hidden;을 적절히 삽입하여 해결해보세요
제가 답을 고쳐 해보았는데 잘 됩니다.
답을 참고하여 스스로 해결해 보세요.