웹보안_4. 리눅스를 이용한 HTML과 간단한Javascript

리눅스를 이용한 HTML

윈도우에서 만들어 보았던 HTML파일을 웹브라우저에 나타내듯이 리눅스에서 작성한 html파일을 웹브라우저에 나타내어보자.

 

 

먼저 yum list installed httpd를 이용해 아파치가 설치되었는지 확인해본다.

httpd.i686으로 설치가 되어있다면 service httpd start를 이용해 아파치 서버를 시작시킨다. netstat -ant를 이용해 포트번호가 80번이 맞는지 확인한다.

아파치 서버가 제대로 동작하는지 확인하려면 나의 ip를 웹브라우저에 입력한다. 나의 ip는 ifconfig명령어를 통해서 알 수 있다.

 

 

 

해당아이피를 웹브라우저에 입력했을때 위의 화면의 창이뜬다면 아파치 서버가 제대로 동작하는 것이다.

 

다음으로 cat /etc/passwd를 이용해 아파치 사용자의 기본 홈디렉터리를 확인해본다.

 

 

기본적으로 아파치의 문서는 /var/www/html 홈디렉터리로 설정되어있다.

 

vi /etc/httpd/conf/httpd.conf 파일에 들어가서 확인해본다.

 

 

url입력에 100.100.100.133 내ip를 입력한 것은 아파치의 홈디렉터리에 접속하는 것이다. ( /var/www/html )

 

 

 

웹브라우저로 파일을 보려면 해당서버에 있는 (html 안에있는 파일) 파일을 맨 뒤에 입력하면 된다. ( 100.100.100.133/파일명 )

 

html안에 index.html이라고 만들면 해당아이피 100.100.100.133으로 들어갔을때 index.html파일의 내용이 보인다. index.html은 기본값으로 설정되있다. 다른파일을 보려면 100.100.100.133/파일명 으로 입력해야한다.

 

 

 

이제 윈도우에서 했던방식대로 index.html파일안에 HTML내용을 작성해보자. VMWare에서는 한글이 입력이 안되서 Xshell5를 설치후 이용해 한글을 사용하면된다.

 

 

윈도우에서 css파일을 따로 생성한 것 처럼 style.css라는 파일에 css코드를 입력한뒤 저장한다.

 

 

이제 100.100.100.133 내 ip를 입력하면 index.html에 작성한 html내용이 웹브라우저에 나타나는 것을 확인할 수 있다.

 

 

다음거를 해보기전에 html위치에 sample폴더를 만들어서 sample안에서 실습해보자.

 

 

<javascript>

- javascript는 객체를 제어하는 기술, 클라이언트 측 언어이고 소스코드를 볼 수 있으며 웹브라우저에서 실행된다.

- javascript에서 기본구조는 <script> </script> 안에 내용을 작성하면된다.

- javascript에서 출력해주는 alert(), console.log(), document.write() 이 세가지에 대해서 알아보도록 하자.

 

1. alert

먼저 첫번째로 alert()는 아래와같다. alert()를 확인해보기위해 chrome창을 띄운뒤 F12를 누르면 아래와같은 화면이 나타나는데 console()에서 alert('Hello, Javascript')를 입력하고 엔터를쳐보자.

 

 

엔터를치면 Hell, Javascript라는 알림창이 하나 나타날것이다. console창에서 간단히 확인해 보았다면 리눅스를 통해서도 아래와같이 작성해보자.

 

sample폴더안에 javascript.html파일안에 해당내용을 작성한다. javascript의 기본구조인 <script> </script> 안에 alert('Hello, Javascript')를 작성하고 저장한다.

 

이제 웹브라우저에 내ip/sample/javascript.html를 입력하면 알림창이 뜨는것을 확인할 수있다.

 

 

2. document.write

두번째로는 document.write()를 알아보자. document.write('Hello, Javascript')는 해당내용을 알림창이 아니라 웹브라우저에 나타낼 수 있다.

 

 

 

3. console.log

세번째로 console.log()는 console에 Hello, Javascript를 나타낸다. 보통 디버그 메시지를 화면에 안보이도록 콘솔창에 출력시킨다. 자바스크립트에 에러가 발생하면 콘솔쪽에 보인다. 콘솔을 보고 잘못된 부분을 찾을 수 있다.

 

 

 

 

추가적으로 <script> </script>안에 한줄에 한개의 문장이있으면 ;(세미콜론)을 사용하지 않아도 되지만 아래와같이 한줄에 2개의 문장이 있다면 ;(세미콜론)을 사용하여 2개의 문장다 실행되도록 해야한다.

 

 

4. prompt

다음으로 javascript에서 입력을해주는 prompt(), confirm() 두가지에 대해서 알아보도록 하자.

 

먼저 prompt()의 사용법은 아래와같다.

 

만약 홍길동이라는 입력문구를 원하지않는다면 아래와같이 하면된다.

 

5. confirm

두번째로는 confirm()이 있다. 아래를 통해 알아보자.

 

확인을 누르게되면 true값이 취소를 누르게되면 false값이 적용된다.

 

다음으로 javascript의 변수에 대해 알아보자.

 

 

변수선언시 다른 언어와는 다르게 자료형을 선언하지 않아도된다. 위와같이 선언을 하지않거나 대체적으로는 var을 사용한다.

 

 

변수를 이용해 confrim의 값을 document.write로 출력해보자

 

 

변수 ret에 입력받은 true 또는 false를 document.write를 이용해 웹브라우저에 표시할 수있다.

 

 

 

확인하면 true , 취소하면 false값이 저장된다.

 

마찬가지로 prompt에서도 변수를 prompt로 입력받는 값으로 설정할 수 있다.