Download - 문돌이가 가르치는 웹 프론트엔드 1차시
개발은 실전
글로 시작해서 글로 끝나는
조선시대 선비들의 고전 시가
비록 문돌이라도..
재미없고 지루한
이론
어차피 코딩하다보면터득합니다.
비록 정석은 아니지만..
여러분께 웹개발의 즐거움을 가르쳐드리고 싶습니다.
본 강의에서는…
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의����������� ������������������ 기초를����������� ������������������
전부����������� ������������������ 배우셨습니다.
만약����������� ������������������ 지금����������� ������������������ 시간이����������� ������������������ 남았다면..
지금부터����������� ������������������ 배운����������� ������������������ 것들을����������� ������������������ 활용해����������� ������������������ 자신만의����������� ������������������ 홈페이지를����������� ������������������ 제작해보세요!
ㅜ_ㅜ몇 달 전에 윈도우에서 작업한걸
업로드 하려고 맥에서 불러와서 좀 깨져요.