[나만의블로그개발하기] 01 HTML 기초

HTML기초
나만의블로그개발해보기
01

쓰기만했지
어떻게만드는지모르는당신!
본격입장바꿔생각해보기프로젝트

쓸때는편해도만들땐어렵단다 주변에서찾는HTML 우리가쓸HTML 알아보자 조심하세요
웹이란?
너가알고있는그것입니다

웹사이트
HTTP프로토콜을사용,URL에서받아오는HTML로써진문서

HTTP프로토콜
URL= 주소

Front-end
우리가실제로보는부분들
Back-end
보이지는않지만서비스가
돌아가는데필요한부분들

HYPERTEXTMARKUPLANGUAGE

HYPERTEXTMARKUPLANGUAGE뼈대잡는녀석

태그라는박스로감싸고쌓으면됩니다 지토랑배운쉬운단어들을기억해보세요

HOW TO [?]
> USE
> PLAY
> MAKE

<tag>
태그로감싸고
웬만하면다시닫고
</tag>

<tagattribute=“”></tag>
각각의태그마다속성을지정가능함
꾸밀것들,속성,이름등

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset=“UTF-8”>
</head>
<body>
Hello World!
</body>
</html>

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>
<!DOCTYPE html>
독타입Doctype
문서타입을나타냄

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>
<head>태그
머리에는중요한정보들이들어가있음
<title>-문서의제목
<meta>-이문서에대한세세한설명
<link>-주로CSS문서불러올때
<script>-주로Javascript문서불러올때
<head>
</head>

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>
<body>태그
페이지의구조,글씨,이미지등
실질적인내용을이루는부분
<body>
Hello World!
</body>

SublimeText3
구글에검색해서설치해주세요!

HTML도언어입니다: 대표적으로안먹는키들
왜키보드가있는데입력이안되니ㅠㅠ

HTML도언어입니다: 대표적으로안먹는키들
왜키보드가있는데입력이안되니ㅠㅠ
< > 
 
&

HTML만짰더니예쁘지가않다

그렇다고 너가 편하게 짜라는 법은 없죠

CASCADINGSTYLESHEETS꾸며주는놈

주로이런걸사용합니다 쪼금어↗려워↘요
CSS에대하여 어떻게쓸까 테크닉+a 노오오오력하세요
이름을붙일수있어요

꾸밀녀석 {
속성: 값;
}

나 동생
아빠 삼촌고모큰아빠 작은아빠
할머니 할아버지

나 동생
아빠 삼촌고모큰아빠 작은아빠
할머니 할아버지
#id
나보다위
.class
엄마아빠의아들
할머니할아버지의손자

CSS실력을한단계높여주는
알파테크닉

padding&margin
padding
대상안의부피를크게만듬
margin
주변으로부터밀어내서공간을만듬

absolute
fixedabsolute
position

inline
같은녀석들로생각하고같은줄에
block
다른줄에
inline-block
같은줄에놓되,다른녀석으로생각
display

방향관련해서입력할때에는
시계방향으로
위/오른쪽/아래/왼쪽

백견이불여일코딩
백번보는것이코딩한번하는것보다못하다

감사합니다!
서버그리고데이터베이스
수업때만나요:)

[나만의블로그개발하기] 01 HTML 기초

Recommended

Recommended

More Related Content

Featured

Featured (20)

[나만의블로그개발하기] 01 HTML 기초