문돌이가 가르치는 웹 프론트엔드 1차시

글로 시작해서
글로 끝나는
조선시대 선비들의
고전 시가

어차피 코딩하다보면
터득합니다.

비록 정석은 아니지만..

여러분께 웹개발의 즐거움을
가르쳐드리고 싶습니다.

EB13 조동현
“ 개발하는 문돌이 ”

“ 프론트엔드가 뭐지? ”

웹 브라우저에 보여지는 요소들
- 백엔드로 요청을 하는 요소-

“ 그렇다면 백엔드는 뭐지? ”

받아온 데이터를 처리하는 요소들
- 보이지 않음 -

어려운 용어들, 쉽게 비유를 하자면?
프론트엔드
- 음식점의 카운터-
백엔드
- 음식점의 주방-
주문(데이터) 전달
만든 음식(처리된 데이터)을 전달

HTML CSS JAVASCRIPT
웹 프론트엔드 개발자는?

ㄴㄹㅇㅎㅁㄴㄹㅇㅎㅁㄴㅇㅎ
</>
웹의 뼈 웹의 피부

http://goo.gl/gddY3J
http://goo.gl/WvWgM

<html>
<head> <meta charset="utf-8"> </head>
<style>
body
{
background-color:blue;
color:white;
font-size:50pt;
}
</style>
</head>
<body>
<center> MY FIRST HTML DOCUMENT</center>
</body>
</html>

호스트 : 자신의 아이디.dothome.co.kr
사용자명 : 자신의 아이디
비밀번호 : 자신의 비밀번호
포트 : 21

http://아이디.dothome.co.kr/first.html

BR태그 : 웹 페이지에서 한줄을 개행하는 태그
<html>
<head>
<meta charset="utf-8">
</head>
<body>
안녕하세요.<br>저는 ‘조 동현’<br>이라고 합니다.
</body>
</html>

BR태그 : 결과
안녕하세요.
저는 ‘조 동현’
이라고 합니다.

P태그 : 웹 페이지에서 문단을 만드는 태그
<p>안녕하세요.<br>저는 ‘조 동현’ 입니다.</p>
<p>저의 취미는 없습니다.</p>
<p>저의 특기는 없습니다.</p>
<p>제 미래도 없어보입니다.</p>

P태그 : 결과
안녕하세요.
저는 ‘조 동현’ 입니다.
저의 취미는 없습니다.
저의 특기는 없습니다.
제 미래도 없어보입니다.

h1~6태그 : 제목 태그
<h1>첫번째</h1>
<h2>두번째</h2>
<h3>세번째</h3>
<h4>네번째</h4>
<h5>다섯번째</h5>
<h6>여섯번째</h6>

h1~6태그 : 결과
첫번째
두번째
세번째
네번째
다섯번째
여섯번째

CENTER 태그 : 가운데 정렬
보통 문장
<br>
<center>가운데 정렬된 문장</center>

CENTER태그 : 결과
보통 문장
가운데 정렬된 문장

B 태그 : 글씨를 두껍게
안녕하세요. <b>문돌이</b> 입니다.

B 태그 : 결과
안녕하세요. 문돌이 입니다.

I 태그 : 글씨 기울이기
너는 <i>공돌이</i> 입니까?

FONT 태그 : 글꼴을 설정
<Font size=“40”>폰트 사이즈</Font>
<br>
<Font color=“blue”>폰트 색깔</Font>
<br>
<Font face=“돋움”>돋움 폰트</Font>
<br>
<Font size=“40" color="red" face="돋움">전부</Font>

FONT태그 : 결과
폰트 사이즈
폰트 색깔
돋움 폰트
전부

A 태그 : 하이퍼링크
<a href=“http://naver.com”>네이버</a><br>
<a href=“http://daum.net”>다음</a><br>
<a href=“http://google.com”>구글</a><br>
<a href=“first.html”>맨 처음 작업한 파일</a><br>

IMG 태그 : 결과
네이버
다음
구글
맨 처음 작업한 파일

IMG
Br.html P.html ~~.html
Picture1.jpg
HTML 폴더 내부

Picture2.jpg
IMG 폴더 내부

IMG 태그 : 이미지 표시
<img src=“picture1.jpg”>
<br>
<img src=“img/picture2.jpg”>

TABLE 태그 : 표 만들기
<table>
<tr>
<td>문과반</td>
<td>이과반</td>
</tr>
<tr>
<td>문돌이</td>
<td>공돌이</td>
</tr>
<tr>
<td>조문돌</td>
<td>조공돌</td>
</tr>
</table>

TABLE 태그 : 결과
문과반 이과반
문돌이 공돌이
조문돌 조공돌

TABLE 태그 : 표 만들기
<table border=“1">
<tr>
<td>과일</td>
<td>채소</td>
</tr>
<tr>
<td>사과</td>
<td>고구마</td>
</tr>
<tr>
<td>바나나</td>
<td>감자</td>
</tr>
</table>

TABLE 태그 : 결과
과일 채소
사과 고구마
바나나 감자

LI 태그 : 리스트 태그
<ol>
<li>감자</li>
<li>고구마</li>
<li>줄기</li>
</ol>

! 감자
! 고구마
! 줄기

<ol type=“1">
<li>감자</li>
<li>고구마</li>
<li>줄기</li>
</ol>
1 외에도 a, i

i. 이창우
ii. 고구마
iii. 줄기
1. 이창우
2. 고구마
3. 줄기
A. 이창우
B. 고구마
C. 줄기

INPUT 태그 : 정보 입력에 쓰이는 태그들
<input type=“button” value=“button”> <br>
<input type=“text” value=“textbox”> <br>
<input type=“password”> <br>

DIV SPAN
DIV는 한줄모두 차지
SPAN은 글자 길이만큼 차지

DIV 태그
<div> 첫번째 DIV </div>
<div> 두번째 DIV </div>

첫번째 DIV
두번째 DIV
DIV 태그 : 결과

SPAN 태그
<span> 첫번째 DIV </span>
<span> 두번째 DIV </span>

첫번째 SPAN두번째
SPAN
SPAN 태그 : 결과

심심한 HTML로만 작성된 문서에
활기를

CSS를 사용하는 법은 3가지

CSS 처음 따라해보기
<html>
<head>
<style>
body {background-color:black; color:white;}
</style>
</head>
<body>
Hi
</body>
</html>

CSS를 적용하는 형태
태그명 {속성1:값; 속성2:값;}
body {background-color:black; color:white;}

CSS - Class
.이름 {속성1:값; 속성2:값;}
<div class=“이름”>

<html>
<head>
<style>
.box {background-color:red; color:white;}
</style>
</head>
<body>
<div class=“box”> Div Css </div>
</body>
</html>
CSS - Class

CSS - ID
#이름 {속성1:값; 속성2:값;}
<div id=“이름”>

<html>
<head>
<style>
#box {background-color:red; color:white;}
</style>
</head>
<body>
<div id=“box”> Div Css </div>
</body>
</html>
CSS - ID

.box {background-color:red; width:80px; height:50px;}
CSS – Width, Height 속성
CSS
<div class=“box”> Content </div>
HTML

CSS – Width, Height 속성
Content

CSS – Margin, Padding 속성

.box1 {background-color:red; margin:20px;}
.box2 {background-color:blue; padding:20px;}
CSS
<div class=“box1”> Margin </div>
<div class=“box2”> Padding </div>
HTML

Margin
Padding

.box1 {color:red;}
.box2 {color:blue;}
CSS – Color 속성
CSS
<div class=“box1”> red </div>
<div class=“box2”> blue </div>
HTML

.box1 {font-size:30pt;}
.box2 {font-size:5pt;}
CSS – Font-Size 속성
CSS
<div class=“box1”> 30pt </div>
<div class=“box2”> 5pt </div>
HTML

30pt5pt

.box1 {font-weight:bold;}
.box2 {font-weight:700;}
CSS – Font-Weight 속성
CSS
<div class=“box1”> Bold </div>
<div class=“box2”> Bold </div>
HTML

Bold
Bold

.box1 {text-align:center;}
.box2 {text-align:right;}
CSS – Text-Align 속성
CSS
<div class=“box1”> Center </div>
<div class=“box2”> Right </div>
HTML

Center
Right

.box {
background-image:url(‘Picture.jpg’);
height:500px;
}
CSS – Background-Image 속성
CSS
<div class=“box”> Picture </div>
HTML

CSS – Background-Image 속성
Picture

CSS – 배경사진의 반복됨 설정
background-repeat:

CSS – 배경사진의 위치 설정
background-position:

.box1 {border:1px solid black;}
.box2 {border:4px dashed green;}
.box3 {border:2px dotted red;}
CSS – Border 속성
CSS
div class=“box1” 검정 실선 /div
div class=“box2” 초록 점선 /div
div class=“box3” 빨강 굵은 점선 /div
HTML

문돌이가 가르치는 웹 프론트엔드 1차시

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (15)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie 문돌이가 가르치는 웹 프론트엔드 1차시

Ähnlich wie 문돌이가 가르치는 웹 프론트엔드 1차시 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (7)

문돌이가 가르치는 웹 프론트엔드 1차시