Coin Push 프로젝트

CoinPush 다운로드

스택

코인 API : Cryptowatch

chrome extension

HTML, CSS, JS

사용법

각 값들을 입력 후 등록을 하면 20초마다 한번씩 실시간으로 확인해 순서대로 4초에 한개씩 알림이 울립니다.

따라서 권장 최대 알림은 4개이며, 만약 알림을 끄고싶으면 알림 리스트를 전부 삭제해야 합니다.

추후 알림 반복 시간 설정 업데이트 예정

상한 지정가와, 하한 지정가는 필수로 입력해야 하며 한개의 알림만 원한다면, 각각 원하지 않는 곳에 적절한 값을 넣어주시면 됩니다.

지정가의 퍼센트 설정은 현재 인풋창의 값에서 누적으로 퍼센트 계산이 되니 참고하시기 바랍니다.

로드맵

1.0

  • Push 설정
    — 거래소
    — 코인
    — 지정가 ( max, min )
    — 등록 버튼

  • 알림 설정 리스트
    — 추가, 삭제

  • 지정가 퍼센트 기능

1.1

  • 서버요청 쿨타임 설정 기능
  • 지정가 퍼센트 기능 보완
  • max or min disable

1.2

  • 디자인 개선

1.3

  • 코인 모니터링 시스템

2.0

  • 코인원, 업비트 API 추가

3.0

  • 거래기능 도입
  • 매수, 매도 버튼 추가

후기

이준호(SSsEnzo):

짧은 프로젝트로 유택님과 일을하게 되었는데

처음 만들어 보는 Chrome extension이라 정말 재밌게 했습니다.

다음번에 더 업그레이드 될 수 있게 새로운 프로젝트를 빨리 하고싶어 지네요.

다들 피쓰~

Github
블로그

정유택(takeU):

토이프로젝트로 약 일주일동안 열심히 만들었는데

기초적인 기능은 얼추 완성한 것 같고, 앞으로 이것저것 기능 추가하면서 다듬으면 좋을 듯 하다.

디자이너가 없어서 급하게 했지만, 일단 개발자의 눈에는 나름 이쁘다ㅋㅎ

시간이 될지 모르겠지만, 반응이 괜찮다면 더 빠르게 진행해봐야겠다.

또한 같이 만들고 싶다는 분이 많이 생기면, 오픈소스로 돌릴 생각도 있으니 메세지 주시면 좋을것 같습니다!

끝으로, 부족하지만 한번이라도 이용해주신 모든 분들께 감사드립니다!

Github

'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

티스토리 블로그 폰트 바꾸기

  1. 설정에서 HTML/CSS 편집 들어가기





  2. 구글 폰트에서 원하는 폰트를 찾아 @import방식으로 사용
    폰트를 다운받아 사용할 수도 있지만, 다운받지않고
    바로 폰트를 가져오는 방법이 더 편해서 원하는 폰트를 찾아 코드를 가져옴.
    예시로 이 블로그는 ‘Lato’ 폰트를 사용했음

  3. HTML/CSS 편집창에서 CSS 클릭후 최상단에 붙여넣기


  4. Ctrl + F 로 font-family를 검색해 원하는 폰트 이름을 삽입 후 저장
    검색이 안될때는 새로고침 후 검색
    폰트의 두께는 font-weight 속성으로 설정


끝!

6/159


'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21
  1. BlogIcon SONYLOVE 2017.04.07 17:02 신고

    Lato 폰트도 블로그에 잘 어울리네요.

    • BlogIcon takeu takeU 2017.04.07 17:07 신고

      감사합니다ㅎㅎ
      그냥쓰면 좀 두꺼워서 두께 300으로 주니까 예쁘네요

  2. BlogIcon 졸린 홍원 2017.09.16 19:07 신고

    덕분에 폰트 바꿨습니다ㅜㅜ감사합니다

CSS 변수(variables)

SASS로는 변수를 사용해 본 적이 있는데,

CSS에서는 직접적으로 사용해 본 기억이 없어서 찾아보고 포스팅 해보려 함

사용법

자바스크립트에서는 변수를 선언할 때 ES5는 var, ES6는 let, const를 사용하는데

CSS 변수를 자바스크립트와 비교해보면 const와 비슷한 역할을 한다고 보면 된다.

굳이 한번 정한 변수의 값을 바꿀 일이 없기 때문.

예시를 통해 이해해보면,

페이지 전역에서 가져다 쓸 수 있는 #FFC600이란 색상값을 base 라는 이름으로 변수화 하고 싶다면 아래와 같이 작성하면 된다.

:root {
    --base: #FFC600;
}

:root는 HTML 요소 중 가장 상위 요소에 적용한다는 뜻이고,

--base는 base라는 CSS 변수를 생성한다는 뜻이다.

위와같이 :root에 변수를 선언하는 것은 전역변수를 생성한다는 뜻이다.

선언한 CSS 변수를 호출하기 위해서는 다음과 같이 쓴다

.h1 {
    color: var(--base);
}

위와같이 선언한 변수를 가져올때는 var(--변수명)로 호출하면 된다.

끝으로

요즘은 CSS를 그냥 쓰는 경우보다는,

SASS와 같은 CSS 전처리기를 사용해 보다 효율적으로 코드를 작성 할 수 있다.

조만간 포스팅 하지 않을까.. 싶다

오늘은 공부도 많이 못해서 너무 급하게 포스팅한 티가 팍팍난다.

내일은 열심히 해야게땅

5/159


'개발 > CSS' 카테고리의 다른 글

CSS 중앙정렬 가이드  (3) 2018.04.24
CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12

CSS position

각 요소의 배치 방법

CSS에서 까다로운 부분중 하나이며 매우 중요!

position: static(기본값)

기본적인 요소의 배치순서에 따라 배치

top, bottom, left, right 를 사용 할 경우 무시

position: relative(상대위치)

기본 위치(static 기준)으로

top, bottom, left, right 를 사용해 이동

position: fixed(고정위치)

부모 요소에 관계없이 브라우저 표시영역을 기준으로

top, bottom, left, right 를 사용해 이동

스크롤을 이동해도 항상 같은 위치에 고정

보통 상단에 고정된 네비바나,

쇼핑몰같은 세로로 긴 페이지시 우측하단에 고정된 최상단 이동 버튼을 만들 때 사용한다.

position: absolute(절대위치)

가장 가까이 있는 부모 요소(static 제외)를 기준으로 top, bottom, left, right 만큼 이동한다.

즉 relative, absolute, fixed 속성이 선언되어 있는 부모 요소를 기준으로 위치가 결정된다.

만일 부모 요소가 static인 경우, body를 기준으로 하여 좌표 속성대로 위치하게 된다.

끝으로

활용할 수 있는 곳은 일반적으로 박스 위에 다른 박스를 위치시키고 싶을 때,

부모 요소에 relative, 자식 요소에 absolute를 주고 left, top으로 이동시키면 된다.

마찬가지로 직접 해보면서 익히는것이 가장 좋다.

4/159

'개발 > CSS' 카테고리의 다른 글

CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09

CSS display

layout을 설정할 때 자주 사용되는 중요한 속성!

기본적으로 HTML 요소는 block 또는 inline 속성을 가짐

block 속성?? inline 속성??

아래서 자세히 설명하겠지만, 이해를 돕기 위해 먼저 간단히 설명하면

block-level Element

내용이 있는 그 자체로 한 줄을 완전히 차지함
ex) <div>, <p>, <form>

inline-level Element

내용이 있는 만큼만 영역을 차지
ex) <span>, <a>, <button>, <input>


위에서 설명한 block-level Element는 display: block,

inline-level Element는 display: inline 속성을 기본으로 가지고 있다.

웹 사이트는 필요한 태그를 용도에 맞게 사용해야 하는데, 모든 태그는 위에서 설명한 것 처럼 display 속성을 가지고 있어, 스타일링을 하면서 변경을 해줘야 하는 순간이 있다.

display 속성의 종류

display: block

흔히 사용하는 div, p 태그를 떠올리면 된다.

특징으로는

  1. 화면 전체 가로폭을 차지
  2. 항상 새로운 라인에서 시작
  3. width, height, padding, margin 설정 가능

이 때 일반적인 경우라면 margin-left는 적용이 되지만,

margin-right는 적용이 되지 않을 것이다.

이유를 생각해보면 단순하다.

block 속성은 한줄 전체를 차지하기 때문에 margin-right가 적용되지 않는 것이다.

주의할 점은 width, height 값을 따로 주지 않았을 때

자식의 width 값은 부모의 width 값을 상속받고,

부모의 height 값은 자식의 height 값을 상속받는다.

말로는 헷갈릴 수 있지만, 머릿속으로 그려보면서 이해하면 당연한 내용이란걸 알 수 있다.

display: inline

흔히 사용하는 a, span 태그를 떠올리면 된다.

특징으로는

  1. content의 너비만큼 가로폭 차지
  2. 줄 바꿈 없이 다른 요소와 함께 배치 가능
  3. width, height 설정 불가능
  4. 상하 여백은 line-heigh, padding 속성으로 지정

별로 헷갈릴 내용이 없고, 컨텐츠의 너비만큼 길이를 가진다는게 전부이다.

display: inline-block

여기부터는 기본적으로 태그가 가진 속성이 아니다.

개인적으로 프로젝트를 하면 이 속성을 가장 많이 쓰는 것 같다.

특징으로는

  1. block과 inline의 특징을 모두 가짐
  2. inline 과같이 한 줄에 표현 가능
  3. width, height, padding, margin 설정 가능
  4. line-height 사용 가능

주의사항은 이 속성을 사용하면 좌우에 4px의 마진이 생기는데,

CSS-reset을 통해 미리 마진을 지워주고 작업하는게 좋다.

가장 많이 쓰는 부분이 컨텐츠를 div로 감쌌을 때, 너비 전체를 차지하게는 안하고 싶다면 inline-block 속성을 주면 된다.

물론 width, height, padding, margin을 잡아줘야 모양이 제대로 나온다.

display: none

그냥 화면에서 아예 안보임

visibility: hidden과의 차이는 display: none은 아예 있어야할 공간 조차 사라짐.

끝으로

CSS는 많이 코드를 쳐보면 쳐볼수록 이해가 더 잘되고, 빨리 습득 할 수 있으니, 직접 쳐보고 차이를 느껴보는게 가장 좋은 방법인 것 같다.

4/159


'개발 > CSS' 카테고리의 다른 글

CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24

CSS 박스모델(box-model)

box-model 이란?

CSS Box Model은 요소를 위해 생성되고 비주얼 서식 모델을 따라 배치되는 사각형 박스(패딩 및 마진 포함)를 정의하는 CSS 모듈입니다.

라고 MDN에 친절하게 적혀있고,

구글 개발자도구에서 흔히 볼 수 있는 그 모양이다.

왜 알아야 하는가?

보통 개발을 하면서 시안에 맞게 코드를 작성 하는데도,

이상하게 시안과 다른 결과물이 브라우저에 잡히게 된다.

대부분의 이유는 박스모델에 대한 이해가 부족해 생기는 일이다.

예시를 통한 이해

만약 디자이너가 박스의 너비를 800px, border 를 1px solid red로 만들어달라 했다.

그래서

.box {
    width: 800px;
    border: 1px solid red;
}

위와 같이 작성을 할 것이고,

기분좋게 새로고침을 딱 해서 너비값을 찍어보면 우리가 기대한 800px이 아닌 802px이 잡힌다.

왜일까?

기본적으로 브라우저는 width값을 content-box의 너비라고 생각하기 때문에, 브라우저에서 보는 박스의 너비는 width(800px)에 양 옆 border(1px)씩을 더한 802px이 된다.

그러면 우리는 디자이너 시안에 맞추기 위해 width를 800px이 아닌 798px로 적어줘야 하는건가?

페이지에 픽셀을 계산해야 하는 부분이 한두곳이 아니기 때문에 상당한 비효율 그 자체다.

대안

페이지 전역에 들어가는 CSS 파일에 아래와 같은 스타일을 먹여주면 된다.

* {
    box-sizing: border-box;
}

모든 태그의 박스 사이징의 기준을 border로 본다는 뜻이다.

그러면 아까와 같은 상황에서 브라우저는 width를 content-box가 아닌 border-box로 보기 때문에

양 옆의 margin 1px씩을 뺀 798px이 자동으로 content-box의 너비가 되고 총 박스의 너비는 800px이 된다.

설명 만으로는 이게 왜 중요한가 와 닿지 않을 수 있는데,

실질적으로 프로젝트를 하다 보면 필요성을 자연스럽게 느낄 것이고, 그 때 사용하면 될 것!

4/159


'개발 > CSS' 카테고리의 다른 글

CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24
CSS / float를 clear하는 방법 네가지(clearfix)  (0) 2017.04.13

HTML5에서의 시맨틱 웹과 시맨틱 태그(Semantic Web, Semantic tag)

시맨틱 웹이란?

구글에 검색했을때 위키백과에 나오는 내용을 그대로 적어보면 아래와 같다.

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,

현재의 인터넷과 같은 분산환경에서 리소스에 대한 정보와 자원 사이의 관계의미 정보를 기계가 처리할 수 있는 온톨로지 형태로 표현하고,

이를 컴퓨터가 처리하도록 하는 프레임워크이자 기술이다.

웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

쉽게 생각하면 첫 줄만 읽으면 된다.

의미론적인 웹은 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다.

시맨틱 웹의 이상향은, 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확히 주는 것이다.

여기까지 읽었을 땐 단순히 검색엔진 성능 향상에만 유용하게 쓰일 것 같지만, 찾아보니 암 치료 증진에도 기여할 수 있고, 석유가스 산업에도 응용될 수 있으며, 이외에도 많은 기업에서 사용할 수도 있다고 한다.(어떻게 이런 결과가 도출된건지는 잘모르겠다ㅋㅋ)

크게 생각 했을때 데이터들을 관리하고 통합하는 것이기 때문에 위와 같은 기대를 하는 것 같다.

HTML5에서의 시맨틱 웹

HTML5 이전까지는 시맨틱 태그라는 것이 없었다.

그 때의 대부분의 태그는 <div>로 감싸져 있었을텐데,

개발자의 입장에서는 코드로 사이트 전체 구조를 한눈에 파악하기 힘들었을 것이고, 검색 엔진은 사이트의 의미를 정확히 파악하지 못해 검색 결과값의 정확도가 떨어졌을 것이다.

그래서 나온 대안이 시맨틱 웹이고, 그에 따라서 HTML5에서 시맨틱 태그(Semantic tag)라는 것이 나온 것이다.

예를 들어 설명하면

기존에는 <div class="header">헤더입니다</div> 이렇게 썼던걸,

<header>헤더입니다</header> 이런식으로 쓰는 것이다.

<div>태그, <header>태그 둘 다 구역을 나눌 때 쓰는 껍데기 태그인데 둘의 차이는 의미를 가지고 있는지의 차이이다.

태그 이름 그대로 헤더부분을 <header>태그로 감싸는 것이다.

위와같이 div를 대체할 수 있는 태그로 header, nav, article, section, aside, footer가 나왔고, 각각 의미에 맞게 사용하면 된다.

위 태그들은 HTML5 이전에 div태그에서 클래스 명으로 많이 쓰던 것들을 토대로 만들었다고 한다.

결론

안써도 겉으로 보이기엔 똑같지만 검색 엔진 최적화(SEO)에서 중요한 역할을 하기 때문에 검색결과에서 상단을 차지하고 싶다면, 쓰는것을 습관화 하는 것이 좋다.

끝!

2/159

React??

앞으로 쓰게될 React.js에 대해 아주 늦게 첫 발을 디뎠다

새로운 스택을 익히려 하는데 아무리 글을봐도 이해가 안되는 나의 머리를 탓하며 아주 쉽게 정리해보려 함

혹시라도 이 글을 보시게 된다면, 틀린부분이 있을 수 있으니 한번쯤 의심하면서 보시고

틀린부분은 바로바로 지적해주시면 감사하겠습니다

정리하는 글이기에 반말로 적겠습니다.

리액트란?

페이스북에서 만든 사용자 인터페이스 라이브러리

절대적으로 View단을 구성하기 위한 라이브러리이다.

리액트를 만든 이유?

기존 MVC패턴은 확장이 어렵고 거대한 시스템에 어울리지 않는다는 생각을 하게된 페이스북은 새로운 대안으로 Flux라는 데이터 흐름이 단방향인 시스템 아키텍쳐를 만들었다.

이 Flux는 “새로운 패턴이 아니라 MVC의 새로운 이름일 뿐이다” 라는 논란도 일었지만,

둘의 가장 큰 차이는 데이터 흐름이 단방향이라 더욱 직관적이고, 관리하기가 쉽다는 점이다.

리액트의 특징

1.JSX

템플릿을 사용하지 않고 고유의 XML확장 문법인 JSX를 사용한다.

쉽게 이해해 자바스크립트에서 HTML코드를 쓸 수 있게하는 문법이다.

이렇게 작성한 코드는 Babel을 통해 별도의 컴파일 없이 사용 가능하다.

2.Virtual DOM

기존에 DOM을 직접 핸들링하는 제이쿼리는 페이지를 새로고침하면 페이지의 모든 요소를 새로 렌더링하는 반면에,

리액트는 Virtual DOM(가상돔)을 사용해 변화가 있는 부분을 비교해 최소한의 요소만 다시 렌더링하게되어,

보다 빠른 속도로 화면을 보여줄 수 있다.

3.One Way Data Flow

데이터는 위에서 아래로만 흐르기 때문에 구조가 커졌을 때 양방향 바인딩에 비해 데이터의 흐름을 파악하기가 쉽다.

4.Server Side Rendering

클라이언트에서만 렌더링을 하면 HTML, JavaScript, Data, View 순으로 진행하는 시간 소요로 초기구동 속도가 느리고,

자바스크립트를 실행못하는 검색 엔진 봇들은 처음 렌더링 된 빈 HTML만 수집하기 때문에 콘텐츠가 없다고 판단되어 SEO에 취약하므로, 서버 렌더링을 지원한다.


'개발 > React' 카테고리의 다른 글

4. Redux-saga의 흐름  (0) 2018.11.14
3. React 폴더구조 ( redux, redux-saga )  (0) 2018.11.13
2. React 세팅 (react-router, redux, redux-saga)  (0) 2018.11.13
1. React 설치  (0) 2018.11.13
0. React.js  (0) 2017.08.21

CSS reset

CSS reset이란?

브라우저마다 각 태그에 대한 속성들이 약간씩 다르기 마련인데, 이를 초기화 시키고 작업해 모든 브라우저에서 동일하게 작동하도록 만드는 방법

직접 코드를 작성할 수도 있지만, 다른 사람들이 만들어 놓은 보일러 플레이트 중에 유명한 것을 가져옴

Eric Meyer’s “Reset CSS” 2.0

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

'개발 > CSS' 카테고리의 다른 글

CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24
CSS / float를 clear하는 방법 네가지(clearfix)  (0) 2017.04.13

Ruby on Rails에 템플릿 넣기

멋사 하프톤을 하면서 전반적으로 템플릿 삽입에 어려움을 느껴 포스팅 해야겠다 생각함
코드 github 주소
파일 minify하기

가독성이 떨어질 수 있으니 각오하고 볼것!

목표

레일즈는 MVC패턴의 고유한 프로젝트 구조를 가지고 있어 템플릿을 넣을 때 까다로운 부분이 많아 가이드라인을 제시하려 함.

레일즈 빈 프로젝트에 부트스트랩 기반 SPA 템플릿인 GraySclae을 넣어보는 것을 해볼 것!

준비

큰 상관은 없겠지만, Ruby는 2.4.0, Rails는 5.0.3 버전, 루비마인으로 진행

보통 템플릿은 라이브러리 사용시 cdn 대신 vendor 폴더에 다운받아서 경로를 참조하는 식으로 하기 때문에 그대로 적용할 예정

과정

  1. 레일즈 프로젝트 생성 및 세팅


    routes에 index.html을 root로 설정


    protect 해제


  2. 컨트롤러, 뷰 생성
    rails g controller home index로 home컨트롤러에 index페이지를 만들었고, 여기에 템플릿을 적용할 예정

  3. 템플릿의 head부분 옮기기
    템플릿의 head부분을 그대로 복사해 layout > application.html에 붙인다.
    레일즈는 에셋 파이프라인을 이용하기 때문에 우선은 각종 라이브러리(여기서는 bootstrap, font-awesome) 링크를 지우고, stylesheet,javascript link_tagdata-turbolinks-track을 지우고 자바스크립트를 불러오는 <%= javascript_include_tag 'application' %>는 body태그의 끝으로 보내준다. 끝으로 필요없는 코드를 지우고 정리하면 다음과 같다.

    템플릿의 head


    rails application.html

  4. 템플릿의 body부분 옮기기
    템플릿의 body부분을 그대로 복사해 index.html에 붙이는데 이때 보면 가장 하단에 script부분이 있는데 이는 모두 지워 application.html<%= yield %>의 밑으로 보내준다. 여기서도 마찬가지로 각종 라이브러리 스크립트 태그는 지워준다.
    body태그를 보면 id가 부여되어있는데 이는 페이지 스크롤링에 사용되는 것이다. 지금 만드는 페이지는 싱글페이지이기 때문에 application.html의 body에 id를 적어주면 정상 작동한다.

    4번 이후의 application.html

  5. CSS, JavaScript, img 옮기기
    CSS는 less,sass로도 주어지는데 본인이 쓸줄 안다면 가져와도 되지만, 가장 일반적으로 퓨어 CSS를 쓰기 때문에 grayscale.cssassets/stylesheets로 가져온다. 이때 이 파일을 수정해야 하기 때문에 min파일과 같이 가져오게 된다면, 수정 후에 둘의 내용이 달라 제대로 효과가 적용되지 않을 수 있다.(중요함!!)
    마찬가지로 grayscale.jsassets/javascripts에, 이미지파일 3개도 assets/images에 넣어준다.

  6. vendor 옮기기
    vendor란? 누군가 만들어 놓은, 예를들면 부트스트랩, 제이쿼리같은 라이브러리파일을 담는곳이고, 위에서 CSS,JS,img를 넣은 assets폴더는 커스텀파일을 담는곳이다.
    vendor폴더에 우리가 필요한(head에서 삭제한) 파일들을 가져온다. 이는 우리가 수정할 필요가 없기 때문에 min파일을 가져오든 둘다가져오든 상관없다.(min이란 minify의 약자로 파일의 공백을 제거해 압축하는것)
    vendor > assets > javascriptsbootstrap.min.js, jquery.min.js를 넣고, vendor > assets > stylesheetsbootstrap.min.css를 넣는다. font-awesome은 폰트까지 가져와야해서 그냥 cdn을 썼음(ㅎ) / 4번 이후의 사진 참조

  7. asset pipeline 설정
    커스텀파일을 넣은 assets폴더는 application.jsapplication.cssrequire_tree,require_self라고 입력되어 있는 코드를 통해 알아서 에셋폴더의 파일들을 불러올 수 있지만, vendor폴더는 따로 적어줘야 한다.
    vendor에 들어간 라이브러리 파일명을 각각 js와 css에 맞게 적어준다.
    이때 제이쿼리가 먼저 호출되어야 부트스트랩이 작동하기 때문에 순서에 유의해야 한다.

    assets > application.js


    assets > application.css


  8. img url 설정
    grayscale.css에서 cmd + f로 url이라는 단어를 검색해보면 백그라운드 이미지 url이 절대경로로 되어있다. 이때 파일명만 남겨두고 나머지를 지워주면, 레일즈는 알아서 assets/images에서 파일명을 검색해 불러오게 된다.


    끝! 포스팅이 지저분하긴 하지만 끝까지 참고 만든다면 거뜬하게 완료 / 안된다면 댓글 달아주세요


'개발 > RoR' 카테고리의 다른 글

[RoR]레일즈 템플릿 넣는법  (3) 2017.05.27
루비온레일즈(Ruby on Rails) 루비 기초 문법  (0) 2017.03.29
  1. Hong 2018.05.06 16:57 신고

    좋은정보 감사합니다.

  2. abcdd 2018.05.14 11:43 신고

    같은 문제에 닥쳤는데 덕분에 어느정도 해결이 되었습니다.

    똑같이 진행했는데 smooth scrolling 이 적용이 안됩니다. 아마 js 가 적절하게 적용이 안된 것 같은데

    어디가 문제일까요..

+ Recent posts