생활코딩의 강좌를 들으며 하는 공부 기록

생활코딩 감사합니다.

https://opentutorials.org/course/1

 

WebApp 학습계획

  1. HTML
  2. CSS
  3. JavaScript와 PHP 이론
  4. DataBase

html 코드가 해석될 때 script tag가 나오면 javascript 코드를 해석한다.

php 코드를 만나면 웹서버와 데이터베이스가 연결되어 html 파일을 완성한다.

 

JavaScript와 PHP

  • 둘 다 동적인 언어이다.
  • JavaScript는 스크립트가 들어있는 웹 문서를 읽는 브라우저에서 실행된다.
  • PHP는 서버사이드 언어이므로 서버에서 실행되고 브라우저에는 그 결과만을 보여준다. 
  • 따라서 브라우저에서는 PHP의 소스 보기를 해도 PHP 소스는 볼 수 없고, 마치 HTML문서처럼 보인다.

PHP는 <?PHP?> 태그로 감싸지고 JS는 <script></script> 태그로 감싸진다.

PHP echo는 PHP 인터프리터에 의해 해석된다. 

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

 

문자와 숫자를 표기하는 방법

  • 숫자를 표기할 때에는 따옴표가 없어야 한다.
  • 문자를 표기할 때에는 따옴표가 있어야 한다.
  • "10"+"10"
    • PHP : 20 -> "10"."10"을 쓰면 1010이 나온다.
    • JS : 1010

변수를 작성하는 방법

  • PHP : $name = "suintodev";
  • JS : name = "suintodev";
  • 변할 수 있는 부분과 없는 부분을 구분해 변수를 사용한다.

JS로 로그인 기능 구현

prompt를 이용해 비밀번호를 사용한다.

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <script>
    password = prompt("비밀번호");
    if(password == 1111) {
      document.write("안녕하세요. 주인님");
    } else {
      document.write("뉘신지?");
    }
  </script>
</body>
</html>

 

PHP로 로그인 기능 구현

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <?php
    $password = $_GET["password"];
    if($password == "1111"){
        echo "주인님 환영합니다";
    } else {
        echo "뉘신지?";
    }
   ?>
</body>
</html>

 

배열과 반복문 예제

  • PHP : $list = array("1","2","3");
  • JS : list = new Array("1","2","3");
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <h1>JavaScript</h1>
  <ul>
  <script>
    list = new Array("최진혁", "최유빈", "한이람", "한이은", "이고잉");
    i = 0;
    while(i < list.length){
      document.write("<li>"+list[i]+"</li>");
      i = i + 1;
    }
  </script>
  </ul>
 
  <h1>php</h1>
  <ul>
  <?php
    $list = array("최진혁", "최유빈", "한이람", "한이은");
    $i = 0;
    while($i < count($list)){
      echo "<li>".$list[$i]."</li>";
      $i = $i + 1;
    }
  ?>
  </ul>
</body>
</html>

 

함수 예제

  •  PHP : function (){contents)
  • JS : function a(){contents}
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <h1>JavaScript</h1>
  <script>
    function a(input){
      return input+1;
    }
    document.write(a(6));
  </script>
 
  <h1>php</h1>
  <?php
    function a($input){
      return $input+1;
    }
    echo a(6);
  ?>
</body>
</html>

 

'Web Application > Frontend' 카테고리의 다른 글

[ WebApp] 웹앱 만들기 기본편 - CSS  (0) 2020.07.22
[ WebApp] 웹앱 만들기 기본편 - HTML  (0) 2020.07.22

생활코딩의 강좌를 들으며 하는 공부 기록

생활코딩 감사합니다.

https://opentutorials.org/course/1

 

WebApp 학습계획

  1. HTML
  2. CSS
  3. JavaScript와 PHP 이론
  4. DataBase

기본 내용

  • CSS는 Cascading Style Sheets의 줄임말이다.
  • 정보를 담는 것이 주 목적인 HTML과 달리 CSS는 정보를 꾸미는 역할을 한다.

 

태그 선택자를 사용해 해당 태그의 색깔, 폰트크기, 밑줄 여부를 바꾸는 법

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
   <style>
     h1,h2 {
       color:red;
       font-size:10px
    }
    h2{
      text-decoration:underline;
    }
    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>

 

태그의 id를 이용해 해당 id에 여러 모양의 박스를 만드는 법

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
   <style>
     #selected {
       border:red 1px solid;
       padding:30px;
       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>

 

float : right, float : left 등으로 설정해주면 이미지의 위치를 정렬해 layout을 정할 수 있다.

border, width, height, nav ol, padding으로 웹페이지를 꾸미는 법

<!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="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>
    heyheyheyheyheyheyhey~~~~~
    </article>
</body>
</html>

 

HTML과 CSS를 분리하는 법

  1. style.css 파일을 만든다.
  2. 원본 html 파일에서 style tag 내부 코드를 style.css에 붙인다.
  3. 원본 html 파일의 style 내부에 <link rel="stylesheet" type="text/css" herf="http://localhost/style.css">를 작성한다.

CSS 코드를 별도의 파일로 분리했을 때의 장점

  • 이 방법을 사용하면 같은 디자인의 웹페이지 레이아웃을 한번에 바꿀 수 있다.
  • css가 각각 있을 때보다 빠르다.

생활코딩의 강좌를 들으며 하는 공부 기록

https://opentutorials.org/course/1

 

WebApp 학습계획

  1. HTML
  2. CSS
  3. JavaScript와 PHP 이론
  4. DataBase

기본 내용

  • Bitnami WAMP stack을 사용해 MYSQL Database, Apach Web Server를 제어하고 에러 로그를 확인할 수 있다.
  • 웹브라우저가 웹서버에게 페이지를 요청하면 HTML 파일을 보내주고, 이 내용이 웹브라우저에 보이는 방식으로 구동된다.
  • HTML은 HyperText Markup Language의 약자이고 hypertext는 문서와 문서가 linking 된 모양이라 할 수 있다. 웹은 이 링크로 구성된다. 

html의 골격

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

 

링크를 거는 법

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	안녕하세요. <a href="https://suintodev.tistory.com/" target="_blank">suintodev</a>입니다.
</body>
</html>

 

ordered list와 unordered list로 요소를 작성하는 법

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <title>내가 먹고 싶은 것</title>
</head>
<body>
	<ul>
	<li>연어덮밥</li>
	<li>연어롤</li>
	<li>연어초밥</li>
	</ul>
	<ol>
	<li>이베리코</li>
	<li>삼계탕</li>
	<li>먹고싶다</li>
	</ol>
	
</body>
</html>

 

의미론적인 웹 구조로 ordered list작성

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <title>내가 먹고 싶은 것</title>
</head>
<body>
	<header>
		<h1>중학교 3-1</h1>
	</header>
	<nav>
		<ol>
			<li>인수분해</li>
			<li>이차방정식</li>
			<li>이차함수</li>
		</ol>
	</nav>
	<article>
		<h2>인수분해란?</h2>
		<ol>
			<li>식의 공통부분, 즉 인수를 뽑아내는 것</li>
			<li>삼계탕</li>
			<li>먹고싶다</li>
		</ol>
	</article>
	
</body>
</html>

 

하나의 완결된 웹페이지를 만드는 방법

  1. 대문 페이지인 index.html를 <nav></nav>를 이용해 작성
  2. 아직은 만들지 않았지만 연결되는 페이지를 http://localhost/new_page.html 링크를 포함해 작성해준다.
  3. 각 html 페이지에 <article></article>을 이용해 내용을 작성한다.
  4. <h1></h1>에 <a href=""></a>를 이용해 index.html로 연결해준다.

 

 

 

+ Recent posts