코스모스팜 스레드
input type="button" css수정시 모바일에서 적용이 안돼요
안녕하세요 워드프레스로 쇼핑몰 구축을 목표로 공부중인 개린이 디자이너입니다.(아무것도 모르니 실컷 지적해주세요)
이전에도 경험했었는데 모바일기기의 버튼과 웹에서 보이는 버튼에 차이가 생기는 이유가 무엇일까요..?
WooCommerce Quick Buy플러그인으로 생성한 [바로구매] 버튼이 말썽입니다.
css를 손대지 않으면, 기본 버튼디자인과 같은 모습으로 웹, 모바일 동일하게 작동합니다.
css를 만지고나니 모바일에서는 문제가 생기네요ㅜㅜ(모바일에서는 아예 css가 적용되지 않습니다.)
구글링해봤지만 애초에 서치능력달려 원인을 찾지 못했습니다.. 추측하는 유일한 차이점은 WooCommerce의 다른 버튼은 button인데, [바로구매]버튼은 input type="button"이라는 점이에요.
혹시나해서 플러그인파일에서 직접 input -> button으로 만들어보려고 했지만, 무슨코드를 고쳐야하는지...허허
어떻게 바로잡을 수 있을까요..?
질문을 위해 조금 더 서치(29cm, apple)해봤습니다.
버튼은 <button>, <a class="button">, <input type=""> 총 3종류로 제작되고,
-
<button>은 이전의 정보를 가져갈때 (e.g. type="submit")
-
<a class="button">은 페이지 전환시
-
<input>은 주로 type="radio"로 옵션선택
이렇게 사용하더군요.
혹시 잘못 알고있는 점이 있을까요?
지금은 모자란 실력탓에 우커머스와 유료테마를 사용중입니다. 나중에는 무거운 테마를 사용하지 않고 오직 내 사이트를 위한 커스텀제작을 목표로 하고있습니다.
-
문홍규 (5 Point)ㆍ2019.07.15 13:06
정말 감사드립니다! 이렇게 친절히 답해주시니 다들 코스모스팜을 찾는거였군요ㅜㅜ
알고보니 크롬 개발자도구로는 모바일, 웹 모두 css가 잘 적용되었는데, 아이폰 사파리를 통해 접속하면 문제가 생기는거였네요!
하지만 알려주신 플러그인코드를 수정했더니 다 잘 작동합니다ㅎㅎ 너무 감사합니다.
덧붙여주신 태그들 설명도 감사합니다(꾸벅)
-
스레드봇 (31060 Point)ㆍ2019.07.15 12:06
현재는 코드를 원래 상태로 돌리신 건지요?
저희 쪽에서 확인해보니 아래처럼 표시되고 있습니다.
브라우저의 캐시 문제는 아닌지 확인해보셔야 할 듯합니다.
크롬 브라우저에서 강력 새로고침은 Ctrl + Shift + R 입니다.
추가로, WooCommerce Quick Buy 플러그인의 바로구매 버튼은
FTP로 접속해서 /wp-content/plugins/woocommerce-quick-buy/includes/class-frontend.php 파일에서 표시하고 있는 듯합니다.
input 태그의 버튼을 button 태그로 교체하시려면
아래의 코드를 찾아서
$return .= '<input value="' . $label . '" type="button" id="' . $defined_id . '" ' . $defined_attrs . ' class="wcqb_button ' . $defined_class . '">';아래의 코드로 교체해보시겠어요?
$return .= '<button type="button" id="' . $defined_id . '" ' . $defined_attrs . ' class="wcqb_button ' . $defined_class . '">'.$label.'</button>';
<a> 태그는 페이지 이동의 기능이 있습니다.<input type="button">과 <button type="button">은 기능적으로 같습니다.
button 태그 요소에 type 속성을 정의하지 않으면 기본적으로 submit 기능을 수행합니다.
즉, <input type="submit">과 동일합니다.
input 태그에는 그 외에도 텍스트, 라디오, 체크박스 등을 사용하실 수 있습니다.
고맙습니다.
-
스레드봇 (31060 Point)ㆍ2019.07.15 09:11
안녕하세요~^^
CSS 코드 수정은 저희가 페이지를 직접 봐야 도움을 드릴 수 있을 듯합니다.
비회원으로도 확인 가능한 페이지 주소 알려주시면 살펴보겠습니다.
고맙습니다.
