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

목차
1. 우리가 할 것은?
2. HTML이란?
3. 태그란?
4. 만들면서 알아보자(+ 개발환경 세팅)
5. 개발을 할 때 알아야 하는 기본적인 것
6. 다음 차시 예고

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

HTML CSS JAVASCRIPT
Front-end
back-end

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

<tag attribute=“”>
내용
</tag>
태그는 이렇게 사용해요

<tag attribute=“”>
닫는 태그가 필요없는 경우도 있어요
(ex - img, meta, br, …)

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

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

개발환경을 세팅합시다

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

프로그래머들의 관습 중 하나로,
새로운 어를 배울 때
가장 처음 하는 것은 무엇일까요?
QUIZ!!

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
DOCTYPE
HTML5(가장 최신버전)임을 명시하는 코드로
첫 줄에 입력한다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
html
전체 코드를 감싸주는 태그

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
head
html 코드에
제목, 인코딩, 스타일시트, 스크립트 등의
기본적인 정보를 입력한다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
body
다양한 태그를 사용하여
뷰를 나타내는 공간이다.

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

출처 - team air 2기 교육자료

div 태그 - 래 레이어 개 으로 만들어짐.
그러나 실제로는 마땅한 Semantic 태그가 없을 때,
그 대용으로 쓰는 경우가 대부분임.
div 1
div 2

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

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

2. 모를 때는 先後 질문

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

http://opentutorials.org
4. 생활코딩
https://facebook.com/groups/codingeverybody

https://www.codecademy.com
5. 혼자 더 공부하고 싶을 땐 codecademy!

CSS의 위대함을 알아보자
<a href=“http://www.naver.com”>네이버로</a>

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

Recommended