HTML, CSS, JavaScript =>  웹브라우저 또는 클라이언트에서 동작하는 언어.

웹 브라우저에서 a.php란 파일을 웹 서버로 보낸다.

그러면 php라는 단어를 보고 웹서버 자체가 할 수 없는 일이라고 보고 담당자인 PHP 엔진을 부른다. 

<?php
  데이터 베이스의
  topic에서 수업 제목들을 가져온다.
 ?>

php 문법에 따라서 해석한다. 


서버 쪽에서 동작하는 흐름 


PHP 설정

bitnami -> php -> php.ini 실행 (메모장 또는 Atom)

Ctrl + F 로 display_errors 를 찾는다.

display_errors = Off 를 On으로 바꾼다. 

(Off로 되어있는 이유 = > error 메세지를 공격자가 보면 해킹하는데 유용한 정보를 주게됨)


다음 opcach을 검색해서 opcache.enable = 1인 것을 0으로 바꿔준다.

=> 수정된 내용을 바로바로 최신화해준다. 


manager-windows.exe 실행 => Manage Servers에서 Restart 

=> 재실행해야 변경한 환경설정이 적용된다. 



JavaScript와 PHP

JavaScript는 같은 일을 웹 브라우저에서

PHP는 같은 일을 웹 서버에서

 


HTML, CSS 정적인 언어

JavaScript, PHP 동적인 언어


JavaScript로 할 수 있는 일

 


이렇게 바꿀 수 있다.


PHP로 할 수 있는 일


본래 HTML에 있는 CSS를 하나로 묶어서 사용했다. 

여기서 만족할 수 있을까?

만약 CSS 코드를 바꾸는 것이 아니라 ol로 되어있는 순서가 있는 리스트들을 

순서가 없는 ul로 바꿔달라고 했다면 어떻게 해야 할까

==> 공존하고 있는 HTML과 정보를 분리한다. 

하나의 HTML로 여러개의 정보를 표현할 수 있게 하는 것 => PHP













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

'웹 프로그래밍' 카테고리의 다른 글

데이터타입과 연산자  (0) 2017.12.18
웹 페이지에 코드 삽입하기  (0) 2017.12.18
CSS 실습2  (0) 2017.12.17
CSS 실습1  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 실습2

다른 페이지의 레이아웃도 이전시간에 했던 것과 같은 양식으로 수정하기


기본 => style 태그안에 있는 내용을 복사 붙여넣기 하는 것으로 시작.


실습 1. body 안에있는 h2를 50px로 다 키우고 싶다.

h2{
  font-size:50px;
}

작성하고 다 복사 붙여넣기를 해야한다. ==> page수가 엄청 많을 때에는 문제가 된다. 

방법 => CSS를 완전히 HTML로부터 분리한다. 

htdocs 안에 style.css 라는 파일을 만든다. 확장자 명이 css라는 것에 유의한다. 

본래 style 태그 안에 있던 내용을 cut 해서 style.css 안에 paste 

cut 한 페이지로 가서 style 태그를 지우고

link라고 치고 tab 키를 누른다.

href 뒷 부분에 http://localhost/style.css 라고 입력하고 저장을 한다.

type="text/css" 로 지정한다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
    <link rel="stylesheet" type="text/css" href="http://localhost/style.css">;
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
    <article>
       <h2>JavaScript란?</h2>
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
    </article>
  </body>
</html>


HTML이 link를 만나면 뒤에 있는 내용을 보고 외부에 있는 것을 읽어오려고 한다는 것으로 파악한다. 




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

'웹 프로그래밍' 카테고리의 다른 글

웹 페이지에 코드 삽입하기  (0) 2017.12.18
PHP &amp; JavaScript  (0) 2017.12.18
CSS 실습1  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 실습1

- 최종적으로 만들 홈페이지 


실습하기전에 이전에 만들었던 소스 가져오기.

 

이 소스코드


실습 1. 맨 위 그림에서 빨간색 네모부분으로 바꾸기

html에서 header 부분이다.

border을 사용하면 되는데 4면이 다 필요한 것이 아니라 하단의 border만 필요하므로

border-bottom 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
    <style>
      header {
        border-bottom:1px solid gray;
      }
    </style>
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
  </body>
</html>


실습 2. 제목과 border 사이가 너무 가까워서 좀 떨어뜨리고 싶다.

padding 사용

padding:20px; 추가.

header {
        border-bottom:1px solid gray;
        padding:20px;
      }


실습 3. 위의 그림에서 왼쪽 아래부분 만들기

본래 코드에서 nav에 해당되는 부분

앞에서 배운 float를 사용하고 left를 사용하면 된다.

nav{
        border-right:1px solid gray;
      }

이렇게만 하면 

맨 위의 그림과 다르게 화면 맨 끝에 테두리가 생기게 됨 : right 로 하면 화면 끝에 생긴다. 

수정하기 위해 필요한 것 : width

이렇게 하면 화면 끝이 아닌 설정한 width 뒤에 선이 생기게 된다. 

nav{
        border-right:1px solid gray;
        width:200px;
      }


실습 4. 맨 위 그림처럼 아래의 설명 부분이 오른쪽으로 오게 하기.

먼저 설명이 있는 html 파일. 예를 들어 이전에 만들었던 page_html에서 위에서 설명한 만큼 수정한다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
    <style>
      header {
        border-bottom:1px gray solid;
        padding:20px;
      }
      nav {
        border-right:1px gray solid;
        width:200px;
        float:left;
      }
    </style>
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
    <article>
       <h2>JavaScript란?</h2>
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
    </article>
  </body>
</html>

여기서 아래로 내려간 글자를 오른쪽으로 옮기기 위해 float 추가

nav {
        border-right:1px gray solid;
        width:200px;
        float:left;
      }

이렇게 하면 li의 height를 초과하는 부분은 왼쪽 끝부터 글자가 시작되어서 보기가 안좋다. 

1번 방법 이를 위해 nav의 height를 늘려주자.


nav {
        border-right:1px gray solid;
        width:200px;
        height:600px;
        float:left;
      }

2번 방법 아래 내려가는 문자들을 float로 올려주자

article {
        float:left;
      }


글자가 적절한 길이이면 자동으로 올라간다. 


실습 5. article 영역에 적절한 여백 주기. 


너무 붙어있어서 보기가 안좋다. 

padding 사용

article {
        float:left;
        padding:20px;
      }

  • tip : Ctrl + Space ==> 추천기능


실습 6. 앞의 숫자가 마음에 들지 않는다.

소속된 곳에서 list-style:none 삽입

nav ol {
        list-style: none;
      }



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

'웹 프로그래밍' 카테고리의 다른 글

PHP &amp; JavaScript  (0) 2017.12.18
CSS 실습2  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 이론2  (0) 2017.12.16

+ Recent posts

티스토리툴바