첫 게시글.

지금부터 Ruby on Rails, Web/APP design, Service design, Heroku 에 관한 글을 쓸 것입니다.

감사합니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

부트스트랩 사용 시 버튼 오른쪽 정렬하는 방법 (How to use float-right for right align in bootstrap)

Bootstrap 사용 시 버튼을 오른쪽 정렬하는 방법 버튼 클래스에 float-right 해준다. 예시) Bootstrap v4.0 <div class = "row" > <div class = "col-12" > One <input type = "button" class = "btn float-right" value = "test" ></div> <div class = "col-12" > Two <input type = "button" class = "btn float-right" value = "test" ></div> </div> 참고 링크 https://getbootstrap.com/docs/4.0/utilities/float/#responsive https://stackoverflow.com/questions/15446189/how-can-i-get-my-twitter-bootstrap-buttons-to-right-align
자세한 내용 보기

즐겨찾기 사이트 모음 및 관리 서비스 만들기(2) - (Building a favorite site management service)

이미지
즐겨찾기 사이트 모음 및 관리 서비스 만들기(2) - (Building a favorite site management service) 즐겨찾기 사이트 모음 및 관리 서비스 만들기(2) - (Building a favorite site management service) 기획과 개발 모두 할려고 했는데 아는 동생과 함께 하면 더 재밌을 것 같아서 기획만 하고 개발은 아는 동생이 하는 걸로 ! 가 아니라 데이팅 서비스를 개발하기로 되어서 이건 다시 내가 만들기로 그리고 고민을 해봤을 때 크롬 확장프로그램으로 만드는게 낫지 않을까 싶어서 확장프로그램으로 만들고 그에 맞는 리디자인을 해보았다. 메인 페이지는 바로 북마크 리스트 + 검색바 + 등록 버튼 그리고 리스트에는 수정 및 삭제버튼이 있고 텍스트를 만들면 해당 사이트로 이동 우측 하단에 있는 + 버튼을 누르면 북마크 등록할 수 있는 팝업창이 뜨고 등록할 수 있다. 수정 버튼을 누르면 해당 이름과 URL 을 바꿀 수 있다. 삭제 버튼을 누르면 북마크를 삭제할 수 있다.
자세한 내용 보기

stimulus.js 사용기 - action(click event, global event like document, window.resize)

stimulus.js 를 사용해봤다. Rails 에서는 javascript 폴더 안에 controller 폴더를 만들고 xxxxx_controller.js 라는 js파일을 만들어 사용한다. import { Controller } from "stimulus" export default class extends Controller { functionName(){ } } 그 다음 위와 같이 js 파일을 구성하고 사용한다. 이제 이걸 사용하는 방법은 아래와 같이 사용한다. 아래에서의 gallery 는 위의 xxxxx이고 click은 trigger고, gallery#next 는 xxxxx_controller.js 에 정의해놓은 함수(위 사진에선 functionName같은)이다. 좀 더 쉽게 설명하면 클릭하면 xxxxx_controller 파일의 functionName() 함수를 호출해라와 같은 것이다. < div data-controller =" gallery " > < button data-action =" click->gallery#next " > … </ button > </ div > click이 아닌 "window의 크기가 변화하면, 문서가 준비되면" 같은 global event도 사용할 수 있다. < div data-controller =" gallery " data-action =" resize@window->gallery#layout " > … </ div > 위의 예제는 window의 크기가 resize되면 함수를 호출하는 것 아마 ready@document 와 같은 것도 되지 않을까 싶다. 라고 썼었는데 해보니 안됨 load@window 로 하면 됨 ... jQuery는 안되는건가...
자세한 내용 보기