[펄스나인] 쉽게쓰는 UI/UX - 플로팅 퀵메뉴 정보
레이아웃 [펄스나인] 쉽게쓰는 UI/UX - 플로팅 퀵메뉴관련링크
첨부파일
테스트한 버전5.4.9
호환 가능 버전무관
본문
안녕하세요. 펄스나인 입니다.
활용도가 높은 플로팅 퀵메뉴 입니다.
position:fixed 로 우측하단에 고정되어 있고
클릭시 보였다가 사라지는 애니메이션이 포함되어 있습니다.
자세한 내용은 코드내 주석을 참고하세요!
아이콘은 구글 머티리얼 아이콘에서 svg 파일을 다운 받아서 사용했으니
https://fonts.google.com/icons 에서 적절히 변경하시면 되겠습니다.
사용방법
파일내 코드를 공통되는 페이지 (tail.php 등)에 추가하시면 됩니다.
미약하게나마 도움이 되셨으면 좋겠습니다.
감사합니다!
추천
44
44
댓글 전체
감사히 잘쓰겠습니다. 감사합니다.
댓글 감사합니다~ 복받으세요~
감사합니다
감사합니다~
우오!!! 펄스나인님 감사합니다!! 필요했던 거에요!
ㅎㅎ 타이밍이 좋았네요!
잘 써주십시요 ^^;
잘 써주십시요 ^^;
늘 유용한 스킨 감사합니다.
항상 좋은 말씀 감사합니다~! :D
ㅋㅋㅋ 좋네여 깜찍하다
ㅎㅎㅎ 댓글 감사합니다~
헐... 대박... 감사합니다.. 펄스나인님!
코드보시면 아시겠지만 별거없습니다.. ㅎㅎ
저녁 맛있게 드십시요~!
저녁 맛있게 드십시요~!
늘 감사하고 고맙습니다. ~~
^^ 좋은말씀 감사합니다~
감사합니다
감사합니다!
감사합니다.
^^
좋은 스킨 감사합니다!!
좋은말씀 감사합니다 ~!
펄스나인님의 이벤트 게시판을 사용 한 후로는 펄스나인님의 글을 유심히 보게 되었습니다. 너무나 감사합니다. 저는 이벤트 게시판을 행사 소개, 강의 소개 게시판으로 쓰고 있습니다.
참 그럴싸한 멋진 디자인입니다.
여기에 강의 듣고 난 후에 후기도 있으면 좋겠습니다.
아래 링크의 맨 하단에 구매 후기 모양 멋지네요.
안하셔도 됩니다. 그냥 참고하시라고....ㅎ
https://www.yeolimprinting.co.kr/
참 그럴싸한 멋진 디자인입니다.
여기에 강의 듣고 난 후에 후기도 있으면 좋겠습니다.
아래 링크의 맨 하단에 구매 후기 모양 멋지네요.
안하셔도 됩니다. 그냥 참고하시라고....ㅎ
https://www.yeolimprinting.co.kr/
ㅎㅎ 좋은말씀 감사합니다 !
다음 스킨작업에 한번 참고해보겠습니다 ^^
다음 스킨작업에 한번 참고해보겠습니다 ^^
와우~~
감동입니다.
감동입니다.
좋네요~ 감사합니다.^^
항상 감사합니다 ^^
멋집니다. 바로 적용했습니다.
좋은 하루 되세요.
좋은 하루 되세요.
적용해주셔서 감사합니다 ^^
편안한 하루 되십시요!
편안한 하루 되십시요!
아이콘 변경 방법에 대한 설명을 간단히라도 부탁드려도 될까요?
https://fonts.google.com/icons
들어가셔서 사용하실 아이콘을 클릭하시면
우측에 정보가 나옵니다~
우측 하단에 보시면 파란색 SVG 다운로드 버튼이 있을거에요.
눌러서 다운받으신 후에 파일을 브라우저로 여시고
우클릭 > 소스보기 하셔서 보이는 코드를 넣어주시면 됩니다.
------------
구글에서 제공하는 라이브러리를 로드해서
<span class="material-icons">help_outline</span>
이런형태로 불러와도 되지만
일부 IOS 환경에서는 안보이는 문제가 있어서
위 방법으로 넣으시는것이 좋을것 같습니다~
들어가셔서 사용하실 아이콘을 클릭하시면
우측에 정보가 나옵니다~
우측 하단에 보시면 파란색 SVG 다운로드 버튼이 있을거에요.
눌러서 다운받으신 후에 파일을 브라우저로 여시고
우클릭 > 소스보기 하셔서 보이는 코드를 넣어주시면 됩니다.
------------
구글에서 제공하는 라이브러리를 로드해서
<span class="material-icons">help_outline</span>
이런형태로 불러와도 되지만
일부 IOS 환경에서는 안보이는 문제가 있어서
위 방법으로 넣으시는것이 좋을것 같습니다~
답변 감사합니다.
감사합니다 ^^ 저두 적용하러 갑니다
댓글 감사합니다 ! ^^
안녕하세요. 저는 메뉴로 넣을게 마땅치 않아 TOP버튼을 함께 고정으로 넣어 봤습니다.
구글링해서 만든 거라 맞는지 모르겠지만 작동은 잘 하는것 같아요.
펄스나인님이 손좀 봐주실 수 있으면 완벽할것 같습니다.. ^^
https://url.kr/g5/bbs/board.php?bo_table=free_90_23z
<div class="quick quick5" onclick="location.href='#';id='MOVE_TOP_BTN'">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/></svg>
</div>
<script>
//TOP 버튼
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#MOVE_TOP_BTN').fadeIn();
} else {
$('#MOVE_TOP_BTN').fadeOut();
}
});
$("#MOVE_TOP_BTN").click(function() {
$('html, body').animate({
scrollTop : 0
}, 400);
return false;
});
});
</script>
구글링해서 만든 거라 맞는지 모르겠지만 작동은 잘 하는것 같아요.
펄스나인님이 손좀 봐주실 수 있으면 완벽할것 같습니다.. ^^
https://url.kr/g5/bbs/board.php?bo_table=free_90_23z
<div class="quick quick5" onclick="location.href='#';id='MOVE_TOP_BTN'">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/></svg>
</div>
<script>
//TOP 버튼
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#MOVE_TOP_BTN').fadeIn();
} else {
$('#MOVE_TOP_BTN').fadeOut();
}
});
$("#MOVE_TOP_BTN").click(function() {
$('html, body').animate({
scrollTop : 0
}, 400);
return false;
});
});
</script>
이미 잘 적용하셨는데요 ㅎㅎ
혹시 메뉴에 마우스 오버시 설명 문구 나오게는 어떻게 하면 되는지 알수 있을까요? 메뉴 설명을 넣고 싶어서요. ^^
자문자답) 구글은 모르는게 없네요. ^^
아래와 같이 했습니다.
<div class="quick quick5" title='제일 위로 바로가기' onclick="location.href='#';id='MOVE_TOP_BTN'">
자문자답) 구글은 모르는게 없네요. ^^
아래와 같이 했습니다.
<div class="quick quick5" title='제일 위로 바로가기' onclick="location.href='#';id='MOVE_TOP_BTN'">
네 ㅎㅎ title="" 로 표현이 가능합니다~
해결되셨다니 다행입니다 ^^
해결되셨다니 다행입니다 ^^
멋진 UI 공개해 주셔서 감사합니다.
감사합니다~ 편안한 하루 되십시요~!!
최근에 고객들이 요청을 많이 해서 폰트어썸으로 그냥 나오게 했는데,
이렇게 만들어 주시니 넘 감사합니다 ^^
이렇게 만들어 주시니 넘 감사합니다 ^^
도움이 되신다니 좋네요 ~ ^^
댓글 감사합니다!
댓글 감사합니다!
적용을 해봐야겠습니다. 감사합니다.
댓글 감사합니다~!
감사합니다
감사합니다!
매번 유용한 자료 감사합니다.
댓글 감사합니다 ^^
감사합니다. 멋집니다.
늘 좋은 소스를 올려주셔서 감사합니다.
늘 좋은 소스를 올려주셔서 감사합니다.
항상 좋은말씀 고맙습니다~!
좋게 잘 사용하고 있습니다.
즐건 하루 되세요...
즐건 하루 되세요...
댓글 감사합니다 ^^
편안한 주말 되십시요~
편안한 주말 되십시요~
target="_blank" 좀 봐주시면.....
onclick="location.href='#';" 부분을
onclick="window.open('https://sir.kr');" 이렇게
window.open('주소'); 로 바꿔주시면 되겠습니다.
추가로 모바일에서 전화걸기로 연결되도록 하려면
onclick="location.href='tel:*** 개인정보보호를 위한 휴대폰번호 노출방지 ***';"
이렇게 하시면 되겠습니다~
onclick="window.open('https://sir.kr');" 이렇게
window.open('주소'); 로 바꿔주시면 되겠습니다.
추가로 모바일에서 전화걸기로 연결되도록 하려면
onclick="location.href='tel:*** 개인정보보호를 위한 휴대폰번호 노출방지 ***';"
이렇게 하시면 되겠습니다~
감사합니다....
얻어만 가는군요~~~~
얻어만 가는군요~~~~
별말씀을요~
편안한 주말 되세요~
편안한 주말 되세요~
감사합니다!!!!!!!!!!!!!
감사합니다 ^^
멋집니다 ㅜ
별말씀을요 ^^
댓글 감사합니다!
댓글 감사합니다!
휴대폰에서 카카오톡과 문자로 갈려면 onclick="location.href='#';" 이부분 뭐라고 넣어야 하나요?
문자쓰기로 바로 보내려면 아래처럼 하시면 되겠습니다.
onclick="location.href='sms:*** 개인정보보호를 위한 휴대폰번호 노출방지 ***';"
카카오톡이 열리게 하려변 별도 스크립트 작업이 필요할것 같습니다.
onclick="location.href='sms:*** 개인정보보호를 위한 휴대폰번호 노출방지 ***';"
카카오톡이 열리게 하려변 별도 스크립트 작업이 필요할것 같습니다.
감사합니다
댓글 감사합니다~
와우 잘쓰겠습니다^^
감사합니다~ 유익한 주말 되십시요~!
잘쓰겠습니다. 감사합니다.
댓글 감사합니다~ 편안한 주말 되세요!
감사합니다.
감사합니다~!
감사합니다!^^
댓글 감사합니다 !
카카오 아이콘은 svg 소스를 어떻게 가져오나요? 구글 아이콘 사이트에 카카오는 검색해봐도 없어보이던데 ..잘 몰라서 문의드립니다.
올려드린 샘플페이지에 들어가있는
카카오 아이콘이 SVG입니다 ㅡ
저게 마음에 안드시면
구글에서 그냥 카카오로고 SVG 검색하시면 많이 나옵니다!
카카오 아이콘이 SVG입니다 ㅡ
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 191.94" width="24" fill="#3A1D1D">
<g>
<polygon class="cls-1" points="76.01 89.49 87.99 89.49 87.99 89.49 82 72.47 76.01 89.49" />
<path class="cls-1" d="M104,0C46.56,0,0,36.71,0,82c0,29.28,19.47,55,48.75,69.48-1.59,5.49-10.24,35.34-10.58,37.69,0,0-.21,1.76.93,2.43a3.14,3.14,0,0,0,2.48.15c3.28-.46,38-24.81,44-29A131.56,131.56,0,0,0,104,164c57.44,0,104-36.71,104-82S161.44,0,104,0ZM52.53,69.27c-.13,11.6.1,23.8-.09,35.22-.06,3.65-2.16,4.74-5,5.78a1.88,1.88,0,0,1-1,.07c-3.25-.64-5.84-1.8-5.92-5.84-.23-11.41.07-23.63-.09-35.23-2.75-.11-6.67.11-9.22,0-3.54-.23-6-2.48-5.85-5.83s1.94-5.76,5.91-5.82c9.38-.14,21-.14,30.38,0,4,.06,5.78,2.48,5.9,5.82s-2.3,5.6-5.83,5.83C59.2,69.38,55.29,69.16,52.53,69.27Zm50.4,40.45a9.24,9.24,0,0,1-3.82.83c-2.5,0-4.41-1-5-2.65l-3-7.78H72.85l-3,7.78c-.58,1.63-2.49,2.65-5,2.65a9.16,9.16,0,0,1-3.81-.83c-1.66-.76-3.25-2.86-1.43-8.52L74,63.42a9,9,0,0,1,8-5.92,9.07,9.07,0,0,1,8,5.93l14.34,37.76C106.17,106.86,104.58,109,102.93,109.72Zm30.32,0H114a5.64,5.64,0,0,1-5.75-5.5V63.5a6.13,6.13,0,0,1,12.25,0V98.75h12.75a5.51,5.51,0,1,1,0,11Zm47-4.52A6,6,0,0,1,169.49,108L155.42,89.37l-2.08,2.08v13.09a6,6,0,0,1-12,0v-41a6,6,0,0,1,12,0V76.4l16.74-16.74a4.64,4.64,0,0,1,3.33-1.34,6.08,6.08,0,0,1,5.9,5.58A4.7,4.7,0,0,1,178,67.55L164.3,81.22l14.77,19.57A6,6,0,0,1,180.22,105.23Z" />
</g>
</svg>
저게 마음에 안드시면
구글에서 그냥 카카오로고 SVG 검색하시면 많이 나옵니다!
예쁘게 잘쓰겠습니다! 감사해요!
댓글 감사합니다 ^^ 잘 써주십시요~
감사히 잘쓰겠습니다. 감사합니다.
댓글 감사합니다!
쌩코딩으론 해봤어도 그누에서 보게되다니 반갑네용
ㅎㅎ 도움이 되셨으면 좋겠습니다~
감사합니다 :)
댓글 감사합니다~!
감~사합니다
감사합니다!
감사합니다
댓글 감사합니다~
유용한 정보 정말 감사드립니다!
댓글 감사합니다 ^^ 편안한 한주 보내십시요~
좋은 스킨입니다. ㅠㅡㅜ 감사합니다.
궁금한게있는데요 처음부터 메뉴들이 펼쳐져있게 하려면 어떻게 해야될까요?
궁금한게있는데요 처음부터 메뉴들이 펼쳐져있게 하려면 어떻게 해야될까요?
댓글 감사합니다~
파일내 아래 스타일에서 끝에 display:none; 을 제거해주세요~
.quick1 {background-color: #F7E600; display: none;}
.quick2 {background-color: #fff; margin-top: 8px; display: none;}
.quick3 {background-color: #fff; margin-top: 8px; display: none;}
감사합니다!
파일내 아래 스타일에서 끝에 display:none; 을 제거해주세요~
.quick1 {background-color: #F7E600; display: none;}
.quick2 {background-color: #fff; margin-top: 8px; display: none;}
.quick3 {background-color: #fff; margin-top: 8px; display: none;}
감사합니다!
감사합니다~
^^
감사합니다
댓글 감사합니다~!
사용 방법을 잘모르겠는데 자세히좀 알려주실수 있으신가요?
설치를하거나 하는게 아닙니다~
코드를 보시고 사용하실곳에 붙여넣으시면 됩니다~
코드를 보시고 사용하실곳에 붙여넣으시면 됩니다~
메인화면에 넣으려고하면 어떤 파일을 하면 될까요?!
맨위쪽에 첨부파일(아래캡쳐참고)을 다운로드하셔서
압축을 푸시면 html파일이 하나 있습니다.
html파일을 메모장이나 편집기로 열으셔서 보이는 코드를
보이고자하시는 페이지에 추가하시면 되겠습니다~
감사합니다.
압축을 푸시면 html파일이 하나 있습니다.
html파일을 메모장이나 편집기로 열으셔서 보이는 코드를
보이고자하시는 페이지에 추가하시면 되겠습니다~
감사합니다.
위 처럼 뜨는 이유가 있을까요?
에러가 날만한 코드가 없습니다 ㅠ
php관련 코드는 없고 단순한 html에 스크립트만 있는지라.
코드를 어떤파일에 넣으신걸까요?
php관련 코드는 없고 단순한 html에 스크립트만 있는지라.
코드를 어떤파일에 넣으신걸까요?
혹시 문자 아이콘 으로 되어 있는 부분을 클릭하면 top 버튼처럼 동작 되도록 할수가 있나요?
제이쿼리를 활용하시면 되겠습니다~
사용방법은 $(window).scrollTop(0); 으로 구글검색 해보시면
예제가 많이 있습니다 ~!
사용방법은 $(window).scrollTop(0); 으로 구글검색 해보시면
예제가 많이 있습니다 ~!
혹시 마우스 오버시 자동으로 펼쳐 지도록 할수 있을까요?!
그리고 접히는건 3초 정도 뒤 자동으로 접히게?! 가능할까요?
그리고 접히는건 3초 정도 뒤 자동으로 접히게?! 가능할까요?
스크립트에 click 을 hover 로 바꺼주심 될것 같습니다 ㅡ
아이고 선생님 너무 감사합니다. 근데 제가 잘 몰라서 여쭙습니다.
지금 이 자료는 화면 맨 아래에 기본키가 되어있고..누르면 메뉴들이 아래로 접히게 되는데요
저는 메인 키가 위에있고( 누르면 메뉴들이 위로 접히게 ) 하고 싶습니다.
메인키를 위로 올리면 될거같은데..스크립트를 어떻게 변화시켜야할까요~
조용히 여쭙습니다~~
지금 이 자료는 화면 맨 아래에 기본키가 되어있고..누르면 메뉴들이 아래로 접히게 되는데요
저는 메인 키가 위에있고( 누르면 메뉴들이 위로 접히게 ) 하고 싶습니다.
메인키를 위로 올리면 될거같은데..스크립트를 어떻게 변화시켜야할까요~
조용히 여쭙습니다~~
안녕하세요!
파일내 21라인의 스타일을 아래와같이 변경해주시고
맨마지막에 스크립트를
이렇게 바꿔주시면 반대로 되지않을까 합니다!
즉 1번 외에 다른버튼들은 css로 미리 숨겨두고
1번 클릭시 스크립트에서 2,3,4번을 토글한다는 내용입니다~
감사합니다.
파일내 21라인의 스타일을 아래와같이 변경해주시고
/* 퀵메뉴 개별 스타일 */
.quick1 {background-color: #F7E600; }
.quick1 svg {margin-top: 13px;}
.quick2 {background-color: #fff; margin-top: 8px; display: none;}
.quick2 svg {margin-top: 13px;}
.quick3 {background-color: #fff; margin-top: 8px; display: none;}
.quick3 svg {margin-top: 13px;}
.quick4 {background-color: #fff; margin-top: 8px; display: none;}
.quick4 svg {margin-top: 13px;}
맨마지막에 스크립트를
<script>
$(document).ready(function() {
$('.quick1').click(function() {
$('.quick2').fadeToggle(200);
$('.quick3').fadeToggle(250);
$('.quick4').fadeToggle(300);
});
});
</script>
이렇게 바꿔주시면 반대로 되지않을까 합니다!
즉 1번 외에 다른버튼들은 css로 미리 숨겨두고
1번 클릭시 스크립트에서 2,3,4번을 토글한다는 내용입니다~
감사합니다.
굿굿
^^
펄스나인님! 여쭤볼께 있는데요
반대로
첨엔 모든 메뉴가 닫혀 있다가..클릭하면 열리게 할수 있는건가요?
지금은 첨부터 메뉴가 열려있다가 클릭시 닫히는 구조인데...
반대로
첨엔 모든 메뉴가 닫혀 있다가..클릭하면 열리게 할수 있는건가요?
지금은 첨부터 메뉴가 열려있다가 클릭시 닫히는 구조인데...
css에서 display: none 으로 숨기고 보이고 하게끔 처리되어 있습니다.
css및 버튼의 액션을 반대로 주시면 될것 같습니다~
css및 버튼의 액션을 반대로 주시면 될것 같습니다~
아 display: none 를 반대순서로만 하면 되는군요~ 감사합니다.
감사합니다~
와 천재입니다 천재 .. 펄스나인님 혹시
이모티콘 중앙에있는것들이 살짝 왼쪽으로 쏠려있는데 이건 어케수정해요??
이모티콘 중앙에있는것들이 살짝 왼쪽으로 쏠려있는데 이건 어케수정해요??
좋은말씀 감사합니다.
위치변경은 파일 27라인쯤에
/* 퀵메뉴 개별 스타일 */
.quick1 svg {margin-top: 13px;}
.quick2 svg {margin-top: 13px;}
.quick3 svg {margin-top: 13px;}
.quick4 svg {margin-top: 13px;}
부분이 있는데 여기에
margin-left: ??px 를 추가해주시면 되겠습니다~
예) .quick1 svg {margin-top: 13px; margin-left:2px;}
위치변경은 파일 27라인쯤에
/* 퀵메뉴 개별 스타일 */
.quick1 svg {margin-top: 13px;}
.quick2 svg {margin-top: 13px;}
.quick3 svg {margin-top: 13px;}
.quick4 svg {margin-top: 13px;}
부분이 있는데 여기에
margin-left: ??px 를 추가해주시면 되겠습니다~
예) .quick1 svg {margin-top: 13px; margin-left:2px;}
해결됬습니다 정말감사합니다 진짜잘쓸게요
너무필요했는데 이런거 구축도 해주시고 정말 완벽합니다 건강하세요!!
너무필요했는데 이런거 구축도 해주시고 정말 완벽합니다 건강하세요!!
도움이 되시는것같아서 기분이 좋아졌습니다 ㅎㅎ
좋은 말씀 감사합니다! 즐코딩 되세요~
좋은 말씀 감사합니다! 즐코딩 되세요~
너무 멋있는 퀵 메뉴네요.
혹시 이걸 제가 만든 이미지 한개만 넣을 수 있을까요?
항상 떠있는 배너 처럼 사용하려구요.
그리고 위치 조정은 어떻게 해야 할까요?
좋은 프로그램
감사합니다.
혹시 이걸 제가 만든 이미지 한개만 넣을 수 있을까요?
항상 떠있는 배너 처럼 사용하려구요.
그리고 위치 조정은 어떻게 해야 할까요?
좋은 프로그램
감사합니다.
위치 변경은 주석으로 표기를 해두었습니다.
코드 우선 보시면 왠만한건 표기를 다 해두었으니 쉽게 하실 수 있을것 같습니다.
질문 하신대로 한개만 떠있게 하시는거면
<!-- 퀵메뉴1, 2, 3 -->
<!-- } -->
부분을 모두 삭제해주시고
<!-- 퀵메뉴4 // 여기는 고정 입니다.{ -->
<div class="quick quick4">
여기
</div>
<!-- } -->
위 부분 안에 이미지 넣어주시면 될것 같고
열리고 닫히는게 필요가없으니 아래쪽에 //클릭액션 이하
<script></script> 부분 지워주시면 될것 같습니다.
감사합니다.
코드 우선 보시면 왠만한건 표기를 다 해두었으니 쉽게 하실 수 있을것 같습니다.
질문 하신대로 한개만 떠있게 하시는거면
<!-- 퀵메뉴1, 2, 3 -->
<!-- } -->
부분을 모두 삭제해주시고
<!-- 퀵메뉴4 // 여기는 고정 입니다.{ -->
<div class="quick quick4">
여기
</div>
<!-- } -->
위 부분 안에 이미지 넣어주시면 될것 같고
열리고 닫히는게 필요가없으니 아래쪽에 //클릭액션 이하
<script></script> 부분 지워주시면 될것 같습니다.
감사합니다.
아미나와도 충돌 없이 잘 되네요.
정말 가지고 싶었던 거에요. ^^;;
감사합니다.
정말 가지고 싶었던 거에요. ^^;;
감사합니다.
다행이네요 ^^
감사합니다!
감사합니다!
안녕하세요 펄스나인님~
아래 카톡같이 배경흐림과 아이콘옆에 텍스트를
붙여주고싶은데 어떻게하면 좋을까요ㅜ
이런거는 필요에의한 커스텀이라 직접 처리를 하셔야 될것 같습니다.
대강 구성을 드리자면
.quick 에 position: relative; 를 추가하고
<div class="quick"> 안에 <span></span> 으로 텍스트를 추가한 다음
.quick span {position: absolute; top:0px; left:-100px;} 을 추가해서
top과 left 로 위치를 잡아주시면 될것 같습니다.
대강 구성을 드리자면
.quick 에 position: relative; 를 추가하고
<div class="quick"> 안에 <span></span> 으로 텍스트를 추가한 다음
.quick span {position: absolute; top:0px; left:-100px;} 을 추가해서
top과 left 로 위치를 잡아주시면 될것 같습니다.
감사합니다^^
잘쓰겠습니다. 감사합니다.
댓글 감사합니다~
정말 좋은 스킨이에요 :)
좋은말씀 감사합니다 ^^
잘쓰겠습니다~
댓글 감사합니다 !
너무 멋집니다!!!
^^ 감사합니다!
항상 좋은 스킨 제공해주셔서 감사합니다!!
요새 좀 뜸해서 ㅠㅠ
조만간 올라오겠습니다~!
댓글 감사합니다!
조만간 올라오겠습니다~!
댓글 감사합니다!
감사드립니다
^^
아이콘이 마음에 들지 않아서 이미지를 삽입했는데요.
모바일과 pc에서 위치랑 이미지 크기를 다르게 하기를 원하는데
어떻게 해야 할 지 막막합니다.
스타일을 두개(모바일,pc) 넣었더니
한가지 로만 적용이 되는데
조언 좀 얻을 수 있을까요?
감사합니다. (__)
안녕하세요~
작업 하신 url을 봐야 답변 드릴 수 있을것 같습니다!
감사합니다~ 딱 찾던 소스인데 응용해서 수정했습니다^^
근데 한페이지 내에 플로팅이 두개일 경우 별도처리를 해야하는데 그게 어렵네요ㅠㅠ한개는 클릭 시 페이지 상단으로 이동하는 소스인데 이 플로팅 클릭시에도 페이지 상단으로 같이 이동하면서 펼쳐져서요ㅠㅠ아무리 찾아봐도 안보이는데 이럴경우 js 어떻게 수정해야할까요?ㅠㅠㅠjs에 약해서 봐도 모르겠어요ㅠㅠ
근데 한페이지 내에 플로팅이 두개일 경우 별도처리를 해야하는데 그게 어렵네요ㅠㅠ한개는 클릭 시 페이지 상단으로 이동하는 소스인데 이 플로팅 클릭시에도 페이지 상단으로 같이 이동하면서 펼쳐져서요ㅠㅠ아무리 찾아봐도 안보이는데 이럴경우 js 어떻게 수정해야할까요?ㅠㅠㅠjs에 약해서 봐도 모르겠어요ㅠㅠ
감사합니다~! 잘쓰겠씁니다!
댓글 감사합니다 ^^
퀵메뉴
좋은 스킨 공유 감사합니다.^^
혹시 카카오톡 이미지는 어떤 경로로 변경가능한지 알려주실 수 있나요?
구글 폰트 및 아이콘에 들어가도 나오지 않네요 ㅜ
이미지를 말씀하시는거면
구글에서 카카오톡 으로 검색하지면 많이 나오실거에요
html에 svg로 들어가있는데 <img src 로 하셔도 됩니다 ^^