정쿠
full-stack developer 👩🏻💻
2학기 코딩 수업 👩🏻💻👨🏻💻
주제 : 웹 사이트를 만들어보자!
코딩은 뭐하는 걸까요?
프로그래밍은 왜 하는 걸까요?
프로그래밍(개발)
시간의 순서에 따라 일어나야 하는 일을
컴퓨터에게 알려주는 일
어떤 목적을 위해 컴퓨터에게
내리는 명령의 집합
[예시]
웹 화면을 그린다.
웹 화면의 위에는 제목을 넣고, 가운데에는 이미지를 보여준다.
버튼을 누르면 페이지를 이동한다
프로그래밍의 결과물 = 프로그램
프로그래밍의 결과물 = 프로그램
각 역할에 맞는 프로그래밍 언어
만들고 싶은 프로그램이 있다면,
그 프로그램을 만들 수 있는 언어를 알아야 합니다.
700개 이상의 언어 => 각각의 목적에 맞게 탄생
우리는 웹을 배울거에요
모든 IT 서비스의 기본은 Web
Web을 쓰지 않는 온라인 서비스는 거의 없어요.
Web을 이해하면
세상의 많은 것들을 이해할 수 있어요 😄
Q. Web과 Internet은 같은 걸까?
웹은 웹 브라우저에서 동작하는 프로그램
웹 개발 완성 => 웹 브라우저에서 의도한 대로 보인다
앱 개발 완성=> 모바일 폰에서 의도한 대로 보인다
데스크톱 게임 개발 완성
=> 데스크탑 자체 앱에서 의도한 대로 보인다
Web을 만들려면
하나의 웹이 만들어지려면
프론트엔드와 백엔드 개발이 필요
프론트엔드
- 사용자가 볼 수 있는 부분
- 디자인, 웹의 동작, 간단한 로직
백엔드
- 사용자에게 보이지 않는 부분
- 데이터 저장/가공, 복잡한 로직
웹 프론트엔드를 만드는 3가지 언어
HTML(Hyper Text Markup Language)
- 웹 설계하는
CSS (Cascading Style Sheet)
- 웹 예쁘게 꾸미는
Javascript
- 웹에 동작 추가하는
우리는 프론트엔드를 해봅시다!
(1) HTML
- 웹페이지를 만들기 위한 언어
- 웹브라우저가 이해하는 언어
- 웹페이지의 구조와 데이터를 만드는 역할
HTML 문법 : <태그>
HTML 구조
<html>
<head>
웹 정보
</head>
<body>
웹 브라우저에 보여질 컨텐츠가 위치
</body>
</html>
HTML 코딩 실습을 위한 준비
1. https://replit.com/ 사이트를 접속해주세요.
2. 회원 가입을 진행해주세요.
3. 로그인을 해주세요.
4. 프로젝트를 생성해주세요.
- HTML,CSS, JS 버튼 클릭
- 이름은 Day1
(실습) 자주쓰는 HTML 태그 실습
아래 태그들이
화면에 어떻게 보여지는지 확인해요
- 제목, 이미지, 링크, 버튼
<h1> 안녕 </h1>
<h2> 안녕 </h2>
<h3> 안녕 </h3>
<h4> 안녕 </h4>
<img src="https://bit.ly/3zM0RZV"/>
<a href="https://naver.com">네이버 링크</a>
<button onclick="alert('같이먹자')" >눌러봐</button>
(2) 꾸며주는 언어 CSS
- 웹 페이지를 보기 좋게 만들기 위한 언어
- 웹 브라우저가 이해하는 언어
- HTML 요소들을 꾸며주는 언어
CSS 사용법 & 문법
1) 어떤 HTML 요소(태그)를 꾸밀지 정한다
2) 어떻게 꾸밀지 정한다
3) HTML 요소에 CSS 문법을 적용한다
"웹 페이지 배경 색을 하늘색으로 칠하겠다"
body {
background-color : skyblue;
}
CSS 사용법 & 문법
1) 어떤 HTML 요소(태그)를 꾸밀지 정한다
2) 어떻게 꾸밀지 정한다
3) HTML 요소에 CSS 문법을 적용한다
"웹 페이지 배경 색을 하늘색으로 칠하겠다"
body {
background-color : skyblue;
}
(실습) 자주쓰는 CSS 속성 실습
1) HTML <header> 태그 안에
<style> </style> 요소를 만듭니다.
2) <style> 태그 안에 CSS 문법을 작성합니다.
body {
background-color: consilk;
font-size: 40px;
}
button {
background-color: deepskyblue;
color: white;
font-size: 30px;
padding: 10px;
border-radius: 5px;
}
웹 사이트 전체 꾸미기
버튼 꾸미기
(3) 인터렉션을 넣어주는 Javascript
- 웹 페이지에 변화를 주기 위한 언어
- 데이터를 바꿀 수 있다 (백엔드와 소통)
- 복잡한 애니메이션을 추가할 수 있다
- 알아야하는 개념이 많은 프로그래밍 언어
- 프론트엔드 개발자들이 많이 쓰는 언어
Javascript는 이렇게 생겼어요.
var input; if(input === undefined) { doThis(); } else { doThat(); }
var myArray = []; if (!myArray[0]) myFunction();
(실습) Javascript 맛보기
1) HTML <body> 태그 아래 쪽에
<script> </script> 요소를 만듭니다.
2) <script> 태그 안에 Javascript 문법을 작성합니다.
function showAlert ( ) {
alert('안녕 친구들!');
}
function goNaver ( ) {
document.location.href
="https://naver.com";
}
<button
onclick="showAlert()">알럿</button>
<button
onclick="goNaver()">네이버이동</button>
javascript 문법
html로 동작이 있는 버튼 만들기
(숙제) 내가 코딩 천재라면?
나는 어떤 프로그램을 만들고 싶나요?
1. 프로그램 설명
2. 왜 필요한가요? or 왜 만들고 싶나요?
3. 사람들에게 어떤 이로움을 줄 수 있을까요?
고맙습니다 😊
다음 시간에 만나요 👋🏻
코딩 수업 Day1
By 정쿠
코딩 수업 Day1
생수의 강 코딩 수업 1일차
