Download - 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기
![Page 1: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/1.jpg)
SULLIVAN PROJECT
![Page 2: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/2.jpg)
목차
1. 우리가 할 것은?
2. HTML이란?
3. 태그란?
4. 만들면서 알아보자(+ 개발환경 세팅)
5. 개발을 할 때 알아야 하는 기본적인 것
6. 다음 차시 예고
![Page 3: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/3.jpg)
궁금한 거 있으면 수업 중간이라도 바로 질문해주세요
:)
![Page 4: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/4.jpg)
HTML CSS JAVASCRIPT
Front-end
back-end
![Page 5: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/5.jpg)
HTML
![Page 6: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/6.jpg)
CSS
![Page 7: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/7.jpg)
JS
![Page 8: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/8.jpg)
JS
![Page 9: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/9.jpg)
HTML
![Page 10: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/10.jpg)
HTML
![Page 11: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/11.jpg)
![Page 12: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/12.jpg)
X
![Page 13: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/13.jpg)
HyperText Markup Language
![Page 14: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/14.jpg)
뼈대 잡는 놈
![Page 15: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/15.jpg)
< > … </ >HTML은 태그(TAG)라고 하는 걸로 이루어져있어요
![Page 16: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/16.jpg)
<tag attribute=“”> 내용
</tag>
태그는 이렇게 사용해요
![Page 17: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/17.jpg)
<tag attribute=“”>
닫는 태그가 필요없는 경우도 있어요 (ex - img, meta, br, …)
![Page 18: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/18.jpg)
Word = Code
단어 그 자체가 코드의 기능을 나타낸다고 볼 수 있어요 (초등학교 영어 단어 수준정도?)
![Page 19: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/19.jpg)
본격적으로 시작하기에 앞서
![Page 20: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/20.jpg)
개발환경을 세팅합시다
![Page 21: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/21.jpg)
Sublime Text 3
![Page 23: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/23.jpg)
프로그래머들의 관습 중 하나로, 새로운 어를 배울 때
가장 처음 하는 것은 무엇일까요?
QUIZ!!
![Page 24: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/24.jpg)
Hello, World!
![Page 25: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/25.jpg)
<!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시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/26.jpg)
<!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시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/27.jpg)
<!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시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/28.jpg)
<!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시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/29.jpg)
<!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시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/30.jpg)
이제 더 다양한 태그들을 알아보자
![Page 31: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/31.jpg)
Semantic Tag
![Page 32: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/32.jpg)
출처 - team air 2기 교육자료
![Page 33: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/33.jpg)
출처 - team air 2기 교육자료
![Page 34: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/34.jpg)
div 태그 - 래 레이어 개 으로 만들어짐. 그러나 실제로는 마땅한 Semantic 태그가 없을 때,
그 대용으로 쓰는 경우가 대부분임.
div 1
div 2
![Page 35: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/35.jpg)
<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시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/36.jpg)
직접 해보자
![Page 37: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/37.jpg)
![Page 38: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/38.jpg)
출처 - team air 2기 교육자료
![Page 39: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/39.jpg)
개발을 할 때 알아야 하는 기본적인 것
![Page 40: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/40.jpg)
0. 영어! 영어! 영어!
![Page 41: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/41.jpg)
1. 네이버보다는 구글! (+한글보다는 영어!)
![Page 42: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/42.jpg)
2. 모를 때는 先 後 질문
![Page 43: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/43.jpg)
3. Stack Overflow는 모든 걸 알고계신대
![Page 44: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/44.jpg)
http://opentutorials.org
4. 생활코딩
https://facebook.com/groups/codingeverybody
![Page 46: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/46.jpg)
NEXT?
![Page 47: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/47.jpg)
HTML CSS JAVASCRIPT
![Page 48: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/48.jpg)
HTML CSS JAVASCRIPT
![Page 49: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/49.jpg)
CSS
![Page 51: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/51.jpg)
![Page 52: 01_HTML - 작심10시간! 나만의 웹사이트 기획하고 만들기](https://reader034.vdocuments.pub/reader034/viewer/2022052214/588ac6eb1a28ab371f8b77b3/html5/thumbnails/52.jpg)