문돌이가 가르치는 웹 프론트엔드...
TRANSCRIPT
![Page 1: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/1.jpg)
![Page 2: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/2.jpg)
개발은 실전
![Page 3: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/3.jpg)
글로 시작해서 글로 끝나는
조선시대 선비들의 고전 시가
![Page 4: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/4.jpg)
비록 문돌이라도..
![Page 5: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/5.jpg)
재미없고 지루한
이론
![Page 6: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/6.jpg)
어차피 코딩하다보면터득합니다.
![Page 7: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/7.jpg)
비록 정석은 아니지만..
![Page 8: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/8.jpg)
여러분께 웹개발의 즐거움을 가르쳐드리고 싶습니다.
![Page 9: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/9.jpg)
본 강의에서는…
![Page 10: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/10.jpg)
EB13 조동현“ 개발하는 문돌이 ”
![Page 11: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/11.jpg)
“ 프론트엔드가 뭐지? ”
![Page 12: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/12.jpg)
웹 브라우저에 보여지는 요소들- 백엔드로 요청을 하는 요소-
![Page 13: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/13.jpg)
![Page 14: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/14.jpg)
“ 그렇다면 백엔드는 뭐지? ”
![Page 15: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/15.jpg)
받아온 데이터를 처리하는 요소들- 보이지 않음 -
![Page 16: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/16.jpg)
어려운 용어들, 쉽게 비유를 하자면?
프론트엔드- 음식점의 카운터-
백엔드- 음식점의 주방-
주문(데이터) 전달
만든 음식(처리된 데이터)을 전달
![Page 17: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/17.jpg)
HTML CSS JAVASCRIPT
웹 프론트엔드 개발자는?
![Page 18: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/18.jpg)
HTML CSS JAVASCRIPT
웹 프론트엔드 개발자는?
![Page 19: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/19.jpg)
</>
![Page 20: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/20.jpg)
ㄴㄹㅇㅎㅁㄴㄹㅇㅎㅁㄴㅇㅎ</>웹의 뼈 웹의 피부
![Page 21: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/21.jpg)
Brackets FileZilla
![Page 22: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/22.jpg)
http://goo.gl/gddY3J
http://goo.gl/WvWgM
![Page 23: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/23.jpg)
<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>
![Page 24: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/24.jpg)
HTML
![Page 25: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/25.jpg)
first.html
![Page 26: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/26.jpg)
![Page 27: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/27.jpg)
http://dothome.co.kr/
![Page 28: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/28.jpg)
![Page 29: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/29.jpg)
![Page 30: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/30.jpg)
![Page 31: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/31.jpg)
![Page 32: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/32.jpg)
![Page 33: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/33.jpg)
![Page 34: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/34.jpg)
![Page 35: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/35.jpg)
![Page 36: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/36.jpg)
![Page 37: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/37.jpg)
![Page 38: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/38.jpg)
![Page 39: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/39.jpg)
호스트 : 자신의 아이디.dothome.co.kr
사용자명 : 자신의 아이디
비밀번호 : 자신의 비밀번호
포트 : 21
![Page 40: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/40.jpg)
![Page 41: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/41.jpg)
http://아이디.dothome.co.kr/first.html
![Page 42: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/42.jpg)
</>
![Page 43: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/43.jpg)
BR태그 : 웹 페이지에서 한줄을 개행하는 태그
<html> <head> <meta charset="utf-8"> </head> <body> 안녕하세요.<br>저는 ‘조 동현’<br>이라고 합니다. </body></html>
![Page 44: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/44.jpg)
BR태그 : 결과
안녕하세요.저는 ‘조 동현’이라고 합니다.
![Page 45: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/45.jpg)
P태그 : 웹 페이지에서 문단을 만드는 태그
<p>안녕하세요.<br>저는 ‘조 동현’ 입니다.</p><p>저의 취미는 없습니다.</p><p>저의 특기는 없습니다.</p><p>제 미래도 없어보입니다.</p>
![Page 46: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/46.jpg)
P태그 : 결과
안녕하세요.저는 ‘조 동현’ 입니다.
저의 취미는 없습니다.
저의 특기는 없습니다.
제 미래도 없어보입니다.
![Page 47: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/47.jpg)
h1~6태그 : 제목 태그
<h1>첫번째</h1><h2>두번째</h2><h3>세번째</h3><h4>네번째</h4><h5>다섯번째</h5><h6>여섯번째</h6>
![Page 48: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/48.jpg)
h1~6태그 : 결과
첫번째두번째세번째네번째다섯번째여섯번째
![Page 49: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/49.jpg)
CENTER 태그 : 가운데 정렬
보통 문장<br><center>가운데 정렬된 문장</center>
![Page 50: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/50.jpg)
CENTER태그 : 결과
보통 문장가운데 정렬된 문장
![Page 51: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/51.jpg)
B 태그 : 글씨를 두껍게
안녕하세요. <b>문돌이</b> 입니다.
![Page 52: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/52.jpg)
B 태그 : 결과
안녕하세요. 문돌이 입니다.
![Page 53: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/53.jpg)
I 태그 : 글씨 기울이기
너는 <i>공돌이</i> 입니까?
![Page 54: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/54.jpg)
I 태그 : 결과
![Page 55: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/55.jpg)
FONT 태그 : 글꼴을 설정
<Font size=“40”>폰트 사이즈</Font><br><Font color=“blue”>폰트 색깔</Font><br><Font face=“돋움”>돋움 폰트</Font><br><Font size=“40" color="red" face="돋움">전부</Font>
![Page 56: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/56.jpg)
FONT태그 : 결과
폰트 사이즈 폰트 색깔 돋움 폰트
전부
![Page 57: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/57.jpg)
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>
![Page 58: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/58.jpg)
IMG 태그 : 결과
네이버다음구글맨 처음 작업한 파일
![Page 59: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/59.jpg)
HTML
![Page 60: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/60.jpg)
IMG
Br.html P.html ~~.html
Picture1.jpg
HTML 폴더 내부
![Page 61: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/61.jpg)
Picture2.jpg
IMG 폴더 내부
![Page 62: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/62.jpg)
IMG 태그 : 이미지 표시
<img src=“picture1.jpg”><br><img src=“img/picture2.jpg”>
![Page 63: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/63.jpg)
IMG 태그 : 결과
![Page 64: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/64.jpg)
TABLE 태그 : 표 만들기
<table> <tr> <td>문과반</td> <td>이과반</td> </tr> <tr> <td>문돌이</td> <td>공돌이</td> </tr> <tr> <td>조문돌</td> <td>조공돌</td> </tr></table>
>
![Page 65: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/65.jpg)
TABLE 태그 : 결과
>
문과반 이과반
문돌이 공돌이
조문돌 조공돌
![Page 66: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/66.jpg)
TABLE 태그 : 표 만들기
<table border=“1"> <tr> <td>과일</td> <td>채소</td> </tr> <tr> <td>사과</td> <td>고구마</td> </tr> <tr> <td>바나나</td> <td>감자</td> </tr></table>
>
![Page 67: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/67.jpg)
TABLE 태그 : 결과
>
과일 채소
사과 고구마
바나나 감자
![Page 68: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/68.jpg)
LI 태그 : 리스트 태그
<ol> <li>감자</li> <li>고구마</li> <li>줄기</li></ol>
![Page 69: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/69.jpg)
LI 태그 : 리스트 태그
! 감자! 고구마! 줄기
![Page 70: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/70.jpg)
LI 태그 : 리스트 태그
<ol type=“1"> <li>감자</li> <li>고구마</li> <li>줄기</li></ol>
1 외에도 a, i
![Page 71: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/71.jpg)
LI 태그 : 리스트 태그
i. 이창우ii. 고구마iii. 줄기
1. 이창우2. 고구마3. 줄기
A. 이창우B. 고구마C. 줄기
![Page 72: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/72.jpg)
INPUT 태그 : 정보 입력에 쓰이는 태그들
<input type=“button” value=“button”> <br><input type=“text” value=“textbox”> <br><input type=“password”> <br>
![Page 73: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/73.jpg)
INPUT 태그 : 결과
![Page 74: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/74.jpg)
DIV SPAN
상자
![Page 75: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/75.jpg)
DIV SPANDIV는 한줄모두 차지
SPAN은 글자 길이만큼 차지
![Page 76: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/76.jpg)
DIV 태그
<div> 첫번째 DIV </div><div> 두번째 DIV </div>
![Page 77: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/77.jpg)
첫번째 DIV
두번째 DIV
DIV 태그 : 결과
![Page 78: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/78.jpg)
SPAN 태그
<span> 첫번째 DIV </span><span> 두번째 DIV </span>
![Page 79: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/79.jpg)
첫번째 SPAN두번째 SPAN
SPAN 태그 : 결과
![Page 80: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/80.jpg)
![Page 81: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/81.jpg)
심심한 HTML로만 작성된 문서에활기를
![Page 82: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/82.jpg)
![Page 83: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/83.jpg)
![Page 84: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/84.jpg)
CSS를 사용하는 법은 3가지
![Page 85: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/85.jpg)
CSS 처음 따라해보기
<html><head>
<style>body {background-color:black; color:white;}
</style></head>
<body>Hi
</body></html>
![Page 86: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/86.jpg)
![Page 87: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/87.jpg)
CSS 처음 따라해보기
<html><head>
<style>body {background-color:black; color:white;}
</style></head>
<body>Hi
</body></html>
![Page 88: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/88.jpg)
CSS를 적용하는 형태
태그명 {속성1:값; 속성2:값;}body {background-color:black; color:white;}
![Page 89: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/89.jpg)
CSS - Class
.이름 {속성1:값; 속성2:값;}<div class=“이름”>
![Page 90: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/90.jpg)
<html><head>
<style>.box {background-color:red; color:white;}
</style></head>
<body><div class=“box”> Div Css </div>
</body></html>
CSS - Class
![Page 91: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/91.jpg)
Div Class
CSS - Class
![Page 92: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/92.jpg)
CSS - ID
#이름 {속성1:값; 속성2:값;}<div id=“이름”>
![Page 93: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/93.jpg)
<html><head>
<style>#box {background-color:red; color:white;}
</style></head>
<body><div id=“box”> Div Css </div>
</body></html>
CSS - ID
![Page 94: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/94.jpg)
Div ID
CSS - ID
![Page 95: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/95.jpg)
.box {background-color:red; width:80px; height:50px;}
CSS – Width, Height 속성
CSS
<div class=“box”> Content </div> HTML
![Page 96: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/96.jpg)
CSS – Width, Height 속성
Content
![Page 97: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/97.jpg)
CSS – Margin, Padding 속성
![Page 98: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/98.jpg)
.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
![Page 99: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/99.jpg)
CSS – Margin, Padding 속성
Margin
Padding
![Page 100: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/100.jpg)
.box1 {color:red;}.box2 {color:blue;}
CSS – Color 속성
CSS
<div class=“box1”> red </div><div class=“box2”> blue </div>
HTML
![Page 101: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/101.jpg)
CSS – Color 속성
redblue
![Page 102: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/102.jpg)
.box1 {font-size:30pt;}.box2 {font-size:5pt;}
CSS – Font-Size 속성
CSS
<div class=“box1”> 30pt </div><div class=“box2”> 5pt </div>
HTML
![Page 103: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/103.jpg)
CSS – Font-Size 속성
30pt5pt
![Page 104: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/104.jpg)
.box1 {font-weight:bold;}.box2 {font-weight:700;}
CSS – Font-Weight 속성
CSS
<div class=“box1”> Bold </div><div class=“box2”> Bold </div>
HTML
![Page 105: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/105.jpg)
CSS – Font-Size 속성
BoldBold
![Page 106: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/106.jpg)
.box1 {text-align:center;}.box2 {text-align:right;}
CSS – Text-Align 속성
CSS
<div class=“box1”> Center </div><div class=“box2”> Right </div>
HTML
![Page 107: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/107.jpg)
CSS – Font-Size 속성
CenterRight
![Page 108: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/108.jpg)
IMG
Br.html P.html ~~.html
Picture1.jpg
HTML 폴더 내부
![Page 109: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/109.jpg)
.box {background-image:url(‘Picture.jpg’);height:500px;
}
CSS – Background-Image 속성
CSS
<div class=“box”> Picture </div>HTML
![Page 110: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/110.jpg)
CSS – Background-Image 속성
Picture
![Page 111: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/111.jpg)
CSS – 배경사진의 반복됨 설정
background-repeat:����������� ������������������ no-repeat����������� ������������������ background-repeat:����������� ������������������ repeat-x����������� ������������������ background-repeat:����������� ������������������ repeat-y
![Page 112: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/112.jpg)
CSS – 배경사진의 위치 설정
background-position:����������� ������������������ x좌표����������� ������������������ y좌표
![Page 113: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/113.jpg)
CSS – 배경사진의 위치 설정
background-position:����������� ������������������ 200px����������� ������������������ 200px����������� ������������������ background-position:����������� ������������������ center����������� ������������������ center
![Page 114: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/114.jpg)
.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
![Page 115: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/115.jpg)
CSS – Border 속성
검정����������� ������������������ 실선����������� ������������������
초록����������� ������������������ 점선����������� ������������������
빨강����������� ������������������ 굵은����������� ������������������ 점선
![Page 116: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/116.jpg)
.box1 {border:4px solid green; border-radius:10px;}
CSS – Border-Radius 속성
CSS
<div class=“box1”> 둥근 사각형 </div>HTML
![Page 117: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/117.jpg)
CSS – Border 속성
둥근����������� ������������������ 사각형
![Page 118: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/118.jpg)
CSS – 상하좌우에만 속성 적용하기
TOP����������� ������������������ BOTTOM����������� ������������������ LEFT����������� ������������������ RIGHT
![Page 119: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/119.jpg)
.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
![Page 120: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/120.jpg)
CSS – 상하좌우에만 속성 적용하기
위����������� ������������������ 쪽����������� ������������������ 테두리
위����������� ������������������ 쪽����������� ������������������ 외부����������� ������������������ 여백
위����������� ������������������ 쪽����������� ������������������ 내부����������� ������������������ 여백
![Page 121: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/121.jpg)
.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
![Page 122: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/122.jpg)
CSS – 글씨에 그림자 적용하기
![Page 123: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/123.jpg)
.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
![Page 124: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/124.jpg)
CSS – 박스에 그림자 적용하기
![Page 125: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/125.jpg)
여러분은����������� ������������������ HTML과����������� ������������������ CSS의����������� ������������������ 기초를����������� ������������������
전부����������� ������������������ 배우셨습니다.
![Page 126: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/126.jpg)
만약����������� ������������������ 지금����������� ������������������ 시간이����������� ������������������ 남았다면..
지금부터����������� ������������������ 배운����������� ������������������ 것들을����������� ������������������ 활용해����������� ������������������ 자신만의����������� ������������������ 홈페이지를����������� ������������������ 제작해보세요!
![Page 128: 문돌이가 가르치는 웹 프론트엔드 1차시](https://reader033.vdocuments.mx/reader033/viewer/2022052307/55c9cb8abb61ebc17e8b45c8/html5/thumbnails/128.jpg)
ㅜ_ㅜ몇 달 전에 윈도우에서 작업한걸
업로드 하려고 맥에서 불러와서 좀 깨져요.