안수찬 블로그

패스트트랙아시아 웹개발 1주차 강의자료

Introduction

안수찬 @dobestan

서울대학교에서 컴퓨터공학을 전공하고, 오랜 기간 서비스 기획 및 개발을 해 왔습니다. 이러한 전문성을 인정받아 미래부 소프트웨어 마에스트로에 선정된 바 있습니다. 현재는 모바일 방송국, 퍼스트캔버스에서 컨텐츠로 새로운 가치를 그리고 있습니다. 나는 안수찬이다. 그러므로 나는 할 수 있다. me@ansuchan.com


패스트트랙아시아 웹개발 1주차 강의자료

Posted by 안수찬 @dobestan on .
Featured

패스트트랙아시아 웹개발 1주차 강의자료

Posted by 안수찬 @dobestan on .

이 게시물은 소스코드와 그 결과를 보여주기 위해서 jsfiddle에서 제공하는 http iframe을 사용하고 있습니다. 웹 브라우져 주소표시줄 우측의 Load Unsafe Script 버튼을 누르셔야만 확인하실 수 있습니다. 이 부분에 대한 자세한 내용은 HTTPS 페이지에서는 HTTP IFRAME을 사용할 수 없습니다. 에서 확인하실 수 있습니다.

본 강의자료의 일부는 코드라이언에서 제공받아 제작되었습니다. 스터디원들에는 코드라이언 계정 발급해드렸습니다. 본 컨텐츠는 저작권법의 보호를 받는 바, 무단 전제, 복사, 배포 등을 금합니다.

학습목표

  • 웹 서비스의 동작 원리 이해하기 ( HTML / CSS / Javascript의 역할과 필요성 )
  • markdown 문법을 이용해서 쉽게 HTML 익히기
  • HTML / CSS 기본 학습하기

수업 내용

클라이언트와 서버는 무엇인가?

클라이언트와 서버는 둘 다 컴퓨터입니다. 우리가 노트북의 웹 브라우저(인터넷 익스플로러, 크롬, 사파리 등)나, 스마트폰의 웹 브라우저를 통해서 접속할 때, 인터넷에 접속하는 노트북과 스마트폰을 "클라이언트"라고 부릅니다. 반면에 우리가 접속하는 곳 (네이버, 페이스북), 즉 인터넷 상에서 웹 서비스를 제공하는 컴퓨터를 "서버"라고 말합니다.

클라이언트는 어떻게 서버에 접속할까? ( DNS의 이용 )

서버는 단 하나의 이름과 여러 개의 별명을 가진다. 이 이름을 우리는 "IP주소", 별명을 "도메인 네임"이라고 한다. 이 이름과 별명을 연결해주는 서버를 "DNS 서버"라고 부릅니다. 아래의 표는 DNS서버를 통해 변환된 서비스들의 IP주소와 도메인 네임이다. 실제로 IP주소로 접속해도 접속된다.

IP Domain Name
173.252.110.27 facebook.com
202.131.30.12 naver.com
17.172.224.47 apple.com

프론트 엔드 개발 ( Front-End Development )

프론트엔드란 우리 눈에 보이는, 즉 웹 페이지의 외관을 구성하는 모든 부분을 의미합니다. 모든 웹 사이트는 프론트 엔드 개발로 3개의 언어를 사용합니다.

  • HTML ( Hyper Text Markup Language ) : 화면 전체의 골격과 구성 요소들을 결정하는 언어
  • CSS ( Cascading Style Sheets ) : HTML로 구성된 화면 전체의 골격과 구성요소들의 구체적인 디자인과 모양을 결정하여 페이지를 전체적으로 꾸며주는 언어이다
  • javascript : HTML과 CSS로 작성된 정적인 웹 페이지를 동적으로 만들어주는 언어

그렇다면 CSS나 javascript가 없다면 웹 페이지가 어떻게 보일까요? 두 개의 사이트를 비교해보겠습니다.

백 엔드 개발 ( Back-End Development )

서버에서 클라이언트가 요청한 작업을 수행할 때, 클라이언트 측에서는 보이지 않는 부분, 즉 데이터베이스, 웹 서버, 네트워킹 등에 사용되는 기술이다. 우리는 백 엔드 프로그래밍 언어로 "Ruby"를, 루비로 쉽게 웹 개발을 할 수 있도록 만들어놓은 "Rails" 프레임워크를 사용할 것이다.

마크다운 언어를 이용해서 HTML 배우기

Dillinger.io에서 제공하는 Online Markdown Editor를 이용해서 HTML을 배워보겠습니다. 마크다운 문법은 https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet 에서 확인하실 수 있습니다.

HTML / CSS 배우기

추후에는 vi라는 에디터를 사용할 예정이지만 오늘은 JSFiddle에서 제공하는 웹 에디터를 사용하여 실습하겠습니다.

과제

안수찬 @dobestan

https://ansuchan.com/

서울대학교에서 컴퓨터공학을 전공하고, 오랜 기간 서비스 기획 및 개발을 해 왔습니다. 이러한 전문성을 인정받아 미래부 소프트웨어 마에스트로에 선정된 바 있습니다. 현재는 모바일 방송국, 퍼스트캔버스에서 컨텐츠로 새로운 가치를 그리고 있습니다. 나는 안수찬이다. 그러므로 나는 할 수 있다. me@ansuchan.com

View Comments...