웹 프로그래밍 상상튜터링 프로그램 1회차

계획

1차

8/25

(7~9시)

Web Programming, HTML

웹 프로그래밍 과목에 대해서 기본적인 이해와 전반적인 소개를 한다.

전체적인 흐름 알려주고 날짜별 계획을 말해줌으로써 큰 틀을 숙지한다.

HTML의 이해와 기본 문법에 대해서 공부를 한다.

HTML의 각종 태그들을 이용해서 간단한 홈페이지 만들기

여러 태그들을 사용해보고 태그들에 대한 이해를 한다.

Form과 Table을 사용해보고 전반적인 이해를 한다.

2차

9/1

(7~9시)

CSS

CSS에 대한 기본적인 이해와 기본 문법에 대해서 공부를 한다.

HTML과 CSS를 이용해서 홈페이지를 만드는 실습을 해본다.

HTML과 CSS를 이용한 간단한 홈페이지 만들기

스타일링을 적용할 수 있는 CSS를 이용해서 홈페이지를 만들어본다.

id와 class에 대한 이해를 돕고 차이점에 대해서도 이해를 한다.

3차

9/8

(7~9시)

Javascript

Javascript에 대한 기본적인 이해와 기본적인 문법에 대해서 공부를 한다.

HTML DOM에 대한 이해와 Javascript를 이용해서 접근하는 법에 대해서 공부를 한다.

Javascript와 HTML, CSS를 이용해서 간단한 홈페이지를 만드는 실습을 해본다.

Javascript를 이용해서 HTML DOM을 생성 및 삭제 및 조작을 해본다.

Form의 제출 버튼을 클릭했을 때 리스트 추가 및 삭제 기능을 구현해본다.

4차

9/15

(7~9시)

-Javascript 심화

-Javascript의 라이브러리인 JQuery에 대한 기본적인 이해와 문법에 대해서 공부를 한다.

-API에 대한 기본적인 이해와 종류에 대해서 공부를 한다.

JQuery를 이용해서 HTML을 조작하는 간단한 홈페이지를 만드는 실습을 해본다.

Javascript를 사용해서 만들었던 실습들을 JQuery로 변경해보는 실습을 한다.

API를 직접 등록하고 KEY를 받아와서 google의 API를 직접 사용해보는 실습을 한다.

5차

9/22

(7~9시)

- PHP

서버에 대한 이해와 PHP의 기본적인 이해와 문법에 대해서 공부를한다.

GET, POST에 대한 기본적인 이해와 통신 방법에 대해서 공부를 한다.

서버 연동을 하는 실습을 해본다.

Apache 서버를 설치하고 기본 설정을 한다.

서버에 데이터를 요청 및 반환하는 실습을 진행한다.

6차

10/6

(7~9시)

PHP 심화

파일 입출력에 대한 전반적인 이해를 한다.

세션과 쿠키에 대해서 공부를 한다.

AJAX 통신에 대해서 공부를 하고 javascript와 연동을 하는 실습을 한다.

서버를 이용해서 각종 실습을 해본다.

AJAX 통신을 적용해서 로그인 기능을 구현해본다.

텍스트 파일을 저장하고 불러오는 기능을 구현해본다.

7차

10/13

(7~9시)

Homework 리뷰

진행중인 Homework에 대한 진행도를 파악하고 어떤 구성으로 나아가야 할지 어ᄄᅠᇂ게 진행해야 할지 자세히 알려주고 리뷰한다.

현재 진행중인 Homework에 대한 진행도를 파악하고 어려운 부분과 코드에 대한 리뷰를 함으로써 조금 더 깔끔하고 쉽게 해결할 수 있도록 한다.

8차

10/20

(7~9시)

중간고사 대비

HTML, CSS, Javascript, JQuery, PHP의 문법에 대한 숙지, 복습을 함으로써 이론 시험에 대비한다.

작년 혹은 제작년의 중간고사 실습 문제를 풀어봄으로써 중간고사 실습 시험에 대비한다.

중간고사 이론,실습문제 풀어보기

이론문제를 보고 헷갈리는 부분과 나올 것 같은 예상문제를 품으로써 중간고사 이론시험을 대비한다.

작년 실습문제를 보고 어떤 유형의 문제가 나오고 어ᄄᅠᇂ게 해결해야 하는지에 대한 설명과 실습을 함으로써 중간고사 실습시험을 대비한다.

웹 프로그래밍

말 그대로 웹 사이트를 만드는 프로그래밍으로써, 관련 언어는

HTML, CSS, Javascript, PHP.. 등등 다양하다.

HTML

하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지를 위한 지배적인 마크업 언어다.

<tag>보이는 내용</tag>

<tag attribute1="value1" attribute2="value2">보이는 내용</tag>

CSS

CSS는 Cascading Style Sheets의 약자입니다.

CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다.

HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다.

오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다.

CSS를 사용하는 이유

HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 합니다.

이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어집니다.

이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 바로 CSS입니다.

CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있습니다.

또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워집니다.

이러한 외부 스타일 시트는 보통 확장자를 .css 파일로 저장합니다.

<style>

    body {

        background-color: silver;

    }

    h1 {

        font-family: "Times New Roman", Georgia, Serif;

        text-align: center;

    }

    p {

        color: #663399;

        text-decoration:underline;

        font-weight: bold;

    }

</style>

Javascript

JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다.

그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상된다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript Output</title>
</head>

<body>

	<h1>Window 객체의 alert() 메소드</h1>
	<button onclick="alertDialogBox()">alert 대화 상자</button>
		
	<script>
		function alertDialogBox() {
			alert("확인을 누를 때까지 다른 작업을 할 수 없어요!");
		}
	</script>
	
</body>

</html>

http://tcpschool.com/examples/tryit/tryhtml.php?filename=js_intro_output_01

PHP

PHP는 서버 측에서 실행되는 프로그래밍 언어로 HTML을 프로그래밍적으로 생성해주고, 데이터베이스와 상호작용 하면서 데이터를 저장하고, 표현합니다. PHP는 웹을 위해서 만들어졌고, 지금도 웹을 위해서 발전하고 있는 웹을 위한 언어입니다. 웹프로그래밍을 위한 높은 생산성을 제공하는 언어입니다. 특히 서버에 직접 설치해서 운영할 수 있는 설치형 웹에플리케이션(제로보드,텍스트큐브,워드프래스,PHPBB등)의 과반이 PHP로 만들어졌습니다. 따라서 PHP를 배워두시면 이러한 솔루션들에 대한 운영, 문제해결 능력이 향상됩니다. 무엇보다 쉽습니다.

주로 HTML 코드를 프로그래밍적으로 생성
서버쪽에서 실행 되는 프로그래밍 언어
Personal Home Page Tools 의 약자에서 PHP:Hypertext Preprocessor 로 의미가 변경 되었다.

<!DOCTYPE html>
<html>
<body>

<h1>My first PHP page</h1>

<?php
echo "Hello World!";
?> 

</body>
</html>

https://www.w3schools.com/php/phptryit.asp?filename=tryphp_syntax

IDE 설치 (Visual Studio Code)

https://code.visualstudio.com/download

간단 실습

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
    <title>JavaScript Output</title>
    <style>
        table {
          width: 100%;
          border: 1px solid #444444;
          border-collapse: collapse;
        }
        th, td {
          border: 1px solid #444444;
        }
      </style>
</head>

<body>

    <h1>현수의 페이지</h1>

    안녕하세요 저는 <strong>정현수</strong>에요.

    줄을 띄우고 싶으면 <br /> 
    br 태그를 이용해 띄우세요!

    <br />
    <a href="https://junghyeonsu.tistory.com/67" target="_blank" >제 블로그 입니다.</a>

    <br /><br />
    <table>
        <thead>
            <tr>
                <td>
                    요기는 thead 입니다.
                </td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    요기는 tbody 입니다.
                </td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>
                    요기는 tfoot 입니다.
                </td>
            </tr>
        </tfoot>
    </table>

</body>

</html>

'대내 활동 > 웹프로그래밍 상상튜터링' 카테고리의 다른 글

웹 프로그래밍 멘토멘티 프로그램 5회차 (0)	2020.09.20
웹 프로그래밍 멘토멘티 프로그램 4회차 (0)	2020.09.12
웹 프로그래밍 멘토멘티 프로그램 3회차 (2)	2020.09.05
웹 프로그래밍 멘토멘티 프로그램 2회차 (2)	2020.08.30

계획

웹 프로그래밍

HTML

CSS

CSS를 사용하는 이유

Javascript

PHP

IDE 설치 (Visual Studio Code)

간단 실습

'대내 활동 > 웹프로그래밍 상상튜터링' 카테고리의 다른 글

티스토리툴바