52
SULLIVAN PROJECT

01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

  • Upload
    -

  • View
    435

  • Download
    15

Embed Size (px)

Citation preview

Page 1: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

SULLIVAN PROJECT

Page 2: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

목차

1. 우리가 할 것은?

2. HTML이란?

3. 태그란?

4. 만들면서 알아보자(+ 개발환경 세팅)

5. 개발을 할 때 알아야 하는 기본적인 것

6. 다음 차시 예고

Page 3: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

궁금한 거 있으면 수업 중간이라도 바로 질문해주세요

:)

Page 4: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

HTML CSS JAVASCRIPT

Front-end

back-end

Page 5: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

HTML

Page 6: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

CSS

Page 7: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

JS

Page 8: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

JS

Page 9: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

HTML

Page 10: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

HTML

Page 11: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기
Page 12: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

X

Page 13: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

HyperText Markup Language

Page 14: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

뼈대 잡는 놈

Page 15: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

< > … </ >HTML은 태그(TAG)라고 하는 걸로 이루어져있어요

Page 16: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

<tag attribute=“”> 내용

</tag>

태그는 이렇게 사용해요

Page 17: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

<tag attribute=“”>

닫는 태그가 필요없는 경우도 있어요 (ex - img, meta, br, …)

Page 18: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

Word = Code

단어 그 자체가 코드의 기능을 나타낸다고 볼 수 있어요 (초등학교 영어 단어 수준정도?)

Page 19: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

본격적으로 시작하기에 앞서

Page 20: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

개발환경을 세팅합시다

Page 21: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

Sublime Text 3

Page 22: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

http://www.sublimetext.com(2버전이 아닌 3 beta를 받는다.)

Page 23: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

프로그래머들의 관습 중 하나로, 새로운 어를 배울 때

가장 처음 하는 것은 무엇일까요?

QUIZ!!

Page 24: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

Hello, World!

Page 25: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>

Page 26: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>

DOCTYPE

HTML5(가장 최신버전)임을 명시하는 코드로 첫 줄에 입력한다.

Page 27: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>

html

전체 코드를 감싸주는 태그

Page 28: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>

headhtml 코드에 제목, 인코딩, 스타일시트, 스크립트 등의 기본적인 정보를 입력한다.

Page 29: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>

body

다양한 태그를 사용하여 뷰를 나타내는 공간이다.

Page 30: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

이제 더 다양한 태그들을 알아보자

Page 31: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

Semantic Tag

Page 32: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

출처 - team air 2기 교육자료

Page 33: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

출처 - team air 2기 교육자료

Page 34: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

div 태그 - 래 레이어 개 으로 만들어짐. 그러나 실제로는 마땅한 Semantic 태그가 없을 때,

그 대용으로 쓰는 경우가 대부분임.

div 1

div 2

Page 35: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

<a href=“주소”>누르면 주소로 이동</a>

<p>문단 구별을 위한 태그</p>

<ul> <li>목록 1</li> <li>목록 2</li> <li>목록 3</li> <li>목록 4</li> </ul>

<ol> <li>목록 1</li> <li>목록 2</li> <li>목록 3</li> <li>목록 4</li> </ol>

<h1>제목</h1> h1~h6까지 있는데, h1이 가장 크기가 크고 요하다는 뜻이다.

<img src=“이미지 주소”>

Page 36: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

직접 해보자

Page 37: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기
Page 38: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

출처 - team air 2기 교육자료

Page 39: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

개발을 할 때 알아야 하는 기본적인 것

Page 40: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

0. 영어! 영어! 영어!

Page 41: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

1. 네이버보다는 구글! (+한글보다는 영어!)

Page 42: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

2. 모를 때는 先 後 질문

Page 43: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

3. Stack Overflow는 모든 걸 알고계신대

Page 44: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

http://opentutorials.org

4. 생활코딩

https://facebook.com/groups/codingeverybody

Page 45: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

https://www.codecademy.com

5. 혼자 더 공부하고 싶을 땐 codecademy!

Page 46: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

NEXT?

Page 47: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

HTML CSS JAVASCRIPT

Page 48: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

HTML CSS JAVASCRIPT

Page 49: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

CSS

Page 50: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기

CSS의 위대함을 알아보자

<a href=“http://www.naver.com”>네이버로</a>

Page 51: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기
Page 52: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기