유다시티 프론트엔드 웹 디벨로퍼 나노디그리
유다시티 나노디그리 소개
유다시티의 나노디그리는 인터넷 교육 업체인 유다시티에서 기업간의 연계를 통해 작은 학위를 증여하는 온라인 코스이다.
구글, AT&T 등 실리콘 밸리의 유명한 IT 기업과 제휴하여 운영하고 있다고 한다. 실제 실리콘 밸리의 IT 업계에서 쓰이는 기술들을 가르치는 코스라고 한다.
다 영어로 되어 있긴 하지만 영어 실력이 중상위 정도 되는 사람들은 한 번 들어 볼만하다.
프론트엔드 웹 디벨로퍼 과정은 HTML,CSS,Javascript, jQuery 등을 다룬다. 데이터베이스까지는 들어가지는 않지만 웹의 화면을 구성하는 핵심 기술을 배울 수 있다.
중요한건 신청할 수 있는 기간이 정해져 있다는 것이다. 2014년 11월 16일까지 등록을 받고 있으니 관심있는 사람은 아래 링크를 타고 들어가서 체험해 보도록 하자.
1주일간만 무료이며 그 이후로는 달마다 200달러를 내야 한다. 도중에 언제 든지 취소할 수 있다. 신청 기간은 밀당을 하기 위해 풀었다 걸었다 하는것 같다. (비..비싸다.)
나노디그리는 사람으로부터 피드백을 받는 것을 포함해서 유료이고 나머지는 그냥 강의 듣는 것은 다 무료이다. (이 좋은 사람들…)
프론트 엔드 나노디그리 : https://www.udacity.com/course/nd001
실제로 나노 디그리를 체험해 본후 배운 것을 이 포스팅을 통해 공유하도록 하겠다.
유다시티 나노디그리 체험기
1. HTML & CSS
이것이 유다시티 나노 디그리의 화면이다. 특이하게 유튜브를 활용. 덕분에 유튜브 자막기능으로 좀 더 편하게 볼 수 있었다.
배운 것 :
– 웹의 모든 것은 박스이다. 그리드! Grid. 왠지 트론이 생각나네.
– 서브라임 텍스트는 자동 코드 작성으로 편하게 해준다. (윈도우 버전도 있다.)
– 크롬의 개발자 도구로 코드를 볼 수 있다. 요소를 마우스 우클릭하고 요소검사하기 하면 그 부분의 코드를 볼 수 있다.
– https://developer.mozilla.org/en-US/docs/Web/CSS/Reference 여기에서 CSS 레퍼런스의 대부분을 볼 수 있다. (파이어폭스 MDN)
– 가로 넓이를 지정하면 패딩이나 보더 때문에 사이즈가 크게 나오는데 다음 코드를 CSS에 활용하면 패딩이나 보더를 포함한 일정한 박스를 만들어 낼 수 있다. (우겨 넣기.)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
– 박스사이징 : 보더 박스.
– 자주 쓰이는 HTML 틀을 정리.
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<title>My Favorite App</title>
</head>
<body>
<h1>My App</h1>
</body>
</html>
– row 가 맨날 헷갈리는데 row는 가로다. 로우는 롱보우를 생각하면 되겠다. 가로로 쭉 발사하는.
– column 도 헷갈리는데 기둥을 생각하면 된다.
– 미디어 쿼리를 활용한 반응형 웹 디자인
@media only screen and (max-width: 300px) {
p {
background-color: blue;
}
}
요렇게 CSS 파일에 추가해 주면 300px 보다 화면이 작을 때 P를 파란색으로 표시해준다.
@media only screen and (min-width: 300px) {
p {
background-color: blue;
}
}
요렇게 CSS 파일에 추하하면 300px 보다 화면이 클 때 P를 파란색으로 표시해 준다.
– 크기에 따라 이미지를 랜덤으로 가져오는 사이트.
placehold.it
placepuppy.it – 요놈은 사라졌다. 해킹당했나? 아님 다시 개발 중인가..It works 만 뜸.
placekitten.com
– 중요한 건 바로 그리드 시스템이다.
row 와 그 안에 칼럼을 만들어주면서 하는데. 칼럼은 보통 12개 까지 들어간다.
칼럼을 6개 쓰면 반을 쓰는거고 칼럼을 4개 쓰는거면 4/12를 쓰는거다.
허접하지만 내가 만든 페이지 첨부.
맨 위는 로우 하나에 그리드 6개씩, 중간은 12개, 그 밑은 로우 하나, 그 밑은 그리도 4개씩 사용. 샘플 코드는 그림 아래 첨부,
– 그리드 시스템 코드 ㅋ
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Framework Test Page</title>
<link rel=”stylesheet” href=”css/main.css”>
<link href=’http://fonts.googleapis.com/css?family=Lato’ rel=’stylesheet’ type=’text/css’>
</head>
<body>
<p>
<div class=”grid”>
<div class=”row”>
<div class=”col-6″>
<img src=”http://placehold.it/100×100″>
</div>
<div class=”col-6″>
<h1><p>MJH</p></h1>
<h2><p>Genius Entrepreneur</p></h2>
</div>
</div>
<div class=”row”>
<div class=”col-12″>
<img src=”http://placekitten.com/g/1000/350″>
</div>
</div>
<div class=”row”>
<div class=”col-12″><h2>Featured Work</h2></div>
</div>
<div class=”row”>
<div class=”col-4″>
<img src=”http://placekitten.com/g/300/200″>
<h3>고양이1</h3>
</div>
<div class=”col-4″><img src=”http://placekitten.com/g/300/200″>
<h3>고양이2</h3>
</div>
<div class=”col-4″><img src=”http://placekitten.com/g/300/200″>
<h3>고양이3</h3>
</div>
</div>
</div>
</p>
</body>
</html>
– 구글 폰트 사용하기
http://www.google.com/fonts#
– 웹페이지를 만들 때 활용할 수 있는 프레임 워크
Bootstrap: http://getbootstrap.com/
Foundation: http://foundation.zurb.com/
Yaml: http://www.yaml.de/
960 Grid: http://960.gs/
Suzy: http://susy.oddbird.net/
Frameless: http://framelessgrid.com/
이중에서 부트스트랩이 가장 많이 쓰인다고 한다. (부트스트랩이 짱이다.)
아래의 부트스트랩 HTML 예제를 참고하자.
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-6″><img src=”http://placehold.it/100×100″></div>
<div class=”col-md-6″>
<h1>Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<img class=”img-responsive” src=”http://placehold.it/1140×350″>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<h2>Featured Work</h2>
</div>
</div>
<div class=”row”>
<div class=”col-md-6″>
<img src=”http://placehold.it/555×300″>
<h3>Appify</h3>
<p><a href=”http://github.com”>Link to project</a></p>
</div>
<div class=”col-md-6″>
<img src=”http://placehold.it/555×300″>
<h3>Appify</h3>
<p><a href=”http://github.com”>Link to project</a></p>
</div>
</div>
<div class=”row”>
<div class=”col-md-6″>
<img src=”http://placehold.it/555×300″>
<h3>Appify</h3>
<p><a href=”http://github.com”>Link to project</a></p>
</div>
<div class=”col-md-6″>
<img src=”http://placehold.it/555×300″>
<h3>Appify</h3>
<p><a href=”http://github.com”>Link to project</a></p>
</div>
</div>
</div>
</body>
</html>
배운 것 : 부트스트랩은 container 안에 로우들이 들어가고 row마다 12 칼럼을 사용하는 형태로 되어 있다..(라우오..자세한 것은 부트스트랩 문서 참조) 복잡해 보이지만 별로 어렵지 않다.
다음 내용은 다음 포스팅에 이어서..