FILife

.form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: absolute; top: 0; padding: 7px 0 0 13px; transition: all 200ms; opacity: 0.5; color: red; } .form-control:focus + .form-control-placeholder, .form-control:valid + .form-control-placeholder { font-size: 75%; transform: translate3d(0, -100%, 0); opacity: 1; } 매우 잘 된다. 출처: stackoverflow.com/a/58736840 H..

참고1. https://github.com/appstract/laravel-blade-directives참고2. https://github.com/duncan3dc/blade blade template을 쓰다 보면, 레이아웃 내에 준비한 scripts나 styles 섹션에 각 태그를 넣어주는 일은 무척 귀찮다. @js(), @css() 와 같이 해결하려고 시도 해 봤다. 먼저 Providers/AppServiceProvider.php 에 아래와 같이 내용을 추가한다. public function boot() { Blade::directive('css', function ($css) { return ''; }); Blade::directive('js', function ($js) { return ''; }..

이런게 있다는걸 이제야 알았다. 심지어 5.4 이전 버전에서도 exlixir 라는 이름으로 존재했었다고 한다. 애초에 composer require를 통해 laravel을 설치했으니 그럴만도 하다. 기존 프로젝트에 npm i -S laravel-mix 를 할수도 있지만, 그 부분은 알아서 응용하는걸로... ~ 우분투 18.04, node와 npm 설치 된 것으로 가정 ~ 우선 OS에 laravel installer를 설치해준다. composer require global "laravel/installer" 다음으로 laravel 커맨드를 실행하기 위해 installer 커맨드의 PATH를 잡아줘야 한다. ~/.bashrc 를 열어 아래와 같이 PATH를 추가 해 준다. PATH=$PATH:~/.confi..

예를들어 이런 구조다. 이 상태에서, 1) .container는 부모 요소에서 상속 받은 너비의 100%.2) .left-child는 200px로 고정.3) .right-child는 그 나머지. 구글링 해보면 display:inline-block;을 써라, 200px와 100%로 하고 margin-left:200px; 를 줘라 등등이 나온다. 해결되지 않았다. 그러던 중 발견한 stackoverflow의 한 포스팅.. CSS3에는 함수가 있었다! calc() 함수를 이용하여 100%에서 200px를 빼주면 간단히 된다. 물론 sass나 less도 필요ㅇ벗다. 추가로 css3의 calc() 함수를 지원하는 브라우저는 아래 링크를 따라 가 보면 알 수 있다. http://techbug.tistory.com/..

-FF/Safari/Chrome opacity:0.3;-moz-opacity:0.3; (0~1. 소숫점 단위) -IE filter:alpha(opacity=30); (0~100)

CSS파일이나, 해당 페이지의 style 정의 부분에 다음과 같이 추가합니다. -webkit-text-size-adjust:none; 이 한줄을 추가하면 화면이 rotate 될 때에도 글자 크기가 변하지 않습니다.