01_html - 작심10시간! 나만의 웹사이트 기획하고 만들기
TRANSCRIPT
SULLIVAN PROJECT
목차
1. 우리가 할 것은?
2. HTML이란?
3. 태그란?
4. 만들면서 알아보자(+ 개발환경 세팅)
5. 개발을 할 때 알아야 하는 기본적인 것
6. 다음 차시 예고
궁금한 거 있으면 수업 중간이라도 바로 질문해주세요
:)
HTML CSS JAVASCRIPT
Front-end
back-end
HTML
CSS
JS
JS
HTML
HTML
X
HyperText Markup Language
뼈대 잡는 놈
< > … </ >HTML은 태그(TAG)라고 하는 걸로 이루어져있어요
<tag attribute=“”> 내용
</tag>
태그는 이렇게 사용해요
<tag attribute=“”>
닫는 태그가 필요없는 경우도 있어요 (ex - img, meta, br, …)
Word = Code
단어 그 자체가 코드의 기능을 나타낸다고 볼 수 있어요 (초등학교 영어 단어 수준정도?)
본격적으로 시작하기에 앞서
개발환경을 세팅합시다
Sublime Text 3
http://www.sublimetext.com(2버전이 아닌 3 beta를 받는다.)
프로그래머들의 관습 중 하나로, 새로운 어를 배울 때
가장 처음 하는 것은 무엇일까요?
QUIZ!!
Hello, World!
<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>
<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>
DOCTYPE
HTML5(가장 최신버전)임을 명시하는 코드로 첫 줄에 입력한다.
<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>
html
전체 코드를 감싸주는 태그
<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>
headhtml 코드에 제목, 인코딩, 스타일시트, 스크립트 등의 기본적인 정보를 입력한다.
<!DOCTYPE html> <html> <head> <title>제목</title> <meta charset=“utf-8”> </head> <body> <p>Hello, World!</p> <p>헬로, 워얼드!</p> </body> </html>
body
다양한 태그를 사용하여 뷰를 나타내는 공간이다.
이제 더 다양한 태그들을 알아보자
Semantic Tag
출처 - team air 2기 교육자료
출처 - team air 2기 교육자료
div 태그 - 래 레이어 개 으로 만들어짐. 그러나 실제로는 마땅한 Semantic 태그가 없을 때,
그 대용으로 쓰는 경우가 대부분임.
div 1
div 2
<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=“이미지 주소”>
직접 해보자
출처 - team air 2기 교육자료
개발을 할 때 알아야 하는 기본적인 것
0. 영어! 영어! 영어!
1. 네이버보다는 구글! (+한글보다는 영어!)
2. 모를 때는 先 後 질문
3. Stack Overflow는 모든 걸 알고계신대
http://opentutorials.org
4. 생활코딩
https://facebook.com/groups/codingeverybody
NEXT?
HTML CSS JAVASCRIPT
HTML CSS JAVASCRIPT
CSS