[kr-dev] 요즘 웹 프로그래밍에서는 어떤 툴을 사용하나요?

스팀잇을 알게 되면서 배운 javascript를 활용해서 홈페이지를 만들어볼 생각에 시중에 나와있는 자바스크립트 책들을 많이 살펴보았습니다.

코인 투자를 위해 정보를 찾는 시간보다 자바스크립트 책 구해다가 읽는 시간이 더 많았네요 ^^

요즘 인기있다는 python의 django를 공부해볼까도 했었는데, 예전에 php를 쓰던시절에 유행했던 cakephp 프레임워크가 이제 유명을 달리(?)하는 것을 본 이후로 프레임워크를 공부하는데 시간을 들이기가 좀 꺼려지긴 했습니다.

그런데 책을 보다보면 javascript는 프레임워크를 쓰지 않고는 트렌드에 맞는 개발이 거의 불가능해 보여서 고민하다가 결국 vue를 쓰기로 마음을 먹고, 사이트 하나를 따라 만들어보기로 했습니다.

만들려는 사이트가 기능위주의 홈페이지라서 최근에 가장 많이 접속해봤던 luka7.net 을 목표로 벤치마킹을 하려고 브라우저에서 소스보기를 누른다음에 보이는 css 파일과 js파일들을 다운받았습니다.

js파일이 사람이 짤 수밖에 없긴 할텐데(luka 만드신분 정말 고수신것 같아요^^), css파일을 보면서 이걸 정말 사람이 다 외워서 타이핑한걸까 하는 생각이 들어서 질문을 올립니다.

예전에 나모웹에디터나 드림위버와 같이 어느정도 html코드들을 생성해주는 툴들이 있었지만 요즘에는 sublime이나 atom과 같이 경량의 텍스트 편집기를 사용하는 것 같은데, 아래와 같은 코드는 사람이 일일이 타이핑하는건지 아니면 생성해주는 툴이나 code assistance같은 것이 있는지 궁금합니다.

개발자도 아니고 주위에 개발자가 있는 것도 아니라서, 자주 쓰는 키보드 단축키라던지 기초적이면서 간단한 정보도 얻기가 막막할 때가 많아요. ^^

http://luka7.net/resource/style.css

@charset "utf-8";

body {font-size:12px; background-color: #fff; padding:0; margin:0;}
body, input, select, textarea {font-family: dotum, sans-serif;}
@media only screen and (max-width: 574px) {
body, input, select, textarea {font-size:2.3vw; letter-spacing: 0;}
}
/* basic */
a {cursor: pointer;}
fieldset p {margin:6px 20px 6px 0;}
h1 {font-size:1.2em; font-weight: bold; margin:0; padding:1em 0;}
h2{font-size:1.2em;}
input,select,textarea {vertical-align: middle;}
label {cursor: pointer;}
button {background-color:deepskyblue; color: #fff; font-weight:bold; padding:2px 7px; text-align: center; border:0; > > > vertical-align: middle; cursor: pointer;}
nav a {text-decoration: none; color:inherit;}
input[type=radio] { position: absolute; visibility:hidden; width:1px; height:1px; }
input[type=checkbox] { position: absolute; visibility:hidden; width:1px; height:1px; }
input[type=radio] + label{ display: inline-block; cursor: pointer; position: relative; padding:3px 5px; margin-right: 5px; background-color: #eee; }
input[type=checkbox] + label{ display: inline-block; cursor: pointer; position: relative; padding:3px 5px; margin-right: 5px; background-color: #eee; }
input[type=radio]:checked + label { color:#fff !important; background-color: tomato; }
input[type=checkbox]:checked + label { color:#fff !important; background-color: tomato; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
a[target=_blank] {
display: inline-block !important; padding-left:2em !important;
background-image:url('newWindow.png');
background-repeat: no-repeat;
background-position:5% 45%;
background-size: 1.2em;
}