Orangesea - developer

이전 포스트에서 모바일 화면 또는 width 값에 따라 html element를 숨기고, 보이게 하는 방법을 jQuery 로 소개했다. 해당 포스트에서는 jQuery 없이 Bootstrap(v4)로 화면 사이즈(width 값)에 따라 html element 를 숨기고 보이게 하는 방법을 소개하려고 한다. 방법은 아래와 같다. 링크( https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements )를 들어가면 아래와 같은 화면이 나온다. 해당 document를 보고 숨기거나 보여주면 된다.  예를 들어 아래의 div element 를 약 1000px 이상에서만 보여주고 싶다면(lg, md, sm 등을 이용해 사이즈를 결정하면 된다. 참고 링크 :  https://getbootstrap.com/docs/4.0/layout/grid/#grid-options ) <div> "약 1000px 이상에서만 보여주고 싶어요" </div>  아래와 같이 class를 추가해준다. <div class="d-none d-lg-block"> "약 1000px 이상에서만 보여주고 싶어요" </div> 

누군가 나와 같이 PC와 모바일과 레이아웃 차이가 클 때 어떻게 해야할까 고민하고 있다면 다음과 같은 솔루션이 도움이 되었으면 좋겠다. // 웹페이지 로딩이 되었을 때 넓이 값을 확인하고 기기에 따라 클래스 등을 넣어준다. $(window).load(function(event){   let windowWidth = event.currentTarget.innerWidth;   if (windowWidth > 767) {     // 모바일보다 큰 디바이스인 경우   }else{    // 모바일보다 작은 디바이스인 경우   } }); // 웹페이지 사이즈가 변경되었을 때 넓이 값을 확인하고 기기 넓이에 따라 클래스 등을 넣어준다. $(window).resize(function(event){   let windowWidth = event.currentTarget.innerWidth;   if (windowWidth > 767) {     // 모바일보다 큰 디바이스인 경우   }else{     // 모바일보다 작은 디바이스인 경우   } } javascript 로 짜는 경우는 window.onload 등으로 대체하면 똑같이 사용할 수 있다.

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

html 에서 띄어쓰기를 하고 싶다면, &nbsp;

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는 안되는건가...

table .. PC일 땐 참 좋은데 이게 모바일에선 보기 좋지 않다 .. 그럼에도 모바일에서도 보여줘야 한다면 어떻게 해야 할까? 라는 고민에 답. 1. Bootstrap과 같은 라이브러리를 이용해 반응형 테이블을 사용한다. 부트스트랩 table-responsive 관련 링크 :  https://getbootstrap.com/docs/4.4/content/tables/ 이 table-responsive를 조금 더 자유자재로(생각대로) 사용하고 싶다면 다음 링크를 참고하면 좋다. 참고 링크 :  https://mdbootstrap.com/docs/jquery/tables/responsive/ 2. jQuery를 이용해서 모바일의 경우에는 따로 처리해준다. 해당 함수는 화면의 크기가 바뀔 때마다 그걸 감지해 함수를 호출한다. $( window ).resize(function(){ }); 따라서 아래와 같은 코드를 이용하면 모바일일 때 div 값을 삭제, 추가 등의 함수를 불러와 보다 자유롭게 모바일 화면을 구성할 수 있다. $( window ).resize(function(){     var windowWidth = $( window ).width     if( windowWidth < 500 ) {        // width값이 500 미만일 때     } else {        // width값이 500 이상일 때     } }); 참고 링크 :  https://kkotkkio.tistory.com/52

footer fixed 꽤나 자주 쓰이는 부분인데 항상 할 때 마다 애를 먹었다. 그래서 기억해두려고 한다. 하단 푸터가 스크롤과 상관없이 계속 밑에 고정이 되어있게 하는 방법 ! How to fix footer location(bottom) HTML < footer > footer fix </ footer > CSS footer { position : fixed ; left : 0 px ; bottom : 0 px ; height : 60 px ; width : 100% ; background : grey ; color : white ; } Result