[Rails] i18n에서 이미지 업로드 버튼을 바꾸는 디자인 언어!

정황
i18n으로 이미지 업로드 단추를 바꾸는 언어...
저는 attachment field가 기본적으로 일본어인 것 같아요.
언어 설정을 바꿀 수 없을 것 같아요.
아마 인터넷 브라를 영어로 바꾸면 영어가 되겠지?!
안 해봤으니까 그냥 예상, 언어를 바꾸기 위해서
브라우저의 언어 전환 효율이 너무 낮아요...w)

브라우저에 있는 언어가 일본어로 바뀌었기 때문이에요.
영어 같지만 i18n에서 언어를 바꿀 수 없습니다!
그럼, 어떡하지...
CSS로 덮어쓰는 디자인은 OK.
애초에 자바스크립트로 위쪽을 누르면 아래쪽도 눌렀어요.
Javascript를 썼으면 좋겠다는 조언을 받았지만.
CSS로 해결할 수 있음!!
『pointer-events: none』
만약 css가 이 인코딩을 사용한다면, 위에 디자인을 덮어도 된다
위의 디자인이 잘못되면 아래를 클릭할 수 있습니다!
강자의 코드라고 합니다.
제가 코드를 어떻게 쓰는지 설명해 드릴게요!
코드 설명
사실 내가 만든 버튼 디자인은 이거야.
왜냐하면 Choose files는 원래 attachment field에 있는 CSS이기 때문이죠.
이것은 스스로 만든 버튼이다.
일반적인 경우,attachment field 같은 단추에
CSS 버튼을 누를 수 없습니다...
poinster none 이 css를 써서 위에 덮어도 버튼을 누를 수 있는 기적 w

우선 코드를 보십시오.
examplehtmlcode

      <div class="field">
        <div class="col-sm-12 col-md-8 col-lg-6 px-5 px-sm-0 mx-auto mt-3">
          <label><%= t 'devise.registrations.new.profile_image' %></label>
          <br>
          <div class="attachment_relative">
            <%= f.attachment_field :profile_image, class:"mt-1 attachment_field" %>
            <div class="attachment-absolute"><%= t 'devise.registrations.new.button' %></div>
          </div>
        </div>  
      </div>

examplecsscode

.attachment_relative{
    position:relative;
}    

.attachment-absolute{
    position:absolute;
    width: 135px;
    text-align: center;
    padding: 5px 0;
    pointer-events: none;
    top: 0;
    left: calc(-0.7%);
    background-color: #EEEEEE;
    border-radius:7px;
    // border: 1px solid;
}  

간단하게 설명해 드리자면 포지션 리액션으로 한 바퀴 빙 둘러주세요.
거기서 포지션 absolute로 버튼 디자인을 만들고 있어요.
position absolute의 css pointer-events:none;도입을 통해
아래 버튼을 눌러야 될 것 같아!

위 그림 오른쪽 상단의 언어 전환 버튼은 i18n으로 만드는 것이 가장 좋다
attachment field 언어를 전환할 수 없음 (울음)
그리하여 고전에 빠졌습니다. css는 위에서 덮었습니다. i18n의
글씨를 쓰면서 버튼의 언어 전환이 강요되었습니다!
총결산
・refile을 가져오면 사용할 수 있습니다.attachment field는 브라우저의 언어에 따라 언어를 전환합니다.
・ 웹 사이트에서 i18n 등 언어 전환 시 attachment field 언어는 전환되지 않으므로 css 사용
・pointer-event: none을 사용하면 디자인과 동시에 아래 단추를 누를 수 있습니다.
pointer non event 아래 기사 참고, 가능하면 봐주세요\
참고 자료:
https://on-ze.com/archives/7174
그럼 다음 기사에서 만나요!
초♪