15. 프로그래밍(JS, PHP 이론)

https://www.opentutorials.org/course/1688/9363


HTML

- 웹이 출현하고 제일 먼저 등장한 기술

- 웹의 핵심

- 1990년에 등장


CSS

- 1994년에 등장 

- 웹페이지를 좀 더 아름답게 하기 위해

- 디자이너의 언어


JavaScript

- 1995년에 등장

- 웹페이지가 사용자에 동작에 따라 상호작용하도록 함


PHP

- 생산성의 한계를 극복하기 위해 등장

- java의 JSP, python의 Django, Ruby의 Ruby on Rails 등이 경쟁관계

→ 이러한 기술들을 통해 웹페이지를 생산하는 생산성이 비약적으로 향상


데이터베이스

- 수많은 데이터를 전문적으로 관리

- MySQL, Oracle, MSSQL 등



15-1. 복습과 수업 예고

https://www.opentutorials.org/course/1688/9364



- 위의 언어(html, css, js)들은 클라이언트 쪽에서 동작하는 언어


- 웹브라우저로부터 a.php를 요청받은 웹서버는 이를 PHP 엔진에게 넘긴다.

- PHP 엔진은 a.php를 php 문법에 따라 해석하고, 필요한 것을 데이터베이스에게 요청한다.

- PHP 엔진은 데이터베이스로부터 받은 정보와 a.php 내용을 결합하여 html을 만들고, 웹서버에게 전달한다.

- 웹서버는 html을 웹브라워에게 전달한다.

- 웹브라우저는 html 코드를 해석해서 웹브라우저 화면에 출력한다.



15-2. JavaScript vs PHP

https://www.opentutorials.org/course/1688/9365



HTML, CSS

- 정적인 언어

- HTML, CSS가 웹브라우저에 한번 표시되면 사용자가 무엇을 해도 바뀌지 않음

- 문서 작성을 위한 목적으로 만들어진 정적인 언어


JavaScript, PHP

- 동적인 언어

- 상황에 따라 다르게 동작함

- 프로그램, 애플리케이션하면 떠오르는 것들을 만드는 동적인 언어


자바스크립트를 왜 쓰는가?

- https://goo.gl/HqKUcK


PHP를 왜 쓰는가?

- https://goo.gl/JCY7yq



15-3. 웹페이지에 코드 삽입하기

https://www.opentutorials.org/course/1688/9366



PHP

- 기본적으로 PHP 파일은 HTML과 똑같이 동작

- <?php : 지금부터 php가 시작된다는 것을 PHP 엔진에게 알려주는 역할을 하는 코드

   ?> : 이제 php가 끝났다를 알려주는 코드

- echo : php에서 무언가를 출력할 때 사용


- php파일을 열었을 때, php파일과 웹브라우저의 소스코드를 비교해보면 조금 다르다.

→ PHP 엔진이 php 부분을 해석해서 웹페이지에 포함시키도록 동작했기 때문


JavaScript

- <script> 태그 사용

- 웹브라우저는 <script> 태그를 만나면 이를 JavaScript 문법에 따라 해석해서 동작

- document.write(); : JavaScript에서 어떤 정보를 화면에 표시할 때 사용하는 명령어


- PHP와 JavaScript의 차이가 극명하게 드러나는 부분

→ PHP는 서버에서 실행되는 언어이기 때문에 서버에서 구문이 실행된 결과가 웹브라우저에게 전송

→ JavaScript는 웹브라우저가 해석해서 처리하는 언어이기 때문에 웹브라우저에서 코드를 해석해서 화면에 반영


 1.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
  </head>
  <body>
    <h1>php</h1>
    <?php
      echo 10+10;
    ?>
    <h1>JavaScript</h1>
    <script>
      document.write(10+10);
    </script>
  </body>
</html>
cs



저작자표시 비영리 변경금지

'컴퓨터 > 웹 개발' 카테고리의 다른 글

[코딩야학] ~ 로그인기능 - 8일차  (0) 2017.07.31
[코딩야학] ~ 조건문 - 7일차  (0) 2017.07.31
[코딩야학] ~ CSS실습 - 5일차  (0) 2017.07.31
[코딩야학] ~ CSS이론 - 4일차  (0) 2017.07.31
[코딩야학] ~ HTML실습 - 3일차  (0) 2017.07.31

14. CSS 실습

https://www.opentutorials.org/course/1688/9351


1) Design HTML

- header 부분

- 하단 테두리, 적절한 여백


- nav 부분

- 컨텐츠의 폭, float 속성으로 본문이 우측에 위치, 우측 테두리


- article 부분

- float:left, 적절한 여백


page_vc.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <style>
      header{
        border-bottom:1px solid gray;
        padding:20px;
      }
      nav{
        border-right:1px solid gray;
        width:200px;
        height:600px;
        float:left;
      }
      nav ol{
        list-style:none;
      }
      article{
        float:left;
        padding:20px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
    <article>
      <h2>변수와 상수</h2>
      변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.
    </article>
  </body>
</html>
cs






2) 완성

다른 페이지에도 동일한 디자인 적용

- 모든 페이지에 page_vc.html에서 작성했던 style 태그 붙여넣기


CSS를 HTML로부터 분리하자

   →  

- 외부에 있는 CSS 파일을 각각의 HTML이 로드해서 사용하게 되면, 디자인 변경이 있을 때 중앙에 있는 CSS 파일 하나만 수정하면 모든 HTML 파일에 변화가 일어난다.

- 중복의 제거 : 각각의 HTML 페이지마다 있었던 중복된(동일한) CSS를 하나의 파일로 분리시킴으로써 중복된 내용 제거

장점 : 유지보수가 쉬워짐 / 데이터 비용 절감


<link> 태그

- 외부의 문서를 연결시키는 태그


CSS 추가 수업

- http://opentutorials.org/course/45


* 정리

HTML은 정보!    CSS는 디자인 or 스타일!


style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
header{
  border-bottom:1px solid gray;
  padding:20px;
}
nav{
  border-right:1px solid gray;
  width:200px;
  height:600px;
  float:left;
}
nav ol{
  list-style:none;
}
article{
  float:left;
  padding:20px;
}
h2{
  font-size:50px;
}
cs


index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
  </body>
</html>
cs


page_html.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
    <article>
      <h2>JavaScript란?</h2>
      JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
    </article>
  </body>
</html>
cs


page_op.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body>
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
    <article>
      <h2>연산자</h2>
      계산을 할 때 사용되는 것입니다.
    </article>
  </body>
</html>
cs


page_vc.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="test/css" href="/style.css">
  </head>
  <body>
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
    <article>
      <h2>변수와 상수</h2>
      변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.
    </article>
  </body>
</html>
cs


3) CSS 활용

chrome 확장프로그램 : stylebot

- https://goo.gl/HPHK6B




저작자표시 비영리 변경금지

'컴퓨터 > 웹 개발' 카테고리의 다른 글

[코딩야학] ~ 조건문 - 7일차  (0) 2017.07.31
[코딩야학] ~ 웹페이지에 코드삽입 - 6일차  (0) 2017.07.31
[코딩야학] ~ CSS이론 - 4일차  (0) 2017.07.31
[코딩야학] ~ HTML실습 - 3일차  (0) 2017.07.31
[코딩야학] ~ HTML이론 - 2일차  (0) 2017.07.31

12. 개발도구

https://www.opentutorials.org/course/1688/9346


1) 도구의 필요성

버전 관리 시스템(Version Control System)

- 변경된 코드들의 변화에 대한 역사를 기록하는 것

- 어떤 문제가 생겼을 때, 문제가 어디서, 누구로부터 발생되었는지 탐색할 수 있게 함

- 작성한 코드를 서버(다른 안전한 컴퓨터)에 안전하게 저장해줌
    → 백업 기능

- 협업시, 같은 파일 수정에 대한 질서를 잡아 줌

- SVN, Mecurial, GIT

(참고 - GIT 관련 수업 : http://www.opentutorials.org/course/1492)


코드 편집기(Editor)

- 빠르게 코드를 작성할 수 있게 하고, 사람이 하기 쉬운 실수를 보정해주는 역할

- ATOM, Aptana, Sublime Text, Brackets


2) 윈도우에 아톰 설치

https://atom.io에 접속하여 Download Windows Installer 버튼 클릭


3) 맥에 아톰 설치

https://atom.io에 접속하여 Download For Mac 버튼 클릭


4) 리눅스에 아톰 설치

1
2
3
sudo add-apt-repository ppa:webupd8team/atom
sudo apt-get update
sudo apt-get install atom
cs


5) 아톰 사용법

https://www.opentutorials.org/module/1579


sublime text

- https://www.opentutorials.org/course/671/3595



13. CSS 이론

https://www.opentutorials.org/course/1688/9350


1) 기본문법

CSS(Cascading Style Sheet)

- 디자인을 위한 언어

- 정보를 아름답게 표현하는 언어


HTML + CSS

- CSS는 HTML과는 전혀 다른 독립된 언어

- CSS는 HTML이라는 언어를 디자인하기 위해 고안된 것이기 때문에, HTML을 떠나서 살 수 없음 

- HTML은 정보 측면, CSS는 디자인 측면


<style> 태그

- CSS의 시작과 끝을 의미하는 태그

- 웹 브라우저는 <style> 태그를 만나면, 이 후의 정보들을 CSS의 문법에 따라 해석

→ </style> 태그를 만날 때까지

- <style> 태그는 HTML 


문법 정리


- 선택자(selector) : 뒤에 내용을 누구에게 적용시킬 것인가

- 서술(description) : 어떤 효과를 선택자에게 줄 것인가


ex_css_1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1 {color:red} /* h1 태그의 color를 붉은색으로 해라 */
    </style>
  </head>
  <body>
    <h1>CSS</h1>
    <h2>JavaScript</h2>
    <h3>HTML</h3>
  </body>
</html>
cs




2) 선택자 심화학습

속성

- 속성과 속성을 구분하는 구분자는 ;


ex_css_1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1, h2 {
        color:red; 
        font-size:10px
      }
      h2 {
        text-decoration:underline;  
      }
      header h1 { /* header 태그 내부에 있는 h1 태그*/
        border:1px solid red; /* 테두리 */
      }
    </style>
  </head>
  <body>
    <header>
      <h1>CSS</h1>
    </header>
    <h2>JavaScript</h2>
    <h3>HTML</h3>
    <h1>PHP</h1>
  </body>
</html>
cs




3) 박스모델

박스모델

- CSS를 이용해서 HTML 태그들의 위치, 부피, 여백 등을 지정하는 것



ex_css_2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <style>
      #selected { /* id 값이 selected인 태그만 선택 */
        border:1px red solid; /* 순서 상관 X */
        padding:30px; /* 테두리와 content 사이의 여백 */
        margin:50px;  /* 태그와 태그 사이의 간격 */
      }
      #extra {
        border:blue 1px solid;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>html</li>
      <li id="selected">css</li>
      <li id="extra">javascript</li>
    </ul>
  </body>
</html>
cs



4) float

float

- 웹 페이지의 레이아웃을 디자인할 때 아주 중요하게 사용되는 속성

- 객체를 좌측 또는 우측에 정렬


ex_css_3.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <style>
      img{
        border:1px solid red;
        float:left; 
      }
    </style>
  </head>
  <body>
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그 또는 커뮤니티에 포스팅 단위로 파편화되어 있습니다. 그래서 최소한 무엇을 검색해야 하는지를 아는 사람들을 위해서는 더 없이 좋은 공간이지만, '무엇을 모르는지 모르는 상태'의 입문자에게는 그림의 떡으로 남아 있습니다. 다시말해서 전문가를 더욱 전문가답게 만드는 혁신에 머물고 있는 것이죠.
 
 
생활코딩은 컴퓨터와 인터넷이 존재하는 시대의 공부방법은 어때야 하는가를 찾는 작업을 꾸준히 하고 있습니다. 정보기술이 발전하지 않았던, 낭만적인 시절에는 어떤 일을 하려고 하면 그것을 하기 위해서 필요한 거의 모든 것을 알고 있어야 했습니다. 검색할수도 없었고, 질문하기도 어려웠기 때문입니다. 한편 한번 배운 지식만으로도 평생을 살아 갈 수 있었습니다.  
 
 
 
오늘날은 인터넷이 연결된 환경에서 일을 합니다. 언제든지 검색하고, 질문할 수 있습니다. 또 많은 일을 기계가 대신해줍니다. 이런 시대의 공부방법은 과거와 달라져야 한다고 생각합니다.  생활코딩이 지향하는 목표는 작은 교육입니다. 작은교육의 핵심은 '무엇을 모르는지 모르는 상태'에서 '무엇을 모르는지는 아는 상태'가 되는 것입니다. 무엇을 모르는지를 알면, 지금 당장 그 지식을 익히지는 않더라도, 그 지식이 정말 필요할 때 그 지식을 구하려 할 것입니다. 이 때 하는 공부는 이전과 같지 않을 것입니다.
  </body>
</html> 
cs




- float:right; 일 경우




저작자표시 비영리 변경금지

'컴퓨터 > 웹 개발' 카테고리의 다른 글

[코딩야학] ~ 웹페이지에 코드삽입 - 6일차  (0) 2017.07.31
[코딩야학] ~ CSS실습 - 5일차  (0) 2017.07.31
[코딩야학] ~ HTML실습 - 3일차  (0) 2017.07.31
[코딩야학] ~ HTML이론 - 2일차  (0) 2017.07.31
[코딩야학] 처음 ~ 서버제어까지 - 1일차  (0) 2017.07.31


http://webhacking.kr/challenge/web/web-04/




뒤에 '=='가 붙으면 base64로 인코딩된 값이다.



(http://coderstoolbox.net/string/#!encoding=base64&action=decode&charset=utf_8)


두 번의 디코딩 결과로, invalid input 이라는 값이 나왔다.

→ 하지만, 정답 X


암호문을 base64로 한 번 디코딩해서 나온

결과값(c4033bff94b567a190e33faa551f411caef444f2)이 총 40글자.

 40*4bit(16진수) = 160bit

160bit의 해시 함수로는 SHA-0과 SHA-1이 있다.



(https://www.hashkiller.co.uk/sha1-decrypter.aspx)


SHA-1로 두 번 디코딩을 하면, 정답인 것 같은 단어가 나온다.

Password칸에 답을 입력하면 끝!





저작자표시 비영리 변경금지

'문제풀이 > webhacking.kr' 카테고리의 다른 글

webhacking.kr - 5번  (0) 2017.08.01
webhacking.kr - 3번  (0) 2017.07.31
webhscking.kr - 2번  (0) 2017.07.31
webhacking.kr - 1번  (0) 2017.07.31
webhacking.kr - 회원가입  (0) 2017.07.31

+ Recent posts

티스토리툴바