문돌이가 가르치는 웹 프론트엔드...

Post on 11-Aug-2015

44 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

개발은 실전

글로 시작해서 글로 끝나는

조선시대 선비들의 고전 시가

비록 문돌이라도..

재미없고 지루한

이론

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

비록 정석은 아니지만..

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

본 강의에서는…

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

“ 프론트엔드가 뭐지? ”

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

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

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

어려운 용어들, 쉽게 비유를 하자면?

프론트엔드- 음식점의 카운터-

백엔드- 음식점의 주방-

주문(데이터) 전달

만든 음식(처리된 데이터)을 전달

HTML CSS JAVASCRIPT

웹 프론트엔드 개발자는?

HTML CSS JAVASCRIPT

웹 프론트엔드 개발자는?

</>

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

Brackets FileZilla

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>

HTML

first.html

http://dothome.co.kr/

호스트 : 자신의 아이디.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> 입니까?

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 태그 : 결과

네이버다음구글맨 처음 작업한 파일

HTML

IMG

Br.html P.html ~~.html

Picture1.jpg

HTML 폴더 내부

Picture2.jpg

IMG 폴더 내부

IMG 태그 : 이미지 표시

<img src=“picture1.jpg”><br><img src=“img/picture2.jpg”>

IMG 태그 : 결과

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>

LI 태그 : 리스트 태그

! 감자! 고구마! 줄기

LI 태그 : 리스트 태그

<ol type=“1"> <li>감자</li> <li>고구마</li> <li>줄기</li></ol>

1 외에도 a, i

LI 태그 : 리스트 태그

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>

INPUT 태그 : 결과

DIV SPAN

상자

DIV SPANDIV는 한줄모두 차지

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 처음 따라해보기

<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

Div Class

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

Div ID

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 – Margin, Padding 속성

CSS

<div class=“box1”> Margin </div><div class=“box2”> Padding </div>

HTML

CSS – Margin, Padding 속성

Margin

Padding

.box1 {color:red;}.box2 {color:blue;}

CSS – Color 속성

CSS

<div class=“box1”> red </div><div class=“box2”> blue </div>

HTML

CSS – Color 속성

redblue

.box1 {font-size:30pt;}.box2 {font-size:5pt;}

CSS – Font-Size 속성

CSS

<div class=“box1”> 30pt </div><div class=“box2”> 5pt </div>

HTML

CSS – Font-Size 속성

30pt5pt

.box1 {font-weight:bold;}.box2 {font-weight:700;}

CSS – Font-Weight 속성

CSS

<div class=“box1”> Bold </div><div class=“box2”> Bold </div>

HTML

CSS – Font-Size 속성

BoldBold

.box1 {text-align:center;}.box2 {text-align:right;}

CSS – Text-Align 속성

CSS

<div class=“box1”> Center </div><div class=“box2”> Right </div>

HTML

CSS – Font-Size 속성

CenterRight

IMG

Br.html P.html ~~.html

Picture1.jpg

HTML 폴더 내부

.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:����������� ������������������  no-repeat����������� ������������������  background-repeat:����������� ������������������  repeat-x����������� ������������������  background-repeat:����������� ������������������  repeat-y

CSS – 배경사진의 위치 설정

background-position:����������� ������������������  x좌표����������� ������������������  y좌표

CSS – 배경사진의 위치 설정

background-position:����������� ������������������  200px����������� ������������������  200px����������� ������������������  background-position:����������� ������������������  center����������� ������������������  center

.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

CSS – Border 속성

검정����������� ������������������  실선����������� ������������������  

초록����������� ������������������  점선����������� ������������������  

빨강����������� ������������������  굵은����������� ������������������  점선

.box1 {border:4px solid green; border-radius:10px;}

CSS – Border-Radius 속성

CSS

<div class=“box1”> 둥근 사각형 </div>HTML

CSS – Border 속성

둥근����������� ������������������  사각형

CSS – 상하좌우에만 속성 적용하기

TOP����������� ������������������  BOTTOM����������� ������������������  LEFT����������� ������������������  RIGHT

.box1 {border-top:4px solid green;}.box2 {background-color:red; margin-top:30px;}

.box3 {background-color:blue; padding-top:30px;}

CSS – 상하좌우에만 속성 적용하기

CSS

<div class=“box1”> 위 쪽 테두리 </div><div class=“box2”> 위 쪽 외부 여백 </div><div class=“box3”> 위 쪽 내부 여백 </div>

HTML

CSS – 상하좌우에만 속성 적용하기

위����������� ������������������  쪽����������� ������������������  테두리

위����������� ������������������  쪽����������� ������������������  외부����������� ������������������  여백

위����������� ������������������  쪽����������� ������������������  내부����������� ������������������  여백

.box1 {text-shadow: black 1px 1px 5px;}.box2 {text-shadow: blue 3px 3px 2px;}

.box3 {text-shadow: red 10px 10px 10px;}

CSS – 글씨에 그림자 적용하기

CSS

<div class=“box1”> 검정 글씨 그림자 </div><div class=“box2”> 파랑 글씨 그림자 </div><div class=“box3”> 빨강 글씨 그림자 </div>

HTML

CSS – 글씨에 그림자 적용하기

.box1 {box-shadow: 1px 1px 5px black;}.box2 {box-shadow: 3px 3px 2px blue;}

.box3 {box-shadow: 10px 10px 10px red;}

CSS – 박스에 그림자 적용하기

CSS

<div class=“box1”> 검정 박스 그림자 </div><div class=“box2”> 파랑 박스 그림자 </div><div class=“box3”> 빨강 박스 그림자 </div>

HTML

CSS – 박스에 그림자 적용하기

여러분은����������� ������������������  HTML과����������� ������������������  CSS의����������� ������������������  기초를����������� ������������������  

전부����������� ������������������  배우셨습니다.

만약����������� ������������������  지금����������� ������������������  시간이����������� ������������������  남았다면..

지금부터����������� ������������������  배운����������� ������������������  것들을����������� ������������������  활용해����������� ������������������  자신만의����������� ������������������  홈페이지를����������� ������������������  제작해보세요!

조동현cdhnet98@gmail.com

ㅜ_ㅜ몇 달 전에 윈도우에서 작업한걸

업로드 하려고 맥에서 불러와서 좀 깨져요.

top related