야훔의 저렴한 개발

CSS에서 간단한 변수를 선언하고 사용할 수 있다는 사실에 대해서 알고 있는 사람은 알겠지만 모르고 있는 사람들도 있을 것 같아 친절한 내가 소개하려고 가져왔다. 일단 :root 가상선택자에 대해서 먼저 이야기할텐데 그 이유는 CSS의 변수도 지역 변수, 전역 변수 같은(?) 개념이 있기 때문이다. CSS의 변수의 접근은 자신의 부모 엘리먼트에 선언된 변수에만 접근할 수 있다. 무슨 이야기냐 하면 아래의 이미지를 보자. 왼쪽의 그림처럼 엘리먼트를 HTML로 만들었다고 했을 때 오른쪽의 CSS를 적용했다고 하자. box1에 정의한 변수는 box1의 자식 엘리먼트인 yellow에는 전달이 되지만 box2에서는 box1의 변수에 접근 할 수 없음을 보여준건데..... 보기 힘든건 이해한다. 암튼 위의 코드를 ..

HTML과 CSS를 배우면서 나는 잘 몰랐는데 padding과 margin의 차이에 대해서 꽤 많은 사람들이 햇깔려한다는 사실을 최근에 알게 되었다. "여백이면 여백이지 안쪽 여백은 뭐고 바깥 여백은 뭐냐!" 라며 화를 낼법도 하지만 어떻게 보면 굉장히 디테일한 이런 분류는 보다 멋진 웹 디자인을 구현해 낼 수 있도록 여지를 만들어줬기 때문에 고마워해야 할지도 모른다. 어쨌든 padding과 margin에 대해서 이해하려면 먼저 HTML의 Box Model에 대하여 이해해야하는데 MDN에 보면 잘 나와있다.(https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#What_is_the_CSS_box_model) 일단 ..

Gulp 시리즈마지막 이야기를 진행하려고 한다. 일단 이미지부터 보자. 이미지가 좀 복잡한데 천천히 설명해보겠다. 우리가 프로젝트를 진행하는 상황에서 images 디렉토리에 download.gif 파일이 필요없음을 깨달았다고 생각하자. 하지만 과거에 이미 한번 배포를 진행한 상황이었고, 필요없는 파일을 뒤늦게 삭제한뒤 재배포를 진행하면 어떻게 될 것인가. 그 결과가 위의 이미지이다. output 디렉토리를 초기화하고 진행하지 않아서 과거의 잔재(?)들이 남아있는채로 배포가 완료되어버렸다. 그래서 우리는 지금 해야할 일은 output 디렉토리를 초기화하는 과정이 필요하다. 패키지 하나를 설치하자. $ npm install del -D del 이라는 패키지인데 이건 파일을 삭제할 때 사용하는 패키지다. 어떻..

우리는 Gulp를 이용해 HTML, SCSS, Javascript까지 관리하고 관찰하고 자동으로 재배포하고 브라우저에 반영하는 것까지 자동화처리를 완료했다. 이제 남은 것은 자바스크립트 라이브러리, 이미지, 폰트를 배포하는 것까지 적용하면 될 것 같다. 일단 Vue.js와 jQuery를 라이브러리로 저장하고 이 것들을 dist 디렉토리에 복붙하는 task를 추가하자 jQuery와 vue는 알아서 다운로드 받자. 홈페이지 찾아가면 다운로드 받을 수 있도록 잘 해놨음. 암튼 이렇게 한 뒤에 gulpfile.js 파일에 아래의 내용을 추가하자. gulpfile.js // // 생략... // // 소스 파일 경로 var PATH = { HTML: './workspace/html' , ASSETS: { FONT..

퍼블리싱이라는 작업단계는 디자이너가 디자인을 하고 코드로 UI를 구현하는 첫 단계로 HTML/CSS를 이용해 마크업과 스타일시트를 적용해 매우 기본적인 UI 목업(Mockup)을 만든다고 생각할 수 있는데 간혹 Javascript를 적용해 어떤 방식으로 동작해야하는지 보여줘야하는 간단한 스크립트 작업을 해야할 상황이 있다. 아니면 본인이 프론트 앤드 개발까지 전부 작업해야하는 상황이라면.... Gulp라 아니라 Webpack으로 작업을 진행하는게 맞잖아!?! 이거 포스팅 하고 바로 다음으로 Webpack 관련 포스팅 올릴 거니까 그거 보고 환경을 만드시라. 암튼 이 Gulp 시리즈는 위에서 이야기한대로 "퍼블리싱"이라는 작업에 초점을 맞춰서 진행하는 이야기니까 "간단한 javascript"까지 작업한다는..

일단 지난시간까지 우리는 Gulp를 이용해 HTML파일과 SCSS파일을 배포하는 작업을 진행했었다. 오늘은 이런 HTML 파일과 SCSS파일을 수정하거나 파일이 추가되었을 때 Gulp가 감지한 뒤에 해당 작업을 자동배포하는 것을 작업해보려고 한다. 그냥 콘솔에 "gulp" 라는 네글자만 입력하면 모든 소스를 알아서 배포하겠지만 개발자는 게으름뱅이들이라서 이런 작업조차 자동으로 처리해줘야지 안 그러면 스트레스를 받아 화를 낸다. 지난 시간 작업했던 gulpfile.js 에 코드를 추가하기 전에 몇가지 패키지를 설치하도록 하자. $ npm install gulp-watch -D $ npm install browser-sync -D 이렇게 설치하고 난 뒤에 gulpfile.js 파일에 아래의 내용을 추가하자...

자, 지난번엔 SCSS을 컴파일하고 배포하는 방법에 대해서 알아봤다. 그럼 오늘은 Hello, World를 띄우고 퍼블리싱된 HTML에 CSS를 적용하는 법에 대해서 알아보도록 하자. 일단 HTML파일과 컴파일된 CSS를 적용해서 브라우저에서 확인하기 위해서 웹서버를 띄워야한다. 웹서버는 Node.js의 Express 패키지를 이용해 웹서버를 띄우도록 할 거다. 혹시 Node.js를 이용해서 서버를 띄우는 것에 대해서 걱정이 된다면 걱정할 필요 없다. 그냥 천천히 따라하면 다 된다. 일단 몇가지 패키지를 설치할 거다. 파워쉘을 켜서 아래의 명령어를 입력하자. $ npm install gulp-nodemon -D $ npm install express -D $ npm install ejs -D 그리고 ap..

사실 Glup를 쓰게된 가장 큰 이유는 SCSS로 스타일시트를 적용하고 싶어서다. 나중에 SCSS에 대해서 다루긴 하겠지만 어째서 SCSS를 쓰고 싶을까에 대해서 잠깐, 아주 잠깐 이야기하자면 일단 CSS 주제에 변수를 만들 수 있고 그걸 통해 반복작업을 줄일 수 있다. 스타일시트를 HTML처럼 계층적으로 적용할 수 있어서 셀렉터를 길게 쓸 필요도 없고 코드를 보다 효율적으로 작성할 수 있다는 장점이 있다. 말로만 설명하니 이해가 좀 어려울 수도 있는데 이와 관련해서는 나중에 포스팅해서 링크를 달아두도록 하겠다. 아무튼 여러모로 유용한 이 SCSS의 문제는 브라우저에서 바로 확인이 안된다는 점이다. SCSS로 짜여진 스타일시트를 컴파일해서 CSS로 변환하는 과정을 거치고나야 비로소 브라우저에서 확인 할 ..

오늘은 퍼블리싱 개발환경에 대해서 이야기 해보려고 한다. 사실 프론트앤드 개발환경도 아니고 "퍼블리싱(Publishing) 개발환경이라는 것을 만들 필요가 있는가?"에 대해서 이야기 하기 전에 몇가지 용어정리를 하려고 한다. 프론트 앤드 개발 분야를 업무 특성으로 나누자면 HTML/CSS쪽과 Javascript쪽으로 분야를 나눠 볼수 있는데 HTML/CSS를 전문으로 작업하는 것을 "퍼블리싱", 거기에 Javascript를 코딩하는 것을 "UI 개발"로 용어를 정리하도록 하겠다. 그리고 오늘부터 약 3~5개 정도의 포스트를 퍼블리싱 관련 개발환경을 만드는 내용을 소개해 볼까 한다. 여기서 "퍼블리싱을 하는데도 개발환경이 필요한가요?" 라는 질문을 할 수도 있다. 그도 그럴 것이 예전엔 그냥 HTML 문서..

Table 태그를 쓰다보면 만나는 레이아웃이 하나 있는데 이렇게 뭔가 엑셀에서 사용되는 병합셀이다. 도대체 이걸 어떻게 만들지 "html table 셀 병합"이라고 검색을 해보면 colspan 이나 rowspan을 사용하라고 하는데 뭔소린지 잘 모르겠다면 아래를 참고해주길 바란다. 발급번호 쿠폰명 유효기간 쿠폰종류 쿠폰타입 중복발급 발급개수 상태 등록일 시작일 종료일 일단 완성된 코드를 보자. 우리의 참고 디자인은 thead 부분의 레이아웃이라 thead에서 샘플을 제작했다. th코드에 rowspan="2" 또는 colspan="2"라고 쓴 것을 확인할 수 있다. 이 속성이 어떤 역할을 하느냐 이해하기 전에 row와 column의 차이를 이해해야하는데 row는 우리 말로 "줄"을 의미한다. column은..