메뉴 건너뛰기

2017.03.29 17:00

open challenge 05

조회 수 2202 댓글 2

많이 깨지네요 여기서 막혀서 힘듭니다.

 

 

<!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;
}
 

?
  • profile
    관리자 2017.03.30 13:09

    열공하시는 모습 보기 좋습니다! 지금 수업중이라 자세한 답변은 잠시 뒤에 다시 해드릴게요.

    앞으로 프로그래밍을 하시다보면 지금과 같이 마음대로 안풀릴 때가 수도 없이 많으실겁니다.
    그것을 처리하는 좋은 방법중 하나는, 내가 만들고자 하는 전체 코드를 여러 덩어리로 나누어 작성해보는 것 입니다.

    정말 내로라 하는 전문가들도, 처음부터 전체를 짜는 사람은 없습니다.
    조금씩 조금씩 만들어가면서 새로 추가한 부분이 문제가 있으면 그 부분을 수정해서 고치고, 문제가 없으면 다시 거기에 기능을 추가하고.. 그런식이죠.

    하드워킹님도 그렇게 해보시는 것은 어떨까요? 언뜻 보니까 한번에 많은 것을 하시려고 하다보니 군데군데 문제점이 보이네요.
    지금 작성하신 것은 다른 곳에 일단 저장해두시고 윗부분부터 조금씩 가져와서 한번 고쳐보세요. 어떤부분에서 실수하시게 된건지 금방 발견하실 수 있을겁니다. ^^

  • profile
    관리자 2017.03.30 19:45

    지금 코드를 쭉 확인해봤는데 문제되는 부분이 꽤 많아서 전부 다 고쳐드리기엔 다소 무리가 있네요..
    복습한다는 느낌으로 한번 처음부터 다시 차근차근 해보시는게 좋을 것 같습니다.

    HTML은 Well-Formed Document라고 하여, 태그 작성에 반드시 지켜야되는 규칙이 있습니다.
    이 규칙들 중에는 하나는 여는 태그와 닫는 태그들이 교차되어 작성되지 않아야 한다는 규칙이 있는데요,
    하드워킹님께서 올려주신 코드를 보면 <section> 태그와 <article> 태그가 교차 선언되어 있는 부분이 있습니다.
    또한 <figure> 태그를 사용 하는 부분도 이와 같은 문법 오류가 있습니다.

    위쪽 스마트폰에 대한 개요 부분도, <p> 태그가 닫는 태그만 있고 여는 태그는 존재하지 않네요.
    그리고 <div> 태그로 감싸져 있는데, <header> 태그로 감싸면 좀더 구조화 잘 된 문서가 될 것 같습니다.
    하나 더, 스마트 폰에 대한 설명 부분을 <h3> 태그로 감싸셨는데, <h3> 태그보다는 <p> 태그를 이용하시는 것이 좀더 적절하지 않을까 생각됩니다.

    허나 이것들을 고쳐도 아직 고칠 점이 많이 보입니다. 처음 말씀드린 것처럼 복습한다는 느낌으로 한번 처음부터 조금씩 조금씩 확인해가면서 만들어보세요~

    참고로.. 이렇게 코드를 통째로 올려서 '잘 안돌아갑니다' 식으로 질문 하시게 되면 답변을 해주는 사람도, 답변을 받는 사람도 힘이 듭니다. ㅜㅜ
    공부하시다가 이해안가는 부분이 생기면 어느 부분이 어떻게 이해가 안가는지, 혹은 원하는 기능이 있는데 어떻게 구현해야 하는지와 같이 구체적으로 질문을 해주셔야 답변하기도, 공부하기도 쉽답니다!


QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18175
22 7장에 연습문제에 있는 실습문제 질문 1 student 2017.05.07 1261
21 2장 예제 2-11과 관련하여 질문 드립니다. 1 조근석 2017.04.30 389
20 Open Challenge 와 실습문제 자료 2 김원상 2017.04.29 7443
19 ㅠㅠ..질문좀 드리겠습니다.. 1 은성 2017.04.18 3834
18 책을 마치며 7 은성 2017.04.13 491
17 7장 오픈첼린지 1 Bolt 2017.04.11 1067
16 placeholder속성 1 khl 2017.04.08 85504
15 10장 오픈챌린지 5 은성 2017.04.07 2242
14 9장 실습문제 4번 3 은성 2017.04.06 1170
13 8장 실습문제 7번 5 은성 2017.04.05 695
12 8장 연습문제 8번 5 은성 2017.04.05 1359
11 6장 예제 6-23 1 은성 2017.04.04 317
10 실습문제 7장 2번 질문있습니다 1 jobjob 2017.04.04 1449
9 3장의 실습문제 1 file minju0508 2017.04.02 1330
» open challenge 05 2 hardworking 2017.03.29 2202
7 연습문제 답안지 2 vdncnck 2017.03.28 3215
6 인코딩, 앵커 1 간구 2017.03.27 157
5 open challenge 코드 11 hardworking 2017.03.27 1102
4 이미지를 HTML 파일과 같은 폴더에 저장하였는데 왜 이미지가 보이지 않을까요? 1 황기태 2017.03.27 541
3 웹 프로그래밍 책 답안지 1 mumu 2017.03.06 14036
목록
Board Pagination Prev 1 ... 12 13 14 15 16 17 18 19 20 ... 21 Next
/ 21
위로