유다시티 프론트엔드 웹 디벨로퍼 나노디그리

rivermoon

9년 ago

유다시티 나노디그리 소개

유다시티의 나노디그리는 인터넷 교육 업체인 유다시티에서 기업간의 연계를 통해 작은 학위를 증여하는 온라인 코스이다.
구글, 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″><h2>Featured Work</h2></div>
</div>

– 구글 폰트 사용하기

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 칼럼을 사용하는 형태로 되어 있다..(라우오..자세한 것은 부트스트랩 문서 참조) 복잡해 보이지만 별로 어렵지 않다.

다음 내용은 다음 포스팅에 이어서..

유다시티 나노디그리 소개

유다시티 나노디그리 체험기

이 글 공유하기:

연관된 글: