haml 연말이므로 웹 앱을 만들었습니다. minmax 패널을 번갈아 가서 총 득점을 겨루는 게임이다. 선수는 좋아하는 위치에서 시작된다. 후손은 선수가 선택한 위치를 포함한 세로 일렬 중에서 패널을 선택한다. 다시 선수는 후손이 선택한 패널을 포함한 가로 일렬 중에서 패널을 선택한다. 한번 선택한 패널은 선택할 수 없다. 패스는 할 수 없다. 패널을 선택할 수 없었던 시점에서, 합계 득점이 높은 쪽의 승이다. 게임 시작. 처음에는 ... AngularhamlCoffeeScriptgruntjasmine [font-awsome 오류]File to import not found or unreadable: font-awesome-sprockets. 오류 정보 데스크탑(뒤쪽에서 제작하고 있던 파일)에서는 움직이고 있던 데이터를 홈 디렉토리(실전의 파일)에 옮겼을 때 상기와 같은 에러가 나왔습니다. 1. 일반적인 원인 ・Gemfile 속에 gem 'font-awesome-sass'가 빠져 있다 ・app/stylesheets/application.scss 안에 @import "font-awesome-sprockets" 와 @import "font-aw... hamlRailsscssFontAwesome루비 FontAwesome 소개 FontAwesome이란? Haml에서 사용할 때 1.FontAwesome 용 gem 설치 2.import 3.Haml의 기술 방법 Html로 사용할 때 1. HTML 파일에 설명 참고 페이지 끝에 웹 폰트의 일종으로, 문자를 취급하는 것처럼 아이콘을 표시시킬 수 있다 Gemfile Gemfile에 추가하면 bundle install 서버를 다시 시작 application.scss 보려는 페... hamlRailsHTMLscssFontAwesome 【Rails】 gem "font-awesome-rails"가 작동하지 않고 아무것도 표시되지 않을 때의 대처법 이와 같이, 2개의 아이콘을 Gem font-awesome-rails 로 오른쪽에 배치하고 싶다. 1, 이번 고전한 현상으로, 아무것도 표시되지 않습니다. 가능한 원인 패턴은 ・아이콘의 기술 방법, 지정 방법이 잘못되어 있다. · font-awesome 버전 2, 이쪽은, 표시되었지만 아이콘이 나오지 않는다. · 많은 경우는 css에서 font-famiry를 지정 할 수 없습니다. ・그 외 ... hamlRailsscssFontAwesome루비 [Rails5] 라디오 버튼을 버튼으로 설정 radio button의 디자인에 능숙하고, 마무리는 이쪽 new.html.haml f.radio_button [컬럼 이름], [선택했을 때 컬럼에 넣고 싶은 값], id, class f.label [라벨 이름], for:[연동시키고 싶은 radio button의 id], class 완성 scss는 이쪽 new.scss label에 for를 붙이면, radio button과 연동하게 된다 이... scssRailshamlFontAwesome Rails에서 FontAwesome 사용 FontAwesome 사용 준비 FontAwesome을 haml에서 FontAwesome을 버튼으로 사용 (최종 목표) link 파일 선택 아이콘을 자유롭게 사용할 수 있습니다! 단번에 사이트가 좋은 느낌이 됩니다. /assets/stylesheets/application.scss 이것으로 준비 완료입니다. 'edit' 부분은 FontAwesome 페이지에서 사용하려는 아이콘을 찾고, 이런 ... hamlRailsFontAwesome haml을 사용하기 위한 추억 on RubyMine2018.3 Ruby-mine은 haml의 보완 기능이라도 있어 편안합니다. 왠지 템플릿이 준비되어 있지 않은 것은 기분 나쁘지만. 우선, 설정으로서는 이런 느낌으로 지금은 스트레스리스 빠른 참조 상세 문서 indent는 공간? 탭? 들여쓰기는 하드탭이라도 소프트탭(space)이라도 좋지만, 혼재는 허용되지 않는다고 한다. 문서에서 자동으로 판단된다는 것 클래스에 두 개 이상하고 싶을 때는? %div{:... RubyMinehamlRails React.js - HAML 스타일에 쓰는 방법 요 전날 을 읽고 조금 궁리하는 것만으로 React.js를 HAML 스타일로 쓸 수 있다는 것을 깨달았다. React.js를 평소에 사용한다 처럼 쓰고 싶다. 목표 보통 JSX + CoffeeScript로 쓰면 다음과 같다. ＜＞를 배제하고 싶다. 1. JSX를 사용하지 않고 CoffeeScript로 작성 JSX는 선택사항으로서 준비되어 있지만, 필요조건이 아니라고 다큐멘테이션에 쓰여져 있다... hamlReactCoffeeScript 드래그 앤 드롭에 의한 투고 내용, 비동기 삭제. [jQuery, Rails] 해당 개소에 투고 내용을 드롭했을 때에 비동기로 삭제를 하는 것입니다. 이미지를 왼쪽 하단의 휴지통 아이콘에 드롭했을 때에 이벤트를 발화시켜, 비동기로 삭제하고 있습니다. 이미지가 드래그 되어 있는 동안에 휴지통의 아이콘에 새로운 클래스를 부여해, 애니메이션과 같이 구현하고 있습니다. jQuery UI 도입 jQuery UI는 jQuery를 기반으로 한 JavaScript 라이브러리이기 때문... haml아약스RailsjQuery 이미지 이미지 나열 현재 프로그래밍 스쿨에서 프리마 앱을 5 명으로 구현 중 조금 번거로운 홈 화면의 일람 표시의 실장 순서를 올립니다. 프론트 구현은 완료되었다고 합니다. 개발 환경 rails 5.2.4.1 루비 2.5.1 마크업은 함몰로 갔다. ※아웃풋을 위한 기술 ※초학자용으로 기술합니다 ※ 올려 놓은 사진은 동물이지만 어디까지나 테스트 이미지로 올려 놓고 있습니다. 미리 양해 바랍니다. 우선 컨트롤러의 ... 색인haml루비Rails 초보자! current_user의 사용법~ 로그인중의 유저명을 표시~ current_user로 로그인중인 사용자 이름과 이메일 주소를 표시하는 방법을 소개합니다. 쓰기 시작할 때 current_user 앞에 = 를 잊지 마세요! 사용자 이름 표시 ~current_user~ 이메일 주소를 표시하고 싶습니다 ↓ 왜 이렇게 = current_user .name 또는 = current_user .email와 같이 될까 하면 , , 테이블에 주목. ○users 테이블 ... MySQLhamlRails HAML %button을 붙이고 submit 버튼에 폰트 오삼 아이콘을 붙인다 submit 버튼(송신용 버튼)에 폰트 오삼의 아이콘을 붙이고 싶다. 그러나 다음과 같이 해 버리면, 잘 가지 않습니다. _main_bar.html.haml main_bar.scss 이렇게 됩니다. 종이 비행기가 전송 버튼에서 튀어 나왔습니다. 그래서 이렇게 변경하여 종이 비행기를 보내기 버튼 안에 넣습니다. _main_bar.html.haml main_bar.scss 무사히 성공(＾∀＾) ... HTMLhaml PAY.JP에서 신용카드를 등록하는 방법 프로그래밍 초보자가 비망록을 위해 쓰고 있으므로주의하시기 바랍니다. 이번에는 카드 등록이 가능합니다. PAY.JP란? PAY.JP를 사용하면 쉽게 신용카드 등록을 할 수 있다. 자세한 내용은 pay.jp 사이트를 확인하십시오. ＜ ＞ 사이트에서 사용자 등록. PAY.JP의 API를 이용하려면 사용자 등록을 하고 API 페이지에서 API 키를 가져와야 합니다. 사용자를 등록하면 테스트 키와 프... haml루비jQueryRails5 ActionView::MissingTemplate in Groups#new 오류 해결 예 render 메소드로 표시하려고 하는, view 파일이 없다고 하는 내용입니다 필자의 경우는 같은 groups 폴더내의 form이라고 하는 파일로 기재한 것을 인용해 new 파일로 표시하려고 했습니다. (아래 참조) <오류 문장> <오류와 관련된 groups 폴더의 파일> new.html.haml form.html.haml 구문을 확인해 보면 어디에도 실수가 없기 때문에, 고민하고 있었던 곳... haml루비Rails 실무 경험 없는 내가 Rails에서 「아이디어 투고 서비스」를 릴리스 해 보았다 2019/12/21부터 Rails를 사용하여 오리지널 웹 서비스를 개발하기 시작하여 2020/1/4에 출시했습니다. 실무 경험이 없는 내가, 독학+스쿨에서 기른 스킬로 제작하고 있으므로 따뜻한 눈으로 봐 주세요... 서비스명은 「ideaSpace」로, 평상시의 생활 속에서 떠오른 아이디어를 SNS 감각으로 부담없이 「투고」＆「공유」할 수 있는 WEB 서비스입니다. 나를 포함해, 개인으로 무언... hamlRails초보자루비AWS jQuery에서 의사 요소 (::before,::after 등)에 변화를 추가합니다 (바람)! ! jQuery에서 "의사 요소에 변화를 더하는 것은 어떻게 할 것인가", "원래 의사 요소는 요소로서 취득할 수 있을까~"라고 조금 고전했기 때문에, 비망록으로서 남깁니다. 매우 세부적인 점입니다만, Category 와 Color 의 우단에 ▲ 가 있어, 이벤트 발화시 (mouseover), ▼ 가 되어 있습니다. 이 ▲ 및 ▼는 擬似要素::after입니다. 변화가 더해져, 방향이 바뀌고 있는... haml의사 요소자바스크립트jQueryCSS collection_check_boxes를 만드는 방법 haml을 사용하여 ransack과 collection_check_boxes를 사용하여 검색 기능을 구현했습니다. 그 때 속성 등에 고생했기 때문에 기사로합니다. complex-search.haml 각 코드를 분해하여 설명 = b.check_box에서 다음과 같은 확인란을 화면에 표시 확인란 옆에 레이블이 지정된 문자를 표시합니다. 이 문자가 어디에서 당겨 졌는지 말하면 · · exhibit... hamlRails [ruby on rails] githubDesktop을 사용하여 github 저장소에 디렉토리를 UL하는 방법 1. 신규 앱 작성(버전 지정을 하고 rails new를 한다) · .gitignore 정보 3.haml 실장 4. 컨트롤러 뷰 라우팅 생성 5.Sass의 도입(리셋 css"YUI3"도입) 6. 뷰를 마크 업 (큰 프레임 작성) 7.참고 페이지 ・참조 소스 Ruby on Rails 버전 변경 (Rails의 버전에 따라 들어 있는 파일이나 Gem이 다릅니다. 그래서 설정 방법이 달라집니다. 이... GitHubRailshamlRails5 Visual Studio Code의 Haml은 이것입니다! Indent-Rainbow Haml은 상당히 들여쓰기의 판정에 힘들군요. 반각 스페이스 1개분 어긋나 있으면 곧바로 에러가 됩니다. 그래서 VSCode를 사용하고 있는 중에서 발견한 것이 이 「Indent-Rainbow」. 다만, 디폴트라고 「응?」라고 생각하는 일이 있었으므로 간단한 커스터마이즈 방법도 실어 둡니다. 이름 그대로, 들여쓰기마다 색을 덧붙이는 것입니다. ※자신의 VSCode는 배경을 흰색으로 하고 있기... hamlindent-rainbowVSCode SCSS에 색 변수를 넣으면 SyntaxError로 화난다. 어째서... 내가 한 일은 ... stylesheets/config/colors stylesheets/application.scss 글쎄, 그래 ... 분명히 오류의 원인은 소개 rails new로 작성 application.css에 설명되어 있습니다. 1행부터 15행째의 코멘트 아웃 같은 녀석. scss로 다시 쓸 때 파일 이름만 바꾸고 있기 때문에 내용이 그대로 있었기 때문에? 같다. 다... hamlRailsHTMLscssCSS haml의 틈을 채우기 haml에서 뷰를 편집하는 동안 엉망이 될 수 있었기 때문에 해결책입니다. 한마디로 틈새가 굉장히 신경이 쓰였을 뿐입니다. 1️⃣편집전 sample.html.haml 이것을 편집하여 "빨간색"부분의 문자색을 빨간색으로 만들려고했습니다. 2️⃣ 편집 후 sample.html.haml span 태그로 color: red 을 맞춘 곳 어머? 생각했던 것과 다르다. 편집 전 편집 후 margin이나... haml html의 특수 문자 표시 Rails로 어플리케이션을 작성하고 있을 때, 데이타베이스로부터 당겨 온 수치에, haml로 단위로서 「%」를 붙이려고 하면 오류가 발생했기 때문에 조사했습니다. 오류의 경우 index.html.haml record.GA라는 것이 데이터베이스에서 가져온 수치입니다. 그 후에 '%'를 붙이려고 했습니다. 결과, 이렇게 되었습니다. 분명 태그로 보인 것 같습니다. 수정한 경우 index.html... HTMLhaml [Rails] 로딩 기능 구현 이번 동영상을 투고한 후 등 로드하는 시간이 걸리거나 하고, 기다리는 시간이 있었던 것이 신경이 쓰였으므로 이하와 같은 로딩의 애니메이션의 구현을 했습니다. 환경 Rails 5.2.3 Ruby 2.5.1 여러 가지 방법이 있지만 제 경우에는 다음을 참고하여 CSS로 애니메이션을 만들었습니다. 참고 자료 뷰 파일 우선 application.html.haml 파일에 로딩 애니메이션용의 클래스를 ... SasshamlRailsjQuery prompt는 render로 사라집니다. MVC의 흐름으로 불릴 때 render로 호출 할 때 아무래도 사양인것 같은…? Select prompt option disappears when validation fails in Rails You can achieve the results you want by setting :include_blank to the string you were using for prompt. 그래서 prom... collection_selecthamlRailsHTML루비 haml으로 쓰자. haml의 쓰는 방법을 언제나 조사하고 있으므로, 사용한 것을 정리하고 있습니다. 그 때마다 갱신하고 있습니다. input 태그 form_for link_to img a 태그 p 태그 안에 a 태그로 링크를 붙이고 싶을 때 화면 표시 ★ a 태그가 아니라 link_to에서도 가능합니다... hamlRails 【SCSS】CSS로 화살표에 애니메이션을 붙인다 안녕하세요! 오늘도 계속 프런트 구현 중에서 편리한 CSS 발견했기 때문에 비망록으로서. 완성형 게다가 일부 저스펙스 마호라면 js의 애니메이션은 따끈따끈 하는 일이 있는 것 같다. 렌더링 처리를 할 때, js는 CPU만으로 처리합니다만 css는 GPU를 병용해 처리하는 것 같아 움직임이 매끄러워진다는 것. 렌더링文字のデータを読み取って、実際の画面に映る画像や映像などに変換すること。文字データが読み... hamlHTMLCSSHoverAnimate 【jQuery】toggle 메소드로 표시→비표시의 이벤트 구현 안녕하세요! 오늘은 js/jQuery로 구현하는 부분이 있어, 그 중에서 toggle가 매우 편리했기 때문에 비망록으로서. toggle 메소드는 표시·숨기기를 바꿀 수가 있는 jQuery의 편리한 메소드. hide와 show가 합체한 메소드. 구현하고 싶은 것 준비 gem 'jquery-rails' 설명bunde install application.js jQuery 라이브러리를 로드하자. J... hamlRails자바스크립트jQueryToggle devise를 사용하지 않고 플래시 메시지를 구현하는 방법 로그인 성공 시나 메시지를 게시할 때 페이지 상단에 플래시 메시지를 표시할 수 있도록 하고 싶습니다. 어느 동작이 실행되었을 때, 화면에 그 동작이 성공했는지 실패했는지를 알려 주는 기능입니다. Rails의 flash는 해시 객체로 설정됩니다. flash 메시지를 표시하려면 먼저 view를 만듭니다. flash 메시지의 코드를 작성할 때 부분 템플릿을 사용하는 것이 바람직합니다. 이번에는 h... hamlRails label을 사용하여 file_field를 지우는 방법 아이콘을 클릭하면 이미지를 선택하여 업로드할 수 있도록 구현하고 싶다. file_feild를 코드에 작성하면 이미지를 업로드할 수 있습니다. file_filed는 form_for에서 사용할 수 있는 양식입니다. 설명은 다음과 같습니다. 아이콘을 클릭하여 이미지를 게시할 수 있게 하려면 아이콘과 file_field를 연결해야 합니다. i 태그와 file_field를 label로 둘러싸면 아이콘... form_forhaml 이전 기사 보기
연말이므로 웹 앱을 만들었습니다. minmax 패널을 번갈아 가서 총 득점을 겨루는 게임이다. 선수는 좋아하는 위치에서 시작된다. 후손은 선수가 선택한 위치를 포함한 세로 일렬 중에서 패널을 선택한다. 다시 선수는 후손이 선택한 패널을 포함한 가로 일렬 중에서 패널을 선택한다. 한번 선택한 패널은 선택할 수 없다. 패스는 할 수 없다. 패널을 선택할 수 없었던 시점에서, 합계 득점이 높은 쪽의 승이다. 게임 시작. 처음에는 ... AngularhamlCoffeeScriptgruntjasmine [font-awsome 오류]File to import not found or unreadable: font-awesome-sprockets. 오류 정보 데스크탑(뒤쪽에서 제작하고 있던 파일)에서는 움직이고 있던 데이터를 홈 디렉토리(실전의 파일)에 옮겼을 때 상기와 같은 에러가 나왔습니다. 1. 일반적인 원인 ・Gemfile 속에 gem 'font-awesome-sass'가 빠져 있다 ・app/stylesheets/application.scss 안에 @import "font-awesome-sprockets" 와 @import "font-aw... hamlRailsscssFontAwesome루비 FontAwesome 소개 FontAwesome이란? Haml에서 사용할 때 1.FontAwesome 용 gem 설치 2.import 3.Haml의 기술 방법 Html로 사용할 때 1. HTML 파일에 설명 참고 페이지 끝에 웹 폰트의 일종으로, 문자를 취급하는 것처럼 아이콘을 표시시킬 수 있다 Gemfile Gemfile에 추가하면 bundle install 서버를 다시 시작 application.scss 보려는 페... hamlRailsHTMLscssFontAwesome 【Rails】 gem "font-awesome-rails"가 작동하지 않고 아무것도 표시되지 않을 때의 대처법 이와 같이, 2개의 아이콘을 Gem font-awesome-rails 로 오른쪽에 배치하고 싶다. 1, 이번 고전한 현상으로, 아무것도 표시되지 않습니다. 가능한 원인 패턴은 ・아이콘의 기술 방법, 지정 방법이 잘못되어 있다. · font-awesome 버전 2, 이쪽은, 표시되었지만 아이콘이 나오지 않는다. · 많은 경우는 css에서 font-famiry를 지정 할 수 없습니다. ・그 외 ... hamlRailsscssFontAwesome루비 [Rails5] 라디오 버튼을 버튼으로 설정 radio button의 디자인에 능숙하고, 마무리는 이쪽 new.html.haml f.radio_button [컬럼 이름], [선택했을 때 컬럼에 넣고 싶은 값], id, class f.label [라벨 이름], for:[연동시키고 싶은 radio button의 id], class 완성 scss는 이쪽 new.scss label에 for를 붙이면, radio button과 연동하게 된다 이... scssRailshamlFontAwesome Rails에서 FontAwesome 사용 FontAwesome 사용 준비 FontAwesome을 haml에서 FontAwesome을 버튼으로 사용 (최종 목표) link 파일 선택 아이콘을 자유롭게 사용할 수 있습니다! 단번에 사이트가 좋은 느낌이 됩니다. /assets/stylesheets/application.scss 이것으로 준비 완료입니다. 'edit' 부분은 FontAwesome 페이지에서 사용하려는 아이콘을 찾고, 이런 ... hamlRailsFontAwesome haml을 사용하기 위한 추억 on RubyMine2018.3 Ruby-mine은 haml의 보완 기능이라도 있어 편안합니다. 왠지 템플릿이 준비되어 있지 않은 것은 기분 나쁘지만. 우선, 설정으로서는 이런 느낌으로 지금은 스트레스리스 빠른 참조 상세 문서 indent는 공간? 탭? 들여쓰기는 하드탭이라도 소프트탭(space)이라도 좋지만, 혼재는 허용되지 않는다고 한다. 문서에서 자동으로 판단된다는 것 클래스에 두 개 이상하고 싶을 때는? %div{:... RubyMinehamlRails React.js - HAML 스타일에 쓰는 방법 요 전날 을 읽고 조금 궁리하는 것만으로 React.js를 HAML 스타일로 쓸 수 있다는 것을 깨달았다. React.js를 평소에 사용한다 처럼 쓰고 싶다. 목표 보통 JSX + CoffeeScript로 쓰면 다음과 같다. ＜＞를 배제하고 싶다. 1. JSX를 사용하지 않고 CoffeeScript로 작성 JSX는 선택사항으로서 준비되어 있지만, 필요조건이 아니라고 다큐멘테이션에 쓰여져 있다... hamlReactCoffeeScript 드래그 앤 드롭에 의한 투고 내용, 비동기 삭제. [jQuery, Rails] 해당 개소에 투고 내용을 드롭했을 때에 비동기로 삭제를 하는 것입니다. 이미지를 왼쪽 하단의 휴지통 아이콘에 드롭했을 때에 이벤트를 발화시켜, 비동기로 삭제하고 있습니다. 이미지가 드래그 되어 있는 동안에 휴지통의 아이콘에 새로운 클래스를 부여해, 애니메이션과 같이 구현하고 있습니다. jQuery UI 도입 jQuery UI는 jQuery를 기반으로 한 JavaScript 라이브러리이기 때문... haml아약스RailsjQuery 이미지 이미지 나열 현재 프로그래밍 스쿨에서 프리마 앱을 5 명으로 구현 중 조금 번거로운 홈 화면의 일람 표시의 실장 순서를 올립니다. 프론트 구현은 완료되었다고 합니다. 개발 환경 rails 5.2.4.1 루비 2.5.1 마크업은 함몰로 갔다. ※아웃풋을 위한 기술 ※초학자용으로 기술합니다 ※ 올려 놓은 사진은 동물이지만 어디까지나 테스트 이미지로 올려 놓고 있습니다. 미리 양해 바랍니다. 우선 컨트롤러의 ... 색인haml루비Rails 초보자! current_user의 사용법~ 로그인중의 유저명을 표시~ current_user로 로그인중인 사용자 이름과 이메일 주소를 표시하는 방법을 소개합니다. 쓰기 시작할 때 current_user 앞에 = 를 잊지 마세요! 사용자 이름 표시 ~current_user~ 이메일 주소를 표시하고 싶습니다 ↓ 왜 이렇게 = current_user .name 또는 = current_user .email와 같이 될까 하면 , , 테이블에 주목. ○users 테이블 ... MySQLhamlRails HAML %button을 붙이고 submit 버튼에 폰트 오삼 아이콘을 붙인다 submit 버튼(송신용 버튼)에 폰트 오삼의 아이콘을 붙이고 싶다. 그러나 다음과 같이 해 버리면, 잘 가지 않습니다. _main_bar.html.haml main_bar.scss 이렇게 됩니다. 종이 비행기가 전송 버튼에서 튀어 나왔습니다. 그래서 이렇게 변경하여 종이 비행기를 보내기 버튼 안에 넣습니다. _main_bar.html.haml main_bar.scss 무사히 성공(＾∀＾) ... HTMLhaml PAY.JP에서 신용카드를 등록하는 방법 프로그래밍 초보자가 비망록을 위해 쓰고 있으므로주의하시기 바랍니다. 이번에는 카드 등록이 가능합니다. PAY.JP란? PAY.JP를 사용하면 쉽게 신용카드 등록을 할 수 있다. 자세한 내용은 pay.jp 사이트를 확인하십시오. ＜ ＞ 사이트에서 사용자 등록. PAY.JP의 API를 이용하려면 사용자 등록을 하고 API 페이지에서 API 키를 가져와야 합니다. 사용자를 등록하면 테스트 키와 프... haml루비jQueryRails5 ActionView::MissingTemplate in Groups#new 오류 해결 예 render 메소드로 표시하려고 하는, view 파일이 없다고 하는 내용입니다 필자의 경우는 같은 groups 폴더내의 form이라고 하는 파일로 기재한 것을 인용해 new 파일로 표시하려고 했습니다. (아래 참조) <오류 문장> <오류와 관련된 groups 폴더의 파일> new.html.haml form.html.haml 구문을 확인해 보면 어디에도 실수가 없기 때문에, 고민하고 있었던 곳... haml루비Rails 실무 경험 없는 내가 Rails에서 「아이디어 투고 서비스」를 릴리스 해 보았다 2019/12/21부터 Rails를 사용하여 오리지널 웹 서비스를 개발하기 시작하여 2020/1/4에 출시했습니다. 실무 경험이 없는 내가, 독학+스쿨에서 기른 스킬로 제작하고 있으므로 따뜻한 눈으로 봐 주세요... 서비스명은 「ideaSpace」로, 평상시의 생활 속에서 떠오른 아이디어를 SNS 감각으로 부담없이 「투고」＆「공유」할 수 있는 WEB 서비스입니다. 나를 포함해, 개인으로 무언... hamlRails초보자루비AWS jQuery에서 의사 요소 (::before,::after 등)에 변화를 추가합니다 (바람)! ! jQuery에서 "의사 요소에 변화를 더하는 것은 어떻게 할 것인가", "원래 의사 요소는 요소로서 취득할 수 있을까~"라고 조금 고전했기 때문에, 비망록으로서 남깁니다. 매우 세부적인 점입니다만, Category 와 Color 의 우단에 ▲ 가 있어, 이벤트 발화시 (mouseover), ▼ 가 되어 있습니다. 이 ▲ 및 ▼는 擬似要素::after입니다. 변화가 더해져, 방향이 바뀌고 있는... haml의사 요소자바스크립트jQueryCSS collection_check_boxes를 만드는 방법 haml을 사용하여 ransack과 collection_check_boxes를 사용하여 검색 기능을 구현했습니다. 그 때 속성 등에 고생했기 때문에 기사로합니다. complex-search.haml 각 코드를 분해하여 설명 = b.check_box에서 다음과 같은 확인란을 화면에 표시 확인란 옆에 레이블이 지정된 문자를 표시합니다. 이 문자가 어디에서 당겨 졌는지 말하면 · · exhibit... hamlRails [ruby on rails] githubDesktop을 사용하여 github 저장소에 디렉토리를 UL하는 방법 1. 신규 앱 작성(버전 지정을 하고 rails new를 한다) · .gitignore 정보 3.haml 실장 4. 컨트롤러 뷰 라우팅 생성 5.Sass의 도입(리셋 css"YUI3"도입) 6. 뷰를 마크 업 (큰 프레임 작성) 7.참고 페이지 ・참조 소스 Ruby on Rails 버전 변경 (Rails의 버전에 따라 들어 있는 파일이나 Gem이 다릅니다. 그래서 설정 방법이 달라집니다. 이... GitHubRailshamlRails5 Visual Studio Code의 Haml은 이것입니다! Indent-Rainbow Haml은 상당히 들여쓰기의 판정에 힘들군요. 반각 스페이스 1개분 어긋나 있으면 곧바로 에러가 됩니다. 그래서 VSCode를 사용하고 있는 중에서 발견한 것이 이 「Indent-Rainbow」. 다만, 디폴트라고 「응?」라고 생각하는 일이 있었으므로 간단한 커스터마이즈 방법도 실어 둡니다. 이름 그대로, 들여쓰기마다 색을 덧붙이는 것입니다. ※자신의 VSCode는 배경을 흰색으로 하고 있기... hamlindent-rainbowVSCode SCSS에 색 변수를 넣으면 SyntaxError로 화난다. 어째서... 내가 한 일은 ... stylesheets/config/colors stylesheets/application.scss 글쎄, 그래 ... 분명히 오류의 원인은 소개 rails new로 작성 application.css에 설명되어 있습니다. 1행부터 15행째의 코멘트 아웃 같은 녀석. scss로 다시 쓸 때 파일 이름만 바꾸고 있기 때문에 내용이 그대로 있었기 때문에? 같다. 다... hamlRailsHTMLscssCSS haml의 틈을 채우기 haml에서 뷰를 편집하는 동안 엉망이 될 수 있었기 때문에 해결책입니다. 한마디로 틈새가 굉장히 신경이 쓰였을 뿐입니다. 1️⃣편집전 sample.html.haml 이것을 편집하여 "빨간색"부분의 문자색을 빨간색으로 만들려고했습니다. 2️⃣ 편집 후 sample.html.haml span 태그로 color: red 을 맞춘 곳 어머? 생각했던 것과 다르다. 편집 전 편집 후 margin이나... haml html의 특수 문자 표시 Rails로 어플리케이션을 작성하고 있을 때, 데이타베이스로부터 당겨 온 수치에, haml로 단위로서 「%」를 붙이려고 하면 오류가 발생했기 때문에 조사했습니다. 오류의 경우 index.html.haml record.GA라는 것이 데이터베이스에서 가져온 수치입니다. 그 후에 '%'를 붙이려고 했습니다. 결과, 이렇게 되었습니다. 분명 태그로 보인 것 같습니다. 수정한 경우 index.html... HTMLhaml [Rails] 로딩 기능 구현 이번 동영상을 투고한 후 등 로드하는 시간이 걸리거나 하고, 기다리는 시간이 있었던 것이 신경이 쓰였으므로 이하와 같은 로딩의 애니메이션의 구현을 했습니다. 환경 Rails 5.2.3 Ruby 2.5.1 여러 가지 방법이 있지만 제 경우에는 다음을 참고하여 CSS로 애니메이션을 만들었습니다. 참고 자료 뷰 파일 우선 application.html.haml 파일에 로딩 애니메이션용의 클래스를 ... SasshamlRailsjQuery prompt는 render로 사라집니다. MVC의 흐름으로 불릴 때 render로 호출 할 때 아무래도 사양인것 같은…? Select prompt option disappears when validation fails in Rails You can achieve the results you want by setting :include_blank to the string you were using for prompt. 그래서 prom... collection_selecthamlRailsHTML루비 haml으로 쓰자. haml의 쓰는 방법을 언제나 조사하고 있으므로, 사용한 것을 정리하고 있습니다. 그 때마다 갱신하고 있습니다. input 태그 form_for link_to img a 태그 p 태그 안에 a 태그로 링크를 붙이고 싶을 때 화면 표시 ★ a 태그가 아니라 link_to에서도 가능합니다... hamlRails 【SCSS】CSS로 화살표에 애니메이션을 붙인다 안녕하세요! 오늘도 계속 프런트 구현 중에서 편리한 CSS 발견했기 때문에 비망록으로서. 완성형 게다가 일부 저스펙스 마호라면 js의 애니메이션은 따끈따끈 하는 일이 있는 것 같다. 렌더링 처리를 할 때, js는 CPU만으로 처리합니다만 css는 GPU를 병용해 처리하는 것 같아 움직임이 매끄러워진다는 것. 렌더링文字のデータを読み取って、実際の画面に映る画像や映像などに変換すること。文字データが読み... hamlHTMLCSSHoverAnimate 【jQuery】toggle 메소드로 표시→비표시의 이벤트 구현 안녕하세요! 오늘은 js/jQuery로 구현하는 부분이 있어, 그 중에서 toggle가 매우 편리했기 때문에 비망록으로서. toggle 메소드는 표시·숨기기를 바꿀 수가 있는 jQuery의 편리한 메소드. hide와 show가 합체한 메소드. 구현하고 싶은 것 준비 gem 'jquery-rails' 설명bunde install application.js jQuery 라이브러리를 로드하자. J... hamlRails자바스크립트jQueryToggle devise를 사용하지 않고 플래시 메시지를 구현하는 방법 로그인 성공 시나 메시지를 게시할 때 페이지 상단에 플래시 메시지를 표시할 수 있도록 하고 싶습니다. 어느 동작이 실행되었을 때, 화면에 그 동작이 성공했는지 실패했는지를 알려 주는 기능입니다. Rails의 flash는 해시 객체로 설정됩니다. flash 메시지를 표시하려면 먼저 view를 만듭니다. flash 메시지의 코드를 작성할 때 부분 템플릿을 사용하는 것이 바람직합니다. 이번에는 h... hamlRails label을 사용하여 file_field를 지우는 방법 아이콘을 클릭하면 이미지를 선택하여 업로드할 수 있도록 구현하고 싶다. file_feild를 코드에 작성하면 이미지를 업로드할 수 있습니다. file_filed는 form_for에서 사용할 수 있는 양식입니다. 설명은 다음과 같습니다. 아이콘을 클릭하여 이미지를 게시할 수 있게 하려면 아이콘과 file_field를 연결해야 합니다. i 태그와 file_field를 label로 둘러싸면 아이콘... form_forhaml 이전 기사 보기