많이 깨지네요 여기서 막혀서 힘듭니다.
<!DOCTYPE html>
<html>
<head lang="ko">
<meta charset="UTF-8">
<title>컴퓨터 기술 소개</title>
<link rel="stylesheet" type="text/css" href="3.css">
<script>
</script>
</head>
<body class="main">
<!--audio src="C:\Users\Administrator\Downloads\Another Night.mp3" autoplay="" loop="">
</audio-->
<div id = "sm">
<h1>스마트폰</h1>
<h3>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다 PC에서 실행되는 운영체제보다 작게 만든 모바일
운영체제를 탑<br>재하여 인터넷 검색, 전자우편, 간단한 문선 편집, 가메라, 오디오 및 비디오 재생 등 PC의
기능을 거의 모두 갖추고 있다.</p></h3>
</div>
<nav id="menu">
<h2>목차</h2>
<ul>
<li><a href="#history">역사</a>
<li><a href="#android">안드로이드</a>
<li><a href="#iphone">아이폰</a>
<li><a href="#sample">샘플</a>
</ul>
</nav>
<article>
<section>
<h2 id="history"><a href="https://namu.wiki/w/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0" target="역사">역사</a></h2>
<p>최초의 스마트폰은 1992년 발표된 IBM의 "사이먼"(Simon)이며, 1993년 애플은 뉴턴 메시지 패드를 출시하였다. 1999년 삼성전자는 애니콜 풀터치 PDA폰(sch-m100, sph-m1000)이라는 웹 브라우징과 이메일 확인이 가능한 스마트폰을 발매하였으며, 인터넷 서핑 기능은 물론, 메일, 어학사전, 성경, 불경, 찬송가, 게임 등의 실용적인 각종 애플리케이션까지 기본 설치의 형태로 제공하였다. 이후에 동년 모토로라도 이메일 확인 기능이 있는 전화기 "아이덴 i1000"을 출시하였다.</p>
</article>
<article>
<h2 id="android"><a href="https://namu.wiki/w/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C(%EC%9A%B4%EC%98%81%EC%B2%B4%EC%A0%9C)" target="안드로이드">안드로이드</a></h2>
<p>구글이 직접 개발에 참여하여 소프트웨어 지원 역시 전적으로 책임지는 제품은
넥서스 시리즈 이외에도 구글이 직접적으로 개입하는 이른바 준 레퍼런스 기기들도 있다. 대표적으로 3.0 허니콤을 탑재한 갤럭시 탭 10.1과 Xoom이 있다. 하지만, 갤럭시 탭 10.1의 경우 삼성전자의 기기라는 느낌이 강한 반면, Xoom의 경우 사후지원 까지 구글이 전적으로 책임질 정도로 레퍼런스라는 느낌을 준다. 또한 2013년 들어서 이미 시장에 출시된 기기 중 구글 순정 안드로이드만 탑재하고 제조사 커스텀을 극한으로 최소화한 구글 플레이 에디션 모델들도 공개되었다. 현재까지 공개된 모델은 갤럭시 S4, ONE, 엑스페리아 Z 울트라가 있다. 다만, 제조사 커스텀이 어찌되었든 있기 때문에 구글이 서포트를 해주기는 하지만 운영체제 업그레이드는 각 제조사들이 책임진다고 한다.
안드로이드 L 부터는 안드로이드 원이라는 준 넥서스가 생긴다. 기존의 구글 플레이 에디션과의 차이점은 사양이 특정하게 지정되어 있으며 운영체제를 넥서스 마냥 구글에서 100% 관리한다는 것이다. 다른말로 설명하면 안드로이드 원은 윈도우폰처럼 되는 것이다. 지정된 사양내에서 제조사가 하드웨어를 자유롭게 만들고 운영체제는 구글이 책임진다.</p>
</article>
<article>
<h2 id="iphone"><a href="https://namu.wiki/w/iPhone" target="아이폰">아이폰</a></h2>
<p>아이폰(iPhone)은 미국의 애플사의 휴대 전화 시리즈다. OS로 iOS라는 독자적인 플랫폼을 사용한다. 1.0 때는 OS X for iPhone, 2.0에서 3.0까지는 iPhone OS라는 이름이었다. 4.0부터 아이폰뿐만 아니라, 아이팟 터치나 아이패드까지 OS의 범위가 넓어진 것을 감안해 현재의 iOS라는 이름이 되었다.</p>
</article>
<article>
<h2 id="sample">샘플</h2>
<div id="sp">
<figure>
<figcaption>스마트폰 샘플</figcaption>
<br>
<img src="C:\Users\Public\Pictures\Sample Pictures\smart.jpg" alt="스마트폰"/>
</figure>
</article>
</section>
</div>
<footer>
<p><a href="survey.html" target="설문조사">설문조사</a></p>
<p>JJengg Comperny</p>
</footer>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
#sm{
background : yellow;
}
h1 {font-size : 50px; color : brown; text-align : center;
}
h3 {font-size : 25px;
text-align : center;}
strong {font-size : 30px;
}
body.main{
background-color : aliceblue;
}
h3{
border-style : solid; border-width : 0px 0px 1px 0px
}
a{
text-decoration : none;
}
h2{
color : #0054FF; text-shadow :2px 2px 2px #00D8FF;
}
p{
font-family : 휴먼체, "굴림체", 궁서체;
font-size : 1em;
text-indent : 1em;
}
footer{
background : orange;
border-radius : 10px 10px;
}
#menu{
float : left;
background : orange;
}
#menu ul { /* 여백과 패딩 모두 0 */
margin : 50px;
padding : auto;
width : 30px; /* 모든 아이템(<li>)을 한 줄에 품을 수 있는 폭 */
list-style-position : inside;
}
#menur ul li a {
color : white;
text-decoration : none; /* 링크 보이지 않게 */
}
#menu ul li a:hover {
color : violet; /* 마우스 올라 갈 때 색 */
}
section {
float : center;
}
#sp{
text-align : center;
}
열공하시는 모습 보기 좋습니다! 지금 수업중이라 자세한 답변은 잠시 뒤에 다시 해드릴게요.
앞으로 프로그래밍을 하시다보면 지금과 같이 마음대로 안풀릴 때가 수도 없이 많으실겁니다.
그것을 처리하는 좋은 방법중 하나는, 내가 만들고자 하는 전체 코드를 여러 덩어리로 나누어 작성해보는 것 입니다.
정말 내로라 하는 전문가들도, 처음부터 전체를 짜는 사람은 없습니다.
조금씩 조금씩 만들어가면서 새로 추가한 부분이 문제가 있으면 그 부분을 수정해서 고치고, 문제가 없으면 다시 거기에 기능을 추가하고.. 그런식이죠.
하드워킹님도 그렇게 해보시는 것은 어떨까요? 언뜻 보니까 한번에 많은 것을 하시려고 하다보니 군데군데 문제점이 보이네요.
지금 작성하신 것은 다른 곳에 일단 저장해두시고 윗부분부터 조금씩 가져와서 한번 고쳐보세요. 어떤부분에서 실수하시게 된건지 금방 발견하실 수 있을겁니다. ^^