[꿀정보] 모바일 화면 PC에서 확인하기

안녕하세요. 개자이너 씸플레이입니다. 반응형 홈페이지를 만들 때 핸드폰으로 일일이 확인하기 힘드셨죠? 그럴 때 유용한 사이트가 있습니다. (원래 다음 트로이를 사용했었는데 갑자기 안 나오길래 급하게 찾아봤습니다.) *물론 핸드폰으로 확인하는 게 가장 좋은 방법이지만 매번 그렇게 할 수는 없잖아요? 1. responsinator http://www.responsinator.com/ Responsinator Responsinator · About · Login www.responsinator.com ① 사이트 접속 먼저 위의 주소로 접속을 해줍니다. 직관적이게 바로 모바일 모양이 나오고 있습니다. 2. 확인할 사이트 주소 입력 ① 주소창 확인 왼쪽 위에 보시면 Enter your site 라는 문구와 함께 ..

tip/디자인 팁 · 2021. 1. 8. 09:30

[티스토리] 티스토리에 텐핑을 설치해보자

안녕하세요. 플입니다. 오늘은 텐핑을 설치해볼게요. 1. 플러그인 블로그 관리 페이지 왼쪽의 메뉴에서 플러그인 메뉴를 클릭해주세요. 플러그인 메뉴 페이지에서 잘 보시면 오른쪽 상단에 보기 버튼이 있는데요. 이 보기 버튼을 누르면 종류별로 플러그인을 볼 수 있어서 편리해요. 오늘은 수익 분류를 살펴봅시다. 아래로 내리면 텐핑이라는 플러그인을 찾을 수 있을 거예요. 클릭해봅시다. 이런 팝업창이 뜨는데 아직 텐핑 애드박스 코드가 뭔지 모르겠죠? 저도요. 일단 텐핑 바로가기를 눌러서 사이트에 접속해봅시다. 2. 텐핑 https://tenping.kr/ 퍼포먼스마케터가 되자, 텐핑 모바일 소문 서비스 텐핑입니다. 유익한 콘텐츠를 소문내고 유효한 소문을 낸 만큼 현금포인트를 쌓으세요. tenping.kr 아마 바로..

tip/티스토리 팁 · 2020. 9. 11. 07:30

[jQuery] 햄버거 메뉴 만들기 3 - fadeIn()

안녕하세요. 플입니다. 오늘은 햄버거 메뉴를 이어서 만들어볼게요. 1. animate() 2020/05/11 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 2 - animate() 이전 포스팅을 먼저 보고 오면 더 쉬우실 거예요. 2. fadeIn() $('.exit').click(function(){ $('.mnb button').fadeIn(); }) 햄버거 메뉴는 아이콘을 눌렀을 때 메뉴가 나오면서 아이콘이 사라지게 만들어야 해요. 그리고 사라진 아이콘은 메뉴가 없어지면 다시 나타나야 해요. 이번 포스팅에서는 fadeIn()을 이용해 아이콘이 다시 나타나게 만들어볼게요. $('.exit').click(function(){ // x 버튼을 클릭하면 $('.mnb button').f..

coding/JavaScript · 2020. 5. 12. 07:30

[jQuery] 햄버거 메뉴 만들기 2 - animate()

안녕하세요. 플입니다. 오늘은 지난 포스팅에 이어서 햄버거 메뉴를 만들어볼게요. 1. fadeOut() 2020/05/06 - [Try/coding] - [jQuery] 햄버거 메뉴 만들기 1 - fadeOut() 이전 포스팅을 같이 올려둘게요. 2. animate() $('.mnb button').click(function(){ $(this).fadeOut(); $('.mnb_inner').animate({ marginRight : 0 }, 1000 ); }) 일단 전체 코드를 보여드리고 시작할게요. 지난 포스팅에 있었던 fadeOut()도 보이네요. 반가워라 바로 아래 animate()로 넘어가 볼게요. $('.mnb button').click(function(){ // 아이콘 클릭할 때 $(this..

coding/JavaScript · 2020. 5. 11. 07:30

[꿀정보] 트로이로 모바일 확인하기

안녕하세요. 플입니다. 오늘은 모바일 화면을 pc에서 확인하는 사이트를 알려드릴게요. 1. 다음 트로이 http://troy.labs.daum.net/ 사이트는 다음 트로이예요. 아마 아시는 분들도 많을 거예요. 이쪽에 모바일로 보고 싶은 주소를 입력하면 가운데 핸드폰 모양 화면에서 모바일 버전으로 사이트가 나오게 돼요. 신기하죠? 2. 주소 입력 이제 실제로 한번 해볼까요? 먼저 주소를 입력해요. 저는 제 포트폴리오 사이트 주소를 입력해줬어요. 이렇게 보면서 음 모바일도 잘 나오고 있군. 하고 확인하는 거예요. 3. 다른 모바일 기기 확인 나는 이 모바일 기기보다 조금 더 작거나 큰 화면을 확인하고 싶은데.. 하는 생각이 들 때가 있을 거예요. 그럴 때는 왼쪽에 있는 메뉴에서 원하는 모바일 기기를 선택..

tip/디자인 팁 · 2020. 3. 19. 07:30