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

개발은 실전

글로 시작해서 글로 끝나는

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

비록 문돌이라도..

재미없고 지루한

이론

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

비록 정석은 아니지만..

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

본 강의에서는…

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

“ 프론트엔드가 뭐지? ”

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

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

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

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

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

백엔드- 음식점의 주방-

주문(데이터) 전달

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

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>

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

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

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>


! 감자! 고구마! 줄기


<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>

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를 적용하는 형태

태그명 {속성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

<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

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


30pt5pt

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

CSS – Font-Weight 속성

CSS

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

HTML


BoldBold

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

CSS – Text-Align 속성

CSS

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

HTML


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


검정�� 실선��

초록�� 점선��

빨강�� 굵은�� 점선

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

CSS – Border-Radius 속성

CSS

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


둥근�� 사각형

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

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

HTML


위�� 쪽�� 테두리

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

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

.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의�� 기초를��

전부�� 배우셨습니다.

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

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

조동현[email protected]

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

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

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

Technology

Transcript of 문돌이가 가르치는 웹 프론트엔드...