프론트엔드로 시작하는 웹 개발...
DESCRIPTION
프론트엔드로 시작하는 웹 개발 방법과 지식들TRANSCRIPT
![Page 1: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/1.jpg)
프론트엔드로 시작하는
웹 개발 방법과 지식들조 은
!UIT개발실 UI개발2팀
NHN Technology Services [email protected]
@clearboth 2014-08-09 기습 세미나
![Page 2: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/2.jpg)
안녕하세요 조은입니다
@clearboth 2014-08-09 기습 세미나
![Page 3: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/3.jpg)
솔로
@clearboth 2014-08-09 기습 세미나
現
![Page 4: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/4.jpg)
클리어보스 리더
現
@clearboth 2014-08-09 기습 세미나
![Page 5: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/5.jpg)
네이버 쇼핑광고
@clearboth 2014-08-09 기습 세미나
現
![Page 6: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/6.jpg)
밴드 패션
@clearboth 2014-08-09 기습 세미나
現
![Page 7: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/7.jpg)
커플
@clearboth 2014-08-09 기습 세미나
前
![Page 8: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/8.jpg)
쥬니어 네이버
@clearboth 2014-08-09 기습 세미나
前
![Page 9: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/9.jpg)
네이트 통합검색
@clearboth 2014-08-09 기습 세미나
前
![Page 10: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/10.jpg)
네이트 영화
@clearboth 2014-08-09 기습 세미나
前
![Page 11: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/11.jpg)
오늘 배워갈 것은
@clearboth 2014-08-09 기습 세미나
![Page 12: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/12.jpg)
브라우저는 뭣이고 HTML은 뭣이고 CSS는 뭣이고 JS는 뭣이고
@clearboth 2014-08-09 기습 세미나
가 아니라
![Page 13: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/13.jpg)
나 이제 내가 만드는 게 어떤건지 약간 알 거 같아
@clearboth 2014-08-09 기습 세미나
정도면 됩니다
![Page 14: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/14.jpg)
더 많은 공부는 개인 문의 부탁드립니다.
@clearboth 2014-08-09 기습 세미나
네이버 D2 채널을 통해 발표자료를 공개합니다 쉬는시간에 문의해주세요
![Page 15: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/15.jpg)
월드 와이드 웹World Wide Web
@clearboth 2014-08-09 기습 세미나
![Page 16: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/16.jpg)
@clearboth 2014-08-09 기습 세미나
문서Document
![Page 17: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/17.jpg)
@clearboth 2014-08-09 기습 세미나
pages gml
Apple IBM
![Page 18: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/18.jpg)
여러 플랫폼에서 한번에 볼 수 없을까
@clearboth 2014-08-09 기습 세미나
![Page 19: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/19.jpg)
@clearboth 2014-08-09 기습 세미나
팀 버너스 리
이미지 출처 http://madwebauthoring.wordpress.com/2012/09/07/tim-berners-lee/
Tim Berners Lee
![Page 20: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/20.jpg)
@clearboth 2014-08-09 기습 세미나
하이퍼링크Hyper Link
![Page 21: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/21.jpg)
@clearboth 2014-08-09 기습 세미나
HTMLHyper Text Markup Language
![Page 22: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/22.jpg)
@clearboth 2014-08-09 기습 세미나
웹 브라우저Web Browser
![Page 23: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/23.jpg)
@clearboth 2014-08-09 기습 세미나
FF IE OP CH SF
5대 메이저 브라우저
![Page 24: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/24.jpg)
왜 그 버튼을 3PX 옮기지 못하는거죠
@clearboth 2014-08-09 기습 세미나
![Page 25: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/25.jpg)
@clearboth 2014-08-09 기습 세미나
FF IE OP CH SF
각 회사별로 제각각 만듬
![Page 26: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/26.jpg)
컴퓨터
@clearboth 2014-08-09 기습 세미나
서버Computer Server
![Page 28: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/28.jpg)
컴퓨터
@clearboth 2014-08-09 기습 세미나
서버Computer Server
Request요청
http://www.naver.com
![Page 29: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/29.jpg)
컴퓨터
@clearboth 2014-08-09 기습 세미나
서버Computer Server
Request요청
Response응답
http://www.naver.com
![Page 30: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/30.jpg)
컴퓨터
@clearboth 2014-08-09 기습 세미나
서버Computer Server
Request요청
Response응답
http://www.naver.com
![Page 31: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/31.jpg)
HTMLSince 1993
@clearboth 2014-08-09 기습 세미나
![Page 32: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/32.jpg)
@clearboth 2014-08-09 기습 세미나
문서Document
복사붙여넣기 해야 이쁘다 너도 그렇다
![Page 33: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/33.jpg)
@clearboth 2014-08-09 기습 세미나
1.0 1993
2.0 1995
![Page 34: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/34.jpg)
@clearboth 2014-08-09 기습 세미나
1.0 1993
2.0 1995
3.2 1997
![Page 35: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/35.jpg)
@clearboth 2014-08-09 기습 세미나
2.0 1995
3.2 1997
4.0 1999
![Page 36: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/36.jpg)
@clearboth 2014-08-09 기습 세미나
3.2 1997
4.0 1999
5.0 2014
![Page 37: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/37.jpg)
@clearboth 2014-08-09 기습 세미나
4.0 1999
5.0 2014
![Page 38: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/38.jpg)
@clearboth 2014-08-09 기습 세미나
<h1>쉬는 시간</h1>
<time>10분</time>
![Page 39: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/39.jpg)
@clearboth 2014-08-09 기습 세미나
<h1>쉬는 시간</h1>
<time>10분</time>
이런 구조입니다 (쉬는 시간 아님)
![Page 40: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/40.jpg)
@clearboth 2014-08-09 기습 세미나
<live>Code</live>
![Page 41: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/41.jpg)
@clearboth 2014-08-09 기습 세미나
<h1>진짜 쉬는 시간</h1>
<time>10분</time>
![Page 42: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/42.jpg)
DOMSince 1998
@clearboth 2014-08-09 기습 세미나
![Page 43: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/43.jpg)
@clearboth 2014-08-09 기습 세미나
문서Document
복사붙여넣기 해야 이쁘다 너도 그렇다
복사붙여넣기 해야 이쁘다 너도 그렇다
![Page 44: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/44.jpg)
CSSSince 1996
@clearboth 2014-08-09 기습 세미나
![Page 45: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/45.jpg)
JavaScriptSince 1995
@clearboth 2014-08-09 기습 세미나
![Page 46: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/46.jpg)
UXUser Experience
@clearboth 2014-08-09 기습 세미나
![Page 47: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/47.jpg)
웹접근성Web Accessibility
@clearboth 2014-08-09 기습 세미나
![Page 48: 프론트엔드로 시작하는 웹 개발 방법과 지식들](https://reader034.vdocuments.mx/reader034/viewer/2022042521/559460801a28abbe6a8b4608/html5/thumbnails/48.jpg)
감사합니다
@choeun