썸북: 아무나 환영하게

유튜브 영상을 보고 손으로 하나하나 정리하다가문득 요즘 AI가 요약도 잘해준다고 하던데.. 싶어 찾아보니있다!! 가장 간단하고 쉽게 활용할 수 있으면서도 테스트 해봤을 때 이 정도면 충분하다 싶었던 방법이다. 유튜브 요약해주는 초간단 AI 무료 활용 방법 요약하고 싶은 유튜브 영상을 클릭하고 주소창으로 간다.그리고 주소창에 있는 영상의 주소 맨 앞에 해당 문장만 추가해 주면 된다. ↓https://lumary.me/ko/ AI 영상 요약플랜 업그레이드 더 많은 기능과 무제한 이용 혜택을 누리세요lumary.me 시간이 조금만 지나면 금방 아래와 같이 정리도 잘해주고텍스트 정리 뿐 아니라 마인드맵도 그려준다.퀴즈로 내주니 학습 효과까지 덤 무료 AI라고 해서 약간은 허술할까 싶었는데실제로 영상을 보고..

다양한 slider 구현이 필요할 때는 slick 라이브러리를 사용했다.하지만 모나미사이트 메인 페이지를 클론 코딩하면서하단에 가로로 마우스 드래그가 되는 슬라이드 한 줄 딱 한 부분만 필요했다. 그래서 slick보다는 조금 더 가볍고 쉬운 라이브러리를 찾다가 발견!단 1줄만 추가하고 단 하나의 클래스만 있는 가벼운 js라이브러리! DragScrollhttps://github.com/asvd/dragscroll위의 링크로 방문해서 js파일을 다운받아 직접 연결하거나 CDN 코드를 넣으면 사용이 가능 바로 앞에 아래 CDN 코드를 붙여 사용했다 사용하는 것도 완전 쉬움스크롤이 필요한 요소에 class "dragscroll"만 넣어주면 끝그러면 다른 작업 없이 바로 스크롤이 가능하다. 콘텐츠 1 콘텐츠..

생각보다 크롬 확장 프로그램만 잘 찾아서 사용해도클론 코딩이 배로는 쉬어진다는 걸 한참 하다 보니 알게 됐다! 클론 코딩을 하다가 불편한 점이 생기면 노진구가 도라에몽에게 주머니 뒤져달라고 부탁하듯 나 이거 안되는데 도와줄 확장 프로그램 있어?라고 물어보면 잘 추천해 줬다그렇게 알게 된 확장 프로그램 중사용해 보니 가장 도움이 많이 됐던 프로그램 3개를 추천합니다 클론 코딩에 유용한 크롬 확장 프로그램 3가지 1. color zilla화면에 보이는 색상을 스포이드로 뽑아낼 수 있음https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?pli=1 ColorZilla - Chrome 웹 스토어고급 점안기, 색..

클론 코딩을 하면서도 중간중간 화면 비교를 꼼꼼히 해야 한다!해야 한다는 것을 너무 늦게 알아버렸다...특히 header영역이나 footer는 들어가는 요소들이 단순하고 작아서 그런가1px만 밀려있어도 티가 났다.중간중간 화면 전체를 캡처해서 비교해보면 좋겠다 싶었는데 크롬에서 가능했다. 1분이면 가능! 크롬 웹 전체 화면 스크롤 캡쳐 하는 방법 1. 캡처하고 싶은 사이트에 접속 후 개발자 모드를 켠다(단축키 F12) 2. 오른쪽에 보이는 개발자 도구에 상단에 보이는 세로 점 세 개 아이콘을 클릭하거나단축키 CTRL + SHIFT + P를 클릭해서 Run Command를 실행한다. 3. Run> 옆에 full을 입력하고 enter를 클릭하면, 아래와 같이 전체 화면 스크린 숏 저장이 된다. 끝!

AOS는 스크롤 효과를 구현한 자바스크립트 라이브러리로이를 사용하면 비교적 간단하게 다양한 효과를 적용할 수 있다. 사용하는 방법도 간단하다. AOS라이브러리 사용하는 방법 1. 아래 AOS 사이트에서 접속하고 https://michalsnik.github.io/aos/ AOS - Animate on scroll libraryAOS Animate On Scroll Library Scroll downmichalsnik.github.io 2. 사이트 하단에 있는 CDN코드를 붙여 넣는다. 더보기CDN (Content Delivery Network, 콘텐츠 전송 네트워크)는 쉽게 말해서 **인터넷에 올려진 ‘빠른 외부 서버 주소 우리가 사이트에 외부 라이브러리(예: jQuery, AOS, Bootstrap..

클론 코딩을 하다 보니 다양한 사이트에 reset.css가 포함되어 있었다.이름을 보나 내용을 열어보나 css를 초기화해 주는 파일이라는 것이 짐작이 된다. reset.css가 무엇인지는user agent stylesheet에 먼저 이해하면 얘기가 더 빠르다. 사이트를 만들다보면 내가 작성한 css 외 스타일이 적용되는 경우가 있다.html, body, p 등에 margin 혹은 padding이 있는다거나 기타 등등...그 이유 중 하나가 user agent stylesheet이다.user agent stylesheet?브라우저에서 제공하는 기본 스타일 시트 즉 각 브라우저마다 기본적으로 제공하는 스타일이 있기 때문.이 때문에 같은 코드라 할지라도 브라우저에 따라 사이트가 약간씩 다르게 보이게 된다. 같..

어떤 슬라이드 클론 코딩을 하는데 처음 보는 케이스가 있었다.img태그 src에는 opacity:0의 빈. png를 연결하고background-img 속성을 줘서 여기에 진짜 이미지를 넣는 것이다!! 코린이이다 보니 모든 것이 새롭고 어렵다gpt한테 물어보니 빈 이미지를 넣는 것은 사이즈를 규정해서 통일감을 주기 위해서라고 함슬라이드 안에 여러 카드를 만들고 각 카드마다 다른 이미지를 사용할 텐데이미지 사이즈에 따라서 레이아웃이 틀어지는 것을 방지하기 위해서? 이때 골머리를 앓았던 부분은 다음이다.img:hover시 background-img가1. 사이즈가 커지는데2. 서서히 떠오르는 대로 아래와 같이 구현했더니 사이즈는 커지는데, "서서히"가 적용이 안됨.menu_roll .roll img { b..

포토샵을 배워가는 중...창경궁을 주제로 가상의 콘셉트를 잡아서여름 공포 특집 궁 티켓을 디자인해보고 있다작업 중 색이 너무 다양해져서 난잡한 느낌이 들었다 이에 색을 조금 줄이고 공포스러운 느낌적인 그런 느낌을주고 싶어서 여러 가지를 적용해 보았다그러다 마음에 드는 기능을 발견했다 바로,포토샵 그레이디언트 맵 픽셀의 밝기(0=검정, 255=흰색)에 따라 그라데이션 색상으로 매핑하는 효과 원래 사진의 어두운 부분 → 그라데이션의 왼쪽 색중간 톤 → 중간색밝은 부분 → 오른쪽 색 즉, 흑백 톤을 내가 정한 색상으로 재색칠하는 것 사용 방법은 간단하다[Image] → [Adjustments] → [Gradient Map] 이때 어떤 색이 들어가나 보니왼쪽 툴박스에 있는 아래처럼 생긴전경색, 배경색이 들어가는..

짱구는 못 말려 극장판: 폭풍 수면 꿈꾸는 세계 대돌격    ◆ 나라: 일본◆ 장르: 애니메이션, 가족영화◆ 개봉일: 2016.04.06◆ 러닝타임: 97분◆ 감독: 타카하시 와타루 * 줄거리, 스포 포함 주의   어느 날 유치원에 전학 온 보라.  외톨이로 지내고 있는 보라에게 떡잎방범대 친구들이 다가간다.   보라와 함께 떡잎방범대는최근 마을을 떠들썩하게 만든미스터리 집단 악몽 사건을 파헤치게 되는데...보라가 수상하다!    떡잎마을 사람들이 잠에 들면 꿈의 세계에 초대되어 다 함께 꿈을 꾼다.문득 나도 꿈의 세계에 초대되어 원하는 꿈을 꿀 수 있다면,무슨 꿈을 꿀까? 생각해 본다.일단 집이 있고,통장에 돈도 좀 있고,그래서 매일 직장에 나가지 않아도 되는..음.. 무언가를 이루는 거보다는여유와 자..

안녕하세요, 구칠씀입니다 2024년 5월에 다녀온 후쿠오카 여행기두 번째 이야기입니다✌ 실은요,들꽃 같은 여행의 도입부에는나름 큰 사건이 하나 있었어요...!기승전결이 아니라 전결승기?승결전기? 어느쯤으로 여행이 흘러갔어요 사정상 사건(?)에 대하여여기에 적지는 못하지만요도착하자마자 수습하느라여행 첫째 날은 지치고 배고픈 날이었어요. 날은 흐리고 정신은 없고 배도 고프지...점점 세상에 빛이 바래가는 것 같은 그때,우연히 마주친 오아시스 식당! 사실 일본어, 한자를 몰라아직도 가게 이름을 잘 몰라요...그래서 어울리는 별명을 붙였는데요지금부터 저는 이곳을하카타역 오아시스 식당이라 부르겠습니다.    왜 오아시스 식당이냐!주변이 다 회색 건물에, 회색 아스팔트인데여기는 아주 알록달록해서저 멀리서부터 눈에 ..