카테고리 없음

day1

by Minwoo 2018. 3. 31.

1. 웹 어플리케이션 만드는 순서

cycle : 구상 - 기획 - 구현 - 테스트
cycle의 무한반복
최초 제작은 small 최소한의 최대 필요한 기능들만 구현
이후 신중한 확인을 통해 불필요한 복잡도를 상승시키지않는 기능추가를 한다.

2.history...

○ 관계
§ 인터넷 : 운영체제
§ 웹 : 인터넷이라는 운영체제의 소프트웨어
§ ftp : 파일전송
§ 이메일 : 웹에서의 이메일 이전의 이메일
○ 역사
§ 60년대에 인터넷(네트워크를 통해 연결) 등장
§ 90년대에 웹(네트워크를 활용해서 html이라는 웹 페이지를 컴퓨터끼리 주고 받을 수 있도록 한 대중교통시스템 느낌) 등장
§ 팀버너스리 웹 창시자!!!
웹브라우저(정보를 요청하고 표현하는 소프트웨어) -------http규약/html 이라는 언어-------- 웹서버(정보를 제공하는 컴퓨터에 설치되는 소프트웨어)

3. 서버 & 클라이언트

FTP프로토콜은 파일 전송 프로토콜입니다. 바탕화면 폴더에 올려진 .HTML파일은 원격지에서 FTP서버로 접속하여 HTML파일을 다운받을수는 있지만, FTP프로토콜을 이용하여 HTML구문을 해석한후 웹브라우저에 출력할수는 없습니다. FTP는 단지 파일 전송 용도로 사용되어집니다. 여기서 웹서버가 있어야 하는 이유는.
예를 들어 네이버에 접속 할려고 하게되면, 웹브라우저를 열게 됩니다 그리고 URL창에 http://www.naver.com이라는 주소를 입력하게 됩니다. 이때 웹 브라우저는 Client가 되고, naver는 Server가 되게 됩니다. Client가 Server에게
http://www.naver.com......tml 파일을 달라고 여청하게 되면, 서버는 그에 응답으로 Client에게 해당 html파일을 클라이언트에게 전달 해주게 됩니다. 이때 클라이언트로 전달되어진 html파일을 웹브라우저가 해석을하여 우리가 흔히 보는 네이버 화면으로 출력해주게 됩니다.

4. laptop자체를 서버로 하기위해 Bitnami 설치

5. HTML 이론

HTML의 기본문법

ex_html1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    안녕하세요. <strong>생활코딩</strong>입니다.
  </body>
</html>

여기서 strong 앞에는 시작태그, 뒤에 스트롱 </strong> 은 끝태그.

HTML 문법 - 속성

ex_html2.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    안녕하세요. <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>입니다.
  </body>
</html>

여기서 a는 링크 : a태그 사용하여 사이트로 링크 시킬수 있다.

위에서 target="_blank" 는 속성을 나타내면 이것을 추가하면 현재탭이아닌 새로운탭으로 웹사이트를 링크시키며 이걸 지울시 현재 창에서 다른 사이트로 링크 시킨다.

HTML 문법 - 태그의 중첩

ex_html3.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <ol>
      <li>html</li>
      <li>css</li>
      <li>JavaScript</li>
    </ol>
    <ul>
      <li>최진혁</li>
      <li>최유빈</li>
      <li>한이람</li>
    </ul>
  </body>
</html>

list -- 1.ol : ordered list 2. ul : unordered list

HTML 정리

* 태그사전참고
https://dev.w3.org......or/
https://opentutorials.org......058

6. HTML 이론

모델링을 HTML로 만들기

의미론적인 웹

사이트 완성

index.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
    <header>
        <h1><a href="http://localhost/">JavaScript</a></h1>
    </header>
    <nav>
        <ol>
        <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
        <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
        <li><a href="http://localhost/page_op.html">연산자</a></li>              
        </ol>
    </nav>
</body>
</html>

만약 포트 번호가 8080이라면 (접속 할 때 localhost:8080으로 접속한다면) 링크를 아래와 같이 작성하셔야 합니다.

1

2

3

<li><a href="http://localhost:8080/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost:8080/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost:8080/page_op.html">연산자</a></li>

page_html.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>JavaScript란?</h2>
    JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
  </article>
</body>
</html>

page_vc.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>변수와 상수</h2>
    변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.
  </article>
</body>
</html>

page_op.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <article>
    <h2>연산자</h2>
    계산을 할 때 사용되는 것입니다.
  </article>
</body>
</html>

웹브라우저: HTML / CSS /JavaScript

웹서버: PHP/MySQL

저작자표시